好久不用 jQuery，来复习一下

傷城~ 2023-02-20 06:16 82阅读 0赞

## 1.1 简介 ##

### 1.1.1 概述 ###

jQuery 是一个优秀的 JavaScript 库，是一个由 JohnResig 创建于 2006 年 1 月的开源项目。现在的 jQuery 团队主要包括核心库、UI 和插件等开发人员以及推广和网站设计维护人员。团队中有 3 个核心人物：John Resig、Brandon Aaron 和 Jorn Zaefferer。  
  jQuery 凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。

![在这里插入图片描述][20200624120821580.png_pic_center]

### 1.1.2 jQuery 的引用 ###

① 下载 jQuery  
 ☞ 1.x：兼容 ie678，使用最为广泛的，官方只做 BUG 维护，  
   ♞ 功能不再新增。因此一般项目来说，使用 1.x 版本就可以了，  
   ♞ 最终版本：1.12.4 (2016年5月20日)  
 ☞ 2.x：不兼容 ie678，很少有人使用，官方只做 BUG 维护，  
   ♞ 功能不再新增。如果不考虑兼容低版本的浏览器可以使用 2.x，  
   ♞ 最终版本：2.2.4 (2016年5月20日)  
 ☞ 3.x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，  
   ♞ 一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。  
   ♞ 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）  
② 导入 jQuery 的 js 文件  
 ☞ jquery-xxx.js 与 jquery-xxx.min.js区别：  
   ♞ jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些  
   ♞ jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

### 1.1.3 jQuery 的对象 ###

DOM(Document Object Model，文档对象模型)，每一个 DOM 都可以表示成一棵树。jQuery 对象就是经过 jQuery 包装之后的 DOM 对象。jQuery 对象不能使用 DOM 对象的任何方法，同理 DOM 对象也不能使用 jQuery 对象的任何任何方法。

**DOM 对象与 jQuery 对象互转**

☞ jQuery 对象转 DOM 对象

// jq对象[索引] 或者 jq对象.get(索引)
    var $jquery = $("#name");	// jQuery 对象
    var dom = $jquery.get(0);	// DOM 对象

☞ DOM 对象转 jQuery 对象

// $(js对象)
    var dom = document.getElementById("name");	// DOM 对象
    var $jquery = $(dom);	// jQuery 对象

## 1.2 jQuery 选择器 ##

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找或选择 HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：`$()`。

### 1.2.1 基本选择器 ###

基本选择器是 jQuery 中最常用的选择器，也是最简单的选择器，它通过元素 id、class 和标签名等来查找 DOM 元素。在网页中，每个 id 名称只能使用一次，class 允许重复使用。  
![在这里插入图片描述][20200624101813538.jpg]

### 1.2.2 层级选择器 ###

![在这里插入图片描述][20200624102239902.jpg]  
  可以用 next() 方法来代替 $(“prev + next”) 选择器，可以使用 nextAll() 方法来代替 $(“prev ~ siblings”) 选择器。

<table> 
 <thead> 
  <tr> 
   <th align="left">选择器</th> 
   <th align="left">等价方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">$(".one + div")</td> 
   <td align="left">$(".one").next(“div”)</td> 
  </tr> 
  <tr> 
   <td align="left">$("#two ~ div")</td> 
   <td align="left">$("#two").nextAll(“div”)</td> 
  </tr> 
 </tbody> 
</table>

### 1.2.3 过滤选择器 ###

过滤选择器主要是通过特定的规则筛选出 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个 `:` 开头。按照不同的过滤规则，过滤选择器分为：基本过滤选择器，内容过滤选择器，可见性过滤选择器，子元素过滤选择器和表单对象属性过滤选择器

☞ **基本过滤选择器**  
![在这里插入图片描述][20200624103918952.jpg]

☞ **内容过滤选择器**  
![在这里插入图片描述][20200624104608499.jpg]

☞ **可见性过滤选择器**  
![在这里插入图片描述][20200624104741689.jpg]

☞ **属性过滤选择器**  
![在这里插入图片描述][20200624105002745.jpg]

☞ **子元素过滤选择器**  
![在这里插入图片描述][20200624105125277.jpg]

