jquery 가시성 필터 선택기는 무엇입니까?-JS 튜토리얼-php.cn

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"은 보이는 모든 요소를 선택합니다.

Visible 선택기: 숨김에는 스타일 속성 표시가 없음인 요소뿐만 아니라 텍스트 숨김 필드() 및 visible:hidden과 같은 요소도 포함됩니다.

jquery :hidden selector

jQuery의 :hidden selector는 보이지 않는 모든 요소를 일치시키고 이를 jQuery 객체로 캡슐화하여 반환하는 데 사용됩니다.

구문:

jQuery( ":hidden" )
//或
$(&#39;:hidden&#39;)

로그인 후 복사

반환 값:

보이지 않는 모든 요소를 캡슐화하는 jQuery 개체를 반환합니다.

해당하는 일치 항목이 없으면 빈 jQuery 개체가 반환됩니다.

참고: jQuery에서는 visible: 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에서는 visible: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!