jQuery_jquery での可視性フィルター セレクターの使用を説明する例

可視性フィルター
可視性フィルターは、可視性と非可視性に基づいて要素を選択します。

过滤器名	jQuery 语法	说明	返回
:hidden	$(':hidden')	选取所有不可见元素	集合元素
:visible	$(':visible')	选取所有可见元素	集合元素

$('p:hidden).size(); //元素p 隐藏的元素 

$('p:visible').size(); //元素p 显示的元素 

注: :hidden フィルターには通常、CSS スタイルが display:none、入力フォーム タイプが type="hidden"、visibility:hidden である要素が含まれます。

例
jQuery の可視性セレクターは、要素の表示状態と非表示状態に基づいて、対応する要素を選択します。主に 2 つがあります。可視: 表示されるものと不可視: 非表示です。今日は主にこれら 2 つのセレクターの使い方を学びます。まず、これら 2 つのセレクターの使用法を学びやすくするための HTML 構造を見てみましょう:

<div class="wrap">
 <span></span>
 <div></div>
 <div style="display:none">Hider!</div>
 <div style="visibility:hidden">Hider!</div>
 <div class="startHidden">Hider!</div>
 <div class="startVisibilityHidden">Hider!</div>
 <div></div>
 <form>
  <input type="hidden" />
  <input type="hidden" />
  <input type="hidden" />
 </form>
 <span></span>
 <button>显示隐然元素</button>
</div>

CSS コード:

<style type="text/css">
 .wrap {
   width: 500px;
   padding: 10px;
   margin: 20px auto;
   border: 1px solid #ccc;
 }
  
 .wrap div {
  width: 70px;
  height: 40px;
  background: #0083C1;
  margin: 5px;
  float: left
 }
 
 span {
  display: block;
  clear: left;
  color: #008000;
 }
 
 .startHidden {
  display: none;
 }
 
 .startVisibilityHidden {
  visibility: hidden;
 }
</style>

初期結果

これら 2 つのセレクターの構文、使用規則、機能をそれぞれ見てみましょう

1. 非表示セレクター: :hidden

セレクター

 $("E:hidden") //E表示元素标签

または

 $(":hidden") //选择所有隐藏元素

説明:

E:hidden は非表示の E 要素を選択することを意味し、:hidden はすべての非表示の要素を選択することを意味します

戻り値:

コレクション要素

例:

$(document).ready(function(){
 $("span:first").text("Found " + $(":hidden",document.body).length + " hidden elements total.");//在第一个span标签中增加文本，显示body中有多少个元素隐藏
 $("div:hidden").show("3000");//显示所有隐藏的div元素
 $("span:last").text("Found " + $("input:hidden").length + " hidden inputs");//在最后一个span标签中增加文本，显示有多少input隐藏
});

機能:

":hidden" は、すべての非表示要素を選択します。一部のブラウザでは、1aa9e5d373740b65a0cc8f0a02150c53 にすべてのタグが含まれます。ここで参照される非表示要素は、スタイル "display:none" とフォーム "type= "hidden"" の 2 つです。ただし、「visibility:hidden」を含む隠し要素は含まれません。さらに、「:hidden」により 1aa9e5d373740b65a0cc8f0a02150c53 内のすべてのタグが選択される場合があるため、前に要素タグを追加することをお勧めします。

効果:

2. 可視性セレクター: :visible

セレクター:

 $("E:visible") //E是指元素标签，选择指定的可见元素标签

または

 $(":visible")//选择所有可见元素

説明:

「E:visible」は、可視の E 要素を選択することを意味します。たとえば、「$("div:visible")」は、すべての可視の div 要素を選択することを意味し、「$(":visible")」は、すべての可視要素を選択することを意味します。 🎜>

戻り値:

コレクション要素

例:

<script type="text/javascript">
 $(document).ready(function(){
   $("div:visible").click(function(e){ //可见DIV元素绑定一个单击事件
 $(this).css("border","2px solid red"); //给可见的DIV元素增加一个2px的红色边框
 e.stopPropagation();//停止事件冒泡
   });
   $("button").click(function(e){ //给button绑定一个单击事件
 $("div:hidden").show("fast").css("background","red");//隐然的元素显示出来，并把背景变成红色
 e.stopPropagation();//停止事件冒泡
 });
  });
</script>

機能:

上記の最初のコードは、表示されている DIV 要素をマウスでクリックすると、その要素に 2 ピクセルの赤い境界線スタイルが追加されます。一方、2 番目のコードは、ボタンをクリックするとすべての非表示の要素が表示され、赤い背景。ここで参照される可視要素は、「display:none」または「.hide()」によって非表示にされないことを除いて、前に説明した非表示要素と同じです。

効果:

最後のポイント: 「:visible」はすべての表示要素を除外しますが、ここでの「visible」とは、「display:none」または「.hide()」関数を使用して非表示になっていない要素を指します。「:hidden」はすべてを選択します。隠し要素。同様に、ここでいう非表示とは、「visibility: hidden」のことではなく、「display:none」または「type="hidden"」の form 要素を指します。

これは jQuery の可視性フィルター セレクターの簡単な紹介です。興味のある友人はローカルでテストすることができ、理解を深められるでしょう。