jquery可見性過濾選擇器有哪些
- 青灯夜游原創
- 2020-12-23 15:07:094383瀏覽
jquery的可見性過濾選擇器有兩個，分別為：1、“:hidden”選擇器，用於匹配所有不可見的元素，將其封裝為jQuery物件並返回；2、“ :visible」選擇器，用於匹配所有可見的元素，將其封裝為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" ) //或 $(':visible')
傳回值：
傳回封裝了所有可見的元素的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中文網其他相關文章！