jquery选择器详解

javascript

id选择器（指定id元素）

将id=”one”的元素背景色设置为黑色。（id选择器返单个元素）

$(document).ready(function () {
    $('#one').css('background', '#000');
});

class选择器（遍历css类元素）

将class=”cube”的元素背景色设为黑色

$(document).ready(function () {
    $('.cube').css('background', '#000');
});

element选择器（遍历html元素）

将p元素的文字大小设置为12px

$(document).ready(function () {
    $('p').css('font-size', '12px');
});

* 选择器（遍历所有元素）

$(document).ready(function () {
    // 遍历form下的所有元素，将字体颜色设置为红色
    $('form *').css('color', '#FF0000');
});

并列选择器

$(document).ready(function () {
    // 将p元素和div元素的margin设为0
    $('p, div').css('margin', '0');
});

层次选择器

parent > child（直系子元素）

$(document).ready(function () {
    // 选取div下的第一代span元素，将字体颜色设为红色
    $('div > span').css('color', '#FF0000');
});

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

$(document).ready(function () {
    // 选取class为item的下一个div兄弟元素
    $('.item + div').css('color', '#FF0000');
    // 等价代码
    //$('.item').next('div').css('color', '#FF0000');
});

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

$(document).ready(function () {
    // 选取class为inside之后的所有div兄弟元素
    $('.inside ~ div').css('color', '#FF0000');
    // 等价代码
    //$('.inside').nextAll('div').css('color', '#FF0000');
});

过滤选择器

基本过滤选择器

:first和:last（取第一个元素或最后一个元素）

$(document).ready(function () {
    $('span:first').css('color', '#FF0000');
    $('span:last').css('color', '#FF0000');
});

:not（取非元素）

$(document).ready(function () {
    $('div:not(.wrap)').css('color', '#FF0000');
});

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

$(document).ready(function () {
    $('tr:even').css('background', '#EEE'); // 偶数行颜色
    $('tr:odd').css('background', '#DADADA'); // 奇数行颜色
});

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

$(document).ready(function () {
    $('ul li:gt(2)').css('color', '#FF0000');
    $('ul li:lt(2)').css('color', '#0000FF');
});

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

$(document).ready(function () {
    $('tr:eq(2)').css('background', '#FF0000');
});

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

$(document).ready(function () {
    $(':header').css('background', '#EFEFEF');
});

内容过滤选择器

:contains(text)（取包含text文本的元素）

$(document).ready(function () {
    // dd元素中包含"jQuery"文本的会变色
    $('dd:contains("jQuery")').css('color', '#FF0000');
});

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

$(document).ready(function () {
    $('dd:empty').html('没有内容');
});

:has(selector)（取选择器匹配的元素）

$(document).ready(function () {
    // 为包含span元素的div添加边框
    $('div:has(span)').css('border', '1px solid #000');
});

:parent（取包含子元素或文本的元素）

$(document).ready(function () {
    $('ol li:parent').css('border', '1px solid #000');
});

可见性过滤选择器

:hidden（取不可见的元素）

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
    div
    {
        margin: 10px;
        width: 200px;
        height: 40px;
        border: 1px solid #FF0000;
        display:block;
    }
    .hid-1
    {
        display: none;
    }
    .hid-2
    {
        visibility: hidden;
    }
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('div:hidden').show(500);
        alert($('input:hidden').val());
    });
</script>
</head>
<body>
    <div class="hid-1">display: none</div>
    <div class="hid-2">visibility: hidden</div>
    <input type="hidden" value="hello"/>
</body>
</html>

:visible（取可见的元素）

<script type="text/javascript">
$(document).ready(function() {
    $('div:visible').css('background', '#EEADBB');
});
</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>
    jQuery选择器大全
</div>

属性过滤选择器

[attribute]（取拥有attribute属性的元素）

<script type="text/javascript">
    $(document).ready(function() {
        $('a[title]').css('text-decoration', 'none');
   });
</script>

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

<script type="text/javascript">
   $(document).ready(function() {
       $('a[class=item]').css('color', '#FF99CC');
       $('a[class!=item]').css('color', '#FF6600');
   });
</script>

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

<script type="text/javascript">
    // 识别大小写，输入字符串时可以输入引号，[title^=jQuery]和[title^="jQuery"]是一样的
    $('a[title^=jQuery]').css('font-weight', 'bold');
    $('a[title$=jQuery]').css('font-size', '24px');
    $('a[title*=jQuery]').css('text-decoration', 'line-through');
</script>

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

<script type="text/javascript">
    $(document).ready(function() {
        $('a[title^=jQuery][class=item]').hide();
    });
</script>

子元素过滤选择器

:first-child和:last-child

:first-child表示第一个子元素，:last-child表示最后一个子元素。

需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。
这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？请看下面的代码：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var len1 = $('div:first-child').length;
    var len2 = $('div:last-child').length;
 });
</script>
</head>
<body>
<div>
    <div>
        <div></div>
    </div>
</div>
</body>
</html>

也许你觉得这个答案，是不是太简单了？len1 = 2, len2 = 2。但实际确并不是，它们俩都等于3。
把上面的代码稍微修改一下： 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var len1 = $('div:first-child').length;
    var len2 = $('div:last-child').length;
    $('div:first-child').each(function() {
        alert($(this).html());
    });
 });
</script>
</head>
<body>
<div>123
    <div>456
        <div></div>
    </div>
</div>
</body>
</html>

:only-child

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('div:only-child').css('border', '1px solid #FF0000').css('width','200px');
    });
</script>
</head>
<body>
<div>123
    <div>456
        <div></div>
    </div>
</div>
</body>
</html>

####

本文标题:jquery选择器详解

文章作者:kongwenqiang

发布时间:2016-10-17, 10:58:40

最后更新:2016-10-17, 11:22:41

原始链接:https://leokongwq.github.io/2016/10/17/jquery-selector.html

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. id选择器（指定id元素）
  2. 2. class选择器（遍历css类元素）
  3. 3. element选择器（遍历html元素）
  4. 4. * 选择器（遍历所有元素）
  5. 5. 并列选择器
  • 层次选择器
    1. 1. parent > child（直系子元素）
    2. 2. prev + next（下一个兄弟元素，等同于next()方法）
    3. 3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
  • 过滤选择器
    1. 1. 基本过滤选择器
      1. 1.1. :first和:last（取第一个元素或最后一个元素）
      2. 1.2. :not（取非元素）
      3. 1.3. :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）
      4. 1.4. :gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
      5. 1.5. :eq(x) （取指定索引的元素）
      6. 1.6. :header（取H1~H6标题元素）
    2. 2. 内容过滤选择器
      1. 2.1. :contains(text)（取包含text文本的元素）
      2. 2.2. :empty（取不包含子元素或文本为空的元素）
      3. 2.3. :has(selector)（取选择器匹配的元素）
      4. 2.4. :parent（取包含子元素或文本的元素）
    3. 3. 可见性过滤选择器
      1. 3.1. :hidden（取不可见的元素）
      2. 3.2. :visible（取可见的元素）
    4. 4. 属性过滤选择器
      1. 4.1. [attribute]（取拥有attribute属性的元素）
      2. 4.2. [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
      3. 4.3. [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）
      4. 4.4. [selector1][selector2]（复合型属性过滤器，同时满足多个条件）
    5. 5. 子元素过滤选择器
      1. 5.1. :first-child和:last-child
      2. 5.2. :only-child
    • |