JQ基本選擇器

jq如何設置樣式

css(name,value)
name:樣式名 value:樣式值

id選擇器 ('#id')

$('#three').css('backgroundColor', 'blue')

class選擇器 ('.class')

$('.three').css('backgroundColor', 'blue')

// 交集選擇器:兩個選擇器聯再一起
$('li.gg').css('color', 'purple')
// 並集選擇器:利用,一次改多個
$('#eight,.nine').css('backgroundColor', 'red')

<li id="eight">8</li>
<li class="nine">9</li>
        
<li class="gg">11</li>
<li class="gg">12</li>

後代選擇器

E F ,利用空白鍵區隔兩個元素，表示在 E 元素內的 F 元素才會套用。

$('#father p').css('color', 'green') // 11,22,2.5,3.5

子選擇器

E > F,利用>區隔兩個元素，表示在有父子關係的元素才會套用。與後代不同的是 E 及 F 元素之間不能再插入其它的元素，否則就不是父子關係了。

$('#father > p').css('color', 'red') //2.5,3.5

    <div id="father">
        <div>
            <p>11</p>
            <p>22</p>
        </div>
        <div>2</div>

        <p>2.5</p>

        <div>3</div>

        <p>3.5</p>

    </div>

過濾選擇器

    // 下標為偶數,過濾
    $('li:even').css('backgroundColor', 'red')
    // 下標為奇數,過濾
    $('li:odd').css('backgroundColor', 'pink')
    // 首個,過濾
    $('li:first').css('fontSize', '32px')
    // 最後一個,過濾
    $('li:last').css('fontSize', '10px')
    // 下標等於幾,過濾
    $('li:eq(3)').css('color', 'gray')
    // 大於下標為幾(不包括自己),過濾
    $('li:gt(8)').css('color', 'yellow')
    // 小於下標為幾(不包括自己),過濾
    $('li:lt(1)').css('color', 'yellow')

篩選選擇器

    //找指定子元素
    $(this).children("ul")
    //相當於後代選擇器
    $(this).find()
    //找指定父元素
    $(this).parent()
    //找指定同輩元素，不包括自己
    $(this).siblings()
    //下一個同輩元素
    $(this).next()
    //上一個同輩元素
    $(this).prev()
    //獲取指定下標
    $(this).eq()
    

鏈式編程：

在jQuery里面，方法可以一直呼叫下去。

// 指向對應tag=>同輩元素=>下滑=>當前標籤父元素=>除了自己外的同輩元素=>同輩元素下的子元素div=>上滑
                $(this).siblings().slideDown(200).parent().siblings().children('div').slideUp(200);
//也可以這樣寫 
$(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);

index詳解:

index()：返回的當前元素在所有同輩元素裡面的下標。

    $(function () {
        // 如果將目標設為a，將會錯誤
        $('a').click(function () {
            console.log($(this).index()); //只會獲取0
        });
        // 因為index會返回當前元素在所有同輩元素中的下標 但a沒有同輩元素只有自己
        // 所以自然獲取不到對應下標
        $('li').click(function () {
            console.log($(this).index()); //點取 獲取對應下標
        });
    });

<ul>
    <li><a href="#">連接1</a></li>
    <li><a href="#">連接2</a></li>
    <li><a href="#">連接3</a></li>
    <li><a href="#">連接4</a></li>
    <li><a href="#">連接5</a></li>
    <li><a href="#">連接6</a></li>
    <li><a href="#">連接7</a></li>
    <li><a href="#">連接8</a></li>
    <li><a href="#">連接9</a></li>
    <li><a href="#">連接10</a></li>
</ul>