jQuery子選擇器與可見(jiàn)性選擇器實(shí)例分析
更新時(shí)間：2019年06月28日 10:05:24 作者：Yeoman92
這篇文章主要介紹了jQuery子選擇器與可見(jiàn)性選擇器,結(jié)合實(shí)例形式分析了jQuery子選擇器與可見(jiàn)性選擇器的功能、常見(jiàn)用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
本文實(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)容感興趣的讀者可查看本站專題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery的Ajax接收java返回?cái)?shù)據(jù)方法
今天小編就為大家分享一篇jQuery的Ajax接收java返回?cái)?shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JQuery選擇器之三 首先老規(guī)矩提供我學(xué)習(xí)用的例子2009-07-07
今天因網(wǎng)站需要寫(xiě)了個(gè)圖片展示效果,其中用到了Jquery的data函數(shù)，剛學(xué)就被我用這了，昨天看時(shí)還覺(jué)得無(wú)甚用處，因?yàn)榭梢匀藶榈亟o一個(gè)節(jié)點(diǎn)加屬性嘛，不過(guò)省卻了幾句代碼而已。2010-05-05
jQuery1.6中新添加了一個(gè)prop方法，看起來(lái)和用起來(lái)都和attr方法一樣，這兩個(gè)方法有什么區(qū)別呢？這要從HTMl 的attribute與property區(qū)別說(shuō)起，attr與prop正是這兩個(gè)東西的縮寫(xiě)2013-10-10
jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制餅圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jquery中獲得元素尺寸和坐標(biāo)的方法,需要的朋友可以參考下2014-05-05
jquery數(shù)組封裝使用方法分享(jquery數(shù)組遍歷)
JQuery對(duì)數(shù)組的處理非常便捷并且功能強(qiáng)大齊全，一步到位的封裝了很多原生js數(shù)組不能企及的功能。下面來(lái)看看JQuery數(shù)組的強(qiáng)大之處在哪。2014-03-03
基于jQuery和CSS3制作響應(yīng)式水平時(shí)間軸附源碼下載
我們經(jīng)?？吹接泻芏嗟拇怪睍r(shí)間軸用來(lái)記錄事件進(jìn)展，而有朋友問(wèn)我要求分享水平的時(shí)間軸，其實(shí)水平時(shí)間軸的難點(diǎn)在于自適應(yīng)屏幕尺寸。那么 今天我要給大家分享的是一款支持響應(yīng)式、支持觸屏手勢(shì)滑動(dòng)的水平時(shí)間軸2015-12-12
EasyUI創(chuàng)建人員樹(shù)的實(shí)例代碼
最近做項(xiàng)目做一個(gè)樹(shù)狀的下拉列表，下面小編把easyUI創(chuàng)建人員樹(shù)的實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)，需要的朋友參考下吧2017-09-09
在全球訪問(wèn)量最高的前1000個(gè)網(wǎng)站中，幾乎沒(méi)有不用jQuery的。如今jQuery的力量是無(wú)限強(qiáng)大。2011-04-04