jQuery选择器全集详解(2)

<table cellpadding="0" cellspacing="0">
    <tbody>
        <tr><td>A</td></tr>
        <tr><td>B</td></tr>
        <tr><td>C</td></tr>
        <tr><td>D</td></tr>
    </tbody>
</table>

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

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

更改第三行的背景色，在上面的代码中C的背景会变色。

——1.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>

——1.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>

2. 内容过滤选择器

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

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

下面的代码，第一个dd会变色

<dl>
    <dt>技术</dt>
    <dd>jQuery, .NET, CLR</dd>
    <dt>SEO</dt>
    <dd>关键字排名</dd>
    <dt>其他</dt>
    <dd></dd>
</dl>

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

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

上面第三个dd会显示"没有内容"文本

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

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

即使span不是div的直系子元素，也会生效

<div>
    <h2>
        A        <span>B</span>
    </h2>
</div>