잇뉴얼 (IT_Manual)

[JQuery] HTML 요소 숨기기 / 보여주기 (hide, show) 본문

Coding/JavaScript

[JQuery] HTML 요소 숨기기 / 보여주기 (hide, show)

잇뉴얼 2022. 6. 3. 18:20
728x90
반응형

[JQuery] HTML 요소 숨기기 / 보여주기 (hide, show)

▶ HTML 요소 숨기기 - hide()

제이쿼리를 이용해서 간단하게 HTML요소를 숨길수가 있습니다.

<head>
    <meta charset="UTF-8">
    <title>제이쿼리</title>
    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function hide_fun() {
            $("#text_box").hide();  // text_box라는 id를 가지고 있는 요소를 숨깁니다.
        }
    </script>
</head>
<body>
    <button onclick="hide_fun()">텍스트 입력창 숨기기</button>
    <!--  HTML 숨길 요소  -->
    <div id="text_box">
        <input id="input_text" type="text" placeholder="텍스트를 입력해주세요.">
    </div>
</body>

코드를 보면, <body>태그안에 숨길 요소에 'id'를 작성해준 다음, 위쪽에 <script>태그 안의 자바스크립트에 'hide_fun()'이라는 함수를 선언한 다음, 해당 함수 안에 '$("#text_box").hide();'이라 작성을 해놓았습니다. 해당 코드가 'text_box'라는 id를 가진 태그를 숨겨주게됩니다. 그리고 이 함수를 실행하기 위해, 버튼을 하나 생성한 다음, 'onclick'속성을 추가시켜서 해당 함수를 실행할 수 있도록 코드를 구성하였습니다.

▶ HTML 요소 보여주기 - show()

제이쿼리를 이용해서 간단하게 숨겨져있는 HTML요소를 보여줄수 있습니다.

<head>
    <meta charset="UTF-8">
    <title>제이쿼리</title>
    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function show_fun() {
            $("#text_box").show();  // 숨겨져있는 요소
        }
    </script>
</head>
<body>
    <button onclick="show_fun()">텍스트 입력하기</button>
    <div id="text_box" style="display:none">  <!--  style="display:none"이 요소를 안보이게 해준다. -->
        <input id="input_text" type="text" placeholder="텍스트를 입력해주세요.">
    </div>
</body>

제이쿼리에서 'show()'는 HTML에서 숨겨져있는 요소를 보여주는 코드입니다. 코드를 보면 'style="display:none"'이라 적혀있는데요. 이 코드에 의해 웹사이트에서 해당 요소를 숨겨주고 있습니다. 이 숨겨진 요소를 보여주기 위해 자바스크립트 영역에 'show_fun()'함수를 선언한 다음,  '$("#text_box").show()'라 작성을 해놓았습니다. 그리고 해당 함수를 불러오기위해 <button>태그안에 'onclick'속성을 넣어 'show_fun()'함수를 불러오도록 코드를 작성했습니다.

반응형

'Coding > JavaScript' 카테고리의 다른 글

[JQuery] 제이쿼리를 이용한 HTML요소 추가 방법  (0) 2022.06.05
[JQuery] 제이쿼리 임포트 & 사용방법  (0) 2022.06.03
[JavaScript] 자바스크립트 경고창 띄우기  (0) 2022.06.03
[JavaScript] 자바스크립트 배열 (Array)  (0) 2022.06.01
[JavaScript] 자바스크립트 클래스와 객체  (0) 2022.06.01
'Coding/JavaScript' Related Articles more
Comments