1. 技术文章
  2. jQuery系列：选择器

jQuery系列：选择器

由 北城以北 提交于 2020-01-23 04:44:12

　　jQuery选择器通过标签名、属性名或内容对DOM元素进行选择，而不用担心浏览器的兼容性。

1. 基本选择器

　　基本选择器是jQuery中使用最频繁的选择器，由元素ID、class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。

选择器功能返回值示例
* 匹配所有元素 元素集合 $("*")
#id 根据指定的ID匹配一个元素，示例选取id="loading"的元素 单个元素 $("#loading")
.class 根据指定的类名称匹配元素，示例选取class="readonly"的元素 元素集合 $(".readonly")
.class.class 根据指定的类名称匹配元素，示例选取class="item selected"的元素 元素集合 $(".item.selected")
element 根据指定的元素名匹配所有元素 元素集合 $("div")
selector1,selector2,...selectorN 将每一个选择匹配到的元素合并后一起返回 元素集合 $("div,span")

　　示例：

<ul class="container">
    <li>选项1</li>
    <li class="item selected">选项2</li>
    <li>选项3</li>
    <li>选项4</li>
    <li>选项5</li>
</ul>
<script type="text/javascript">
    $(function () {
        $(".item.selected").css("background-color", "#F5F5F5");
    });
</script>

2. 层次选择器

　　层次选择器通过DOM元素间的层次关系获取元素，主要的层次关系包括后代、父子、相邻、兄弟关系等，通过其中关系定位元素。

选择器功能返回值示例
ancestor descendant 根据祖先元素匹配所有的后代元素 元素集合
Array<element(s)>		 $("form input")
parent > child 在给定的父元素下匹配所有的子元素 元素集合 $("form > input")
prev + next 匹配所有紧接在 prev 元素后的 next 元素 元素集合 $("label + input")
prev ~ siblings 匹配 prev 元素之后的所有兄弟元素 元素集合 $("form ~ input")
next([expr]) 选取一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 元素集合 $("#first-item").next()
$("#first-item").next(".selected")
nextAll([expr]) 查找当前元素之后所有的同辈元素。 元素集合 $("#first-item").nextAll()
$("#first-item").nextAll(".selected")
nextUntil([expr | elelment][,filter]) 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。 元素集合 $("#first-item").nextUntil(".selected")
prev([expr]) 选取一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 元素集合 $("#last-item").prev()
$("#last-item").prev(".selected")
prevAll([expr]) 查找当前元素之前所有的同辈元素 元素集合 $("#last-item").prevAll()
$("#last-item").prevAll(".selected")
prevUntil([expr | elelment][,filter]) 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。 元素集合 $("#last-item").prevUntil(".selected")
siblings([expr]) 选取一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。 元素集合 $("#third-item").siblings()
$("#third-item").siblings(".selected")

　　示例：ancestor descendant

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
$("form input")

　　结果：

[ <input name="name" />, <input name="newsletter" /> ]

　　示例：parent > child

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
$("form > input")

　　结果：

[ <input name="name" /> ]

　　示例：next([expr])

<ul>
    <li id="first-item">选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li>选项4</li>
    <li>选项5</li>
</ul>
<script type="text/javascript">
    $(function () {
        $("#first-item").next().css("background-color", "#F5F5F5");
    });
</script>

<ul>
    <li id="first-item">选项1</li>
    <li class="selected">选项2</li>
    <li>选项3</li>
    <li>选项4</li>
    <li>选项5</li>
</ul>
<script type="text/javascript">
    $(function () {
        $("#first-item").next(".selected").css("background-color", "#F5F5F5");
    });
</script>

<ul>
    <li id="first-item">选项1</li>
    <li>选项2</li>
    <li class="selected">选项3</li>
    <li>选项4</li>
    <li>选项5</li>
</ul>
<script type="text/javascript">
    $(function () {
        $("#first-item").next(".selected").css("background-color", "#F5F5F5");
    });
</script>

　　由于next(".selected")方法只选取下一个元素，而下一个元素不满足class="selected"，$("#first-item").next(".selected")为null。

　　示例：nextAll([expr])

<ul>
    <li id="first-item">选项1</li>
    <li>选项2</li>
    <li class="selected">选项3</li>
    <li class="selected">选项4</li>
    <li>选项5</li>
</ul>
$("#first-item").nextAll(".selected").css("background-color", "#F5F5F5");

　　示例：nextUntil([expr | elelment][,filter])

<ul>
    <li id="first-item">选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li class="selected">选项4</li>
    <li>选项5</li>
</ul>
$("#first-item").nextUntil(".selected").css("background-color", "#F5F5F5");

　　示例：siblings([expr])

<ul>
    <li>选项1</li>
    <li>选项2</li>
    <li id="third-item">选项3</li>
    <li>选项4</li>
    <li>选项5</li>
</ul>
$("#third-item").siblings().css("background-color", "#F5F5F5");

<ul>
    <li class="selected">选项1</li>
    <li>选项2</li>
    <li id="third-item">选项3</li>
    <li class="selected">选项4</li>
    <li>选项5</li>
</ul>
$("#third-item").siblings(".selected").css("background-color", "#F5F5F5");

3. 索引过滤选择器

　　过滤选择器某类过滤规则进行元素的匹配，书写时都以冒号（:）开头。

