Hello，又到了前端知识小总结时间，今天我们来概括一下目前应用最广泛的一个Javascript函数库——jQuery。
这里先放上我自己手写 jQuery 库的链接，如果感兴趣的朋友可以点击查看。
以下是jQuery的一些简单的用法总结：
1. jQuery 如何获取元素
jQuery的基本设计思想就是通过选择网页中的某个元素，然后对它进行某种操作。但是要注意的是，其返回的是一个对象。
使用jQuery获取页面中的元素可以有以下命令，其中选择表达式可以是CSS的选择器：
$(document); //选择整个文档对象
$('#Id'); //选择id=Id的所有网页中的元素
$('div.red'); //选择class=red的所有div
$('input[name=dodo]'); //选择name属性为dodo的所有input元素
选择表达式也可以是jQuery的特有表达式：
$('a:first') //选择网页中的第一个元素
$('tr:odd') //选择表格的奇数行
$('#myForm: input') //选择表格中的input元素
$('div: visible') //选择可见的div元素
$('div:gt(3)') //选择所有的div元素，除了前4个
$('div:animated') //选择当前处于动画状态的div元素
当然，也可以在我们自己写的jQuery库中实现find的操作，基本的思路就是需要获取一个选择表达式，然后遍历每一个元素，找到合适的元素之后放进一个数组中，然后返回这个数组对象。这里举个例子：
find(selector){
let array = []；
for(let i =0;i<elements.length;i++){
const elements2 = Array.from(elements[i].querySelectorAll(selector))
array = array.concat(elements2)
}
array.oldApi = this；
return jQuery(array)；
},
另外还可以在获取元素的时候加上一些过滤器，缩小选择结果：
$('div').has('red') //选择包含red元素的div元素
$('div').not('.blue') //选择class不是blue的div元素
$('div').filter('.yellow') //选择class等于yellow的div元素
$('div').eq(5); //选择第六个div元素
2. jQuery 链式操作
jQuery因为其会返回一个可以操作目标元素的对象而不是那个元素的值，所以不同的操作可以直接链接在一起，从而以像链条的形式展现出来：
$('div').find'h3'.eq(2).html('Hello');
|
|
|
V
$('div') //寻找到div元素
.find'h3' //找到其中的h3元素
.eq(2) //选择h3元素中的第3个
.html('Hello') //把它的内容改成'Hello'
当然，我们也可以通过end()来返回上一层操作，具体如下：
oldApi: selectorOrArrayOrTemplate.oldApi，
end(){
return this.oldApi；
},
3. jQuery 如何修改元素属性
我们可以利用 getter/setter 设计模式来同时实现取值和赋值，具体原理就是加一个 if 语句，当 selector 的值为空的时候就是读， selector 的值不为空的时候就是写：
$('h1').html(); //取出h1的值
$('h1').html('Hello') //对h1进行重新赋值
.html() //取出或设置html内容
.text() //取出或设置text的内容
.attr() //取出或设置某个属性的值
.width() //取出或设置某个元素的宽度
.height() //取出或设置某个元素的高度
.val() //取出表单元素的值
但如果其中包含多个元素，则赋值的时候会对所有元素赋值，但是取值的时候只取出第一个的值。
4. jQuery 如何创建元素
jQuery提供了几个api可以用来创建、删除或者复制元素：
.clone() //复制元素
.remove() //删除元素
.detach() //删除元素
.empty() //使元素的内容为空，但不删除元素
$('<p>Hello</p>'); //以下三种都是创建新元素的方法
$('<li class="new">new list</li>');
$('ul').append('<li>list item</li>');
5. jQuery 如何移动元素
jQuery在移动元素时可以移动目标元素本身，也可以移动其他元素使目标元素到达我们想要的位置：
$('div').insertAfter($('p')); //把div元素移动到p元素后面
$('p').after($('div')); //把p元素加到div元素前面
以上就是个人对jQuery的大多数设计思想的用法总结，大家如果想要更深入了解的话可以和我一样参考阮一峰写的《jQuery设计思想》或者直接阅读jQuery的文本。
