jQuery hide() 메소드 사용하기

자바스크립트

웹을 움직이는 언어, 자바스크립트! ES6+, Vue, React, Node.js 등 모던 JS 생태계를 깊이 있게 탐구하는 공간입니다.

2025.02.22 03:00

jQuery hide() 메소드 사용하기

나우호스팅 22일 전 2025.02.22 03:00
14

0

jquery .hide()

자바스크립트의 .hide() 메서드

자바스크립트의 jQuery 라이브러리는 HTML 문서의 요소를 동적으로 조작할 수 있도록 도와주는 유용한 도구입니다. `.hide()` 메서드는 jQuery의 주요 메서드 중 하나로, 지정된 요소를 숨기기 위해 사용됩니다.

# .hide() 메서드의 구현

`.hide()` 메서드는 jQuery의 `core.js` 파일에 정의되어 있습니다. 이 파일은 jQuery의 핵심 로직을 담고 있습니다.

#hostingforum.kr
javascript

// jQuery 3.6.0 버전의 core.js 파일에서 .hide() 메서드의 구현

jQuery.fn.hide = function( speed, easing, callback ) {

    return this.each(function() {

        jQuery(this).css("opacity", 0);

        jQuery(this).css("display", "none");

    });

};

# .hide() 메서드의 동작

`.hide()` 메서드는 다음과 같은 과정을 거칩니다.

1. 속도와 이징: `speed` 파라미터가 지정된 경우, 해당 속도로 요소를 숨기도록 설정합니다. `easing` 파라미터가 지정된 경우, 해당 이징 함수를 사용하여 요소를 숨기도록 설정합니다.
2. 콜백 함수: `callback` 파라미터가 지정된 경우, 요소를 숨기기 직전에 콜백 함수를 호출합니다.
3. 요소 숨기기: `this` 키워드를 사용하여 현재 요소를 참조하고, `css()` 메서드를 사용하여 요소의 `opacity`와 `display` 속성을 설정합니다. `opacity` 속성을 0으로 설정하여 요소를 투명하게 만듭니다. `display` 속성을 `none`으로 설정하여 요소를 숨깁니다.

# 예제

다음 예제에서는 `.hide()` 메서드를 사용하여 HTML 문서의 요소를 숨깁니다.

#hostingforum.kr
html

<!DOCTYPE html>

<html>

<head>

    <title>jQuery .hide() 메서드 예제</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>

    <button id="hide-btn">Hide 요소</button>

    <div id="hide-div">숨길 요소</div>



    <script>

        $(document).ready(function() {

            $("#hide-btn").click(function() {

                $("#hide-div").hide(1000); // 1초 동안 숨기기

            });

        });

    </script>

</body>

</html>

이 예제에서는 `.hide()` 메서드를 사용하여 `#hide-div` 요소를 1초 동안 숨깁니다. `hide-btn` 버튼을 클릭하면 `#hide-div` 요소가 숨겨집니다.

이 게시물에 포함된 라이브러리

[PHP] sin - 사인
[PHP] min - 가장 낮은 값 찾기
[PHP] each - 배열에서 현재 키와 값 쌍을 반환하고 배열 커서를 이동합니다.
[PHP] asin - 아크 사인

추천해요 0

나우호스팅 @pcs8404

미니홈

쪽지

호스팅포럼 화이팅!

댓글목록

등록된 댓글이 없습니다.

자바스크립트 포인트 정책
전체 35건 / 1 페이지

번호	제목	작성자	조회
35	Jquery 선택자 $(selector) 정리 나우호스팅 21일 전	나우호스팅	31
34	jQuery .ajaxSetup() 나우호스팅 22일 전	나우호스팅	25
33	jQuery의 .extend() 메소드: 객체 합치기 기초 나우호스팅 22일 전	나우호스팅	23
32	제이쿼리.trim() 함수: 문자열 앞뒤의 공백 제거하기 나우호스팅 22일 전	나우호스팅	28
31	jQuery에서 데이터 필터링하기: .grep() 함수 사용 나우호스팅 22일 전	나우호스팅	23
30	Jquery .each() : 반복문으로 요소 접근하기 나우호스팅 22일 전	나우호스팅	23
29	Jquery .post() : Ajax 데이터 요청을 위한 기초 지식 나우호스팅 22일 전	나우호스팅	22
28	Jquery .get() : Ajax 데이터 요청을 위한 기초 지식 나우호스팅 22일 전	나우호스팅	21
27	Query .load() 함수는 HTML 요소에 외부 URL의 내용을 로드하는 데 사용 나우호스팅 22일 전	나우호스팅	22
26	AJAX 요청을 위한 jQuery $.ajax() 함수: 개념과 예시 나우호스팅 22일 전	나우호스팅	19
25	jQuery animate() 함수 나우호스팅 22일 전	나우호스팅	21
24	slideDown() 효과를 이용한 jQuery 애니메이션 구현 나우호스팅 22일 전	나우호스팅	20
23	자바스크립트 슬라이드 업 메소드: .slideUp()의 이해 나우호스팅 22일 전	나우호스팅	22
22	jQuery .fadeOut() 메서드 나우호스팅 22일 전	나우호스팅	22
21	jQuery fadeIn() 메서드 나우호스팅 22일 전	나우호스팅	21

검색

게시물 검색

자바스크립트