jQuery子選擇器與可見(jiàn)性選擇器實(shí)例分析
本文實(shí)例講述了jQuery子選擇器與可見(jiàn)性選擇器。分享給大家供大家參考，具體如下：
子元素選擇器與可見(jiàn)性選擇器
子元素選擇器是允許利用子元素的位置進(jìn)行獲取的選擇器
子內(nèi)容選擇器3種用法
- E:first-child
- 選擇所有位于其父元素第一個(gè)位置的E元素
- E:last-child
- 選擇所有位于其父元素最后一個(gè)位置的E元素
- E:nth-child(n)
- 選擇所有位于其父元素指定位置的E元素,n從1開(kāi)始
可見(jiàn)性選擇器,顧名思義就是獲取當(dāng)前頁(yè)面可見(jiàn)/不可見(jiàn)的元素
可見(jiàn)性選擇器用法如下:
- E:hidden
- 選擇所有不可見(jiàn)的元素
- 隱藏域、display=”none”、width與height=0的元素都會(huì)被選中
- E:visible
- 選擇所有可見(jiàn)元素
如操作：
- 出現(xiàn)在其父元素第一個(gè)位置的li元素
- 出現(xiàn)在其父元素最后一個(gè)位置的li元素
- 出現(xiàn)在其父元素第三個(gè)位置的li元素
- 所有可顯示的元素
<script>
$(function(){
//出現(xiàn)在其父元素第一個(gè)位置的li元素
//$("li:first-child").css("border" , "1px solid red");
//出現(xiàn)在其父元素最后一個(gè)位置的li元素
//$("li:last-child").css("border" , "1px solid red");
//$("ul>li:last").css("border" , "1px solid red");
//nth-child(n)來(lái)獲取指定位置的li元素,nth-child(n)從1開(kāi)始,第三個(gè)元素就是3.而以前學(xué)習(xí)過(guò)的:eq(n)是從0開(kāi)始的,請(qǐng)注意區(qū)分
//$("li:nth-child(3)").css("border" , "1px solid red");
//獲取所有可顯示的元素
$(":visible").css("border" , "1px solid red");
})
</script>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了JQuery插入DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery實(shí)現(xiàn)DOM結(jié)點(diǎn)插入所涉及的常見(jiàn)函數(shù)使用技巧,需要的朋友可以參考下2015-06-06![jQuery實(shí)現(xiàn)input[type=file]多圖預(yù)覽上傳刪除等功能](http://img.jbzj.com/images/xgimg/bcimg1.png)
jQuery實(shí)現(xiàn)input[type=file]多圖預(yù)覽上傳刪除等功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)input[type=file]多圖預(yù)覽上傳刪除等功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗(yàn)證碼)
這篇文章主要介紹了jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗(yàn)證碼),需要的朋友可以參考下2014-04-04
jQuery實(shí)現(xiàn)文字超過(guò)1行、2行或規(guī)定的行數(shù)時(shí)自動(dòng)加省略號(hào)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)文字超過(guò)1行、2行或規(guī)定的行數(shù)時(shí)自動(dòng)加省略號(hào)的方法,涉及jQuery針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03
jquery+html5時(shí)鐘特效代碼分享（可設(shè)置鬧鐘并且語(yǔ)音提醒）
這篇文章主要為大家詳細(xì)介紹了Jquery+html5可設(shè)置鬧鐘并且會(huì)語(yǔ)音提醒的時(shí)鐘特效，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下2015-08-08
iframe異步加載實(shí)現(xiàn)點(diǎn)擊左邊菜單加載右邊內(nèi)容實(shí)例講解
iframe異步加載想必很多朋友對(duì)你都不會(huì)陌生,接下來(lái)將實(shí)現(xiàn)這樣一個(gè)功能左邊菜單不能刷新的情況下，異步加載右邊的內(nèi)容頁(yè)面，感興趣的你可以參考下本文或許對(duì)你有所幫助2013-03-03
jQuery簡(jiǎn)單實(shí)現(xiàn)上下,左右滑動(dòng)的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)上下,左右滑動(dòng)的方法,涉及jQuery動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06
基于JQuery的一個(gè)簡(jiǎn)單的鼠標(biāo)跟隨提示效果
代碼很簡(jiǎn)單主要是用到了JQuery的三個(gè)事件mouseover,mouseout,mousemove.2010-09-09
js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
在js使用過(guò)程中可能會(huì)根據(jù)要求獲取瀏覽器窗口的可視區(qū)域高度和寬度,滾動(dòng)條高度，于是本人搜集整理下，拿出來(lái)和大家分享，希望可以幫助你們2012-12-12
jQuery操作元素的內(nèi)容和樣式完整實(shí)例分析
這篇文章主要介紹了jQuery操作元素的內(nèi)容和樣式,結(jié)合完整實(shí)例形式分析了jquery針對(duì)頁(yè)面元素內(nèi)容與樣式相關(guān)操作技巧,需要的朋友可以參考下2020-01-01