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()方法則退回到選定的元素。