参考阮一峰的jQuery设计思想和jQuery中文文档，总结jQuery基本的操作知识。
一、jQuery 如何获取元素
jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），返回一个可以操作元素的api。
1.选择表达式可以是css选择器
$("*") //选择所有元素
$(".myClass") //选择类名里含有“myClass”的元素
$('div.myClass') // 选择class为myClass的div元素
$("#mine") //选择id属性值为“mine”的元素
$("div") //选择每个div的元素
$("div,span,p.myClass") //多项选择，将每一个选择器匹配到的元素合并后一起返回。
特别的，属性选择器
Attribute Contains Prefix Selector [name|="value"]
选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。
Attribute Contains Selector [name*="value"]
选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
Attribute Equals Selector [name="value"]
选择指定属性是给定值的元素。
······
2.选择表达式可以是jQuery特有的表达式
（1）层级 进行一些层次上的选择。如选儿子、后代、后面的兄弟以及满足后面兄弟中满足条件的。
Child Selector ("parent > child")
选择所有指定“parent”元素中指定的"child"的直接子元素。
Descendant Selector ("ancestor descendant")
选择给定的祖先元素的所有后代元素。
Next Adjacent Selector ("prev + next")
Selects all next elements matching "next" that are immediately preceded by
a sibling "prev".
Next Siblings Selector ("prev ~ siblings")
匹配 “prev” 元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。
（2）jQuery 扩展
$(":button") //选择所有按钮元素和类型为按钮的元素。
$("td:eq(2)") //选择第三个 td 元素
:text Selector //选择所有类型为文本的元素。
$("div span:last-child") //在每个匹配的 div 中查找最后一个 span
$("span:last-of-type") //选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
...
注意：扩展的选择器通常性能低。jQuery中文文档中这样说明，: eq()选择器是jQuery 延伸出来的选择器，并不是的CSS规范的一部分,使用: eq()查询不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用$("your-pure-css-selector").eq(index)代替。以此类推～
3.基于选择结果进行过滤或选择其他元素
jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
二、jQuery 的链式操作
由于jQuery每次选中网页元素以后，一般返回可以操作元素的jQuery对象，可以继续调用其他方法，不同操作可以链条的形式写出来，比如：
$('div').find('h3').eq(2).html('Hello');
分解开来，就是下面这样：
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
这是jQuery最令人称道、最方便的特点。
jQuery还提供了.end()方法，使得结果集可以后退一步：
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World
三、jQuery 如何创建元素
创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了。
jQuery内部通过createElement函数实现元素创建。
window.$ = window.jQuery = function(selectorOrArrayOrTemplate){
let elements;
if (typeof selectorOrArrayOrTemplate === "string") {
if (selectorOrArrayOrTemplate[0] === "<") {
// 创建 div
elements = [createElement(selectorOrArrayOrTemplate)];
} else {
// 查找 div
elements = document.querySelectorAll(selectorOrArrayOrTemplate);
}
}
function createElement (string) {
const container = document.createElement('template')
container.innerHTML = string.trim()
return container.content.firstChild
}
}
四、jQuery 如何移动元素
jQuery提供两组方法移动元素的位置。
例如.after()和.insertAfter()，二者可实现同样的功能，主要区别是返回的元素不同。
假定我们选中了一个div元素，需要把它移动到p元素后面。
第一种方法是使用.after()
$('p').after('div') //返回p元素
对于.after()，选择表达式在函数的前面，参数是用作插入的内容。
第二种是使用.insertAfter()
$('div').insertAfter('p') //返回div元素
对于 .insertAfter()，刚好相反，参数是将被插入的目标。
类似的操作方法一共4对，分别是
.insertAfter()和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()和.append()：在现存元素的内部，从后面插入元素
.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
五、jQuery 如何修改元素的属性
1.通用属性操作
这些方法用于获取和设置 DOM 元素的属性。
.attr()
获取匹配的元素集合中的第一个元素的属性的值。为每一个匹配元素的设置一个或多个属性。
.prop()
获取匹配的元素集中第一个元素的属性（property）值。为每一个匹配的元素设置一个或多个属性（properties）。
.removeAttr()
为匹配的元素集合中的每个元素中移除一个属性（attribute）。
.removeProp()
为集合中匹配的元素删除一个属性（property）。
.val()
获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。
2.css属性操作
这些方法用于获取和设置元素的 CSS 属性。
.css()
获取匹配元素集合中的第一个元素的样式属性的值；设置每个匹配元素的一个或多个CSS属性。
.offset()
在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档；设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。
···
3.class属性
这些方法用于对元素的 class 属性进行检查和操作
.addClass()
为每个匹配的元素添加指定的样式类名
.hasClass()
确定任何一个匹配元素是否有被分配给定的（样式）类。
.toggleClass()
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
.removeClass()
移除集合中每个匹配元素上一个，多个或全部样式。
