首頁 > web前端 > js教程 > 主體

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

伊谢尔伦
發布: 2017-06-19 14:28:31
原創
1262 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!