筛选器
基本筛选器
:first // 第一个
:last // 最后一个
:eq(索引值) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(索引值) // 匹配所有大于给定索引值的元素
:lt(索引值) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
例：$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
:has(元素选择器) // 保留包含特定后代的元素，去掉那些不含有指定后代的元素
例：$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
属性筛选器
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
// type属性查找
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例：$("type:checkbox") // 找到所有的checkbox
type可省略, 写为$(":checkbox")
// 表单对象属性
:enabled
:disabled
:checked
:selected
例：$("input:enabled") // 找到可用的input标签
例：$(":selected") // 找到所有被选中的option
注意：jQuery中，用$(':checked')查找标签，会将有默认值的input和option一起返回。
如果一定要找到 input中含有checked的值，可再加一个条件$("input:checked"); 或者是精确度更高的：如$(":checkbox:checked");
筛选器方法
上一个元素
$("#id").prev() // 找到括号内id值的上一个同级元素
$("#id").prevAll() // 找到括号内id值的上面所有同级元素
$("#id").prevUntil("#i2") // 找到括号内id值 到i2为止的上面所有同级元素,不包括i2
下一个元素
$("#id").next() // 找到括号内id值的下一个同级元素
$("#id").nextAll() // 找到括号内id值的下面所有同级元素
$("#id").nextUntil("#i2") // 找到括号内id值 到i2为止的下面所有同级元素,不包括i2
父元素
$("#id").parent() // 查找当前元素的上一个父辈元素
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil('body') // 找到括号内id值 到body为止的所有父辈元素,不包括body
子代和兄弟元素
$("#id").children();// 子代
$("#id").siblings();// 兄弟
查找
// 搜索所有与指定表达式匹配的元素
$("div").find("p") // 查找div内的所有p标签
// 等价于
$("div p")
筛选
// 筛选出与指定表达式匹配的元素集合
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
// 等价于
$("div.c1")
补充
// 与表单筛选器类似 .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素 。 .eq() // 索引值等于指定值的元素
操作标签
样式操作
addClass(); // 添加指定的CSS类名
removeClass(); // 移除指定的CSS类名
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加
// css操作
css("color","red")
例：$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移 scrollTop() // 获取匹配元素相对滚动条顶部的偏移 scrollLeft() // 获取匹配元素相对滚动条左侧的偏移 补充：括号内可以加参数，scrollTop() 比较常用，应用场景：当滚动条距离顶部600px，则显示“回到顶部”按钮
尺寸操作
// 内部文本宽高 height() width() // 内部文本高度+上下padding高度 innerHeight() // 内部文本宽度+左右padding宽度 innerWidth() // 内部文本高度+上下padding高度+上下边框高度 outerHeight() // 内部文本宽度+左右padding宽度+左右边框宽度 outerWidth()
文本操作
html() // 取得元素的html内容
html(val值) // 设置元素的html内容
text() // 取得元素的文本内容
text(val值) // 设置元素的文本内容
val() // 取得元素的当前值
val(val) // 设置元素的值
val([val1, val2]) // 设置多选的checkbox、多选select的值
例：设置多选的值
$("[name='hobby']").val(['basketball', 'football']);
例：获取被选中的checkbox的值
$("input[name='gender']:checked").val()
属性操作
// 对于标签上有的能看到的属性和自定义属性都用attr
attr(attrName)// 返回匹配元素的属性值
attr(attrName, attrValue)// 为匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为匹配元素设置多个属性值
removeAttr()// 从匹配的元素中删除一个属性
// 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
prop() // 获取属性
removeProp() // 移除属性
注意：为了兼容性考虑，对于 checkbox 和 radio 操作时，尽量使用特定的prop()操作。
但3.x版本中，removeProp()可能会无效，在删除元素时，尽量使用prop()，如
利用prop()操作为checkbox 添加属性
$('input').first().prop('checked','checked')
利用prop()操作为checkbox 删除属性$('input').first().prop('checked',false)
文档操作
添加到指定元素内部的后面
$(A).append(B) // 把B追加到A $(A).appendTo(B) // 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B) // 把B前置到A $(A).prependTo(B) // 把A前置到B
添加到指定元素外部的后面
$(A).after(B) // 把B放到A的后面 $(A).insertAfter(B) // 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B) // 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove() // 从DOM中删除所有匹配的元素。 empty() // 删除匹配的元素集合中所有的子节点。
替换
replaceWith() replaceAll()
克隆
clone() // 参数
事件
常用事件
click(function(){...}) // 单击
hover(function(){...}) // 光标悬浮
blur(function(){...}) // 失去焦点
focus(function(){...}) // 获得焦点
change(function(){...}) // 域内容变化
keyup(function(){...}) // 键盘某个键按下后松开
input(function(){...}) // 实时监听input框
事件绑定
第一种语法结构：
$(选择器).事件名(function(){
// 事件代码
})
第二种语法结构 (用处更广 )
$(选择器).on('事件名',function(){
// 事件代码
})
移除事件
.off( events [, selector ][,function(){}])
阻止后续事件执行
第一种方式
return false
例：
$("#b1").click(function (e) {
alert(123);
return false;
});
第二种方式
e.preventDefault()
例：
$("#b1").click(function (e) {
alert(123);
e.preventDefault();
});
阻止事件冒泡
冒泡事件就是点击子节点，会向上触发父节点，爷爷节点的点击事件
e.stopPropagation();
例：
$("内层某节点").click(function (e) {
alert(123);
e.stopPropagation();
});
页面载入
// 方式一
$(document).ready(function(){
// JS代码...
})
//方式二
$(function(){
// JS代码...
})
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})