jQuery是目前前端最长寿的库，2006年发布，它是世界上使用最广泛的库，全球80%的网站在用
no picture you say a jb?
jQuery用到了那些设计模式
- 不用new的构造函数，这个模式没有专门的名字
- $(支持多种参数),这个模式叫重载
- 用闭包隐藏细节，这个模式也没有专门的名字
- $div.text即可读也可写，getter/setter
,prototype的别名，这叫别名
- jQuery针对不同的浏览器使用不同的代码，这叫适配器
实现链式操作
window.$ = windwo.jQuery = function (selectorOrArray) {//接受一个选择器或者数组，如果是字符串查找节点，如果是数组说明是链式操作二次调用，用于操作新传进来的这些节点
let elements
if (typeof selectorOrArray === 'string') {//重载
elements = document.querySelectorAll(selectorOrArray)
} else {
elements = selectorOrArray
}
return {//返回可操作的api 对象 也就是this
odlApi: elements.oldApi,//上次的this 用于链式返回操作上次的节点
each(fn) {//遍历节点，接受一个函数用于回调
for (let i = 0; i < elements.length; i++) {
fn.call(null, elements[i], i)
}
return this
},
addClass(className) {
this.each((el) => el.classList.add(className))
return this
},
find(selector) {
const result = []
this.each(node => {
result.concat(Array.from(node.querySelectorAll(selector)))
})
result.oldApi = this//记录当前this 用于回退操作
return jQuery(result)//不能直接返回this,要返回一个新的this来操作它
},
end() {//回退到上次操作的API对象
return this.odlApi
},
parent() {
const result = []
this.each(node => {
if (result.indexOf(node.parentNode) < 0) {
result.push(node.parentNode)
}
})
return jQuery(result)
},
print() {
this.each(item => console.log(item))
return this
}
}
}
$('#li').addClass('red').parent().print().end()
命名规范
const div = document.querySe;ector('.test')//普通dom
const $div = $('test')//jquerydom
jQuery库常用方法
jQuery获取元素
jQuery的基本设计思想和主要用法，就是“选择某个网页元素，对其进行某种操作”，这是区别于其他Javascript库的根本特点
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$),得到被选中的元素
表达式可以是CSS选择器
//可以为单个元素或多个元素哦
$(document)//选择整个文档对象
$("*")//选择所有元素.
$('#Idname')//通过ID获得DOM元素
$("element")//通过给定（html）标记名称选择所有的元素。
$('.class_name')//通过class获得DOM元素
$('input[name=first]')//选择name属性等于first的input元素
也可以是jQuery特有的表达式
$('a:first')//获得网页中第一个a元素
$('tr:odd')//获得表格的奇数行
$('#FormName: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
//这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。
//jQuery还提供了.end()方法，使得结果集可以后退一步：
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World
jQuery 创建元素
创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
x.clone()//复制元素
x.remove()//删除元素
x.detach()//删除元素
//两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。
x.empty()//清空元素内容（但是不删除该元素）
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()//在现存元素的内部，从前面插入元素
jQuery 修改元素的属性
$("#txt1").attr("value")//返回指定元素属性值
$('#p').attr('class','red')////如果存在就是修改，如果不存在就是添加
$('#p').removeAttr('name')//删除某个属性
$('#p').addClass('blue')//添加class名称
$('#p').removeClass('yellow')//删除class名称
$('#p').toggleClass('asdf')//有class就删除 没有就添加
改变结果集
//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设计思想 jQuery文档
