jQuery

[JavaScript] jQuery 기본 실습

Feb 21, 2024

Hide/Show


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    </script>
</head>

<body>

    <p>Hide 버튼 누르면 사라지고, Show 버튼 누르면 생김</p>
    <button id="hide">Hide</button>
    <button id="show">Show</button>

    <script>
        function h() {
            $("p").hide();
        }
        function s() {
            $("p").show();
        }
        $("#hide").click(h);
        $("#show").click(s);
    </script>
</body>

</html>

속도 조절


$("button").click(function(){
  $("p").hide(1000);
});

토글 형식


$("button").click(function(){
  $("p").toggle();
});

Get

text(), html()


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</head>

<body>

    <p id="test">This is some <b>bold</b> text in a paragraph.</p>

    <button id="btn1">Get Text</button>
    <button id="btn2">Get HTML</button>

    <script>
        function text() {
            alert("Text: " + $("#test").text());
        }
        function html() {
            alert("HTML: " + $("#test").html());
        }

        $("#btn1").click(text);
        $("#btn2").click(html);

    </script>
</body>

</html>

val()


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</head>

<body>

    <p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

    <button>Show Value</button>

    <script>
        $("button").click(() => alert("Value: " + $("#test").val())); // 람다표현식
    </script>

</body>

</html>

attr() - 속성 가져오기


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>

    <button>Show href Value</button>

    <script>
        $("button").click(() => alert($("#w3s").attr("href")));
    </script>

</body>

</html>

Set

text(), html(), val()


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <p id="test1">This is a paragraph.</p>
    <p id="test2">This is another paragraph.</p>

    <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

    <button id="btn1">Set Text</button>
    <button id="btn2">Set HTML</button>
    <button id="btn3">Set Value</button>

    <script>
        $("#btn1").click(() => $("#test1").text("Hello world!"));
        $("#btn2").click(() => $("#test2").html("<b>Hello world!</b>"));
        $("#btn3").click(() => $("#test3").val("Dolly Duck"));
    </script>

</body>

</html>

text(), html(), val() 콜백 함수


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <p id="test1">This is a <b>bold</b> paragraph.</p>
    <p id="test2">This is another <b>bold</b> paragraph.</p>

    <button id="btn1">Show Old/New Text</button>
    <button id="btn2">Show Old/New HTML</button>

    <script>

        $("#btn1").click(() => {
            $("#test1").text((i, origText) => {
                return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
            });
        });

        $("#btn2").click(() =>
            $("#test2").html((i, origText) => {
                return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
            }));
    </script>

</body>

</html>

attr() - 속성 설정


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</head>

<body>

    <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>

    <button>Change href Value</button>

    <script>
        $("button").click(() => {
            $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
        });
    </script>

</body>

</html>

attr() 콜백 함수


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>

    <button>Change href Value</button>

    <script>
        $("button").click(() => {
            $("#w3s").attr("href", (i, origValue) => {
                return origValue + "/jquery/";
            });
        }); 
    </script>

</body>

</html>

Add

append() - 뒤쪽에 Add


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>

    <button id="btn1">Append text</button>
    <button id="btn2">Append list items</button>

    <script>
        $("#btn1").click(() => $("p").append(" <b>Appended text</b>."));
        $("#btn2").click(() => $("ol").append("<li><b>Appended item</b></li>"));
    </script>

</body>

</html>

prepend() - 앞쪽에 Add


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>

    <button id="btn1">prepend text</button>
    <button id="btn2">prepend list items</button>

    <script>
        $("#btn1").click(() => $("p").prepend(" <b>prepended text</b>."));
        $("#btn2").click(() => $("ol").prepend("<li><b>prepended item</b></li>"));
    </script>

</body>

</html>

💡

before(), after() 는 각각 prepend(), append()와 비슷하다 하지만 prepend(), append()는 선택한 요소의 내부의 앞, 뒤로 추가를 하는 것이고, before(), after()는 선택한 요소의 외부의 앞, 뒤로 추가를 하는 것.

Remove

remove() - 선택한 요소(및 해당 하위 요소)를 제거


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

        This is some text in the div.
        <p>This is a paragraph in the div.</p>
        <p>This is another paragraph in the div.</p>

    </div>
    <br>

    <button>Remove div element</button>

    <script>
        $("button").click(() => $("#div1").remove());
    </script>

</body>

</html>

remove(.test) → class = “test” 인 요소 삭제

empty() - 선택한 요소에서 하위 요소를 제거


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

        This is some text in the div.
        <p>This is a paragraph in the div.</p>
        <p>This is another paragraph in the div.</p>

    </div>
    <br>

    <button>empty div element</button>

    <script>
        $("button").click(() => $("#div1").empty());
    </script>

</body>

</html>

CSS Classes

addClass() - 선택한 요소에 하나 이상의 클래스를 추가


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .blue {
            color: blue;
        }
    </style>
</head>

<body>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <div>This is some important text!</div><br>

    <button>Add classes to elements</button>

    <script>
        $("button").click(() => {
            $("h1, h2, p").addClass("blue");
            $("div").addClass("important");
        });
    </script>

</body>

</html>

removeClass() - 선택한 요소에서 하나 이상의 클래스를 제거


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .blue {
            color: blue;
        }
    </style>
</head>

<body>

    <h1 class="blue">Heading 1</h1>
    <h2 class="blue">Heading 2</h2>

    <p class="blue">This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <button>Remove class from elements</button>

    <script>
        $("button").click(() => {
            $("h1, h2, p").removeClass("blue");
        });
    </script>

</body>

</html>

toggleClass() - 선택한 요소에서 클래스 추가/제거 간을 전환


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .blue {
            color: blue;
        }
    </style>
</head>

<body>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <button>Toggle class</button>

    <script>
        $("button").click(() => {
            $("h1, h2, p").toggleClass("blue");
        });
    </script>

</body>

</html>

css() -스타일 속성을 설정하거나 반환

첫 번째 요소의 배경색 값을 반환


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <h2>This is a heading</h2>

    <p id="p" style="background-color:#ff0000">This is a paragraph.</p>
    <p style="background-color:#00ff00">This is a paragraph.</p>
    <p style="background-color:#0000ff">This is a paragraph.</p>

    <button>Return background-color of p</button>

    <script>
        $("button").click(() => { alert("Background color = " + $("#p").css("background-color")) });
    </script>

</body>

</html>

CSS 속성 설정 변경


<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>

    <h2>This is a heading</h2>

    <p style="background-color:#ff0000">This is a paragraph.</p>
    <p style="background-color:#00ff00">This is a paragraph.</p>
    <p style="background-color:#0000ff">This is a paragraph.</p>

    <p>This is a paragraph.</p>

    <button>Set multiple styles for p</button>

    <script>
        $("button").click(() => { $("p").css({ "background-color": "yellow", "font-size": "200%" }) });
    </script>

</body>

</html>

See more posts