本文共 1987 字，大约阅读时间需要 6 分钟。

jquery 是一个高效、精简并且功能丰富的js工具库，就像python的包和模块，提倡精简代码功能强大，所以可以看出底层封装的高。

jquery特点：

1、易于使用API接口（支持链式调用）

2、能够兼容众多浏览器

3、使用非常广泛

这里学习jquery主要是做

1、查询/操作DOM

2、处理js事件

3、实现动画效果

4、封装/使用jquery插件（jquery库很强大，扩展性也很强）

5、使用ajax发送异步请求

源码版本（用于开发环境）

jquery.js

压缩版本（用于生产环境）

jquery.min.js

用户视角：对于小白的我没有安装也不清楚他讲的版本到底有啥用。

jquery操作DOM：

从图中能很清晰的看出JQ跟原生的JS相比更能提高开发的效率。比如原生的js。如果查找多个标签的id需要写多条语句多次调用getElementByID函数。而用JQ只需要封装一个函数即用即调用就可以

jquery操作选择器：

$符号是JQ提供的一个函数。它可以代替JQuery

#id选择器

element选择器（元素选择器）

.class类选择器

在浏览器中访问地址的时候，浏览器要把html下载下来，如果html里面引用了js，解析html的时候就会把js下载下来。在下载js的过程中可能会出现没有解析完的情况就会出现查不到内容的情况。

针对这种情况jq给提供了一个解决方法

执行这行代码就代表解析已经完成，一切准备就绪，也可以写成$(funncion(){})

 

层级选择器：

$("parent>child") parent元素中的制定的child直接子元素

$("parent child")所有后代元素（后代关系）

$("prev+next")紧贴prev之后的元素 （兄弟关系）

伪类选择器：

:first/:last   第一个/最后一个匹配元素

:eq(n)      匹配的索引为n的元素

:evev/:odd     奇数/偶数个元素

:checked      表单中所有勾选的元素

:disbled        被禁用的元素

属性选择器

$('input[name="password"]') 【意思：选择所有input标签name属性是password】

$('input[name]')  【意思：选择input标签只要有name属性都要查出来】

jquery属性值的获取

查询DOM信息

访问html属性（id，class，style，自定义属性）

.attr("class")用.attr来查询class的属性

如图：

查看html/文本信息

.html()/text()  【html会把里面的标签给打印出来，text只打印出文字描述】

如图：

查看表单信息

.val()

如图：

jq对象与DOM对象进行转换：

jq对象通过.get()转换为DOM对象

如图：

如果是.get()获取整个dom对象，如果是.get()[0].value是代表获取dom对象第一个元素的value

如果得到元素过多需要遍历循环处理，遍历dom对象会有

length---对象得长度，相当于python得len

用法如图：

for 循环

jquery提供得.each方法遍历

如图：

 

其中 index是plist得下标， 传进value就可以得到plist得坐标对应得值

第二种方式

第二种方式可以把plist换成数组，这样相比第二种方式运用会更广泛一些

修改DOM信息

使用jquery构建dom

通过这种方式构建了一个p标签得到dom对象再封装jq的对象。

可以用apprnd/appendTO添加到dom中（apprnd需要先找到这个元素把它加进去/apprndto不需要先找构建完成直接添加。）

具体用法如图：

jqury事件

jq常用事件：

1、文档加载（dom准备就绪）

当dom准备就绪的时候，需要指定一个函数来执行

2、鼠标事件（点击滑动）

点击事件分为（单击，双击，按下，抬起，移动事件）

如图

添加click单击事件，

添加双击事件

 

添加鼠标移动事件，鼠标进入mouseenter事件加入红色的背景，离开的时候moseleave事件加入白色背景

也可以把mouseenter/moseleave改写成如图：

3、键盘事件 

.keydown()    按下

.keyup()     抬起

4、表单事件

获得焦点

.focus() 获得焦点就是 比如说当你在输入框输入东西的时候，你的输入框会变颜色就叫获得焦点

失去焦点

.blur()  当你点击其他的地方 你的输入框的颜色消失，从获的焦点到失去焦点。

值发生变化

.change()比如 当值发生变化的时候会出发这个事件 用法如下

表单的提交事件

.submit() 提交事件

在提交表单中需要进行一些输入校验是否正确，只有正确才能进行提交

转载地址：https://blog.csdn.net/weixin_42781544/article/details/107383096 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！