jQuery现状
据 trends.builtwith.com 网站统计，全世界排名前100万的网站，有77%在使用jQuery库，远远超过其他库。jQuery几乎成了JS官方库的地位。尤其是在中国，jQuery库的使用率尤其的高。虽然它不少目前最常见最火的三大框架（在中国是vue和react两大框架），学会使用jQuery也是前端必备的技能。它很好入门和上手，并且确实可以很轻松地实现许多酷眩或实用的网页效果。
如果想体系化的学习jQuery，这里可以推荐一本教材。Rebecca Murphey写的《jQuery基础》（jQuery Fundamentals）是经过jQuery团队半官方认证的基础教程。这本教材也较为清晰地介绍了jQuery库的设计思想。
下面就简要谈一谈，我学习jQuery入门的一些知识点小结。
1.jQuery 如何获取元素
我们知道JS的原生DOM方法在操作元素节点上的功能十分不便利，用起来感觉很蹩脚，有些常用的功能和操作，需要绕不少弯路才能实现。这一点不需要怀疑自己，几乎全世界的前端相关程序猿都感同身受。
有点扯远了，说回原生JS的DOM方法，它获取的节点元素就只是单纯获取一个地址赋予给变量，后续操作，需要对获取的变量元素再一层层去调用DOM操作。 而jQuery与原生DOM最大的不同是，jQuery的基本设计思想和主要用法，就是集成了选择某个网页元素，然后对其进行某种操作 。这是它的最大特色，在使用上能带来很多便利。
使用jQuery的第一步，就是将一个选择表达式，放进函数jQuery()（可简写为$()，更加常用且便捷了），然后得到被选中的元素。注意这里得到的不只是一个地址，而是可以直接操作的对象，可以在后面直接使用jQuery封装好的方法来进行操作。
这个选择表达式可以是最常规的CSS选择器，包括一些简写方法；同时也有jQuery自己特有的表达式。比如：
$('a:first') //选择网页中第一个a元素\
$('li:odd') //选择list的奇数行
$('div:visible') //选择可见的div元素
$('div:animated') //选择处于动画状态的div元素
jQuery还有过滤器，搭配使用，筛选结果。
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(3); //选择第4个div元素
jQuery也提供了类似原生DOM操作中，在DOM树上的移动方法
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('div'); //选择离div最近的那个div父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
2.jQuery 的链式操作
操作网页元素，最常见的需求是取得它们的值，或者对某项属性或内容进行赋值。jQuery在获取选中网页元素以后，可以直接添加后续语句对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，这就构成了jQuery的链式操作。
也正是得益于jQuery获取元素节点，获取的不只是一个地址，而是一套打包好函数的可操作的对象，也可以说是API，才能够实现这种链式操作。这也是jQuery最令人称道、最便捷好用的特点，它的长寿和高使用率，离不开它这一最大的优点。如
$('div').find('.red').html('Hello world').css('color','red');
P.S. 这里还可以体会jQuery又一设计思想，就是使用同一个函数，来完成取值（getter）和赋值（setter）合一。到底是取值还是赋值，由函数的参数个数和类型来决定。这一特点，非常类似JAVA语言的重载。
分解开来，每一个. 号函数，都是一项JS操作，jQuery用一条简单的链条形式就完成了一连串的操作。如果你想后退一步，操作上一步激活的元素（不是撤销），还可以使用end()方法来实现。如：
$('div')
.find('.red')
.eq(2) //选中第三个.red元素
.html('Hello world')
.end() //退回到选中所有的.red元素的那一步
.eq(0) //选中第一个.red元素
.html('hi'); //内容改为hi
3.jQuery 如何操作元素增删改查
程序猿的基本工作就是增删改查，查其实就包含在获取元素那一步，上面已经小结过。接下来就是小结一下增删改应该如何操作。首先来看看增添元素节点如何用jQuery实现：
- 增 创建新元素的方法非常简单，只要把新元素html代码直接传入jQuery的构造函数就行了！！
$('<span>Hello World</span>');
$('ul').append('<li>list item</li>'); //添加子元素
$('ul').preppend('<li>list item</li>'); //在节点内头部添加子元素
或者使用 clone()拷贝一个元素，在后续的操作里把它插入到想要的位置。
- 删 删除元素使用 remove() 和 detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。
清空元素内容（但是不希望删除该元素）可使用 empty()。
- 移 移动元素位置的方法大致有以下两种思路：
$('div').insertAfter($('p')); //把div插入在p后面
$('p').after($('div')); // 把p后面插入div内容
表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上它们有一个重大差别，那就是返回的可供后续操作的元素不一样。第一种方法返回div元素，第二种方法返回p元素。这就根据后续需要，进行选择。
.insertAfter()和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()和.append()：在现存元素的内部，从后面插入元素
.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
- 改属性 上文中介绍链式操作中，已经涉及到jQuery改元素属性的方法。jQuery的一大设计思想，就是使用同一个函数，来完成取值（getter）和赋值（setter）两者合一。到底是取值还是赋值，由函数的参数个数和类型来决定。这一特点，非常类似JAVA语言的重载，属于是学习了java的优点进行了优化。
常见的取值和赋值函数如：
.html() //取出或设置html内容
.text() //取出或设置text内容
.attr() //取出或设置某个属性的值
.width() //取出或设置某个元素的宽度
.height() //取出或设置某个元素的高度
.val() //取出某个表单元素的值
需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值 .text() 例外，它取出所有元素的text内容）。更多关于这些取值赋值器的使用说明，后面参数的相关要求，可翻阅jQuery官方的API文档查看。