选择器功能返回值示例
first()或:first 选取第一个元素 单个元素 $("li").first()
$("li:first")
last()或:last 选取最后一个元素 单个元素 $("li").last()
$("li:last")
:not(selector) 去除所有与给定选择器匹配的元素 元素集合 $("li:not(.selected)")
$("input:not(:checked)")
:even 选取所有索引值为偶数的元素，索引号从0开始。 元素集合 $("li:even")
:odd 选取所有索引值为奇数的元素，索引号从0开始。 元素集合 $("li:odd")
:eq(index) 选取指定索引值的元素，索引号从0开始。 单个元素 $("li:eq(1)")
:gt(index) 选取所有大于指定索引值的元素，索引号从0开始。 元素集合 $("li:gt(3)")
:lt(index) 选取所有小于指定索引值的元素，索引号从0开始。 元素集合 $("li:lt(3)")
:header 选取所有标题类型的元素，如：h1,h2,... 元素集合 $(":header")
:animated 选取所有正在执行动画效果的元素 元素集合 $(":animated")

　　示例：:not(selector)

<ul>
    <li class="selected">选项1</li>
    <li>选项2</li>
    <li>选项3</li>
    <li class="selected">选项4</li>
    <li>选项5</li>
</ul>
$("li:not(.selected)").css("background-color", "#F5F5F5");

4. 内容过滤选择器

　　内容过滤选择器根据元素的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

选择器功能返回值示例
:contains(text) 获取包含指定文本的元素 元素集合 $("div:contains('A')")
:empty 获取所有不包含子元素或者文本的空元素 元素集合 $("td:empty")
:has(selector) 获取包含有选择器所匹配的元素 元素集合 $("div:has(span)")
:parent 匹配含有子元素或者文本的元素 元素集合 $("td:parent")

5. 可见性过滤选择器

选择器功能返回值示例
:hidden 获取所有不可见的元素，或type="hidden"的元素 元素集合 $("tr:hidden")
:visible 获取所有可见元素 元素集合 $("tr:visible")

6. 属性过滤选择器

　　属性过滤选择器是根据元素的某个属性获取元素。

选择器功能返回值示例
[attribute] 选取包含指定属性的元素 元素集合 $("div[id]")
[attribute=value] 选取指定的属性等于某个特定值的元素 元素集合 $("input[type='text']")
[attribute!=value] 选取指定的属性不等于某个特定值的元素 元素集合 $("input[type!='text']")
[attribute^=value] 选取指定的属性以某个特定值开始的元素 元素集合 $("div[title^='A']")
[attribute$=value] 选取指定的属性以某个特定值结尾的元素 元素集合 $("div[title$='A']")
$("a[href$='.jpg']")
[attribute*=value] 选取指定的属性包含某个特定值的元素 元素集合 $("div[title*='A']")
[selector1][selector2][selectorN] 选取满足多个条件的复合属性的元素 元素集合 $("input[id][type='input']")

7. 子元素过滤选择器

选择器功能返回值示例
:nth-child(eq|even|odd|index) 获取每个元素下的特定位置元素，索引号从1开始。 元素集合 $("#container li:nth-child(2)")
$("li:nth-child(even)")
$("li:nth-child(odd)")
$("li:nth-child(3n)")
$("li:nth-child(3n+1)")
$("li:nth-child(3n+2)")
:nth-last-child(eq|even|odd|index) 获取每个元素下的特定位置元素，计数从最后一个元素开始到第一个。 元素集合 $("#container li:nth-last-child(2)")
$("li:nth-last-child(even)")
$("li:nth-last-child(odd)")
$("li:nth-last-child(3n)")
$("li:nth-last-child(3n+1)")
$("li:nth-last-child(3n+2)")
:first-child 获取每个父元素下的第一个子元素 元素集合 $("li:first-child")
:last-child 获取每个父元素下的最后一个子元素 元素集合 $("li:last-child")
:only-child 获取每个父元素下的仅有一个子元素 元素集合 $("li:only-child")

8. 表单对象属性过滤选择器

　　表单对象属性选择器通过表单对象属性特征选取该类元素。

选择器功能返回值示例
:enabled 选取表单中所有属性为可用的元素 元素集合 $("input:enabled")
:disabled 选取表单中所有属性为不可用的元素 元素集合 $("input:disabled")
:checked 选取表单中所有被选中的元素 元素集合 $("input:checked")
:selected 选取表单中所有被选中option的元素 元素集合 $("select option:selected")

　　示例：:selected

$("select option:selected").text();

9. 表单选择器

选择器功能返回值示例
:input 选取所有input、textarea、select 元素集合 $(":input")
:text 选取所有 type="text" 的input元素 元素集合 $(":text")
:password 选取所有 type="password" 的 input 元素 元素集合 $(":password")
:radio 选取所有type="radio" 的 input 元素 元素集合 $(":radio")
:checkbox 选取所有 type="checkbox" 的 input 元素 元素集合 $(":checkbox")
:submit 选取所有 type="submit" 的 input 元素 元素集合 $(":submit")
:image 选取所有 type="image" 的 input 元素 元素集合 $(":image")
:reset 选取所有 type="reset" 的 input 元素 元素集合 $(":reset")
:button 选取所有 type="button" 的 input 元素 元素集合 $(":button")
:file 选取所有 type="file" 的 input 元素 元素集合 $(":file")
标签
jquery name选择器
last
jquery
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!