JavaScript基础系列之六 JQuery
jQuery
你可能听说过jQuery,它名字起得很土,但却是JavaScript世界中使用最广泛的一个库。
江湖传言,全世界大约有80~90%的网站直接或间接地使用了jQuery。鉴于它如此流行,又如此好用,所以每一个入门JavaScript的前端工程师都应该了解和学习它。
jQuery这么流行,肯定是因为它解决了一些很重要的问题。实际上,jQuery能帮我们干这些事情:
- 消除浏览器差异:你不需要自己写冗长的代码来针对不同的浏览器来绑定事件,编写AJAX等代码;
$('#test')
- 肯定比
document.getElementById('test')
来得简洁; - 轻松实现动画、修改CSS等各种操作。
jQuery的理念“Write Less, Do More“,让你写更少的代码,完成更多的工作!
jQuery版本
目前jQuery有1.x和2.x两个主要版本,区别在于2.x移除了对古老的IE 6、7、8的支持,因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。
从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js
文件,但你会看到有compressed(已压缩)和uncompressed(未压缩)两种版本,使用时完全一样,但如果你想深入研究jQuery源码,那就用uncompressed版本。
使用jQuery
<head>
引入jQuery文件即可:
好消息是,当你在学习这个教程时,由于网站本身已经引用了jQuery,所以你可以直接使用:
$符号
$
是著名的jQuery符号。实际上,jQuery把所有功能全部封装在一个全局变量jQuery
中,而$
也是一个合法的变量名,它是变量jQuery
的别名:
$
本质上就是一个函数,但是函数也是对象,于是$
除了可以直接调用外,也可以有很多其他属性。注意,你看到的$
函数名可能不是jQuery(selector, context)
,因为很多JavaScript压缩工具可以对函数名和参数改名,所以压缩过的jQuery源码$
函数可能变成a(b, c)
。$
(因为写起来更简单嘛)。但是,如果$
这个变量不幸地被占用了,而且还不能改,那我们就只能让jQuery
把$
变量交出来,然后就只能使用jQuery
这个变量:
$
之前,先在内部保存了原来的$
,调用jQuery.noConflict()
时会把原来保存的变量还原。
选择器
选择器是jQuery的核心。一个选择器写出来类似
$('#dom-id')
。
为什么jQuery要发明选择器?回顾一下DOM操作中我们经常使用的代码:
<table class="green">
里面的所有<tr>
,一层循环实际上是错的,因为<table>
的标准写法是:
很多时候,需要递归查找所有子节点。
jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。
按ID查找
id
属性,利用jQuery查找如下:
注意,#abc
以#
开头。返回的对象是jQuery对象。
什么是jQuery对象?jQuery对象类似数组,它的每个元素都是一个引用了DOM节点的对象。
id
为abc
的<div>
存在,返回的jQuery对象如下:
id
为abc
的<div>
不存在,返回的jQuery对象如下:
undefined
或者null
,这样的好处是你不必在下一行判断if (div === undefined)
。
jQuery对象和DOM对象之间可以互相转化:
$(aDomObject)
把它变成jQuery对象,这样就可以方便地使用jQuery的API了。
按tag查找
按tag查找只需要写上tag名称就可以了:
按class查找
.
:
red
和green
的节点:
按属性查找
id
和class
外还可以有很多属性,很多时候按属性查找会非常方便,比如在一个表单中按属性来查找:
当属性的值包含空格等特殊字符时,需要用双引号括起来。
按属性查找还可以使用前缀查找或者后缀查找:
这个方法尤其适合通过class属性查找,且不受class包含多个名称的影响:
组合查找
$('[name=email]')
,很可能把表单外的<div name="email">
也找出来,但我们只希望查找<input>
,就可以这么写:
同样的,根据tag和class来组合查找也很常见:
多项选择器
,
组合起来一块选:
<p class="red green">
不会被上面的$('p.red,p.green')
选择两次。
层级选择器
除了基本的选择器外,jQuery的层级选择器更加灵活,也更强大。
因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择。
层级选择器(Descendant Selector)
$('ancestor descendant')
来选择,层级之间用空格隔开。例如:
要选出JavaScript,可以用层级选择器:
<div>
和<ul>
都是<li>
的祖先节点,所以上面两种方式都可以选出相应的<li>
节点。<li>
节点,用:
这种层级选择器相比单个的选择器好处在于,它缩小了选择范围,因为首先要定位父节点,才能选择相应的子节点,这样避免了页面其他不相关的元素。
例如:
name
属性为upload
的表单里。如果页面有很多表单,其他表单的<input>
不会被选择。
多层选择也是允许的:
子选择器(Child Selector)
$('parent>child')
类似层级选择器,但是限定了层级关系必须是父子关系,就是<child>
节点必须是<parent>
节点的直属子节点。还是以上面的例子:
过滤器(Filter)
过滤器一般不单独使用,它通常附加在选择器上,帮助我们更精确地定位元素。观察过滤器的效果:
表单相关
针对表单元素,jQuery还有一组特殊的选择器:
:input
- :可以选择
<input>
- ,
<textarea>
- ,
<select>
- 和
<button>
- ;
:file
- :可以选择
<input type="file">
- ,和
input[type=file]
- 一样;
:checkbox
- :可以选择复选框,和
input[type=checkbox]
- 一样;
:radio
- :可以选择单选框,和
input[type=radio]
- 一样;
:focus
- :可以选择当前输入焦点的元素,例如把光标放到一个
<input>
- 上,用
$('input:focus')
- 就可以选出;
:checked
- :选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如
$('input[type=radio]:checked')
- ;
:enabled
- :可以选择可以正常输入的
<input>
- 、
<select>
- 等,也就是没有灰掉的输入;
:disabled
- :和
:enabled
- 正好相反,选择那些不能输入的。
此外,jQuery还有很多有用的选择器,例如,选出可见的或隐藏的元素:
查找和过滤
通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤。
find()
方法,它本身又接收一个任意的选择器。例如如下的HTML结构:
find()
查找:
parent()
方法:
next()
和prev()
方法,例如:Swift
节点后:
过滤
和函数式编程的map、filter类似,jQuery对象也有类似的方法。
filter()
方法可以过滤掉不符合选择器条件的节点:
this
被绑定为DOM对象,不是jQuery对象:
map()
方法把一个jQuery对象包含的若干DOM节点转化为其他对象:
first()
、last()
和slice()
方法可以返回一个新的jQuery对象,把不需要的DOM节点去掉:
操作DOM
jQuery的选择器很强大,用起来又简单又灵活,但是搞了这么久,我拿到了jQuery对象,到底要干什么?
答案当然是操作对应的DOM节点啦!
回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦,而且有的浏览器只有innerHTML,有的浏览器支持innerText,有了jQuery对象,不需要考虑浏览器差异了,全部统一操作!
修改Text和HTML
text()
和html()
方法分别获取节点的文本和原始HTML文本,例如,如下的HTML结构:
分别获取文本和HTML:
text()
是获取文本,传入参数就变成设置文本,HTML也是类似操作,自己动手试试:
- JavaScript
- Java & JavaScript
一个jQuery对象可以包含0个或任意个DOM对象,它的方法实际上会作用在对应的每个DOM节点上。在上面的例子中试试:
所以jQuery对象的另一个好处是我们可以执行一个操作,作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点,调用jQuery对象的方法仍然不会报错:
if
语句。
修改CSS
jQuery对象有“批量操作”的特点,这用于修改CSS实在是太方便了。考虑下面的HTML结构:
css('name', 'value')
方法,我们用一行语句实现:
- JavaScript
- Java
- Python
- Swift
- Scheme
注意,jQuery对象的所有方法都返回一个jQuery对象(可能是新的也可能是自身),这样我们可以进行链式调用,非常方便。
css()
方法可以这么用:
'background-color'
和'backgroundColor'
两种格式。css()
方法将作用于DOM节点的style
属性,具有最高优先级。如果要修改class
属性,可以用jQuery提供的下列方法:
显示和隐藏DOM
display
属性为none
,利用css()
方法就可以实现。不过,要显示这个DOM就需要恢复原有的display
属性,这就得先记下来原有的display
属性到底是block
还是inline
还是别的值。show()
和hide()
方法,我们不用关心它是如何修改display
属性的,总之它能正常工作:
注意,隐藏DOM节点并未改变DOM树的结构,它只影响DOM节点的显示。这和删除DOM节点是不同的。
获取DOM信息
利用jQuery对象的若干方法,我们直接可以获取DOM的高宽等信息,而无需针对不同浏览器编写特定代码:
attr()
和removeAttr()
方法用于操作DOM节点的属性:
prop()
方法和attr()
类似,但是HTML5规定有一种属性在DOM节点中可以没有值,只有出现与不出现两种,例如:
等价于:
attr()
和prop()
对于属性checked
处理有所不同:
prop()
返回值更合理一些。不过,用is()
方法判断更好:
selected
,处理时最好用is(':selected')
。
操作表单
val()
方法获取和设置对应的value
属性:
val()
就统一了各种输入框的取值和赋值的问题。
修改DOM结构
直接使用浏览器提供的API对DOM结构进行修改,不但代码复杂,而且要针对浏览器写不同的代码。
有了jQuery,我们就专注于操作jQuery对象本身,底层的DOM操作由jQuery完成就可以了,这样一来,修改DOM也大大简化了。
添加DOM
html()
这种暴力方法外,还可以用append()
方法,例如:
<ul>
节点:
append()
传入HTML片段:
append()
还可以传入原始的DOM对象,jQuery对象和函数对象:
append()
可能作用于一组DOM节点,只有传入函数才能针对每个DOM生成不同的子节点。append()
把DOM添加到最后,prepend()
则把DOM添加到最前。append()
,你可以移动一个DOM节点。after()
方法:
after()
或者before()
方法。
删除节点
remove()
方法就可以了。如果jQuery对象包含若干DOM节点,实际上可以一次删除多个DOM节点:
事件
因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。
浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。
由于不同的浏览器绑定事件的代码都不太一样,所以用jQuery来写代码,就屏蔽了不同浏览器的差异,我们总是编写相同的代码。
click
事件:
实测:点我试试
on
方法用来绑定一个事件,我们需要传入事件名称和对应的处理函数。click()
方法:
两者完全等价。我们通常用后面的写法。
jQuery能够绑定的事件主要包括:
鼠标事件
click: 鼠标单击时触发;dblclick:鼠标双击时触发;mouseenter:鼠标进入时触发;mouseleave:鼠标移出时触发;mousemove:鼠标在DOM内部移动时触发;hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。
键盘事件
<input>
和<textarea>
。
keydown:键盘按下时触发;keyup:键盘松开时触发;keypress:按一次键后触发。
其他事件
<input>
、<select>
或<textarea>
的内容改变时触发;submit:当<form>
提交时触发;ready:当页面被载入并且DOM树完成初始化后触发。ready
仅作用于document
对象。由于ready
事件在DOM完成初始化后触发,且只触发一次,所以非常适合用来写其他的初始化代码。假设我们想给一个<form>
表单绑定submit
事件,下面的代码没有预期的效果:
<form>
尚未载入浏览器,所以$('#testForm)
返回[]
,并没有绑定事件到任何DOM上。document
对象的ready
事件中,保证DOM已完成初始化:
这样写就没有问题了。因为相关代码会在DOM树初始化后再执行。
ready
事件使用非常普遍,所以可以这样简化:
甚至还可以再简化为:
$(function () {...})
的形式,牢记这是document
对象的ready
事件处理函数。
完全可以反复绑定事件处理函数,它们会依次执行:
事件参数
mousemove
和keypress
,我们需要获取鼠标位置和按键的值,否则监听这些事件就没什么意义了。所有事件都会传入Event
对象作为参数,可以从Event
对象上获取到更多的信息:
效果实测:
在此区域移动鼠标试试
取消绑定
off('click', function)
实现:
需要特别注意的是,下面这种写法是无效的:
不同的函数对象,off('click', function () {...})
无法移除已绑定的第一个匿名函数。off('click')
一次性移除已绑定的click
事件的所有处理函数。off()
一次性移除已绑定的所有类型的事件处理函数。
事件触发条件
一个需要注意的问题是,事件的触发总是由用户操作引发的。例如,我们监控文本框的内容改动:
change
事件。但是,如果用JavaScript代码去改动文本框的值,将不会触发change
事件:
change
事件,可以直接调用无参数的change()
方法来触发该事件:
input.change()
相当于input.trigger('change')
,它是trigger()
方法的简写。
为什么我们希望手动触发一个事件呢?如果不这么做,很多时候,我们就得写两份一模一样的代码。
浏览器安全限制
window.open()
函数:
这些“敏感代码”只能由用户操作来触发:
button1
时,click
事件被触发,由于popupTestWindow()
在click
事件处理函数内执行,这是浏览器允许的,而button2
的click
事件并未立刻执行popupTestWindow()
,延迟执行的popupTestWindow()
将被浏览器拦截。
动画
用JavaScript实现动画,原理非常简单:我们只需要以固定的时间间隔(例如,0.1秒),每次把DOM元素的CSS样式修改一点(例如,高宽各增加10%),看起来就像动画了。
但是要用JavaScript手动实现动画效果,需要编写非常复杂的代码。如果想要把动画效果用函数封装起来便于复用,那考虑的事情就更多了。
使用jQuery实现动画,代码已经简单得不能再简化了:只需要一行代码!
让我们先来看看jQuery内置的几种动画样式:
show / hide
show()
和hide()
,会显示和隐藏DOM元素。但是,只要传递一个时间参数进去,就变成了动画:
'slow'
,'fast'
这些字符串:
toggle()
方法则根据当前状态决定是show()
还是hide()
。
slideUp / slideDown
show()
和hide()
是从左上角逐渐展开或收缩的,而slideUp()
和slideDown()
则是在垂直方向逐渐展开或收缩的。slideUp()
把一个可见的DOM元素收起来,效果跟拉上窗帘似的,slideDown()
相反,而slideToggle()
则根据元素是否可见来决定下一步动作:
fadeIn / fadeOut
fadeIn()
和fadeOut()
的动画效果是淡入淡出,也就是通过不断设置DOM元素的opacity
属性来实现,而fadeToggle()
则根据元素是否可见来决定下一步动作:
自定义动画
animate()
,它可以实现任意动画效果,我们需要传入的参数就是DOM元素最终的CSS状态和时间,jQuery在时间段内不断调整CSS直到达到我们设定的值:
animate()
还可以再传入一个函数,当动画结束时,该函数将被调用:
实际上这个回调函数参数对于基本动画也是适用的。
animate()
,你就可以实现各种自定义动画效果了:
串行动画
delay()
方法还可以实现暂停,这样,我们可以实现更复杂的动画效果,而代码却相当简单:
因为动画需要执行一段时间,所以jQuery必须不断返回新的Promise对象才能后续执行操作。简单地把动画封装在函数中是不够的。
为什么有的动画没有效果
slideUp()
根本没有效果。这是因为jQuery动画的原理是逐渐改变CSS的值,如height
从100px
逐渐变为0
。但是很多不是block性质的DOM元素,对它们设置height
根本就不起作用,所以动画也就没有效果。background-color
的动画效果,用animate()
设置background-color
也没有效果。这种情况下可以使用CSS3的transition
实现动画效果。
AJAX
用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代码,并且状态和错误处理写起来很麻烦。
用jQuery的相关对象来处理AJAX,不但不需要考虑浏览器问题,代码也能大大简化。
ajax
jQuery
(也就是$
)绑定了ajax()
函数,可以处理AJAX请求。ajax(url, settings)
函数需要接收一个URL和一个可选的settings
对象,常用的选项如下:true
- ,千万不要指定为
false
- ;
'GET'
- ,可指定为
'POST'
- 、
'PUT'
- 等;
'application/x-www-form-urlencoded; charset=UTF-8'
- ,也可以指定为
text/plain
- 、
application/json
- ;
- data:发送的数据,可以是字符串、数组或object。如果是GET请求,data将被转换成query附加到URL上,如果是POST请求,根据contentType把data序列化成合适的格式;
- headers:发送的额外的HTTP头,必须是一个object;
'html'
- 、
'xml'
- 、
'json'
- 、
'text'
- 等,缺省情况下根据响应的
Content-Type
- 猜测。
下面的例子发送一个GET请求,并返回一个JSON格式的数据:
不过,如何用回调函数处理返回的数据和出错时的响应呢?
还记得Promise对象吗?jQuery的jqXHR对象类似一个Promise对象,我们可以用链式写法来处理各种回调
get
get()
方法,可以这么写:
第二个参数如果是object,jQuery自动把它变成query string然后加到URL后面,实际的URL是:
这样我们就不用关心如何用URL编码并构造一个query string了。
post
post()
和get()
类似,但是传入的第二个参数默认被序列化为application/x-www-form-urlencoded
:
name=Bob%20Lee&check=1
作为POST的body被发送。
getJSON
getJSON()
方法来快速通过GET获取一个JSON对象:
安全限制
jQuery的AJAX完全封装的是JavaScript的AJAX操作,所以它的安全限制和前面讲的用JavaScript写AJAX完全一样。
ajax()
中设置jsonp: 'callback'
,让jQuery实现JSONP跨域加载数据。
关于跨域的设置请参考浏览器 - AJAX一节中CORS的设置。
扩展
当我们使用jQuery对象的方法时,由于jQuery对象可以操作一组DOM,而且支持链式操作,所以用起来非常方便。
但是jQuery内置的方法永远不可能满足所有的需求。比如,我们想要高亮显示某些DOM元素,用jQuery可以这么实现:
highlight()
方法?
答案是肯定的。我们可以扩展jQuery来实现自定义方法。将来如果要修改高亮的逻辑,只需修改一处扩展代码。这种方式也称为编写jQuery插件。
编写jQuery插件
$.fn
对象实现的。让我们来编写第一个扩展——highlight1()
:
this
在调用时被绑定为jQuery对象,所以函数内部代码可以正常调用所有jQuery对象的方法。
对于如下的HTML结构:
highlight1()
的效果:
什么是jQuery
jQuery是目前最流行的JavaScript库。
return this;
?因为jQuery对象支持链式操作,我们自己写的扩展方法也要能继续链式下去:
不然,用户调用的时候,就不得不把上面的代码拆成两行。
但是这个版本并不完美。有的用户希望高亮的颜色能自己来指定,怎么办?
highlight2()
:
对于如下HTML结构:
highlight2()
:
什么是jQuery Plugin
编写jQuery Plugin可以用来扩展jQuery的功能。
&&
和||
短路操作符,总能得到一个有效的值。$.extend(target, obj1, obj2, ...)
,它把多个object对象的属性合并到第一个target对象中,遇到同名属性,总是使用靠后的对象的值,也就是越往后优先级越高:
highlight2()
提出了意见:每次调用都需要传入自定义的设置,能不能让我自己设定一个缺省值,以后的调用统一使用无参数的highlight2()
?
也就是说,我们设定的默认值应该能允许用户修改。
$.fn.highlight2
这个函数对象本身。highlight()
终于诞生了:
这次用户终于满意了。用户使用时,只需一次性设定默认值:
highlight()
了。
对如下的HTML结构:
实测一下修改默认值的效果:
如何编写jQuery Plugin
编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行时传入其他值。
最终,我们得出编写一个jQuery插件的原则:
- 给
$.fn
- 绑定函数,实现插件的代码逻辑;
- 插件函数最后要
return this;
- 以支持链式调用;
- 插件函数要有默认值,绑定在
$.fn.<pluginName>.defaults
- 上;
- 用户在调用时可传入设定值以便覆盖默认值。
针对特定元素的扩展
submit()
方法只能针对form
。如果我们编写的扩展只能针对某些类型的DOM元素,应该怎么写?filter()
方法来过滤吗?我们可以借助这个方法来实现针对特定元素的扩展。
举个例子,现在我们要给所有指向外链的超链接加上跳转提示,怎么做?
先写出用户调用的代码:
external
扩展:
对如下的HTML结构:
实测外链效果:
如何学习jQuery?
首先,你要学习JavaScript,并了解基本的HTML。
小结
扩展jQuery对象的功能十分简单,但是我们要遵循jQuery的原则,编写的扩展方法能支持链式调用、具备默认值和过滤特定元素,使得扩展方法看上去和jQuery本身的方法没有什么区别。