筛选器

基本筛选器

: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 () {
  // 删除按钮绑定的事件
})

1119课堂小结

筛选器