# 1. 过滤选择器 http://www.htmleaf.com/

1
2
3
4
5
6
7
8
9
10
11
选择器 	返回值 	描述
:first 单个元素 选择第一个元素
:last 单个元素 返回最后一个元素
:not(selector) 元素集合 从一组元素中排除与给定选择器匹配的元素,返回不匹配的元素
:even 元素集合 返回索引是偶数的所有元素,索引从0开始
:odd 元素集合 返回索引是奇数的所有元素,索引从0开始
:eq(index) 元素集合 返回索引等于index的所有元素,索引从0开始
:gt(index) 元素集合 返回索引大于index的所有元素,索引从0开始
:lt(index) 元素集合 返回索引小于index的所有元素,索引从0开始
:header 元素集合 选取所有的标题元素
:animated 元素集合 返回当前正在执行动画的所有元素

# 2. 表单选择器

1
2
3
4
5
6
7
8
9
10
11
12
选择器 	返回值 	描述
:input 元素集合 选择所有的<input>、<textarea>、<button>和<select>元素
:text 元素集合 选择所有的单行文本框
:password 元素集合 选择所有的密码框
:radio 元素集合 选择所有的单选框
:checkbox 元素集合 选择所有的复选框
:submit 元素集合 选择所有的提交按钮
:reset 元素集合 选择所有的重置按钮
:image 元素集合 选择所有的图像元素
:button 元素集合 选择所有的按钮元素
:file 元素集合 选择所有的文件上传域
:hidden 元素集合 选择所有的不可见元素

# 3. 包装集

1
2
3
4
5
6
7
8
9
10
方法 		返回值 		描述
children() 返回新的包装集 返回原包装集元素的所有唯一子元素所组成的包装集
contents() 返回新的包装集 返回原包装集元素的内容的包装集,这些元素可能包含文本节点(该方法常用于获取<iframe>元素的内容)
next() 返回新的包装集 返回原包装集元素的所有唯一的下一个兄弟元素所组成的包装集
nextAll() 返回新的包装集 返回包含元素包装集元素的所有后续兄弟元素的包装集
parent() 返回新的包装集 返回原包装集所有元素的唯一直接父元素的包装集
parents() 返回新的包装集 返回原包装集所有元素的唯一祖先元素所组成的包装集,包括直接父元素和一直向上追溯的祖先元素,但不包括文档根元素
prev 返回新的包装集 返回原包装集元素的所有唯一的上一个兄弟元素所组成的包装集
prevAll 返回新的包装集 返回包含原包装集元素的所有前面兄弟元素的包装集
siblings() 返回新的包装集 返回原包装集元素的所有唯一兄弟元素所组成的包装集

# 4. 遍历元素

1
2
3
4
5
6
7
8
each()		方法可以循环遍历包装集中的每一个元素
first() 函数会返回包装集中的第一个元素
last() 函数会返回包装集中的最后一个元素
next() 方法会取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
prev() 方法取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
parent() 方法取得一个包含着所有匹配元素的唯一父元素的元素集合
children() 方法取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
siblings() 方法取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

# 5. 设置特性值

1
2
3
4
5
attr(name,value) 	为包装集中所有元素的name属性设置传入的value值
addClass(names) 为包装集中的元素添加一个或多个指定的class类名称
removeClass(names) 从包装集中的元素移除一个或多个指定的class类名称
toggleClass(name) 如果元素中指定的类名称不存在,则添加指定的类名称。如果元素已经拥有了该类名称,则从元素中删除该类名称。
css(name,value) 设置指定的值到每个已匹配元素的指定的CSS样式属性

