1.1 简介
1.1.1 概述
jQuery 是一个优秀的 JavaScript 库,是一个由 JohnResig 创建于 2006 年 1 月的开源项目。现在的 jQuery 团队主要包括核心库、UI 和插件等开发人员以及推广和网站设计维护人员。团队中有 3 个核心人物:John Resig、Brandon Aaron 和 Jorn Zaefferer。
jQuery 凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。
1.1.2 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,只支持最新的浏览器。除非特殊要求,
♞ 一般不会使用 3.x 版本的,很多老的 jQuery 插件不支持这个版本。
♞ 目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
② 导入 jQuery 的 js 文件
☞ jquery-xxx.js 与 jquery-xxx.min.js区别:
♞ jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些
♞ jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快
1.1.3 jQuery 的对象
DOM(Document Object Model,文档对象模型),每一个 DOM 都可以表示成一棵树。jQuery 对象就是经过 jQuery 包装之后的 DOM 对象。jQuery 对象不能使用 DOM 对象的任何方法,同理 DOM 对象也不能使用 jQuery 对象的任何任何方法。
DOM 对象与 jQuery 对象互转
☞ jQuery 对象转 DOM 对象
// jq对象[索引] 或者 jq对象.get(索引)
var $jquery = $("#name"); // jQuery 对象
var dom = $jquery.get(0); // DOM 对象
☞ DOM 对象转 jQuery 对象
// $(js对象)
var dom = document.getElementById("name"); // DOM 对象
var $jquery = $(dom); // jQuery 对象
1.2 jQuery 选择器
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找或选择 HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头:$()
。
1.2.1 基本选择器
基本选择器是 jQuery 中最常用的选择器,也是最简单的选择器,它通过元素 id、class 和标签名等来查找 DOM 元素。在网页中,每个 id 名称只能使用一次,class 允许重复使用。
1.2.2 层级选择器
可以用 next() 方法来代替 $(“prev + next”) 选择器,可以使用 nextAll() 方法来代替 $(“prev ~ siblings”) 选择器。
选择器 | 等价方法 |
---|---|
$(".one + div") | $(".one").next(“div”) |
$("#two ~ div") | $("#two").nextAll(“div”) |
1.2.3 过滤选择器
过滤选择器主要是通过特定的规则筛选出 DOM 元素,过滤规则与 CSS 中的伪类选择器语法相同,即选择器都以一个 :
开头。按照不同的过滤规则,过滤选择器分为:基本过滤选择器,内容过滤选择器,可见性过滤选择器,子元素过滤选择器和表单对象属性过滤选择器
☞ 基本过滤选择器
☞ 内容过滤选择器
☞ 可见性过滤选择器
☞ 属性过滤选择器
☞ 子元素过滤选择器
☞ 表单对象属性过滤选择器
1.2.4 表单选择器
为了更加灵活地操作表单,jQuery 中专门加入了表单选择器。利用这个选择器,能极其方便地获取到表单的某个或某类型的元素。
1.3 DOM 操作
1.3.1 内容操作
操作 | 说明 |
---|---|
html() | 获取/设置元素的标签体内容 |
text() | 获取/设置元素的标签体纯文本内容 |
val() | 获取/设置元素的 value 属性值 |
1.3.2 属性操作
☞ 通用属性操作
操作 | 说明 |
---|---|
attr() | 获取/设置元素的属性 |
removeAttr() | 删除属性 |
prop() | 获取/设置元素的属性 |
removeProp() | 删除属性 |
attr 和 prop 的区别
① 如果操作的是元素的固有属性,则建议使用prop
② 如果操作的是元素自定义的属性,则建议使用attr
☞ 对 class 属性操作
操作 | 说明 |
---|---|
addClass() | 添加class属性值 |
removeClass() | 删除class属性值 |
toggleClass() | 切换class属性,有则删除,无则添加 |
css() | 修改 css 样式 |
1.3.3 CRUD
操作 | 说明 |
---|---|
append() | 对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾 |
prepend() | 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头 |
appendTo() | 对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾 |
prependTo() | 对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头 |
after() | 添加元素到元素后边对象1.after(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系 |
before() | 对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系 |
insertAfter() | 对象1.insertAfter(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系 |
insertBefore() | 对象1.insertBefore(对象2):将对象2添加到对象1前边。对象1和对象2是兄弟关系 |
remove() | 对象.remove():将对象删除掉 |
empty() | 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点 |
1.4 jQuery 动画
1.4.1 show() 方法和 hide() 方法
show() 方法和 hide() 方法是 jQuery 中最基本的动画方法。在 HTML 文档里,为一个元素调用 hide() 方法,会将该元素的 display 样式改为 “none”。当把元素隐藏后,可以使用 show() 方法将元素的 display 样式设置为先前的显示状态。提供了 toggle() 方法进行二者之间的切换。
☞ 参数
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
☞ 参数解释
① speed:动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值
② easing:用来指定切换效果,默认是"swing",可用参数"linear"
♞ swing:动画执行时效果是 先慢,中间快,最后又慢
♞ linear:动画执行时速度是匀速的
③ fn:在动画完成时执行的函数,每个元素执行一次。
1.4.2 fadeln() 方法和 fadeOut() 方法
与 show() 方法不相同的是,fadeln() 方法和 fadeOut() 方法只改变元素的不透明度。fadeOut() 方法会在指定的一段时间内降低元素的不透明度,直到元素完全消失(display:none)。fadeln() 方法则相反。
☞ 参数
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
1.4.3 slideUp() 方法和 slideDown() 方法
slideUp() 方法和 slideDown() 方法会改变元素的高度。如果一个元素的 display 属性值为"none",当调用 slideDown() 方法时,这个元素将由上至下延伸显示。slideUp() 方法正好相反,元素将由下到上缩短隐藏。
☞ 参数
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed],[easing],[fn]])
1.5 遍历
1.5.1 JS 遍历方式
for(初始化值;循环结束条件;步长)
1.5.2 jQuery 遍历方式
/*
* index:就是元素在集合中的索引
* element:就是集合中的每一个元素对象
* this:集合中的每一个元素对象
* 如果当前 function 返回为 false,则结束循环(break)。
* 如果当前 function 返回为 true,则结束本次循环,继续下次循环(continue)
*/
jquery对象.each(function(index,element){});
$.each(object, [callback]);
// jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象){}
1.6 事件
1.6.1 DOM 加载
$(document).ready() 方法和 window.onload 方法有相似的功能,但是在执行时机方面是有区别的。window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即 JavaScript 此时才可以访问网页中的任何元素。而通过 jQuery 中的 $(document).ready() 方法注册的事件处理程序,在 DOM 完全就绪时就可以被调用。此时,网页的所有元素对 jQuery 而言都是可以访问的,但是,这并不意味着这些元素关联的文件都已经下载完毕。
另外,需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 HTML 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。示例:$(windows).load(function() {})
1.6.2 标准事件绑定
☞ 语法
// 如果调用事件方法,不传递回调函数,则会触发浏览器默认行为
jq对象.事件方法(回调函数);
☞ 示例
// 提交表单
form.submit();
1.6.3 其他事件绑定
// 绑定事件
jq对象.on("事件名称",回调函数)
// 解除绑定,如果off方法不传递任何参数,则将组件上的所有事件全部解绑
jq对象.off("事件名称")