jQuery 是一个优秀的 JavaScript 库,是一个由 JohnResig 创建于 2006 年 1 月的开源项目。现在的 jQuery 团队主要包括核心库、UI 和插件等开发人员以及推广和网站设计维护人员。团队中有 3 个核心人物:John Resig、Brandon Aaron 和 Jorn Zaefferer。 jQuery 凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。
① 下载 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:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快
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 对象
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找或选择 HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头:$()
。
基本选择器是 jQuery 中最常用的选择器,也是最简单的选择器,它通过元素 id、class 和标签名等来查找 DOM 元素。在网页中,每个 id 名称只能使用一次,class 允许重复使用。
可以用 next() 方法来代替 (“prev + next”) 选择器,可以使用 nextAll() 方法来代替 (“prev ~ siblings”) 选择器。
选择器 | 等价方法 |
---|---|
$(".one + div") | $(".one").next(“div”) |
$("#two ~ div") | $("#two").nextAll(“div”) |
过滤选择器主要是通过特定的规则筛选出 DOM 元素,过滤规则与 CSS 中的伪类选择器语法相同,即选择器都以一个 :
开头。按照不同的过滤规则,过滤选择器分为:基本过滤选择器,内容过滤选择器,可见性过滤选择器,子元素过滤选择器和表单对象属性过滤选择器
☞ 基本过滤选择器
☞ 内容过滤选择器
☞ 可见性过滤选择器
☞ 属性过滤选择器
☞ 子元素过滤选择器
☞ 表单对象属性过滤选择器
为了更加灵活地操作表单,jQuery 中专门加入了表单选择器。利用这个选择器,能极其方便地获取到表单的某个或某类型的元素。
操作 | 说明 |
---|---|
html() | 获取/设置元素的标签体内容 |
text() | 获取/设置元素的标签体纯文本内容 |
val() | 获取/设置元素的 value 属性值 |
☞ 通用属性操作
操作 | 说明 |
---|---|
attr() | 获取/设置元素的属性 |
removeAttr() | 删除属性 |
prop() | 获取/设置元素的属性 |
removeProp() | 删除属性 |
attr 和 prop 的区别 ① 如果操作的是元素的固有属性,则建议使用prop ② 如果操作的是元素自定义的属性,则建议使用attr
☞ 对 class 属性操作
操作 | 说明 |
---|---|
addClass() | 添加class属性值 |
removeClass() | 删除class属性值 |
toggleClass() | 切换class属性,有则删除,无则添加 |
css() | 修改 css 样式 |
操作 | 说明 |
---|---|
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():将对象的后代元素全部清空,但是保留当前对象以及其属性节点 |
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:在动画完成时执行的函数,每个元素执行一次。
与 show() 方法不相同的是,fadeln() 方法和 fadeOut() 方法只改变元素的不透明度。fadeOut() 方法会在指定的一段时间内降低元素的不透明度,直到元素完全消失(display:none)。fadeln() 方法则相反。
☞ 参数
slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
slideUp() 方法和 slideDown() 方法会改变元素的高度。如果一个元素的 display 属性值为"none",当调用 slideDown() 方法时,这个元素将由上至下延伸显示。slideUp() 方法正好相反,元素将由下到上缩短隐藏。
☞ 参数
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed],[easing],[fn]])
for(初始化值;循环结束条件;步长)
/*
* index:就是元素在集合中的索引
* element:就是集合中的每一个元素对象
* this:集合中的每一个元素对象
* 如果当前 function 返回为 false,则结束循环(break)。
* 如果当前 function 返回为 true,则结束本次循环,继续下次循环(continue)
*/
jquery对象.each(function(index,element){});
$.each(object, [callback]);
// jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象){}
(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() {})
☞ 语法
// 如果调用事件方法,不传递回调函数,则会触发浏览器默认行为
jq对象.事件方法(回调函数);
☞ 示例
// 提交表单
form.submit();
// 绑定事件
jq对象.on("事件名称",回调函数)
// 解除绑定,如果off方法不传递任何参数,则将组件上的所有事件全部解绑
jq对象.off("事件名称")