jQuery如此之好用,和其在取得物件時使用與CSS選擇器相容的語法有很大關係,畢竟CSS選擇器大家都很熟悉(關於CSS選擇器可以看看十分鐘搞定CSS選擇器),但其強大在兼容了CSS3的選擇器,甚至多出了很多。
有了CSS選擇器基礎後,看jQuery的選擇器就很簡單了。
基本選擇器 | # |
$('*' ) | 符合頁面所有元素 |
$('#id') | id選擇器 |
$('.class') | 類別選擇器 |
$('element') | 標籤選擇器 |
#組合/層次選擇器 | |
#$('E,F') | 多重元素選擇器,用」,分隔,同時符合元素E或元素F |
$('E F') | 後代選擇器,用空格分隔,匹配E元素所有的後代(不只是子元素、子元素向下遞歸)元素F |
$(E>F) | 子元素選擇器,用”>”分隔,匹配E元素的所有直接子元素 |
$('E+F') | 直接相鄰選擇器,匹配E元素之後的相鄰的同級元素F |
$('E~F') | 普通相鄰選擇器(弟弟選擇器),匹配E元素之後的同級元素F(無論直接相鄰與否) |
#$('.class1.class2') | 符合類別名稱中既包含class1又包含class2的元素 |
基本過濾選擇器 | |
$("E:first") | #所有E中的第一個 |
$("E:last") | 所有E中的最後一個 |
#$("E:not(selector)") | 按照selector過濾E |
$("E:even") | 所有E中index是偶數 |
$("E:odd") | 所有E中index是奇數 |
$("E: 所有E中index為n的元素 | |
#所有E中index大於n的元素 | |
所有E中index小於n的元素 | |
選擇h1~h7 元素 | |
選擇正在執行動畫效果的元素 | |
內容中包含value值的元素 | |
內容為空的元素 | # #$('E:has(F)') |
#$('E: parent') | |
#$('E:hidden') | |
$('E:visible') | |
$('E[attr]') | |
##$( 'E[attr=value]') | |
$('E[attr !=value]') | |
$('E[attr ^=value]') | 屬性attr以value開頭的E |
$('E[attr $=value]') | 屬性attr以value結尾的E |
$('E[attr *=value]') | 屬性attr包含value的E |
$('E[attr][attr *=value]') | 可以連用 |
#子元素篩選器 | |
#$('E:nth-child(n)') | E的第n個子節點 |
$('E:nth-child(3n+1)') | E的index符合3n+1表達式的子節點 |
$('E:nth-child(even)') | E的index為偶數的子節點 |
$('E:nth-child(odd)') | E的index為奇數的子節點 |
$('E: first-clild') | 所有E的第一個子節點 |
#$('E:last-clild') | 所有E的最後一個子節點 |
$('E:only-clild') | 只有唯一子節點的E的子節點 |
表單元素選擇器 | |
#$('E:type') | 特定類型的input |
$(':checked') | 被選取的checkbox或radio |
$('option: selected') | 被選取的option |
.find(selector) 找出集合每個元素的子節點
$('li.item-ii').find('li').css('background-color', 'red');
.filter(selector) 過濾目前集合內元素
$('li').filter(':even').css('background-color', 'red');
.ready(handler) 文件載入完成後執行的方法,區別於window.onload
$(document).ready(function() { // Handler for .ready() called.});
.each(function(index,element)) 遍歷集合內每個元素
$("li" ).each(function( index ) { console.log( index + ": " + $(this).text() ); });
jQuery.extend( target [, object1 ] [, objectN ] ) 合併物件
var object = $.extend({}, object1, object2);
以上是如何更好的使用jQuery的常用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!