1. 程式人生 > >jquery筆記-選擇元素

jquery筆記-選擇元素

選擇元素

1、$()函式 可以根據css的選擇器來選擇 根據標籤名$('p'); ID$('#id'); 類 $('.class'); 

2、CSS選擇器

     $('#id > li').addClass('className'); 給id下面的li標籤加className 的類

     $('#id li:not(.classname)').addClass('className'); 給id子標籤沒有classname屬性的li新增className屬性(類)

3、屬性選擇器 $('img[alt]'); 選擇有alt屬性的img標籤

     $('a[href]');是選擇帶有href屬性的a標籤

     $('a[href ^="mailto:"]');選擇帶有href屬性 並且href屬性以mailto:開頭的標籤

     $('a[href $=".pdf"]');選擇帶有href屬性 並且href屬性以.pdf結尾的標籤

     屬性選擇器也可以組合使用

     $('a[href^="http"][href*="henry"]').addClass('className');選擇以http開頭的並且任意位置包含henry的所有標籤新增一個className類

     自定義選擇符

     $('div.horizontal:eq(1)');選擇帶有horizontal的div標籤的第二個(從0開始)

     $('div.nth-child(1)'); 

     選擇符::eq() :odd(奇數選擇)  :even偶數選擇

     $(document).ready({

         $('tr:even').addClass('alt');//給tr的偶數行新增alt類

     });

    $(document).ready({

        $('tr:nth-child(odd)').addClass('alt');//根據父類的第幾個tr計數

});

    基於上下文內容選擇元素

    $document.ready({

         $('td:contains(Henry').addClass('className'); 給包含Henry的td新增class類 henry是上下文內容

     });

     基於form表單的選擇器

     選擇符

    :input  :button  :enabled(啟用的表單元素) :disabled(禁用的表單元素); :checked  :selected

    例如: $('input[type="radio"]:checked');可以選擇單選框

DOM遍歷方法

    .filter()方法:    $('tr').filter(':even').addClass('alt');

    在filter方法內新增函式

     $('a').filter(function(){

        return this.hostname && this.hostname != location.hostname;

    }).addClass('className');

      第二行程式碼可以篩選出來符合下面兩個條件的a標籤:1、必須包含一個帶有域名this.hostname的href屬性,可以排除mailto以及類似連。2、連線指向的域名:this.hostname必須不等於當前域所在的名稱location.hostname。

    為特定的單元格新增樣式:

    $(document).ready({

        $('td:contains(Henry)').next().addClass('highlight');

    });尋找到td包含henry的下一個td   如果為nextALL則所選td的右邊所有td新增highligh類  next同輩元素,同理還有prev和prevAll();   如果新增.addBack()方法則退回到選定的元素。