淺談jquery選擇器 :first與:first-child的區(qū)別
一個例子:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
first表示(所有父元素合并后的)第一個;first-child表示(每個父元素的)第一個
$('ul li:first') 返回john所在的li。 查找所有ul下第一個li元素
$("ul li:first-child") 返回 john glen。 查找每個ul下第一個元素是li元素dom元素。
擴展用法:$("body *:first")表示body下的第一個孩子元素; $("body *:first-child")表示body下的每一個是第一個孩子元素的元素
另外,css選擇器從右往左,如果是這樣;
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <div>DIV</div> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
那么$("ul li:first-child") 只返回John. 查找每個的第一個孩子元素,如果是li元素則匹配,否則不匹配.
$('li:first‘)匹配第一個li元素 $("li:first-child")匹配第一個li元素,它是某個元素的第一個孩子元素
以上這篇淺談jquery選擇器 :first與:first-child的區(qū)別就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
詳細解讀Jquery各Ajax函數(shù)($.get(),$.post(),$.ajax(),$.getJSON())
這篇文章主要介紹了詳細解讀Jquery各Ajax函數(shù)($.get(),$.post(),$.ajax(),$.getJSON())的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08jQuery圖片旋轉(zhuǎn)插件jQueryRotate.js用法實例(附demo下載)
這篇文章主要介紹了jQuery圖片旋轉(zhuǎn)插件jQueryRotate.js用法,結(jié)合實例形式分析了圖片旋轉(zhuǎn)插件jQueryRotate.js用法,并附帶了demo示例代碼供讀者下載,需要的朋友可以參考下2016-01-01jQuery Datatables 動態(tài)列+跨列合并實現(xiàn)代碼
這篇文章主要介紹了jQuery Datatables 動態(tài)列+跨列合并實現(xiàn)代碼,需要的朋友可以參考下2020-01-01jquery實現(xiàn)類似EasyUI的頁面布局可改變左右的寬度
這篇文章主要介紹了通過jquery實現(xiàn)類似EasyUI的頁面布局可改變左右的寬度,需要的朋友可以參考下2014-07-07jQuery實現(xiàn)表格與ckeckbox的全選與單選功能
先給大家介紹下jQuery實現(xiàn)表格與ckeckbox的全選與單選功能,以及通過js實現(xiàn)隱藏與顯示銨鈕功能的實例代碼,需要的朋友參考下吧2016-11-11