为什么学习jQuery

确实，已经2021年底了，前端当红炸子鸡框架是 Vue和 React，几乎没有新项目会选择jQuery 来开发。但是jQuery作为一个流行了数十年的库，有太多经典的代码和设计模式值得我们学习，帮助我们日后更好的理解的Vue 和React。

此文参考阮一峰：jQuery设计思想和 jQuery API 中文文档

jQuery能做什么？

jQuery是一个兼容多浏览器的JavaScript库，核心理念是write less，do more，它的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax等。除此之外，jQuery还提供API让开发者编写插件。总之，使用jQuery能使开发者很轻松的开发出功能强大的静态或动态页面。

1：jQuery 获取元素

jQuery最基本的一个设计思想,就是 "选中某个元素，不是返回元素本身，而是返回一系列方法来供你使用"。

比起原生的DOM 元素获取代码，jQuery获取元素的代码更为简洁，可以使用CSS选择器表达式，放进构造函数jQuery（简写为$）：

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素\
$('input[name=first]') // 选择name属性等于first的input元素

也可以使用jQuery 特有的表达式：

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

2：jQuery 创建元素

直接提供原始的HTML 标记字符串，放进$()里面，就可以获得由jQuery 对象包装的DOM 元素，后续还可以使用各种方法来操作这个DOM 元素：

$('<div>div内容</div>') //创建一个div
.appendTo(document.body)//插入到body中

3：JQuery 的链式调用

在jQuery中，我们可以对一个对象连续的使用jQuery方法，例如： $('div').removerClass("mouseout").addClass("mouseover").next().show()

这是jQuery最令人称道、最方便的特点，让代码更加简洁易读，减少重复性代码，提高性能。

其中的原理是执行完一个方法后就返回对象本身（return this），然后对象继续执行后面的方法。

4：jQuery 移动元素

jQuery 提供了两组方法，来操作元素在网页中位置的移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

$('div').insertAfter($('p'));

第二种方法是使用after()，把p元素加到div元素前面：

$('p').after($('div'));

两种方法的效果一样，但是区别就是第一种方法返回div元素，第二种方法返回p元素。我们可以根据后续的需求，来选择使用哪种方法。

使用这种模式的操作方法，一共有四对：


.insertAfter()和.after()//在现存元素的外部，从后面插入元素

.insertBefore()和.before()//在现存元素的外部，从前面插入元素

.appendTo()和.append()//在现存元素的内部，从后面插入元素

.prependTo()和.prepend()//在现存元素的内部，从前面插入元素

5: jQuery 修改元素属性

jQuery也提供了一系列的跟CSS 相关的方法来修改元素属性，最常用的是.css() 方法。

注意根据接收的参数不同，.css()方法的结果也不同：

假设一个div的颜色为红色，接收一个参数时，结果为读取CSS属性：

$('div').css('color')//结果为red

接收两个参数时，结果为修改CSS属性：

$('div').css('color','blue')//把div的颜色修改为蓝色

背后的原理就是对函数的argument 的数量做一个判断，当数量为1时，就get 元素的属性，当数量为2时，就set 元素的属性。

而这就是所谓的函数重载，函数名一样，可以允许某个函数有各种不同输入，根据不同的输入，调用不同的内部方法，然后返回不同的结果。

小结

jQuery 还有各种五花八门的方法，例如事件绑定，动画操作，ajax等等。在当下，我们的目的并不是学会每个jQuery 的方法，而是去尝试理解这些经典方法背后的封装技巧和设计思路，来提高我们的代码水平。

jQuery的设计模式