jQuery中:hidden選擇器用法實(shí)例
本文實(shí)例講述了jQuery中:hidden選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器能夠匹配所有不可見(jiàn)元素，或者type為hidden的元素。
語(yǔ)法結(jié)構(gòu):
此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:
以上代碼能夠?qū)㈦[藏的div元素設(shè)置為可見(jiàn)，并且將里面的字體顏色設(shè)置為藍(lán)色。
如果不和其他選擇器配合使用，則默認(rèn)狀態(tài)是和*選擇器配合使用，例如$(":hidden")等同于$("*:hidden")。
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<title>腳本之家</title>
<style type="text/css">
.display{display:none;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div:hidden").css({display:"block",color:"blue"});
})
})
</script>
</head>
<body>
<div class="display">我是后來(lái)才可見(jiàn)的</div>
<div>我是本來(lái)就是可見(jiàn)的</div>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
以上代碼可以將隱藏的div設(shè)置為可見(jiàn)，并且將里面的文本顏色設(shè)置為藍(lán)色。
實(shí)例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dhdzp.com/" />
<title>腳本之家</title>
<style type="text/css">
.display {
display:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(":hidden").css({display:"block",color:"blue"});
})
})
</script>
</head>
<body>
<div class="display">我是后來(lái)才可見(jiàn)的</div>
<div>我是本來(lái)就是可見(jiàn)的</div>
<p class="display">我原來(lái)也是不可見(jiàn)的</p>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
由于以上代碼并沒(méi)有指定與:hidden選擇器相配合使用的選擇器，所以就默認(rèn)和*選擇器配合使用，于是代碼能夠讓所有隱藏的元素可見(jiàn)，并且將其中的文本顏色設(shè)置為藍(lán)色。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
EasyUI的treegrid組件動(dòng)態(tài)加載數(shù)據(jù)問(wèn)題的解決辦法
最近涉及到treegrid組件的查詢，需要根據(jù)查詢條件動(dòng)態(tài)更新EasyUI的treegrid組件的動(dòng)態(tài)加載查詢結(jié)果2011-12-12
下拉列表選擇項(xiàng)的選中在不同瀏覽器中的兼容性問(wèn)題探討
使用jquery做了一個(gè)項(xiàng)目，下拉列表選擇項(xiàng)變化時(shí)，獲取選中項(xiàng)的文本在不同瀏覽器中的兼容性問(wèn)題在本文將為大家介紹下2013-09-09
HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果(附demo源碼下載)
這篇文章主要介紹了HTML5+jQuery插件Quicksand實(shí)現(xiàn)超酷的星際爭(zhēng)霸2兵種分類展示效果,詳細(xì)分析了Quicksand插件的使用及圖片浮動(dòng)顯示的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jquery獲取當(dāng)前日期的方法,涉及針對(duì)日期時(shí)間的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)動(dòng)態(tài)加載select下拉列表項(xiàng)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)加載select下拉列表項(xiàng)功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery動(dòng)態(tài)加載select下拉列表項(xiàng)的步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)
下面小編就為大家?guī)?lái)一篇Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
jQuery獲得IE版本不準(zhǔn)確webbrowser的解決方法
用$.browser.version經(jīng)常出現(xiàn)一些不準(zhǔn)確的狀況，最近碰到，做了一些總結(jié)，不知道是否全面2014-02-02
jquery控制頁(yè)面的展開(kāi)和隱藏實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)?lái)一篇jquery控制頁(yè)面的展開(kāi)和隱藏實(shí)現(xiàn)方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JQuery簡(jiǎn)單實(shí)現(xiàn)錨點(diǎn)鏈接的平滑滾動(dòng)
在平時(shí)的項(xiàng)目中，我們經(jīng)常需要一些特效鏈接，如果使效果進(jìn)一步加強(qiáng)，我們可以使點(diǎn)擊錨點(diǎn)鏈接平滑滾動(dòng)到錨點(diǎn)，下面就來(lái)給大家講解下如何使用jQuery來(lái)實(shí)現(xiàn)。2015-05-05
jquery表單對(duì)象屬性過(guò)濾選擇器實(shí)例分析
這篇文章主要介紹了jquery表單對(duì)象屬性過(guò)濾選擇器,實(shí)例分析了jQuery選擇器的相關(guān)使用技巧,需要的朋友可以參考下2015-05-05