选择器

1. 基本选择器

• id选择器：#id；

根据ID查找元素，因为id唯一，所以返回值唯一。

//jquery代码
$("#myDiv");
//查找含有特殊字符的元素
//HTML代码：
<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>
//jquery代码
#foo\\:bar
#foo\\[bar\\]
#foo\\.bar

• element：根据给定的元素名匹配所有元素；

一个用于搜索的元素，指向 DOM 节点的标签名。会返回包含所有指定标签的集合。

• 类选择器：.class；

根据指定的类匹配元素，会返回包含所有满足条件的元素的集合。

• ：匹配所有元素；

• 复合选择器：selector1，selector2，selector3，selector4；

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

---

2. 层级选择器

• ancestor descendant：在给定的祖先元素下匹配所有的后代元素；

ancestor：指任何有效的选择器。

descendant：指用以匹配元素的选择器，并且它是第一个选择器的后代元素。

• parent > child：在给定的父元素下匹配所有的子元素；

parent：任何有效的选择器。

child：指用以匹配元素的选择器，并且它是第一个选择器的后代元素。

• prev+next：匹配所有紧接在 prev 元素后的 next 元素；

prev：任何有效选择器。

next：一个有效选择器并且紧接着第一个选择器。

• prev~siblings：匹配所有prev元素之后的所有siblings即同辈元素；

prev：任何有效选择器。

siblings：一个选择器，并且它作为第一个选择器的同辈元素。

---

3. 基本选择器

• ：first：获取匹配的第一个元素；

• ：last：获取匹配的最后一个元素；

• not：去除所有与给定选择器匹配的元素；

有一个参数selector，指用于筛选的选择器。

//查找除最后一个的所有li元素
//HTML代码
<div>
    <ul>
        <li><a href="#">第一个</a></li>
        <li><a href="#">第二个</a></li>
        <li><a href="#">第三个</a></li>
    </ul>
</div>
//jquery代码
<script src="../jquery-3.0.0.js"></script>
<script>
    $(function () {
        $("li:not(:last)").css({'color':'red','list-style':'none','text-decoration':'none'})
    })
</script>

注意：

这里的not是指前面的选择器的内容，比如第几个，或者是类似checked这样的单值属性。

• ：even：匹配所有索引值为偶数的元素，索引值从0开始计数；

注意：

这里的索引值为偶数指的是jQuery默认赋予的index索引值，从0开始，即从文本行理解是文本的第一个或者第一行。

• ：odd：匹配所有索引值为奇数的元素，索引值从0开始计数；

• ：eq(index)：匹配一个给定索引值的元素；

• ：gt：匹配所有大于给定索引值的元素；

• ：lt：匹配所有小于给定索引值的元素；

• ：header：匹配所有的标题元素，如h1,h2,h3.....；

• ：animated：匹配所有正在执行动画效果的元素；

---

4.内容选择器

• ：contains：匹配给定元素的文本；

参数：text，指一个用于查找的字符串。

//包含John字符串的元素
//HTML代码
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
//jquery代码
$("div:contains('John')")
//结果
//[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

• ：empty：查找所有不包含子元素或文本的空元素；

• ：has：匹配含有选择器所匹配的元素的元素；

• ：parent：匹配含有子元素或者文本的元素；

注：

这里的parent是指选择器是父亲，即找出所有是父亲的选择器匹配的元素。

---

5.可见性选择器

• ：hidden：匹配所有不可见元素，或者type为hidden的元素（display：none）；

• ：visible：匹配所有可见元素；

---

6.属性选择器

• [attribute]：匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

//描述:
//查找所有含有 id 属性的 div 元素
​
//HTML 代码:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
//jQuery 代码:
$("div[id]")
//结果:
[ <div id="test2"></div> ]

• [attribute=value]：匹配给定的属性是某个值的元素；

• [attribute！=value]：匹配给定的属性不是某个值的元素；

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

• [attribute$=value]：匹配给定的属性是以某些值结束的元素;

• [attribute*=value]：匹配给定的属性是包含某些值的元素;

• [selector1]/[selector2]/[selectorN]：符合属性选择器，需要同时满足多个条件时使用；

//描述:
//找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
​
//HTML 代码:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
//jQuery 代码:
$("input[id][name$='man']")
//结果:
[ <input id="letterman" name="new-letterman" /> ]

7.子元素选择器

• ：nth-child(number)：匹配该元素下的第number（索引从1开始）个元素，指该元素的第几个子代；

• ：first-child：匹配该元素的第一个子元素；

• ：last-child：匹配该元素的最后一个子元素；

• ：only-child：如果某个元素是父元素中唯一的子元素，那将会被匹配；

---

8.表单选择器

• ：input：匹配所有 input, textarea, select 和 button 元素

• ：text：匹配所有的单行文本框；

• ：password：匹配所有的密码框；

• ：radio：匹配所有的单选按钮；

• ：checkbox：匹配所有的密码框；

• ：submit：匹配所有的提交按钮；

• ：image：匹配所有图像域；

• ：reset：匹配所有重置按钮；

• ：button：匹配所有按钮；

• ：file：匹配所有文件域；

---

9.表单对象属性选择器

• ：enabled：匹配所有可用的元素；

如查找所有可用的input元素：

 

$("input:disabled")

• ：disabled：匹配所有不可用的元素；

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

• ：selected：匹配所有选中的option元素；