如何更好的使用jQuery的常用方法總結

jQuery如此之好用，和其在取得物件時使用與CSS選擇器相容的語法有很大關係，畢竟CSS選擇器大家都很熟悉（關於CSS選擇器可以看看十分鐘搞定CSS選擇器），但其強大在兼容了CSS3的選擇器，甚至多出了很多。

選擇器

有了CSS選擇器基礎後，看jQuery的選擇器就很簡單了。

$("E:gt(n)")          $("E:ll(n)")           #$(":header" )$("p:animated")#內容篩選器#$('E:contains(value)')$('E:empty')# #$('E:has(F)')子元素中有F的元素，$('p:has(a)'):包含a標籤的p#$('E: parent')父元素是E的元素，$('td: parent'):父元素是td的元素視覺化選擇器#$('E:hidden')所有被隱藏的E$('E:visible')所有可見的E屬性過濾選擇器$('E[attr]')含有屬性attr的E屬性attr=value的E#屬性attr！=value的E

基本選擇器	#
$('*' )	符合頁面所有元素
$('#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[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中文網其他相關文章！