Jquery의 숨겨진 요소는 무엇입니까?

jQuery에서 요소를 숨기는 것은 매우 중요한 개념입니다. jQuery를 사용하여 요소를 숨기기 전에 먼저 표시, 가시성, 불투명도 및 기타 속성과 같은 CSS 스타일의 숨겨진 요소 속성을 이해해야 합니다. 그 중 display:none은 요소를 완전히 숨기고 문서 흐름을 차지하지 않으며, visible:hidden은 요소를 숨기지만 여전히 문서 흐름을 점유하며, opacity는 문서를 차지하는 요소의 위치에 영향을 주지 않고 요소의 투명도를 변경합니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, jQuery 버전 3.6.4, Dell G3 컴퓨터.

jQuery는 HTML 문서 탐색, 이벤트 처리, 애니메이션 및 Ajax 작업을 단순화하는 매우 인기 있는 JavaScript 라이브러리입니다. 숨겨진 요소는 jQuery에서 매우 중요한 개념입니다. 이 기사에서는 CSS 스타일, jQuery 함수, 메소드, 획득, 제어, 판단 및 선택과 같은 여러 측면에서 jQuery 숨겨진 요소의 사용법을 자세히 설명합니다.

1. CSS 스타일

jQuery를 사용하여 요소를 숨기기 전에 먼저 표시, 가시성, 불투명도 및 기타 속성과 같은 CSS 스타일에 숨어 있는 요소의 속성을 이해해야 합니다. 그 중 display:none은 요소가 완전히 숨겨져 문서 흐름을 차지하지 않는다는 뜻이고, visible:hidden은 요소가 숨겨져 있지만 여전히 문서 흐름을 점유한다는 의미입니다. 불투명도는 요소의 투명도를 변경하며 문서의 요소 위치에는 영향을 주지 않습니다.

2. jQuery 함수

jQuery는 .hide() 및 .show() 함수와 같은 요소를 숨기는 몇 가지 기본 함수를 제공합니다. .hide() 함수는 일치하는 요소를 숨기는 데 사용되고, .show() 함수는 일치하는 요소를 표시하는 데 사용됩니다.

3. jQuery에서 요소를 숨기는 방법

JQuery에서는 CSS 스타일과 jQuery 함수, 클래스 및 기타 방법을 사용하는 등 실제 필요에 따라 다양한 방법을 선택할 수 있습니다.

CSS 스타일 및 jQuery 기능

/* 使用display属性来隐藏元素 */
$(element).css("display", "none");
/* 使用display属性来显示元素 */
$(element).css("display", "block");
/* 使用visibility属性来隐藏元素 */
$(element).css("visibility", "hidden");
/* 使用visibility属性来显示元素 */
$(element).css("visibility", "visible");
/* 使用opacity属性来改变元素的透明度 */
$(element).css("opacity", "0");
/* 使用opacity属性来恢复元素的透明度 */
$(element).css("opacity", "1");
/* 使用.hide()函数来隐藏元素 */
$(element).hide();
/* 使用.show()函数来显示元素 */
$(element).show();

Classes

CSS에서 숨겨진 요소의 클래스를 정의한 다음 jQuery를 사용하여 클래스를 추가하거나 제거하여 요소를 숨기거나 표시합니다.

/* 在CSS中定义隐藏元素的类 */
.hide { display: none; }
/* 使用addClass()函数来添加该类 */
$(element).addClass("hide");
/* 使用removeClass()函数来删除该类 */
$(element).removeClass("hide");

4. jQuery 숨겨진 요소 획득

실제 개발에서는 숨겨진 요소를 획득하고 관련 작업을 수행해야 합니다. jQuery에서 제공하는 다음 함수를 사용하여 숨겨진 요소를 가져올 수 있습니다: .is(":hidden"), .not(":visible"), .filter(":hidden") 등.

요소가 숨겨져 있는지 확인하려면 .is() 함수를 사용하세요