☞ **表单对象属性过滤选择器**  
![在这里插入图片描述][20200624105242404.jpg]

### 1.2.4 表单选择器 ###

为了更加灵活地操作表单，jQuery 中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。  
![在这里插入图片描述][20200624105451825.jpg]

## 1.3 DOM 操作 ##

### 1.3.1 内容操作 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">操作</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">html()</td> 
   <td align="left">获取/设置元素的标签体内容</td> 
  </tr> 
  <tr> 
   <td align="left">text()</td> 
   <td align="left">获取/设置元素的标签体纯文本内容</td> 
  </tr> 
  <tr> 
   <td align="left">val()</td> 
   <td align="left">获取/设置元素的 value 属性值</td> 
  </tr> 
 </tbody> 
</table>

### 1.3.2 属性操作 ###

☞ **通用属性操作**

<table> 
 <thead> 
  <tr> 
   <th align="left">操作</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">attr()</td> 
   <td align="left">获取/设置元素的属性</td> 
  </tr> 
  <tr> 
   <td align="left">removeAttr()</td> 
   <td align="left">删除属性</td> 
  </tr> 
  <tr> 
   <td align="left">prop()</td> 
   <td align="left">获取/设置元素的属性</td> 
  </tr> 
  <tr> 
   <td align="left">removeProp()</td> 
   <td align="left">删除属性</td> 
  </tr> 
 </tbody> 
</table>

attr 和 prop 的区别  
 ① 如果操作的是元素的固有属性，则建议使用prop  
 ② 如果操作的是元素自定义的属性，则建议使用attr

☞ **对 class 属性操作**

<table> 
 <thead> 
  <tr> 
   <th align="left">操作</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">addClass()</td> 
   <td align="left">添加class属性值</td> 
  </tr> 
  <tr> 
   <td align="left">removeClass()</td> 
   <td align="left">删除class属性值</td> 
  </tr> 
  <tr> 
   <td align="left">toggleClass()</td> 
   <td align="left">切换class属性，有则删除，无则添加</td> 
  </tr> 
  <tr> 
   <td align="left">css()</td> 
   <td align="left">修改 css 样式</td> 
  </tr> 
 </tbody> 
</table>

### 1.3.3 CRUD ###

<table> 
 <thead> 
  <tr> 
   <th align="left">操作</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">append()</td> 
   <td align="left">对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾</td> 
  </tr> 
  <tr> 
   <td align="left">prepend()</td> 
   <td align="left">对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头</td> 
  </tr> 
  <tr> 
   <td align="left">appendTo()</td> 
   <td align="left">对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾</td> 
  </tr> 
  <tr> 
   <td align="left">prependTo()</td> 
   <td align="left">对象1.prependTo(对象2)：将对象1添加到对象2内部，并且在开头</td> 
  </tr> 
  <tr> 
   <td align="left">after()</td> 
   <td align="left">添加元素到元素后边对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系</td> 
  </tr> 
  <tr> 
   <td align="left">before()</td> 
   <td align="left">对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系</td> 
  </tr> 
  <tr> 
   <td align="left">insertAfter()</td> 
   <td align="left">对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系</td> 
  </tr> 
  <tr> 
   <td align="left">insertBefore()</td> 
   <td align="left">对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系</td> 
  </tr> 
  <tr> 
   <td align="left">remove()</td> 
   <td align="left">对象.remove()：将对象删除掉</td> 
  </tr> 
  <tr> 
   <td align="left">empty()</td> 
   <td align="left">对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点</td> 
  </tr> 
 </tbody> 
</table>

## 1.4 jQuery 动画 ##

### 1.4.1 show() 方法和 hide() 方法 ###

show() 方法和 hide() 方法是 jQuery 中最基本的动画方法。在 HTML 文档里，为一个元素调用 hide() 方法，会将该元素的 display 样式改为 “none”。当把元素隐藏后，可以使用 show() 方法将元素的 display 样式设置为先前的显示状态。提供了 toggle() 方法进行二者之间的切换。

☞ **参数**

`show([speed，[easing]，[fn]])`  
`hide([speed，[easing]，[fn]])`  
`toggle([speed]，[easing]，[fn])`

☞ **参数解释**

