jQuery 1 了解 jQuery

137 阅读2分钟

2022.8.10

write less, do more.

这句话现在还是在 jQuery 官网首页最醒目的地方,这凸显出了 jQuery 最大的优点:

简单易用,节省时间。

这是 jQuery 盛行 16 年不衰的根本原因。jQuery 的模式和设计思想,值得好好品味和学习。

1.选择网页元素

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 的内部数据,以此来达成封装的效果。

我刚开始学的时候疑惑过,为什么选择器不是类似于jQuery('.test')的格式?原来,为了进一步简化操作,jQuery 甚至选择了在使用中“消灭自己”——他们是通过将 window.jQuery 赋给 window.$做到的:

window.$ = window.jQuery = function(...){...}

2.链式

每一步的 jQuery 操作,返回的都是一个 jQuery 对象,所以不同操作可以连在一起,一次性进行多项操作,这就是链式:

$('.test')
    .addClass('red')
    .find('.child')
    .addClass('blue')

jQuery 为了方便进行连续操作,甚至还提供了一个.end(),使得操作对象可以后退:

$('.test')
    .addClass('red')
    .find('.child')
    .addClass('blue')
    
    .end()
    .each((div) => console.log(div))

此外,在 jQuery 中还有很多出色的技巧,比如被返回给使用者的对象,是一个匿名对象。类似的东西太多,我暂时就不一一说明了。

做一个小结:我理解的 jQuery 风格,就是基于实用,将可以省略的中间变量、中间代码全部省略,只留下必要的信息

3.一些常用方法及其格式

暂时没有统计事件操作和特殊效果。

3.1 增/删

//增
$('<div><span>1</span></div>')  //创建div
    .appendTo(document.body)    //插入body中
//删
$('.red').empty() //移除 .red 的所有子元素
$('.red').remove()  //移除 .red

3.2 改(读)

jQuery 基于重载的思想,为改写的方法实现了多重功能。同样是包装函数,传了需要改的参数,就是改写;没有传需要改的参数,就是读。

//?代表区分改/读的参数
$('.red').text(?)   //改/读.red的文本内容
$('.red').html(?)   //改/读HTMl内容
$('.red').attr('title',?)   //改/读title属性
$('.red').css(?)    //改/读style
$('.red').addClass({background:'blue'})  //改写style
$('.red').on('click', fn)   //为.red添加click监听,并绑定fn操作
$('.red').off('click', fn)  //为.red移除click监听和绑定的fn操作

3.3 查

$('.red').find('.red')  //查找 .red 里的 .red 元素
$('.red').parent()  //获取父元素
$('.red').children()    //获取子元素
$('.red').siblings()    //获取兄弟元素
$('.red').index()   //获取自身所在的下标
$('.red').next()    //获取下一个元素
$('.red').prev()    //获取上一个元素
$('.red').each(fn)  //遍历 .red ,并对每个元素执行fn