淺談jquery選擇器 :first與:first-child的區(qū)別
一個(gè)例子：
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
first表示（所有父元素合并后的）第一個(gè)；first-child表示（每個(gè)父元素的）第一個(gè)
$('ul li:first') 返回john所在的li。 查找所有ul下第一個(gè)li元素
$("ul li:first-child") 返回 john glen。 查找每個(gè)ul下第一個(gè)元素是li元素dom元素。
擴(kuò)展用法：$("body *:first")表示body下的第一個(gè)孩子元素； $("body *:first-child")表示body下的每一個(gè)是第一個(gè)孩子元素的元素
另外，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. 查找每個(gè)的第一個(gè)孩子元素，如果是li元素則匹配，否則不匹配.
$('li:first‘)匹配第一個(gè)li元素 $("li:first-child")匹配第一個(gè)li元素，它是某個(gè)元素的第一個(gè)孩子元素
以上這篇淺談jquery選擇器 :first與:first-child的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(fā)更加快捷。這篇文章主要介紹了Bootstrap的核心——柵格系統(tǒng)的使用,需要的朋友可以參考下2017-10-10
13 款最熱門(mén)的 jQuery 圖像 360 度旋轉(zhuǎn)插件推薦
這篇文章主要介紹了13 款最熱門(mén)的 jQuery 圖像 360 度旋轉(zhuǎn)插件，非常炫酷實(shí)用，有需要的小伙伴參考下2014-12-12
jQuery(1.3.2) 7行代碼搞定跟隨屏幕滾動(dòng)的層
jQuery(1.3.2)7行代碼搞定跟隨屏幕滾動(dòng)的層，代碼很精簡(jiǎn)啊，非常不錯(cuò)。2009-05-05
JQuery文本改變觸發(fā)事件如聚焦事件、失焦事件等，下面有個(gè)示例，感興趣的朋友可以參考下2014-01-01
jquery插件uploadify實(shí)現(xiàn)帶進(jìn)度條的文件批量上傳
這篇文章主要介紹了jquery插件uploadify實(shí)現(xiàn)帶進(jìn)度條的文件批量上傳，感興趣的小伙伴們可以參考一下2015-12-12
基于jquery實(shí)現(xiàn)發(fā)送文章到手機(jī)的代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)發(fā)送文章到手機(jī)的代碼,非常簡(jiǎn)單實(shí)用，需要的朋友可以參考下2014-12-12
jquery圖片放大功能簡(jiǎn)單實(shí)現(xiàn)
圖片放大在某些例如商品細(xì)節(jié)放大圖比較常見(jiàn)，本文寫(xiě)了一個(gè)圖片放大的示例適合日常應(yīng)付，有需求的朋友可以參考下2013-08-08
Axios和Jquery實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了Axios+Jquery實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁(yè)
這篇文章主要介紹了JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁(yè)的解決方案，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
jQuery Final Countdown是一款時(shí)尚的圓形進(jìn)度條樣式的jQuery倒計(jì)時(shí)插件。本篇文章給大家分享利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件，感興趣的朋友一起看看吧2015-09-09