① speed：动画的速度。三个预定义的值(“slow”，“normal”， “fast”)或表示动画时长的毫秒数值  
 ② easing：用来指定切换效果，默认是"swing"，可用参数"linear"  
  ♞ swing：动画执行时效果是 先慢，中间快，最后又慢  
  ♞ linear：动画执行时速度是匀速的  
 ③ fn：在动画完成时执行的函数，每个元素执行一次。

### 1.4.2 fadeln() 方法和 fadeOut() 方法 ###

与 show() 方法不相同的是，fadeln() 方法和 fadeOut() 方法只改变元素的不透明度。fadeOut() 方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(display：none)。fadeln() 方法则相反。

☞ **参数**

`slideDown([speed]，[easing]，[fn])`  
`slideUp([speed，[easing]，[fn]])`  
`slideToggle([speed]，[easing]，[fn])`

### 1.4.3 slideUp() 方法和 slideDown() 方法 ###

slideUp() 方法和 slideDown() 方法会改变元素的高度。如果一个元素的 display 属性值为"none"，当调用 slideDown() 方法时，这个元素将由上至下延伸显示。slideUp() 方法正好相反，元素将由下到上缩短隐藏。

☞ **参数**

`fadeIn([speed]，[easing]，[fn])`  
`fadeOut([speed]，[easing]，[fn])`  
`fadeToggle([speed]，[easing]，[fn]])`

## 1.5 遍历 ##

### 1.5.1 JS 遍历方式 ###

for(初始化值;循环结束条件;步长)

### 1.5.2 jQuery 遍历方式 ###

/* * index：就是元素在集合中的索引 * element：就是集合中的每一个元素对象 * this：集合中的每一个元素对象 * 如果当前 function 返回为 false，则结束循环(break)。 * 如果当前 function 返回为 true，则结束本次循环，继续下次循环(continue) */
    jquery对象.each(function(index,element){ });
    
    $.each(object, [callback]);
    
    // jquery 3.0 版本之后提供的方式
    for(元素对象 of 容器对象){ }

## 1.6 事件 ##

### 1.6.1 DOM 加载 ###

$(document).ready() 方法和 window.onload 方法有相似的功能，但是在执行时机方面是有区别的。window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行，即 JavaScript 此时才可以访问网页中的任何元素。而通过 jQuery 中的 $(document).ready() 方法注册的事件处理程序，在 DOM 完全就绪时就可以被调用。此时，网页的所有元素对 jQuery 而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。  
  另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 HTML 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。示例：`$(windows).load(function() {})`

### 1.6.2 标准事件绑定 ###

☞ **语法**

// 如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
    jq对象.事件方法(回调函数)；

☞ **示例**

// 提交表单
    form.submit();

### 1.6.3 其他事件绑定 ###

// 绑定事件
    jq对象.on("事件名称",回调函数)
    
    // 解除绑定，如果off方法不传递任何参数，则将组件上的所有事件全部解绑
    jq对象.off("事件名称")

--------------------

关注公众号一起学习 Java 开发，跟大家分享我的学习成长过程

![在这里插入图片描述][2020060821282046.jpg_pic_center]

[20200624120821580.png_pic_center]: https://img-blog.csdnimg.cn/20200624120821580.png#pic_center
[20200624101813538.jpg]: https://img-blog.csdnimg.cn/20200624101813538.jpg
[20200624102239902.jpg]: https://img-blog.csdnimg.cn/20200624102239902.jpg
[20200624103918952.jpg]: https://img-blog.csdnimg.cn/20200624103918952.jpg
[20200624104608499.jpg]: https://img-blog.csdnimg.cn/20200624104608499.jpg
[20200624104741689.jpg]: https://img-blog.csdnimg.cn/20200624104741689.jpg
[20200624105002745.jpg]: https://img-blog.csdnimg.cn/20200624105002745.jpg
[20200624105125277.jpg]: https://img-blog.csdnimg.cn/20200624105125277.jpg
[20200624105242404.jpg]: https://img-blog.csdnimg.cn/20200624105242404.jpg
[20200624105451825.jpg]: https://img-blog.csdnimg.cn/20200624105451825.jpg
[2020060821282046.jpg_pic_center]: https://img-blog.csdnimg.cn/2020060821282046.jpg#pic_center