JQuery简单说就是，这是一个封装了 DOM 操作的库，使用它比直接使用原生 DOM API 更方便，更好读
链式操作
选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来。
它的原理在于，每一步jQuery操作，返回的都是一个jQuery对象，所以不同的操作可以连接在一起
$('div').find('h3').eq(2).html('Hello');
分解后是这样
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
jQuery还提供了.end()方法，使得结果集可以后退一步：
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World
window.$ = window.jQuery
以后使用jQuey就不用再拼全称了，直接用$
jQuery如何获取元素
jQuery的基本设计思想和主要用法，就是选择某个网页元素然后对其进行某种操作，这是它区别于其他Javascript库的根本特点。
选择表达式可以是CSS选择器
$(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元素
移动元素
假定我们选中了一个div元素，需要把它移动到p元素后面。
方法一：
$('div').insertAfter($('p'))
方法二：
$('p').after($('div'))
上边两种方法效果是一样的，似乎只是操作的视角不同。但是！！！他们有一个重大的不同---返回的元素不同，第一种返回div元素，第二种返回p元素。
使用这种模式的设计方法一共有四种
.insertAfter()和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()：在现存元素的内部，从后面插入元素
.prependTo()：在现存元素的内部，从前面插入元素
元素的操作和赋值
使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。
$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
常见的取值和赋值函数如下：
.html()取出或设置html内容
.text()取出或设置text内容
.attr()取出或设置某个属性的值
.width()取出或设置某个元素的宽度
.height()取出或设置某个元素的高度
.val()取出某个表单元素的值
注意：如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值(.text()例外，它取出所有元素的text内容）。
元素的操作：复制、删除和创建
复制元素用.clone()
删除元素用remove()和detach()。二者的区别在于，前者不保留被删除元素的事件，而后者保留，有利于元素重新插入文档时使用。
清空元素(但是不删除元素)使用.empty
创建新元素的方法也很简单，直接把新元素直接传入jQuery的构造函数就行了。
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
jQuery的核心代码：
window.jQuery = function(selector) {
const elements = document.querySelectorAll(selector)
//api可以操作elements
const api = {
//闭包，函数访问外部变量
addClass(className){
for(let i = 0;i < elements.length;i++){
elements[i].classList.add(className)
}
return null
}
}
return api
}
接受一个选择器，根据选择器得到元素，这个元素对应的对象可以操作这个元素。
命名风格
const div = $('div#test')
我们会误以为div是一个DOM，而实际上呢div是jQuery构造的API , 我们可以通过规定命名风格来避免这种误解。
将上边的代码修改为
const $div = $('div$test')
\$div.appendChild
不存在，因为\$不是DOM对象，$div.find存在，因为它是jQuery对象。
jQuery的实质就是调用DOM的API，加一些if 或 for循环。
jQuery用到了哪些设计模式
(什么叫设计模式？给通用代码起个名字而已)
\$(支持多种参数)，这个模式叫重载
用闭包隐藏细节
\$div.text()可读又可写，getter/setter
\$.fn是$.prototype的别名
jQuery针对不同的浏览器使用不同的代码，这叫适配器
`
网友评论