DOM API 好难用，我要用 JQ！

什么是 JQuery

众所周知这 DOM 原生 API 长得 1p，语义还七扭八歪的

于是就诞生了 JQuery ！

好吧好吧，简单说就是，这是一个封装了 DOM 操作的库，使用它比直接使用原生 DOM API 更方便，更好读

那么，为了形成对比，采用和 DOM 那篇一样的结构

Retrieve

既然 CSS 选择器这么好用，JQ 怎么能不吸收一下呢

于是 JQ 采用 $(selector) 来选择元素，返回选择器匹配上的所有元素

Create

分为从已有创建和重新创建两种

对于从已有创建，只需要选中元素后，调用 clone 方法，就可以获得一个拷贝了原元素的新元素

对于重新创建，只需要直接调用 JQ 构造函数 $，然后传入新元素的 HTML 表示即可

Delete

分为删除元素和删除内容

使用 remove 或 detach 方法即可删除元素，但前者不保留元素，后者保留，便于重新插入文档

使用 empty 方法即可清空元素文本

Update

分为

对 JQ 对象的更新
对元素的更新
对元素属性的更新
对事件的更新

对 JQ 对象的更新

可以采用 JQ 专属过滤器来改变结果集

$('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元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').siblings().end(); //返回上一次结果集，此处等效于选中 div

对元素的更新

其实是指元素在 DOM 树上的位置更新

一共有 4 对方法

方法名1	方法名2	描述
insertAfter	after	为现有元素插入一个相邻弟弟
insertBefore	before	为现有元素插入一个相邻哥哥
appendTo	append	为现有元素插入一个最小的儿子
prependTo	prepend	为现有元素插入一个最大的儿子

看起来没什么差别，其实还是有的

比如第一对方法，调用例如下

1 2	$('div').insertAfter($('p')); $('p').after($('div'));

显然，虽然都是将 div 元素插入到 p 元素的后面，但前者返回的是对 div 操作的 JQ 元素，后者则是对 p 操作的 JQ 元素

实际情况下根据需要选择

对元素属性的更新

JQ 使用同名方法来作为同一个目标的 getter/setter

对于 get，如果结果集包含多个元素，则返回第一个元素的值（text 方法例外

对于 set，不论结果集包含多少元素，对于每个元素都会适配这次 set

通常有如下 getter/setter 来实现对元素属性的更新

方法	结果集目标	描述
html()	第一个元素	get html 内容
html(‘233’)	所有元素	set html 内容为 ‘233’
text()	所有元素	get text 内容
text(‘233’)	所有元素	set text 内容为 ‘233’
attr(‘class’)	第一个元素	get class
attr(‘class’,’red’)	所有元素	set class 为 red
width()	第一个元素	get width
width(‘100px’)	所有元素	set width 为 100px
height()	第一个元素	get height
height(‘100px’)	所有元素	set height 为 100px
val()	第一个元素	get 某个 input 元素的值
val(‘233’)	所有元素	set 某个 input 元素的值为 ‘233’

对事件的更新

直接使用对应事件名作为方法名进行调用

几乎所有事件都支持

调用例如下

1
2
3

$('button').click(function(){
    alert('hello')
})

该调用等效于 set，会更新 JQ 对象结果集中的所有元素，下略

可以使用 bind 方法来指定多个事件

$('button').bind(
    'click change', //同时绑定click和change事件
    function(){
    alert('hello')
})

上述绑定方法会重复被触发，但也可以使用 one 方法来设定只触发一次的事件

1
2
3

$('button').one('click',function(){
    alert('hello')
})

不想要的事件，也可以用 unbind 方法来解除绑定

1	$('button').unbind('click')

当事件触发时，会默认向方法内传入一个参数 event，表示事件发生时的相关信息

在传入的函数中，如果该函数不是箭头函数，则还可以用 this 来访问触发了该事件的元素

事件触发除了页面上的操作，还可以用事件函数或 trigger 方法手动触发

1 2	$('button').click() $('button').trigger('click')

工具方法

除了增删改查，JQ 还提供了一些绑定在 $ 上的方法，不需要选中元素即可调用

方法	描述
$.trim()	去除字符串两端的空格。
$.each()	遍历一个数组或对象。
$.inArray()	返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
$.grep()	返回数组中符合某种标准的元素。
$.extend()	将多个对象，合并到第一个对象。
$.makeArray()	将对象转化为数组。
$.type()	判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
$.isArray()	判断某个参数是否为数组。
$.isEmptyObject()	判断某个对象是否为空（不含有任何属性）。
$.isFunction()	判断某个参数是否为函数。
$.isPlainObject()	判断某个参数是否为用”{}”或”new
$.support()	判断浏览器是否支持某个特性。

特殊效果

常用的特殊效果方法如下

方法	描述
fadeIn()	淡入
fadeOut()	淡出
fadeTo()	调整透明度
hide()	隐藏元素
show()	显示元素
slideDown()	向下展开
slideUp()	向上卷起
slideToggle()	依次展开或卷起某个元素
toggle()	依次展示或隐藏某个元素

每个方法都有两个参数默认值，分别是变化速度 400ms 和回调函数 undefined

变化速度有两种表示方法，数字表示毫秒，或 slow 等表示指定速度

回调函数可以指定特效结束时执行的方法

例如

1
2
3

$('h1').fadeIn(300); // 300毫秒内淡入
$('h1').fadeOut('slow'); // 缓慢地淡出
$('p').fadeOut(300, function() { $(this).remove(); });

更复杂的可以使用 animate 自定义

例如

$('div').animate(
    {
        left : "+=50",
        opacity : 0.25
    },
    300,
    function() { alert('done!'); }
);

第一个参数填写基于 css 语法的对象，第二个参数表示动画持续时间，第三个参数表示回调函数

封装

一个自己封装的 JQ，但是功能肯定比真的 JQ 弱很多，2333

https://github.com/Ringoer/Toy/blob/main/39/main.js

参考链接

JQuery设计思想

jQuery API 中文文档