jQuery中:hidden選擇器用法實例
更新時間：2014年12月30日 15:28:59 投稿：shichen2014
這篇文章主要介紹了jQuery中:hidden選擇器用法,以實例形式較為詳細的分析了:hidden選擇器的功能、定義及設置匹配元素不可見時的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中:hidden選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器能夠匹配所有不可見元素，或者type為hidden的元素。
語法結構:
復制代碼 代碼如下:
$(":hidden")
此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:
復制代碼 代碼如下:
$("div:hidden").css({display:"block",color:"blue"})
以上代碼能夠將隱藏的div元素設置為可見，并且將里面的字體顏色設置為藍色。
如果不和其他選擇器配合使用，則默認狀態(tài)是和*選擇器配合使用，例如$(":hidden")等同于$("*:hidden")。
實例代碼:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<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">我是后來才可見的</div>
<div>我是本來就是可見的</div>
<button>點擊查看效果</button>
</body>
</html>
以上代碼可以將隱藏的div設置為可見，并且將里面的文本顏色設置為藍色。
實例二:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<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">我是后來才可見的</div>
<div>我是本來就是可見的</div>
<p class="display">我原來也是不可見的</p>
<button>點擊查看效果</button>
</body>
</html>
由于以上代碼并沒有指定與:hidden選擇器相配合使用的選擇器，所以就默認和*選擇器配合使用，于是代碼能夠讓所有隱藏的元素可見，并且將其中的文本顏色設置為藍色。
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
不好意思，剛剛發(fā)了一個類似的效果，發(fā)現(xiàn)代碼比較多，而卻還有一個bug，現(xiàn)在修正了錯誤，需要的朋友可以參考下。2011-07-07
jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。2014-07-07
這篇文章主要介紹了jQuery實現(xiàn)進度條效果代碼，感興趣的小伙伴們可以參考一下2015-12-12
DIY jquery plugin - tabs標簽切換實現(xiàn)代碼
接觸jquery 2,3個月了，一直都未動手寫過插件。正好最近比較閑，就打算把一直看不順眼的項目中現(xiàn)有的tab改造一番（現(xiàn)有的tab未能做成一個控件，copy,past的代碼太多）。2010-12-12
jQuery擴展實現(xiàn)text提示還能輸入多少字節(jié)的方法
這篇文章主要介紹了jQuery擴展實現(xiàn)text提示還能輸入多少字節(jié)的方法,涉及jQuery擴展及字符串操作相關技巧,需要的朋友可以參考下2016-11-11
Lazy Load是一個用 JavaScript 編寫的jQuery插件. 它可以延遲加載長頁面中的圖片. 本文對它進行實例介紹，具有很好的參考價值，下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了jQuery內容選擇器與表單選擇器,結合實例形式分析了jQuery內容選擇器與表單選擇器的功能、用法及相關操作注意事項,需要的朋友可以參考下2019-06-06
Jquery通過JSON字符串創(chuàng)建JSON對象
這篇文章主要介紹了Jquery如何通過JSON字符串創(chuàng)建JSON對象,并附詳細示例，需要的朋友可以參考下2014-08-08
本文主要對jQuery的extend方法的用法做了簡要闡述，具有一定的參考價值，需要的朋友可以參考借鑒2016-12-12
今天寫了一個放迅雷焦點廣告的效果，還請大家多多指正，先附上效果圖一張2008-11-11