jQuery选择器 学习打卡

思维导图

选择器是jQuery的核心 $("")

JavaScript：document.getElementById(“dom-id”);
jQuery：$("#dom-id");
返回的对象都是jQuery对象
类似数组，每一个元素都是引用了DOM节点的对象

基本选择器

1、#id 根据给定的id匹配一个元素 优先级最高，效率最高
2、element 根据给定的元素标签名匹配所有元素 效率相对较差，建议使用
3、.class 根据给定的css类名匹配元素 效率相对较差，建议使用
总结：
ⅰ. id选择器是唯一的id
ⅱ. 标签选择器可以获取一组标签
ⅲ. 类型选择器可以根据选择不同，我可以选择相同返回一组。
ⅳ. 尽量将id留给行为层js操作。 但是id优先级高于类选择器优先级
4、通配符选择器 * 匹配所有元素 效率最差的，不建议使用

多项选择器

$(“selector1,selector2,selector3”)
见面，每一个选择器匹配到的元素合并到一起后返回

层级选择器

$(“obj ele”) 在给定的祖先元素下匹配所有的后代元素
$(“obj>ele”) 在给定的父元素下匹配所有的子元素 子选择器的效率相对较高
$(“prev+next”) 匹配所有紧接在prev元素后的next元素
$(“prev~next”) 匹配prev元素之后的所有next元素
总结：兄弟选择器重点必须是同一级，兄弟关系，用的不特别多！
子选择器和直接子选择器相对较多！

属性选择器

[属性名] 属性名选择器
[属性名=属性值] 属性选择器
[属性名！=属性值] 属性选择器
[属性名^=属性值] 属性选择器
[属性名$=属性值] 属性选择器
[属性名*=属性值] 属性选择器
[属性1][属性2][属性3]

过滤器

过滤器之child系列

1、：first-child 第一个孩子
2、：last-child 最后一个孩子
3、：nth-child(n|even|odd) 第几个孩子
4、：nth-last-child(n|even|odd) 倒数第几个孩子
5、：only-child 独生子
总结：
1、父元素下的直接子元素必须是某个元素，而且必须是指定第几个孩子
2、下标从1开始，而不是从0开始

过滤器之type系列

1、：first-of-type
2、：last-of-type
3、：nth-of-child(n|even|odd)
4、：nth-last-of-child(n|even|odd)
5、：only-of-type

过滤器参数

1、n 匹配元素的序号 必须是整数 从1开始
2、even 匹配所有偶数元素
3、odd 匹配所有的奇数元素
4、formula 使用特殊公式（an+b）进行操作

表单相关

表单元素

:input
可以选择<input> <textarea> <select>和<button>
:text
匹配所有的单行文本框，和input[type=‘text’]一样
其他的input的type
:password/:radio/:checkbox/:image/:reset/:button/:file

表单状态

:enabled
匹配所有可用元素
:disabled
匹配所有不可用元素
:checked
匹配所有选中的被选中元素（复选框、单选框 select中的option）
:selected
匹配所有选中的option元素

查找和过滤

1、find(expr | object | element) 搜索所有和指定表达式匹配的元素
2、children() 取得一个包含的元素集合中每一个元素的所有子元素的元素集合
3、parent() 取得一个包含的元素集合中唯一父元素的元素集合
4、next() prev() 取得一个包含匹配元素集合中每一个元素紧邻的后面（前面）的元素的元素集合
5、eq(index | -index) 获取当前链式操作中的第N个jQuery对象
总结：
a. 如果eq后面输入的是正数，那么从索引0开始数
b. 如果eq后面输入的是负数，那么就是倒数第几个
6、siblings() 取得一个包含匹配元素集合中每一个元素的所有唯一同辈的元素的元素集合
7、filter() 筛选出于指定表达式匹配的元素集合