jqueryの可視性フィルターセレクターとは何ですか?-jsチュートリアル-php.cn

jqueryの可視性フィルターセレクターとは何ですか?

青灯夜游

リリース： 2023-01-04 09:37:50

オリジナル

4354 人が閲覧しました

jquery には 2 つの可視性フィルターセレクターがあります: 1. ":hidden" セレクター、すべての非表示要素と一致し、それらを jQuery オブジェクトとしてカプセル化して返します。2. " :visible" セレクター、使用されます。表示されているすべての要素を照合するには、それらを jQuery オブジェクトとしてカプセル化して返します。

jqueryの可視性フィルターセレクターとは何ですか?

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

推奨チュートリアル: jquery ビデオチュートリアル

jquery 可視性フィルターセレクター

jQuery の可視性セレクターは、可視と不可視に基づいています。要素の状態は、対応する要素を選択するために使用されます。主要なものは 2 つあります:

":hidden"、これはすべての非表示の要素を選択します。
":visible" は、表示されているすべての要素を選択します。

Visible selector: hidden には、スタイル属性の表示が none である要素だけでなく、テキスト非表示フィールド () やvisible:hidden などの要素も含まれます。

jquery :hidden selector

jQuery の :hidden セレクターは、すべての非表示の要素を照合し、それらを jQuery オブジェクトとしてカプセル化して返します。

構文:

jQuery( ":hidden" )
//或
$(&#39;:hidden&#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(){
  $(":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 selector

jQuery の :visible selector は、すべての可視要素と一致するために使用され、それらをカプセル化されます。 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 中国語 Web サイトの他の関連記事を参照してください。