jQuery选择器 之详述

 jQuery选择器

一. 单词小计

  Pervious 上一页sibling  同级first  第一last  最后not  不

  Even  偶数    odd  奇数 header  页眉

一．jQuery选择器概述

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此，如果能熟练的使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器，可以非常便捷的找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。

jQuery选择器与CSS选择器的不同之处就在于，jQuery选择器获取元素后，为该元素添加的是行为，是页面交互变得更加丰富多彩。

 

二．通过CSS选择器获取元素

jQuery支持大多数CSS选择器，其中最常用的有CSS的基本选择器，层次选择器和属性选择器，在jQuery中，与他们对应的分别是jQuery基本选择器，层次选择器和属性选择器，他们的构成规则与CSS选择器完全相同。

一．基本选择器

基本选择器主要包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。
1. id选择器（指定id元素）
将id="one"的元素背景色设置为黑色。（id选择器返单个元素）

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

2. class选择器（遍历css类元素）
将class="cube"的元素背景色设为黑色

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

3. 标签选择器（遍历html元素）
将p元素的文字大小设置为12px

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

4. 全局（*） 选择器（遍历所有元素）

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

5. 并集选择器

$(document).ready(function () {
        // 将p元素和div元素的颜色设为红色
        $('p, div').css('color', '#FF0000');

}

6. 交集选择器

$(document).ready(function () {

      // 将所有拥有class为tittle的h2元素颜色设为红色              $(‘h2.tittle’).css('color', '#FF0000')
}

二、 层次选择器

jQuery中有4种层次选择器，他们分别是后代选择器，子选择器，相邻元素选择器和同辈元素选择器，其中最常用的是后代选择器和子选择器，他们和css中的后代选择器的语法及选取范围均相同。

 

子选择器的范围要比后代选择器的选取范围小

1.子选择器 parent > child（直系子元素）

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

下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。

<div>
        <span>123</span>
        <p>
            <span>456</span>
        </p>
</div>

2.相邻元素选择器 prev + next（下一个兄弟元素，等同于next()方法）

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

下面的代码，只有123和789会变色，而456不是相邻，所以不会变色

<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>

3. 同辈元素选择器prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

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

下面的代码，G2和G4会变色

<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

4. 后代选择器

$(function()){

// 选取id为myid下的所有<span>元素

$(‘#myid span’).css('color', '#FF0000');

};

下面的代码000和222都会变色

<div id="myid">

   <h1>111</h1>

   <p><span>222</span></p>

   <span>000</span>

</div>

三．属性选择器

1. [attribute]用法 
定义：匹配包含给定属性的元素,判断拥有某个属性的元素 

$("div[id]").addClass("highlight"); 

//查找所有含有ID属性的div元素

2. [attribute=value]用法 
定义：匹配给定的属性是某个特定值的元素，判断某个元素的属性值相等 

$("input[name='basketball']").attr("checked",true); 

  //name属性值为basketball的input元素选中 

3. [attribute!=value]用法 
定义：匹配给定的属性是不包含某个特定值的元素，判断某个元素的属性值不等 

$("input[name!='basketball']").attr("checked",true); 

  //name属性值不为basketball的input元素选中 

  //此选择器等价于:not([attr=value])

  要匹配含有特定属性但不等于特定值的元素，请使用

[attr]:not([attr=value])

  $("input:not(input[name='basketball'])").attr("checked",true);

4. [attribute^=value]用法 
定义：匹配给定的属性是以某些值开始的元素，判断某个属性值以value为开始值 

$("input[name^='foot']").attr("checked",true);  

//查找所有 name 以 'foot' 开始的 input 元素

5. [attribute$=value]用法 

定义：匹配给定的属性是以某些值结尾的元素，判断某个属性值以value为结尾值 

$("input[name$='ball']").attr("checked",true); 

//查找所有 name 以 'ball' 结尾的 input 元素

6. [attribute*=value]用法 
定义：匹配给定的属性是以包含某些值的元素，判断某个属性值包含value 

$("input[name*='sket']").attr("checked",true); 

 //查找所有 name 包含 'sket' 的 input 元素

7. [selector1][selector2][selectorN]用法 
定义：复合属性选择器，需要同时满足多个条件时使用，多个属性值去交集 

$("input[id][name$='ball']").attr("checked",true);  

//找到所有含有 id属性，并且它的 name属性是以 ball结尾的input 元素

三．通过条件过滤选取元素

过滤选择器主要通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类语法相同，即选择器都以一个冒号（：）开头，冒号前是进行过滤的元素。

按照不同的过滤条件，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。

一．基本过滤选择器

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

$(document).ready(function () {
            $('span:first').css('color', '#FF0000');
            $('span:last').css('color', '#FF0000');
        });下面的代码，G1（first元素）和G3（last元素）会变色

<span>G1</span>
<span>G2</span>
<span>G3</span>

2 :not（取非元素）

$(document).ready(function () {
            $('div:not(.wrap)').css('color', '#FF0000');
        });下面的代码，G1会变色

<div>G1</div>
<div class="wrap">G2</div>
但是，请注意下面的代码：

<div>
    G1
    <div class="wrap">G2</div>
</div>
当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

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

$(document).ready(function () {
            $('li:even').css('background', '#EEE'); // 偶数行颜色
            $('li:odd').css('background', '#DADADA'); // 奇数行颜色
        });A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA

 <ul>

        <li>A</li>

        <li>B</li>

        <li>C</li>

        <li>D</li>

    </ul>
4 :eq(x)                   （取指定索引的元素）                       

$(document).ready(function () {
            $('li:eq(2)').css('background', '#FF0000');
        });更改第三行的背景色，在上面的代码中C的背景会变色。

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

$(document).ready(function () {
            $('ul li:gt(2)').css('color', '#FF0000');
            $('ul li:lt(2)').css('color', '#0000FF');
        });L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色
<ul>
    <li>L1</li>
    <li>L2</li>
    <li>L3</li>
    <li>L4</li>
    <li>L5</li>
</ul>

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

$(document).ready(function () {
            $(':header').css('background', '#EFEFEF');
        });下面的代码，H1~H6的背景色都会变

 

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

7. :focus  (当前获取焦点的元素)

$(document).ready(function () {
            $(':focus').css('background', '#000');
        });改变当前获取焦点的元素的背景颜色

二．可见性过滤选择器

在jQuery中，通过元素显示状态选取元素的选择器称为可见性过滤选择器

 

1 :hidden（取隐藏(不可见)的元素）

 

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

   <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 src="js/jquery-1.12.3.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>

先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。

2 :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>

我有背景色

</div>

代码中，最后一个div会有背景色

四．jQuery选择器注意事项

一．选择器中含有特殊符号的注意事项

在W3C规范中，规定属性值中不能含有某些特殊字符，但在实际开发中，可能会遇到表达式中有“#”和“.”等特殊字符情况，如果按照普通方式处理就会出错。课用转义符转义解决。

    <div id="id#a">aa</div>

<div id="id[2]">cc</div>

按照普通方式获取，如

$(‘#id#a’);

$(‘#id[2]’);

不能正确获取元素，正确写法如下

$(‘#id\\#a’);

$(‘#id\\[2\\]’);

二．选择器中含有空格的注意事项

选择器中空格是不容忽视的，多一个空格或少一个空格，可能会得到截然不同的结果。

 

 

 

 

 jQuery选择器

一. 单词小计

  Pervious 上一页sibling  同级first  第一last  最后not  不

  Even  偶数    odd  奇数 header  页眉

一．jQuery选择器概述

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此，如果能熟练的使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器，可以非常便捷的找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。

jQuery选择器与CSS选择器的不同之处就在于，jQuery选择器获取元素后，为该元素添加的是行为，是页面交互变得更加丰富多彩。

二．通过CSS选择器获取元素

jQuery支持大多数CSS选择器，其中最常用的有CSS的基本选择器，层次选择器和属性选择器，在jQuery中，与他们对应的分别是jQuery基本选择器，层次选择器和属性选择器，他们的构成规则与CSS选择器完全相同。

一．基本选择器

基本选择器主要包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。
1. id选择器（指定id元素）
将id="one"的元素背景色设置为黑色。（id选择器返单个元素）

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

2. class选择器（遍历css类元素）
将class="cube"的元素背景色设为黑色
$(document).ready(function () {
        $('.cube').css('background', '#000');
});

3. 标签选择器（遍历html元素）
将p元素的文字大小设置为12px
$(document).ready(function () {
        $('p').css('font-size', '12px');
});

4. 全局（*） 选择器（遍历所有元素）
$(document).ready(function () {
        // 遍历所有元素，将字体颜色设置为红色
        $('*').css('color', '#FF0000');
});

5. 并集选择器
$(document).ready(function () {
        // 将p元素和div元素的颜色设为红色
        $('p, div').css('color', '#FF0000');

}
6. 交集选择器
$(document).ready(function () {

      // 将所有拥有class为tittle的h2元素颜色设为红色        $(‘h2.tittle’).css('color', '#FF0000')
}

二、 层次选择器

jQuery中有4种层次选择器，他们分别是后代选择器，子选择器，相邻元素选择器和同辈元素选择器，其中最常用的是后代选择器和子选择器，他们和css中的后代选择器的语法及选取范围均相同。

 

子选择器的范围要比后代选择器的选取范围小

1.子选择器 parent > child（直系子元素）

$(document).ready(function () {
        // 选取div下的第一代span元素，将字体颜色设为红色
        $('div > span').css('color', '#FF0000');
    });下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。

<div>
        <span>123</span>
        <p>
            <span>456</span>
        </p>
</div>

2.相邻元素选择器 prev + next（下一个兄弟元素，等同于next()方法）

$(document).ready(function () {
    // 选取class为item的下一个div兄弟元素
    $('.item + div').css('color', '#FF0000');
    // 等价代码
    //$('.item').next('div').css('color', '#FF0000');
});下面的代码，只有123和789会变色，而456不是相邻，所以不会变色
<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>

3. 同辈元素选择器prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

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

<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

4. 后代选择器

$(function()){

// 选取id为myid下的所有<span>元素

$(‘#myid span’).css('color', '#FF0000');

};下面的代码000和222都会变色

<div id="myid">

   <h1>111</h1>

   <p><span>222</span></p>

   <span>000</span>

</div>

三．属性选择器

1. [attribute]用法 
定义：匹配包含给定属性的元素,判断拥有某个属性的元素 
$("div[id]").addClass("highlight"); 

//查找所有含有ID属性的div元素

2. [attribute=value]用法 
定义：匹配给定的属性是某个特定值的元素，判断某个元素的属性值相等 

$("input[name='basketball']").attr("checked",true); 

  //name属性值为basketball的input元素选中 

3. [attribute!=value]用法 
定义：匹配给定的属性是不包含某个特定值的元素，判断某个元素的属性值不等 

 

$("input[name!='basketball']").attr("checked",true); 

  //name属性值不为basketball的input元素选中 

  //此选择器等价于:not([attr=value])

  要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])

  $("input:not(input[name='basketball'])").attr("checked",true);

4. [attribute^=value]用法 
定义：匹配给定的属性是以某些值开始的元素，判断某个属性值以value为开始值 

 

$("input[name^='foot']").attr("checked",true);  

//查找所有 name 以 'foot' 开始的 input 元素

5. [attribute$=value]用法 

定义：匹配给定的属性是以某些值结尾的元素，判断某个属性值以value为结尾值 

$("input[name$='ball']").attr("checked",true); 

//查找所有 name 以 'ball' 结尾的 input 元素

6. [attribute*=value]用法 
定义：匹配给定的属性是以包含某些值的元素，判断某个属性值包含value 

$("input[name*='sket']").attr("checked",true); 

 //查找所有 name 包含 'sket' 的 input 元素

7. [selector1][selector2][selectorN]用法 
定义：复合属性选择器，需要同时满足多个条件时使用，多个属性值去交集 

$("input[id][name$='ball']").attr("checked",true);  

//找到所有含有 id属性，并且它的 name属性是以 ball结尾的input 元素

三．通过条件过滤选取元素

过滤选择器主要通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类语法相同，即选择器都以一个冒号（：）开头，冒号前是进行过滤的元素。

按照不同的过滤条件，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。

一．基本过滤选择器

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

$(document).ready(function () {
            $('span:first').css('color', '#FF0000');
            $('span:last').css('color', '#FF0000');
        });下面的代码，G1（first元素）和G3（last元素）会变色

<span>G1</span>
<span>G2</span>
<span>G3</span>

2 :not（取非元素）

$(document).ready(function () {
            $('div:not(.wrap)').css('color', '#FF0000');
        });下面的代码，G1会变色

<div>G1</div>
<div class="wrap">G2</div>
但是，请注意下面的代码：

<div>
    G1
    <div class="wrap">G2</div>
</div>
当G1所在div和G2所在div是父子关系时，G1和G2都会变色。

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

$(document).ready(function () {
            $('li:even').css('background', '#EEE'); // 偶数行颜色
            $('li:odd').css('background', '#DADADA'); // 奇数行颜色
        });A、C行颜色#EEE（第一行的索引为0），B、D行颜色#DADADA

 <ul>

        <li>A</li>

        <li>B</li>

        <li>C</li>

        <li>D</li>

    </ul>
4 :eq(x)                   （取指定索引的元素）                       

$(document).ready(function () {
            $('li:eq(2)').css('background', '#FF0000');
        });更改第三行的背景色，在上面的代码中C的背景会变色。

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

$(document).ready(function () {
            $('ul li:gt(2)').css('color', '#FF0000');
            $('ul li:lt(2)').css('color', '#0000FF');
        });L4和L5会是红色，L1和L2会是蓝色，L3是默认颜色
<ul>
    <li>L1</li>
    <li>L2</li>
    <li>L3</li>
    <li>L4</li>
    <li>L5</li>
</ul>

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

$(document).ready(function () {
            $(':header').css('background', '#EFEFEF');
        });下面的代码，H1~H6的背景色都会变

 

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

7. :focus  (当前获取焦点的元素)

$(document).ready(function () {
            $(':focus').css('background', '#000');
        });改变当前获取焦点的元素的背景颜色

二．可见性过滤选择器

在jQuery中，通过元素显示状态选取元素的选择器称为可见性过滤选择器

 

1 :hidden（取隐藏(不可见)的元素）

 

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

   <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 src="js/jquery-1.12.3.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>

先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。

2 :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>

我有背景色

</div>

代码中，最后一个div会有背景色

四．jQuery选择器注意事项

一．选择器中含有特殊符号的注意事项

在W3C规范中，规定属性值中不能含有某些特殊字符，但在实际开发中，可能会遇到表达式中有“#”和“.”等特殊字符情况，如果按照普通方式处理就会出错。课用转义符转义解决。

    <div id="id#a">aa</div>

<div id="id[2]">cc</div>

按照普通方式获取，如

$(‘#id#a’);

$(‘#id[2]’);

不能正确获取元素，正确写法如下

$(‘#id\\#a’);

$(‘#id\\[2\\]’);

二．选择器中含有空格的注意事项

选择器中空格是不容忽视的，多一个空格或少一个空格，可能会得到截然不同的结果。