共计 11405 个字符，预计需要花费 29 分钟才能阅读完成。
目录
jQuery
选择器
基础选择器
子元素选择器
后代元素选择器
属性选择器
jQuery 扩展
DOM 操作
addclass()
removeClass()
toggleClass()
hasClass()
html()
val()
attr()
removeAttr()
DOM 插入并包裹现有内容
DOM 插入现有元素内
DOM 插入现有元素外
DOM 移除
DOM 替换
CSS 操作
css()获取和设置匹配元素的样式
height(),width()
innerHeight(),innerWidth()
outerHeight(),outerWidth()
offset()获取元素当前坐标
position()
scrollLeft(),scrollTop()
事件
绑定事件处理器
on()
one()
off()
鼠标事件
表单事件
focus()
blur()
change()
submit()
键盘事件
浏览器事件
事件对象
遍历
动画
jQuery
jQuery 是一个高效，精简并且功能丰富的 js 工具库。可以简化 DOM 操作
官网：jQuery 官网
中文文档：jQuery API 中文文档
选择器
$: 就是 jQuery 缩写
基础选择器
类选择器
类选择器
元素选择器
id 选择器 子元素选择器
选择指定父元素的所有直接后代元素
给 ul 的子元素添加边框
- 第一个 li 标签
-
- 嵌套的 li 标签
- 嵌套的 li 标签
- 嵌套的 li 标签
- 第二个 li 标签
//js 实现 --- 给 ul 的子元素(直接子元素)
var ul=document.getElementsByClassName("test")[0];
console.log(ul.childNodes);
var lis = ul.children;
for(var i=0;i //jQuery 实现
$(".test> li").css("border","1px solid green");后代元素选择器
选择指定父元素的所有后代元素
//js 实现
// 获取父元素
var ulParent = document.getElementsByClassName("test")[0];
// 获取全部后代所有 li 标签
var liSons = ulParent.getElementsByTagName("li");
for(var i=0;i //jQuery 实现
$(".test li").css("border","1px solid green");属性选择器
1. 选择指定属性的给定值的元素
姓名
密码
2. 选择指定属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符 ”-“）的元素
测试样本 1
测试样本 2demo
测试样本 3
3. 选择指定属性具有包含一个给定的子字符串的元素
测试样本 1
测试样本 2demo
测试样本 3
测试样本 3
4. 选择指定属性用空格分隔的值中包含一个给定值的元素
测试样本 1
测试样本 2demo
测试样本 3demo-test
测试样本 3
5. 选择指定属性是以给定值结尾的元素，这个比较是区分大小写的
测试样本 1
测试样本 2demo
测试样本 3demo-test
测试样本 4demo-test
测试样本 5
6. 选择属性是以指定字符串开始的元素
测试样本 1test
测试样本 2demo
测试样本 3demo-test
测试样本 4demotest
测试样本 5
jQuery 扩展
:eq(index)Selector
在匹配的集合里面选择索引为 index 的元素，index 下标索引是从 0 开始的
:even 选择偶数
:odd 选择奇数
:first 选择第一个
:last 选择最后一个
:gt(index) 选择匹配集合中索引大于给定 index 的元素
:lt(index) 选择匹配集合中所有索引值小于给定 index 参数的元素
- 第一个 li 标签
- 第二个 li 标签
- 第三个 li 标签
- 第四个 li 标签
- 第五个 li 标签
- 第六个 li 标签
DOM 操作
addclass()
给元素添加 css，这个方法不会替换一个样式类名，只是将一个样式类型叠加到元素上，也可以同时添加多个 class
=================================================
hello,world
removeClass()
移除元素中每个匹配元素上的一个，多个，或全部样式
// 移除一个 class
$("p").removeClass("myClass1");
// 移除多个 class
$("p").removeClass("myClass1 myClass2");
// 移除全部样式
$("p").removeClass();
toggleClass()
这是一个开关方法，如果 class 存在就删除，不存在就添加
// 存在就删除，不存在就添加
$("p").toggleClass("myClass1");hasClass()
判断一个元素上是否含有某个 class
// 判断 p 元素是否有 myClass1
var flag = $("p").hasClass("myClass1");
console.log(flag);html()
获取元素中的 html 内容，并且还可以设置元素的 html 内容
// 获取 p 元素的 html 内容
console.log($("p").html());
// 将 p 元素的 html 内容修改成：你好，世界
$("p").html("你好，世界");
val()
获取 标签中的内容，也可以设置
// 获取 input 标签内容
$(".input").val();
// 设置 input 标签内容
$(".input").val("请输入内容");attr()
获取匹配元素的属性值或在设置匹配元素的一个或多个属性。
![]()
removeAttr()
为匹配的元素集合中的每个元素中移除一个属性
// 移除 alt 属性
$("img").removeAttr("alt")DOM 插入并包裹现有内容
wrap()
在每个匹配的元素外层包上一个 html 元素
unwrap()
将匹配集合的父级元素删除，保留自身原本的位置
hello
hello
“)// 两个 p 标签都会添加父标签
// 去掉第二个 p 标签的父标签 div
$(“p:eq(1)”).unwrap();
wrapAll()
在所有匹配元素的外面包裹一个 html 结构
hello
hello
hello
wrapInner()
在匹配元素里的内容上外包一层 html 结构
hello
hello
hello
DOM 插入现有元素内
append()
在一个现有元素内插入新内容
prepend()
将参数插入到每个匹配元素的前面（元素内部）
helloWorld
DOM 插入现有元素外
在一个现有元素外插入内容
after()
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
before()
在匹配元素集合中的每个元素前面插入参数所指定的内容，作为其兄弟节点。
helloWorld
DOM 移除
从 DOM 树中删除元素
empty()
从 DOM 移除集合中所有匹配元素的索引子节点
remove()
将匹配元素从 DOM 删除
- 第一个 li 标签
- 第二个 li 标签
- 第三个 li 标签
- 第四个 li 标签
DOM 替换
从 OM 树移除已经有的内容并将其替换成新内容
replaceAll()
用集合匹配元素替换每个目标元素
replaceWith()
用提供的内容替换集合中所有匹配的元素
helloWorld
helloWorld
CSS 操作
css()获取和设置匹配元素的样式
Document
测试 jQuery 的 css 方法
height(),width()
获取元素的当前高度值宽度值或者设置元素的高度值宽度值
测试 jQuery 的 css 方法
innerHeight(),innerWidth()
为元素计算当前高度值和宽度值，包括 padding，但是不包括 border
Document
测试 jQuery 的 css 方法
outerHeight(),outerWidth()
获取元素的当前宽度值和高度值，包括 padding，border 和选择性的 margin
Document
测试 jQuery 的 css 方法
offset()获取元素当前坐标
获取当前元素坐标，或设置元素当前坐标，坐标相对于文档
Document
position()
获取当前元素的坐标，是相对于父级元素的坐标
这个方法可以获取元素相对于父元素的偏移位置。offset 是相对于文档的位置，
因此当把一个元素放到同一个容器里面的另一个元素附近时，使用 position()会更好。
scrollLeft(),scrollTop()
获取元素的当前水平和垂直滚动条的位置
设置每个匹配元素的水平滚动条和垂直滚动条位置
Document
测试滚动
helloworld
事件
绑定事件处理器
on()
在选定的元素上绑定一个或者多个事件处理函数
事件委托效果
Document
- 第一个 li 标签
- 第二个 li 标签
- 第三个 li 标签
- 第四个 li 标签
one()
为元素的事件添加处理函数，处理函数在每个与那苏上每种事件类型最多执行一次
// 点击按钮控制台打印，点击按钮，只会执行一次
$(".btn").one("click",function(){console.log("点击了按钮");
})off()
移除一个事件处理函数，主要是移除 on 事件处理器
// 点击按钮控制台打印，点击按钮，只会执行一次
function myFn(){console.log("点击了按钮");
}
$(".btn").on("click",myFn);
// 移除点击事件
$(".btn").off("click",myFn);鼠标事件
| 方法 | 方法描述 |
| click() | 为 js 的 ”click” 事件绑定一个处理器，或者触发元素上的 ”click” 事件 |
| hover() | 将事件函数绑定到匹配元素上，分辨是当鼠标移入指针进入和离开元素时被执行 |
| mouseenter() | 鼠标进入事件 |
| mouseleave() | 鼠标离开事件 |
| mousemove() | 鼠标滑动事件 |
| mouseover() | 鼠标进入事件（支持事件冒泡）也就是是从父元素进入子元素会触发 |
| mouseout() | 鼠标离开事件支持冒泡事件）也就是说离开子元素时也会触发 |
Document
表单事件
focus()
为 js 的 ”focus” 事件绑定一个获取焦点处理函数，或者触发元素上的 ”focus” 事件
blur()
为 ”blur” 事件绑定一个失去焦点处理函数
change()
为 js 的 ”change” 事件绑定一个表单改变处理函数
submit()
当用户提交表单时，就会在这个表单元素上触发 submit 事件，只能绑定在 form 元素上
Document
键盘事件
keydown()
添加键盘按下事件
keypress()
添加键盘事件
keyup()
添加键盘抬起事件
Document
浏览器事件
resize()
添加浏览器窗口发生变化触发事件
scroll()
浏览器滚动事件
Document
测试浏览器事件
测试浏览器事件
测试浏览器事件
测试浏览器事件
测试浏览器事件
事件对象
event.type: 获取事件类型
event.target: 获取当前元素对象
event.currentTarget: 获取当前元素对象
event.preventDefault(): 如果调用这个事件，默认事件行为将不再触发
event.stopPropagation(): 防止事件，冒泡到 DOM 树上，也就是不触发任何前辈元素上的事件处理函数。
Document
target: 指向触发事件元素，currentTarget：指向添加事件的元素
当点击按钮时效果是
阻止默认事件，比如 a 链接的跳转
百度
阻止冒泡
Document
百度
遍历
map()：通过一个函数匹配当前集合中每个元素，产生一个新的 jQuery 对象
each(): 遍历一个 jQuery, 为每个匹配元素执行一个函数
get(): 通过 jQuery 对象获取一个对应的 DOM 元素
each 和 map 的返回值不同，map 返回一个新的数组，each 返回原始数组
Document
- 第一个 li 标签
- 第二个 li 标签
- 第三个 li 标签
- 第四个 li 标签
- 第五个 li 标签
children(): 获得直接子元素可以传递一个选择器参数
find(): 寻找后代元素
next(): 获取元素紧邻的后面同级元素
parebt(): 获取元素的父元素
siblings(): 获取元素的兄弟元素，可以传一个选择器参数
Document
- 第一个 li 标签
- 第二个 li 标签
-
- 嵌套的第一个 li 标签
- 嵌套的第二个 li 标签
- 嵌套的第三个 li 标签
- 第三个 li 标签
测试内容
动画
show()：执行显示动画
hide(): 执行隐藏动画
fadeln(): 通过淡入的方式显示匹配元素
fadeOut(): 通过淡出的方式显示匹配元素
slideDown(): 用滑动动画显示一个元素
slideUp(): 用滑动动画隐藏一个元素
Document
animate(): 执行自定义动画
Document
原文地址: jQuery
