jquery選擇器以及選擇集過濾和轉移

1. jQuery選擇器的介紹

jquery選擇器就是快速選擇标簽元素，擷取标簽的，選擇規則和css樣式一樣。

2. jQuery選擇器的種類

1. 标簽選擇器
2. 類選擇器
3. id選擇器
4. 層級選擇器
5. 屬性選擇器

示例代碼:

$('#myId') //選擇id為myId的标簽
$('.myClass') // 選擇class為myClass的标簽
$('li') //選擇所有的li标簽
$('#ul1 li span') //選擇id為ul1标簽下的所有li标簽下的span标簽
$('input[name=first]') // 選擇name屬性等于first的input标簽      

說明:

可以使用length屬性來判斷标簽是否選擇成功, 如果length大于0表示選擇成功，否則選擇失敗。

$(function(){
    result = $("div").length;
    alert(result);
});      

3. 小結

• jQuery選擇器就是選擇标簽的
• 标簽選擇器是根據标簽名來選擇标簽
• 類選擇器是根據類名來選擇标簽
• id選擇器是根據id來選擇标簽
• 層級選擇器是根據層級關系來選擇标簽
• 屬性選擇器是根據屬性名來選擇标簽

1. 選擇集過濾的介紹

選擇集過濾就是在選擇标簽的集合裡面過濾自己需要的标簽

2. 選擇集過濾的操作

• has(選擇器名稱)方法，表示選取包含指定選擇器的标簽
• eq(索引)方法，表示選取指定索引的标簽

has方法的示例代碼:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  設定樣式
        $div.css({"background":"red"});
    });
</script>

<div>
    這是第一個div
    <input type="text" id="mytext">
</div>

<div>
    這是第二個div
    <input type="text">
    <input type="button">
</div>      

eq方法的示例代碼:

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  設定樣式
        $div.css({"background":"red"});

        //  eq方法的使用
        var $div = $("div").eq(1);
        //  設定樣式
        $div.css({"background":"yellow"});
    });
</script>

<div>
    這是第一個div
    <input type="text" id="mytext">
</div>

<div>
    這是第二個div
    <input type="text">
    <input type="button">
</div>      

3. 小結

• 選擇集過濾可以使用has方法和eq方法來完成
• jquery給标簽設定樣式使用css方法

1. 選擇集轉移介紹

2. 選擇集轉移操作

• $(’#box’).prev(); 表示選擇id是box元素的上一個的同級元素
• $(’#box’).prevAll(); 表示選擇id是box元素的上面所有的同級元素
• $(’#box’).next(); 表示選擇id是box元素的下一個的同級元素
• $(’#box’).nextAll(); 表示選擇id是box元素的下面所有的同級元素
• $(’#box’).parent(); 表示選擇id是box元素的父元素
• $(’#box’).children(); 表示選擇id是box元素的所有子元素
• $(’#box’).siblings(); 表示選擇id是box元素的其它同級元素
• $(’#box’).find(’.myClass’); 表示選擇id是box元素的class等于myClass的元素

<script>
    $(function(){
        var $div = $('#div01');

        $div.prev().css({'color':'red'});
        $div.prevAll().css({'text-indent':50});
        $div.next().css({'color':'blue'});
        $div.nextAll().css({'text-indent':80});
        $div.siblings().css({'text-decoration':'underline'})
        $div.parent().css({'background':'gray'});
        $div.children().css({'color':'red'});
        $div.find('.sp02').css({'font-size':30});
    });  
</script>

<div>
    <h2>這是第一個h2标簽</h2>
    <p>這是第一個段落</p>
    <div id="div01">這是一個<span>div</span><span class="sp02">第二個span</span></div>
    <h2>這是第二個h2标簽</h2>
    <p>這是第二個段落</p>
</div>      

3. 小結

• prev() 表示擷取上一個同級元素
• prevAll() 表示擷取上面所有同級元素
• next() 表示擷取下一個同級元素
• nextAll() 表示擷取下面所有同級元素
• parent() 表示擷取父元素
• children() 表示擷取所有的子元素
• siblings() 表示擷取其它同級元素
• find(“選擇器名稱”) 表示擷取指定選擇器的元素