jQuery中:visible選擇器用法實例
更新時間：2014年12月30日 16:04:38 投稿：shichen2014
這篇文章主要介紹了jQuery中:visible選擇器用法,實例分析了:visible選擇器的功能、定義及匹配操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中:visible選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器能夠匹配所有當前可見的元素。
語法結構:
復制代碼 代碼如下:
$(":visible")
此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:
復制代碼 代碼如下:
$("div:visible").css({color:"blue"})
以上代碼能夠?qū)⒖梢姷膁iv元素中的字體顏色設置為藍色。
如果不和其他選擇器配合使用，則默認狀態(tài)是和*選擇器配合使用，例如$(":visible")等同于$("*:visible")。
實例代碼:
實例一:
復制代碼 代碼如下:
<!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:visible").css({color:"blue"});
})
})
</script>
</head>
<body>
<div class="display">我是不可見的</div>
<div>我是可見的</div>
<ul>
<li>腳本之家歡迎您</li>
</ul>
<button>點擊查看效果</button>
</body>
</html>
以上代碼可以將可見的可見div中的文本顏色設置為藍色。
實例二:
復制代碼 代碼如下:
<!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(){
$(":visible").css({color:"blue"});
})
})
</script>
</head>
<body>
<div class="display">我是不可見的</div>
<div>我是可見的</div>
<ul>
<li>腳本之家歡迎您</li>
</ul>
<button>點擊查看效果</button>
</body>
</html>
由于以上代碼并沒有指定與:visible選擇器相配合使用的選擇器，所以就默認和*選擇器配合使用，于是代碼能夠?qū)⑺锌梢娫刂械奈谋绢伾O置為藍色。
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
jQuery live( type, fn ) 委派事件實現(xiàn)
jQuery 1.3中新增的方法。給所有當前以及將來會匹配的元素綁定一個事件處理函數(shù)（比如click事件）。也能綁定自定義事件。2009-10-10
Bootstrap插件非常的好用了，今天小編通過本教程給大家介紹Bootstrap中點擊按鈕后變灰并顯示加載中實例代碼，非常不錯，感興趣的朋友一起看看吧2016-09-09
利用JQuery的load函數(shù)動態(tài)加載其它頁面的內(nèi)容的實現(xiàn)代碼
利用JQuery的load函數(shù)動態(tài)加載別的頁面的代碼，方便實時獲取別的頁面的內(nèi)容。2010-12-12
這篇文章主要介紹了通過實例解析jQ Ajax操作相關原理,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
fancybox1.3.1 基于Jquery的插件在IE中圖片顯示問題
JQuery的彈出窗口插件也很多了，例如Lightbox…這個我們介紹比較優(yōu)秀的Plugin – Fancybox。2010-10-10
這篇文章主要介紹了jQuery Dialog 取消右上角刪除按鈕事件的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
由點擊頁面其它地方隱藏div所想到的jQuery的delegate
在網(wǎng)頁開發(fā)的過程中經(jīng)常遇到的一個需求就是點擊一div內(nèi)部做某些操作，而點擊頁面其它地方隱藏該div。比如很多導航菜單，當菜單展開的時候，就會要求點擊頁面其它非菜單地方，隱藏該菜單2013-08-08
jQuery中的Deferred和promise 的區(qū)別
這篇文章主要介紹了jQuery中的Deferred和promise 的區(qū)別的相關資料,需要的朋友可以參考下2016-04-04
因為需求就只有4個元素。如果是要用CSS的class來處理，那就需要用到CSS3動畫了，好了下面為大家介紹下如何實現(xiàn)這個放大縮小動畫效果2013-09-09
jquery獲取easyui日期控件的值實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query獲取easyui日期控件的值實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11