首頁 > web前端 > js教程 > 主體

jquery可見性過濾選擇器有哪些

青灯夜游
發布: 2023-01-04 09:37:50
原創
4355 人瀏覽過

jquery的可見性過濾選擇器有兩個,分別為:1、“:hidden”選擇器,用於匹配所有不可見的元素,將其封裝為jQuery物件並返回;2、“ :visible」選擇器,用於匹配所有可見的元素,將其封裝為jQuery物件並傳回。

jquery可見性過濾選擇器有哪些

本教學操作環境:windows7系統、jquery1.10.2版本,Dell G3電腦。

推薦教學:jquery影片教學

jquery可見性過濾選擇器

jQuery的可見性選擇器是根據元素的可見和不可見狀態來選擇相對應的元素。主要有兩個:

  • “:hidden”,選取所有不可見元素。

  • “:visible”,選擇所有可見元素。

可見選擇器:hidden 不僅包含樣式屬性 display 為 none 的元素,也包含文字隱藏域 ()和 visible:hidden 之類的元素。

jquery :hidden選擇器

jQuery的:hidden選擇器用於匹配所有不可見的元素,將其封裝為jQuery物件並傳回。

語法:

jQuery( ":hidden" )
//或
$(':hidden')
登入後複製

傳回值:

傳回封裝了所有不可見的元素的jQuery物件。

如果找不到任何相應的匹配,則傳回一個空的jQuery物件。

注意:在jQuery中,visibility: hidden;和opacity: 0;都被視為可見的,因為它們在頁面上佔據了相應的物理空間。

範例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(":hidden").show(3500);
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p style="display:none;">这是一个隐藏段落。</p>
<div style="display:none;">这是隐藏的 div 元素。</div>

</body>
</html>
登入後複製

jquery :visible選擇器

jQuery的:visible選擇器用於匹配所有可見的元素,將其封裝為jQuery物件並傳回。

語法:

jQuery( ":visible" )
//或
$(&#39;:visible&#39;)
登入後複製

傳回值:

傳回封裝了所有可見的元素的jQuery物件。

如果找不到任何相應的匹配,則傳回一個空的jQuery物件。

注意:在jQuery中,visibility: hidden;和opacity: 0;都被視為可見的,因為它們在頁面上佔據了相應的物理空間。

範例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p:visible").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p style="display:none">这是一个隐藏段落。 </p>

</body>
</html>
登入後複製

更多程式設計相關知識,請造訪:程式設計學習! !

以上是jquery可見性過濾選擇器有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板