jQuery之选择器

Posted 2021-04-08 小伍前端

春分

春分这一天太阳直射地球赤道，南北半球季节相反，北半球是春分，在南半球来说就是秋分春分是伊朗、土耳其、阿富汗、乌兹别克斯坦等国的新年，有着3000年的历史。

这春天都已经过了一半了，小伍还是秋衣秋裤不离身，哈哈！直接进入正题吧！选择器再熟悉不过了，常用的不常用的都在这里了，您自己看吧！

一、基本选择器

1、#id:根据给定ID匹配一个元素
     例：$("#myDiv")

2、element:根据给定元素名匹配所有元素
     例：$("div")

3、.class:根据给定类匹配元素
     例：$(".myClass")

4、*: 匹配所有元素
     例：$("*")

5、selector1,selector2,selectorN:同类选择器
     例：$("div,span,.myClass")

二、层级选择器

1、ancestor descendant:匹配某父元素的所有后代元素
     例：$("form input")

2、parent>child:匹配某父元素的所有子元素
     例：$("form>input")

3、prev + next:匹配所有紧跟在prev元素后的next元素
     prev:任何有效选择器
     next：一个有效选择器并且紧接着第一个选择器
     例：$("label + input")

4、prev ~ siblings:匹配prev元素的所有同辈siblings元素
     siblings：一个选择器，并且它作为第一个选择器的同辈
     例：$("form ~ input")

三、基本伪类选择器

1、:first 获取第一个元素
     例：$("li:first")

2、:not(selector) 去除所有与给定选择器匹配的元素
     例：$("input:not(:checked)")

3、:even 匹配所有索引值为偶数的元素
     例： $("tr:even")

4、:odd 匹配所有索引值为偶数的元素
     例：$("tr:odd")

5、:eq(index) 匹配一个给定索引值得元素，从0开始
     例：$("tr:eq(1)")

6、:gt(index) 匹配所有大于给定索引值的元素，从0开始
     例：$("tr:gt(0)")

7、:lt(index) 匹配所有小于给定索引值的元素，从0开始

9、:last 获取最后一个元素
     例：$("li:last")

10、:header 匹配如H1\H2\H3之类的标题元素

11、:animated 匹配所有正在执行动画效果的元素

$("#run").click(function(){                
    $("div:not(:animated)").animate({left:"+=20"},1000);
})

12、:focus 匹配当前获取焦点的元素

13、:root 选择该文档的根元素(html)

四、内容

1、:contains(text) 匹配包含给定文本的元素
     例：$("div:contains('helloWorld')")

2、:empty 匹配所有不包含子元素或者文本的空元素

3、:parent 匹配含有子元素或者文本的元素

4、:has(selector) 匹配含有选择器所匹配的元素的元素

html:
    <div><p>Hello</p></div>
    <div>Hello again!</div>
js:
    $("div:has(p)").addClass("test");

结果：

[<div class="test"><p>Hello</p></div>]

五、可见性

1、:hidden 匹配所有不可见元素，或者type为hidden的元素

2、:visible    匹配所有的可见元素

六、属性选择器

1、[attribute] 匹配包含给定属性的元素
     例：$("div[id]")

2、[attribute = value] 匹配给定的属性是某个特定值的元素
     例：$("input[name = 'newsletter']")

3、[attribute != value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
     例：$("input[name != 'newletter']")

4、[attribute ^= value] 匹配给定的属性是以某些值开始的元素

<input name="newsboy">
$("input[name ^= 'news']")

5、[attribute $= value] 匹配给定的属性是以某些值结尾的元素

<input name="newsletter">
$("input[name $= 'letter']")

6、[attribute *= value] 匹配给定的属性是以包含某些值得元素

<input name="man-news">
<input name="milkman">
<input name="letterman2">
$("input[name *= 'man']")

7、[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

<input name="man-news" id="letterman">
$("input[id][name $= 'man']")

七、子元素

1、:first-child 匹配第一个子元素
     例：$("ul li:first-child")

2、:first-of-type 选择所有相同的元素名称的第一个兄弟元素

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
$("div:first-of-type")  //在每一个匹配div中查找第一个span

3、:last-child 匹配最后一个子元素
     例：$("ul li:last-child")

4、:last-of-type 选择所有相同的元素名称的最后一个兄弟元素
     例：$("div:last-of-type")

5、:nth-child 匹配其父元素下的第N个子或奇偶元素 从1开始
     例：$("ul li:nth-child(2)")

6、:nth-last-child() 匹配其父元素下的第N个子元素，从最后一个开始计数

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
$("ul li:nth-last-child(2)")

结果:[<li>3</li>]

7、:nth-last-of-type() 匹配其父元素下的第N个子元素，从最后一个开始计数
     例：$("ul li:nth-last-of-type(2)")

8、:nth-of-type() 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个
     例：$("span:nth-of-type(2)")

9、:only-child 如果某个元素是父元素中唯一的子元素，则将会被匹配，否则不会被匹配

10、:only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素

八、表单

1、:input 匹配所有input,textarea,select和button元素

<form>
     <input type="任意类型">
     <select><option></option></selcet>
     <textarea></textarea>
     <button></button>
</form>
$(":input")  //以上都可以匹配到

2、:text 匹配所有的单行文本框

<input sype="text">
$(":text")

3、:password 匹配所有密码框

4、:radio 匹配所有单选按钮

5、:checkbox 匹配所有复选框

6、:submit 匹配所有提交按钮

7、:image 匹配所有图像域

8、:reset 匹配所有重置按钮

9、:button 匹配所有按钮

10、:file 匹配所有文件域

九、表单对象属性

1、:enabled 匹配所有可用元素

2、:disabled 匹配所有不可用元素

3、:checked 匹配所有被选中的元素(复选框，单选框等，不包括select中的option)

4、:selected 匹配所有选中的option元素