보이지 않는 jquery 요소를 구현하는 방법-JS 튜토리얼-php.cn

보이지 않는 jquery 요소를 구현하는 방법

藏色散人

풀어 주다： 2023-01-04 09:36:38

원래의

2850명이 탐색했습니다.

보이지 않는 jquery 요소를 구현하는 방법: 1. "$("p").hide();"와 같은 구문으로 hide 메소드를 사용하여 선택한 요소를 숨깁니다. 2. 토글 메소드를 사용하여 요소를 숨깁니다. "$(" p").toggle();"과 같은 구문을 사용합니다.

보이지 않는 jquery 요소를 구현하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.0 버전, Dell G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

권장: jquery 비디오 튜토리얼

jquery를 사용하면 요소가 보이지 않게 됩니다(숨기기)

jquery를 사용하여 요소 숨기기를 제어할 수 있습니다. 예를 들면 다음과 같습니다.

hide( ) 메소드는 선택한 요소를 숨깁니다.

팁: 이는 CSS 속성 display:none과 유사합니다.

참고: 숨겨진 요소는 완전히 표시되지 않습니다(더 이상 페이지 레이아웃에 영향을 미치지 않습니다).

숨겨진 요소를 표시해야 하는 경우 show() 메서드를 사용하세요.

예:

<!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(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>

로그인 후 복사

방법 2: 선택한 요소에서 hide()와 show() 사이를 전환하려면ggle()

toggle() 메서드를 사용하세요. 요소가 표시되면 숨김으로 전환하고, 요소가 숨겨져 있으면 표시로 전환합니다.

이 방법은 선택한 요소의 표시 상태를 확인합니다. 요소가 숨겨져 있으면 show()가 실행되고, 요소가 표시되면 hide()가 실행됩니다. 이렇게 하면 토글 효과가 생성됩니다.

참고: 숨겨진 요소는 완전히 표시되지 않습니다(더 이상 페이지 레이아웃에 영향을 미치지 않습니다).

팁: 이 방법은 사용자 정의 기능 간에 전환하는 데 사용할 수 있습니다.

예:

<!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(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换  hide() 和 show()</button>
</body>
</html>

로그인 후 복사

방법 3: css('display','none') 사용

예:

$("#id").css(&#39;display&#39;,&#39;none&#39;);//隐藏
$("#id").css(&#39;display&#39;,&#39;block&#39;);//显示

로그인 후 복사

또는

 $("#id")[0].style.display=&#39;none&#39;;

로그인 후 복사

display=none을 사용하여 객체 숨기기 제어

display=block으로 디스플레이 제어 of object

방법 4: css('visibility','hidden') 사용

예:

$("#id").css(&#39;visibility&#39;,&#39;hidden&#39;);//元素隐藏
$("#id").css(&#39;visibility&#39;,&#39;visible&#39;);//元素显示

로그인 후 복사

CSS 가시성 속성은 요소가 표시되는지 여부를 지정합니다.

visible 요소가 표시됩니다.

hidden 요소가 보이지 않습니다.

collapse 테이블 요소에 사용되는 경우 이 값은 행이나 열을 삭제할 수 있지만 테이블 레이아웃에는 영향을 주지 않습니다. 행이나 열이 차지하는 공간을 다른 콘텐츠에 사용할 수 있습니다. 이 값이 다른 요소에 사용되면 "숨김"으로 렌더링됩니다.

inherit 상위 요소의 가시성 속성 값을 상속받습니다.

참고:

display:none 및 visible:hidden은 모두 웹 페이지의 요소를 숨길 수 있습니다. 시각적 효과에는 차이가 없지만 일부 DOM 작업에서는 둘 사이에 차이가 있습니다.

display:none - -- 숨겨진 개체를 위해 예약된 물리적 공간이 없습니다. 즉, 개체가 페이지에서 완전히 사라지고 일반인의 관점에서 보거나 만질 수 없습니다.

visible:hidden--- 웹 페이지에서 개체를 보이지 않게 하지만 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다. 즉, 여전히 높이, 너비 등과 같은 속성을 갖습니다. , 볼 수는 없지만 만질 수 있습니다.

위 내용은 보이지 않는 jquery 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!