/* 判断元素是否被隐藏 */
if ($(element).is(":hidden")) {
    // 隐藏时的操作
} else {
    // 显示时的操作
}

숨겨지지 않은 요소를 필터링하려면 .not() 함수를 사용하세요

/* 获取非隐藏的元素 */
var visibleElements = $("div").not(":hidden");

숨겨진 요소를 필터링하려면 .filter() 함수를 사용하세요

/* 获取隐藏的元素 */
var hiddenElements = $("div").filter(":hidden");

5. jQuery는 표시 및 숨기기를 제어합니다

실제 개발에서는 요소를 표시하고 숨기기 위해 이벤트를 제어해야 할 수도 있습니다. jQuery에서 제공하는 .toggle(), .fadeIn(), .fadeOut 기능을 사용할 수 있습니다. (), 등.

요소의 상태를 전환하려면 .toggle() 함수를 사용하세요

/* 在按钮点击时切换元素的显示状态 */
$("#toggleBtn").click(function() {
    $("div").toggle();
});

요소를 페이드 인하려면 .fadeIn() 함수를 사용하세요

/* 在按钮点击时淡入元素 */
$("#fadeInBtn").click(function() {
    $("div").fadeIn();
});

요소를 페이드 아웃하려면 .fadeOut() 함수를 사용하세요

/* 在按钮点击时淡出元素 */
$("#fadeOutBtn").click(function() {
    $("div").fadeOut();
});

6. jQuery가 표시 및 숨기기를 결정합니다.

실제 개발에서는 요소가 현재 표시되는지 또는 숨겨져 있는지 확인해야 할 수도 있습니다. 이를 달성하려면 다음 방법을 사용할 수 있습니다.

.is() 함수를 사용하여 요소가 숨겨져 있는지 확인

/* 判断元素是否被隐藏 */
if ($(element).is(":hidden")) {
    // 元素是隐藏的
} else {
    // 元素是显示的
}

.css() 함수를 사용하여 요소의 표시 속성을 가져옵니다

/* 获取元素的display属性 */
var display = $(element).css("display");
if (display == "none") {
    // 元素是隐藏的
} else {
    // 元素是显示的
}

7. jQuery 숨겨진 표시

실제 개발에서는, 특정 조건을 사용해야 할 수도 있습니다. 요소를 숨기거나 표시하려면 다음 방법을 사용할 수 있습니다.

요소를 숨기려면 .hide() 함수를 사용하세요

/* 在条件成立时隐藏元素 */
if (condition) {
    $(element).hide();
}

요소를 표시하려면 .show() 함수를 사용하세요

/* 在条件成立时显示元素 */
if (condition) {
    $(element).show();
}

요소 상태를 전환하려면 .toggle() 함수를 사용하세요

/* 在按钮点击时切换元素的显示状态 */
$("#toggleBtn").click(function() {
    $("div").toggle();
});

8 요소를 선택하세요. 실제 개발에서는 관련 작업을 수행하기 위해 지정된 요소를 선택하는 것이 필요합니다. 선택을 위해 jQuery에서 제공하는 다음 함수를 사용할 수 있습니다: .eq(), .siblings(), .next(), .prev() 등.

.eq() 함수를 사용하여 지정된 첨자가 있는 요소를 선택하세요.

/* 选取第1个div元素 */
var firstDiv = $("div").eq(0);

.siblings() 함수를 사용하여 형제 요소를 선택하세요.

/* 选取div元素的同级元素 */
var siblings = $("div").siblings();

.next() 함수를 사용하여 다음 형제 요소를 선택하세요

/* 选取div元素的下一个兄弟元素 */
var nextElement = $("div").next();

.prev() 함수를 사용하여 이전 형제 요소

/* 选取div元素的上一个兄弟元素 */
var prevElement = $("div").prev();

를 선택하세요.

위 내용은 Jquery의 숨겨진 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!