一、基本選擇器

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. element選擇器（遍歷html元素）

將p元素的文字大小設置為12px

$(document).ready(function () {

        $('p').css('font-size', '12px');

    });

4. * 選擇器（遍歷所有元素）

$(document).ready(function () {

        // 遍歷form下的所有元素，將字體顏色設置為紅色

        $('form *').css('color', '#FF0000');

    });

5. 并列選擇器

$(document).ready(function () {

        // 將p元素和div元素的margin設為0

        $('p, div').css('margin', '0');

    });

 

 

二、 層次選擇器

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會變色

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