# 6. 常用事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
hover([over,]out):		一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
toggle([speed],[easing],[fn]):用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件
blur([[data],fn]): 当元素失去焦点时触发blur事件
change([[data],fn]): 当元素的值发生改变时,会发生 change 事件
click([[data],fn]): 触发每一个匹配元素的click事件
dblclick([[data],fn]): 当双击元素时,会发生dblclick事件
focus([[data],fn]): 当元素获得焦点时,触发focus事件
focusin([data],fn): 当元素获得焦点时,触发focusin事件
focusout([data],fn): 当元素失去焦点时触发focusout事件
keydown([[data],fn]): 当键盘或按钮被按下时,发生keydown事件
keypress([[data],fn]): 当键盘或按钮被按下时,发生keypress事件
keyup([[data],fn]): 当按钮被松开时,发生keyup事件
mousedown([[data],fn]): 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件
mouseenter([[data],fn]): 当鼠标指针穿过元素时,会发生mouseenter事件。该事件大多数时候会与mouseleave事件一起使用
mouseleave([[data],fn]): 当鼠标指针离开元素时,会发生mouseleave事件。该事件大多数时候会与mouseenter事件一起使用
mousemove([[data],fn]): 当鼠标指针在指定的元素中移动时,就会发生mousemove事件
mouseout([[data],fn]): 当鼠标指针从元素上移开时,发生mouseout事件
mouseover([[data],fn]): 当鼠标指针位于元素上方时,会发生mouseover事件
mouseup([[data],fn]): 当在元素上放松鼠标按钮时,会发生mouseup事件
resize([[data],fn]): 当调整浏览器窗口的大小时,发生resize事件
scroll([[data],fn]): 当用户滚动指定的元素时,会发生scroll事件
select([[data],fn]) 当textarea或文本类型的input元素中的文本被选择时,会发生select事件
submit([[data],fn]): 当提交表单时,会发生submit事件
ready(fn): 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
unload([[data],fn]): 在当用户离开页面时,会发生unload事件

# 7. 事件委派和事件处理

1
2
3
4
5
6
7
8
9
10
11
bind()		方法为每个匹配元素的特定事件绑定事件处理函数
unbind() 方法是bind()的反向操作,从每一个匹配的元素中删除绑定的事件
trigger() 方法在每一个匹配的元素上触发某类事件
triggerHandler() 方法会触发指定的事件类型上所有绑定的处理函数
live() 同样使用上面bind()方法中的例子,只要将bind()修改为live(),就可以解决新元素的事件绑定问题
die() 方法是从元素中删除先前用live()方法绑定的所有事件
delegate() /* 使用delegate来完成事件委派 */$("#container").delegate(".row","click",function(event){alert($(this).html());})$("#container").append("<div class='row'>div2</div>");
undelegate() 方法删除由delegate()方法添加的一个或多个事件处理程序
on() $(".row").on("click",function(event){alert($(this).html());})
off() 方法移除用on()绑定的事件处理程序
one()方 法为每一个匹配元素的特定事件绑定一个一次性的事件处理函数

# 8.jQuery 动画

1
2
3
4
5
6
7
8
9
10
11
show()		显示隐藏的元素
hide() 用于隐藏元素
toggle() 方法用于切换一个元素的可见性,显示就隐藏,隐藏就显示
slideDown() 方法通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来
slideUp() 方法通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来
slideToggle() 方法通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来
fadeIn() 方法通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut() 方法通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle() 方法通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化
fadeTo() 方法把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化
animate() 方法是用于创建自定义动画的函数

# 9.AJAX 操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function createXMLHttpRequest(){
var xhr;
if(window.ActiveXObject){
try{
xhr = new ActiveXObject(Microsoft.XMLHTTP)
}catch(e){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
}else if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
alert("你使用的浏览器不支持XMLHttpRequest!");
return false;
}
return xhr;
}
var xhr = createXMLHttpRequest();
// 处理Ajax请求
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//获取相应的文本:通过xhr的responseText可以获取文本信息,包括xml的标签
alert(xhr.responseText);
}
}
// 发送Ajax请求
xhr.open("GET","b.html",true);
xhr.send();

1 $("#content").load("01.html",function(data){
console.info(data);
});
2 $.get("person.xml",function(data){
console.info($(data).find("person").text());
},"xml")
3 $.get("person.json",function(data){
console.info(data.name);
},"json")
更新于

请我喝[茶]~( ̄▽ ̄)~*

高祥 微信支付

微信支付

高祥 支付宝

支付宝

高祥 贝宝

贝宝