jQuery - 选择器使用详解（附样例）

2016-10-21 发布：hangge 阅读：947

jQuery 选择器使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力。而不需要像以前那样，使用 document 对象的 getElementById()，getElementsByName() 和 getElementsByTagName() 方法访问 DOCUMENT 中某个标签。本文对 jQuery 中的各种选择器以及使用方法做个总结。

一、基本选择器

1，id选择器

$('#first') //所有id="first"的元素

2，class选择器

$('.normal') //所有class="normal"的元素

3，element选择器（html元素选择器）

$('input') //所有input元素

4，*选择器

遍历所有元素，这个通常结合上下文来搜索匹配。

$('form *') //遍历form下的所有元素

5，并列选择器（多选择器）

$('input, #first, .normal') //所有的input元素、或id="first"的元素、或class="normal"元素

二、层次选择器

1，parent > child（直系子元素）

这个的只匹配 parent 下第一层的子元素。

$('#list > div') //id="list"元素里的第一代div元素

2，ancestor descendant（所有子元素）

$('#list div')  //id="list"元素里的所有的div元素

3，prev + next（下一个兄弟元素）
等同于 next() 方法

$('.item + div') //class="item"元素的下一个div兄弟元素
$('.item').next('div') //同上等效

4， prev ~ siblings（后面的所有的兄弟元素）
等同于 nextAll() 方法

$('.item ~ div') //class="item"元素之后的所有div兄弟元素
$('.item').nextAll('div') //同上等效

三、基本过滤选择器
1，first 和 :last（取得第一个元素或最后一个元素）

$('span:first') //第一个span元素
$('span:last') //最后一个span元素

2，:not（取非元素）

$('div:not(.wrap)') //class不为wrap的div元素

3，:even 和 :odd（取偶数索引或奇数索引元素）
索引从 0 开始，even 表示偶数，odd 表示奇数。

$('tr:even').css('background', '#FFFFFF'); // 设置偶数行颜色
$('tr:odd').css('background', '#C0C0C0'); // 设置奇数行颜色

4，eq(x)（取指定索引的元素）

$('tr:eq(2)').css('background', '#00FF00'); //将第3行背景色改成绿色

5，:gt(x) 和 :lt(x)（取大于x索引或小于x索引的元素）

$('tr:lt(2)').css('background', '#0000FF'); //第3行之前的行背景色改成蓝色
$('tr:gt(2)').css('background', '#FF0000'); //第3行之后的行背景色改成红色

6，:header（取 H1~H6 标题元素）

$(':header') //所有的<h1><h2><h3><h4><h5><h6>元素

四、内容过滤选择器
1，:contains(text)（取包含 text 文本的元素）

$('span:contains("hangge.com")') //所有里面包含“hangge.com”文本的span元素。

2，:empty（取不包含子元素或文本为空的元素）

$('div:empty') //所有没有子元素，或者内容文本为空的div元素

3，:parent（取包含子元素或文本的元素）
这个同上面的 :empty 正好相反。

$('div:parent') //所有拥有子元素，或者内容文本不为空的div元素

4，:has(selector)（具有指定子元素的元素）
这里的子元素不仅仅是直系子元素，而是所有的子元素。

$('li:a') //所有包含a标签的li元素

五、可见性过滤选择器
1，:hidden（取不可见的元素）
这里的不可见元素指的是 display:none 或 <input type="hidden" /> 的元素。即那些“隐藏的”并且不占空间的元素，像 visibility:hidden 或 opactity:0 的元素占据了空间，会被排除在外。

$('div:hidden') //所有不可见的div元素

2，:visible（取可见的元素）

$('div:visible') //所有可见的div元素

六、属性过滤选择器
1，[attribute]（取拥有 attribute 属性的元素）

$('a[title]') //所有拥有title属性的a标签

2，[attribute = value] 和 [attribute != value]（取 attribute 属性值等于 value 或不等于 value 的元素）

