jQuery简介
jQuery
是由美国大神John Resig
所创建,旨在用更少的代码完成更多的需求。
1.
jQuery
是一个非常快速简洁的JavaScript
第三方库,能够让用户更加方便的处理DOM
,event
与更加轻易的实现动画效果与AJAX
交互。2.
jQuery
十分轻量级,这是其他的Js
框架所不及的,除此之外它还兼容CSS3
,相较于原生Js
来说对于各种版本的浏览器提供了更好的兼容性。3.
jQuery
的官方文档特别齐全,各种应用说明十分详细,同时还具有很多成熟的插件可供选择。
官方网站
在线文档
jQuery版本
- 1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
- 2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
- 3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
在学习时推荐使用3.x版本,老旧的浏览器正逐步被淘汰。
jQuery引入
离线文件
在jQuery
官网中进行下载,在学习时推荐下载压缩版本,如果对jQuery
源码感兴趣可以下载未压缩版本。
下载完成之后使用进行引入即可。
在线引用
使用bootCDN
提供的jQuery
,能够省去下载步骤
点我下载
vscode引入
为了方便后期使用在线引用,vscode
可设置一个代码片段用于快速链接。
点击左下角的设置,选择用户代码片段,搜索框中搜索HTML
,打开它后将以下内容放在注释语句的后面。
现在,我们可以直接使用$
来快速的在线引入jQuery
了。
"jqueryImport": {
"prefix": "$",
"body": [
""
],
"description": "快速引入jQuery"
}
基本语法
jQuery
的语法非常简单,只需要使用jQuer
或$
符再调用其下的方法即可。
以下示例将展示如何使用jQuery
选择器选择出标签节点。
hello
jQuery对象
用jQuery
提供的选择器选择出的节点将会被包装为jQuery
对象,因此,如果是使用jQuery
进行Node
操作,jQuery
对象变量命名应该以$
开始以方便为后期维护。
注意
DOM
对象和jQuery
对象之间方法并不互通
转换方式
使用$(DOM)
可将DOM
对象转换为jQuery
对象。
使用[0]
可将jQuery
对象转换为DOM
对象。
我是p1
我是p2
注意事项
当使用jQuery
选择器进行查找时,即便没有找到任何节点,jQuery
对象的bool
值依旧是true
,而DOM
对象则为null
。
这是因为jQuery
对象始终是一个可迭代对象,具有length
属性,类似于NodeList
以及HTMLCollection
。
而诸如DOM
操作中的getElementByid
方法以及querySelect
方法返回的都只是一个单一的Node
,而并非是一个可迭代对象。
所以在取bool
我是p1
我是p2