文章目录
一、 jQuery 概念
jQuery 是一个快速、简洁的 JavaScript 框架，它倡导写更少的代码，做更多的事情。
jQuery 封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
（JavaScript 框架本质上就是一些 js 文件，封装了 js 的原生代码）
二、 三步上手 jQuery
-
下载 JQuery 。jQuery 官网下载：https://releases.jquery.com/jquery/ 。各版本JQuery.js合集_w3cschool
-
导入 JQuery 的 js 文件。建议导入
.min.js文件，该文件中没有缩进，体积也小一些，程序加载更快。（学习的话用不包含min的 js 文件） -
使用。基础语法：
$(selector).action()。
jQuery（jq）对象转为 JavaScript（js）对象：jq对象[索引]，或者 jq对象.get(索引) 。
js 对象转为 jq 对象：$(js对象) 。
三、 jQuery 选择器
为了防止文档在完全加载之前运行 jQuery 代码，我们最好先写一个文档就绪事件（入口函数）：
$(function(){
// 开始写 jQuery 代码...
});
jQuery 选择器分类如下：
四、 jQuery 中的DOM操作
4.1 内容操作
| 内容操作 | 说明 | 举例 |
|---|---|---|
| html() | 获取 / 设置元素的标签体内容 | $("#mydiv").html("<p>aaaa</p>"); |
| text() | 获取 / 设置元素的标签体纯文本内容 | $("#mydiv").text("bbb"); |
| val() | 获取 / 设置元素的value属性值 | var value = $("#myinput").val(); |
4.2 属性操作
属性操作分为 通用属性操作 和 class属性操作。
| 属性操作 | 详解 | |
|---|---|---|
| 通用属性操作 | 1. attr() ：获取 / 设置元素的属性；2. removeAttr() ：删除属性；3. prop() ：获取 / 设置元素的属性；4. removeProp()) ：删除属性。 |
注意： 如果操作的是元素的固有属性，则建议使用 prop ； $("#one").prop("class","second"); 如果是元素自定义的属性，则建议使用 attr 。 |
| class属性操作 | 1. addClass() ：添加class属性值；2. removeClass() ：删除class属性值；3. toggleClass() ：切换class属性；4. css() ：css样式控制。 |
举例：$("#one").addClass("second"); $("#div1").css("backgroundColor","pink"); |
元素的固有属性可以在 HTML 标签参考手册中查看。
second 是 class 属性的值，在 style 标签中有： <style>.second{ background:#999;…… }</style>
4.3 CRUD 操作
-
append()- 在被选元素的结尾插入内容 -
prepend()- 在被选元素的开头插入内容 -
after()- 在被选元素之后插入内容 -
before()- 在被选元素之前插入内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
-
remove()- 删除被选元素（及其子元素） -
empty()- 从被选元素中删除子元素
五、 jQuery 事件
| jQuery 中如何绑定事件 | 语法 | 注意 |
|---|---|---|
| jquery 标准的绑定方式 | jq对象.事件方法(回调函数); |
如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。 如 表单对象.submit(); 会让表单直接提交。 |
| on 绑定事件 / off 解除绑定 | jq对象.on("事件名称",回调函数)jq对象.off("事件名称") |
如果 off 方法不传递任何参数，则将组件上的所有事件全部解绑。 |
| 事件切换 toggle | jq对象.toggle(fn1,fn2...) |
该方法在版本 1.9 中被移除。 下载引入 jQuery Migrate（迁移）插件可以恢复此功能。 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script> |
六、 jQuery 效果 / 动画
三种方式显示和隐藏元素，实现动画效果。
| 显示 / 隐藏元素 | 语法 |
|---|---|
| 默认方式 | 显示 - show([speed,[easing],[fn]])隐藏 - hide([speed,[easing],[fn]])切换 - toggle([speed],[easing],[fn]) |
| 滑动方式 | 显示 - slideDown([speed],[easing],[fn])隐藏 - slideUp([speed,[easing],[fn]])切换 - slideToggle([speed],[easing],[fn]) |
| 淡入淡出方式 | 显示 - fadeIn([speed],[easing],[fn])隐藏 - fadeOut([speed],[easing],[fn])切换 - fadeToggle([speed,[easing],[fn]]) |
参数说明：
-
speed：动画的速度。有三个预定义的值（slow/normal/fast），或者可以写动画时长的毫秒数值（如：1000）。 -
easing：用来指定切换效果，默认是swing（动画执行效果是先慢 - 中间快 - 最后又慢），也可用参数linear（均速执行动画）。 -
fn：在动画完成时执行的函数，每个元素执行一次。
七、 jQuery 遍历
JavaScript 中的遍历对象的语法：for(初始化值;循环结束条件;步长) 。
jQuery 中的遍历对象方式，三种：
-
jq对象.each(callback) -
jquery对象.each(function(index,element){});。回调函数 callback 返回值如果为true则结束本次循环并跳至下一个循环(就像在普通的循环中使用continue)；如果为false将停止本次及其后的所有循环 (就像在普通的循环中使用break)。 -
$.each(object, [callback])
-
for(元素对象 of 容器对象) - jquery 3.0 版本之后提供的方式。