$('a[title = "hangge.com"]') //所有title属性是“hangge.com”的a标签
$('a[title != "hangge.com"]') //所有title属性不是“hangge.com”的a标签

$('input[name != "username"]') //所有name属性是“username”的input标签

3，[attribute ^= value], [attribute $= value] 和 [attribute *= value]（attribute 属性值以 value 开始，或以 value 结束，或包含 value 值）

^$ 符号和正则表达式的开始结束符号表示的含义是一致的，* 模糊匹配，类似于 sql 中的 like '%str%'。

$('a[title^="hangge"]') //所有title以“hangge”开头的a标签
$('a[title$="hangge"]') //所有title以“hangge”结尾的a标签
$('a[title*="hangge"]') //所有title中包含“hangge”的a标签

4，[selector1][selector2]（复合型属性过滤器，同时满足多个条件）

$('a[title^="hangge"][class="weblink"]') //所有title以“hangge”开头，且class="weblink"的a标签

七、子元素过滤选择器
1，:first-child 和 :last-child（获取第一个或最后一个子元素合并后的集合）
注意 :fisrst 和 :last 返回的都是单个元素，而 :first-child 和 :last-child 返回的都是集合元素。
比如 div:first 返回的是整个 DOM 文档中第一个 div 元素，而 div:first-child 是返回所有每个 div 元素下的第一个元素合并后的集合。

<html>
  <head>
    <title>hangge.com</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
      $(document).ready(function(){
        $('div:first-child').each(function() {
            alert($(this).html());
            //alert会弹三次，分别是：
            //<div id="div2"><div id="div3"></div></div>
            //<div id="div3"></div>
            //空
        });
      });
    </script>
  </head>
  <body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
  </body>
</html>

2，:only-child（表示当某个元素有且仅有一个子元素）
上面的样例改成 :only-child，alert 同样会弹三次。

$('div:only-child').each(function() {
    alert($(this).html());
    //alert会弹三次，分别是：
    //<div id="div2"><div id="div3"></div></div>
    //<div id="div3"></div>
    //空
});

3，:nth-child（获取第n个子元素）
注意这里的 n 是从 1 开始的。上面的样例改成 :nth-child(1)，alert 同样会弹三次。

$('div:nth-child(1)').each(function() {
    alert($(this).html());
    //alert会弹三次，分别是：
    //<div id="div2"><div id="div3"></div></div>
    //<div id="div3"></div>
    //空
});

除了 :nth-child(x)，还有 :nth-child(even) 和 :nth-child(odd)。

$('tr:nth-child(even)').css('background', '#FF0000');// 偶数行背景红色
$('tr:nth-child(odd)').css('background', '#0000FF'); // 奇数行背景蓝色

八、表单对象属性过滤选择器
1，:enabled 和 :disabled（取可用或不可用元素）
其匹配范围包括 input, select, textarea。

$(':enabled')  //所有可用的表单组件
$(':disabled') //所有不可用的表单组件

2，:checked（获取选中的单选框或复选框元素）

$(':checked') //所有选中的单选框、复选框

3，:selected（取下拉列表被选中的元素）

$(':selected').val();  //获取下拉列表选中项的值

九、表单选择器
1，:input（获取 input、textarea、select、button 元素）

$(':input') //获取所有的input元素

2，:text（获取单行文本框元素）

$(':text') //获取所有的单行文本输入框
$('input[type=text]')  //上面等效于这个

3，:password（获取密码框元素）

$(':password') //获取所有的密码输入框
$('input[type=password]')  //上面等效于这个

4，:radio（获取单选框元素）

$(':radio') //获取所有的单选框
$('input[type=radio]')  //上面等效于这个

5，:checkbox（获取所有的复选框）

6，:image（获取所有的图像按钮）

7，:reset（获取所有的重置按钮）

8，:button（获取所有的按钮）

9，:file（获取所有的上传控件）

10，:hidden（获取所有的不可见元素）