jQuery_jquery에서 가시성 필터 선택기 사용을 설명하는 예

가시성 필터
가시성 필터는 가시성과 비가시성을 기준으로 요소를 선택합니다.

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

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

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

참고: :hidden 필터에는 일반적으로 CSS 스타일이 표시:없음, 입력 양식 유형이 유형="숨김" 및 가시성:숨김인 요소가 포함됩니다.

예
jQuery의 가시성 선택기는 요소의 보이는 상태와 보이지 않는 상태를 기반으로 해당 요소를 선택합니다. 두 가지 주요 항목이 있습니다. 표시: 표시 및 보이지 않음: 숨김. 오늘은 이 두 선택자를 어떻게 사용하는지를 주로 배워보겠습니다. 먼저 이 두 선택기의 사용법을 쉽게 배울 수 있도록 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>

초기 결과

이 두 선택기의 구문, 사용 규칙 및 기능을 각각 살펴보겠습니다

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"" 형식입니다. 유형이지만 "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 요소를 마우스로 클릭한 후 해당 요소에 2px 빨간색 테두리 스타일이 추가되고, 두 번째 코드 부분은 버튼을 클릭하면 모든 숨겨진 요소가 표시되고 빨간색 배경입니다. 여기에서 참조되는 표시 요소는 "display:none" 또는 ".hide()"에 의해 숨겨지지 않는다는 점을 제외하면 앞서 언급한 숨겨진 요소와 동일합니다.

효과:

마지막 요점: ":visible"은 보이는 모든 요소를 ​​필터링하지만 여기서 보이는 것은 "display:none"이나 ".hide()" 함수를 사용하여 숨기지 않은 요소를 의미합니다. 숨겨진 요소. 마찬가지로 여기서 숨겨진이라는 것은 "가시성: 숨김"을 의미하는 것이 아니라 "display:none" 또는 "type="hidden""의 양식 요소를 의미합니다.

jQuery의 가시성 필터 선택기에 대한 간략한 소개입니다. 관심 있는 친구들은 로컬에서 테스트하여 이해를 높일 수 있습니다.