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