jQuery 如何获取元素
jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()。构造函数接受一个选择器或者数组，进而调用不同的功能。原理大致是这样的（超级简化版）：
window.$ =window.jQuery = function(selectorOrArray){
let elements
if(typeof selectorOrArray === 'string'){
elements = document.querySelectorAll(selectorOrArray)
}else if(selectorOrArray instanceof Array){
elements = selectorOrArray
}
return {//编写各种功能的接口
}jQuery选择网页元素的方法：
$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素
jQuery 的链式操作是怎样的
链式操作是jQuery经典的设计思想，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：
$('div').find('h3').eq(2).html('Hello');
//分解开就是下面的意思
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello那实现的原理也是比较容易理解的，只是非常不容易想到如此骚的操作，这里举个例子：比如我们要编写一个叫addClass的添加属性的函数，只要在最后返回这个函数本身，当函数执行完又可以接着进行操作了。
"addClass":function(className){
for( var i=0;i<elements.length;i++){
elements[i].classList.add(className);
}
return this; 再使用最开始的例子
$('div').find('h3').eq(2).html('Hello');
//比方说函数执行到了$('div').find('h3')，这里执行完返回到最开始的$，
//那么我就可以继续调用后面的eq()或html(),如果返回的不是$，就无法接着进行后面的操作jQuery 如何创建元素
创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');原理是调用了DOM的原生api：
elements=[createElement(selectorOrArrayOrTemplate)]
function createElement(string){
const container = document.createElement("template");
container.innerHTML = string.trim();
return container.content.firstChild;
}
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()：在现存元素的内部，从前面插入元素appendTo和append实现原理：
appendTo(node){
if(node instanceof Element){
this.each(el => node.appendChild(el)) // 遍历 elements，对每个 el 进行 node.appendChild 操作
}else if(node.jquery === true){
this.each(el => node.get(0).appendChild(el)) // 遍历 elements，对每个 el 进行 node.get(0).appendChild(el)) 操作
}
},
append(children){
if(children instanceof Element){
this.get(0).appendChild(children)
}else if(children instanceof HTMLCollection){
for(let i =0;i<children.length;i++){
this.get(0).appendChild(children[i])
}
}else if(children.jquery === true){
children.each(node => this.get(0).appendChild(node) }
}jQuery 如何修改元素的属性
除了元素的位置移动之外，jQuery还提供其他几种操作元素的重要方法。
复制元素使用.clone()。
删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。
清空元素内容（但是不删除该元素）使用.empty()。
创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
