본문 바로가기
제이쿼리

[제이쿼리] filter(), find(), width(), replace(), toggle()

2boki 2020. 8. 12. 10:53

- filter()

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(document).ready(
            function() {
                // filter
                // eq랑 비슷한 개념
                // $("li").filter(".middle").addClass("selected");

                // 짝수 번째 인덱스 선택 (실제로는 홀수 번째가 됨)
                // $("li").filter(":even").addClass("selected");

                // 홀수 번째 인덱스 선택 (실제로는 짝수 번째가 됨)
                // $("li").filter(":odd").addClass("selected");

                // 가장 첫 번째 요소 선택
                $("li").filter(":first").addClass("selected");
            }
        );
    </script>
    <style>
        .selected {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li class="top">list item 1</li>
            <li class="top">list item 2</li>
            <li class="middle">list item 3</li>
            <li class="middle">list item 4</li>
            <li class="bottom">list item 5</li>
            <li class="bottom">list item 6</li>
        </ul>
    </div>
</body>

</html>

 

- find()

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(document).ready(
            function() {
                // find
                // 지정한 요소의 하위 요소에서 탐색

                // <p>의 하위 <span>을 찾음
                $("p").find("span").addClass("selected");
            }
        );
    </script>
    <style>
        .selected {
            color: red;
        }
    </style>
</head>

<body>
    <p>this is paragraph<br />
    <span>this is red</span>
    </p>

    <p>this is paragraph</p>
    <span>this is not red</span>
</body>

</html>

 

- width()

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(document).ready(
            function() {
                // width
                // css
                $("div:first").width(100); // width의 값을 100px로 변경함
                $("div:first").css("background-color", "blue"); // 배경 색상을 파란색으로 변경함
            }
        );
    </script>
    <style>
        div {
            width: 70px;
            height: 50px;
            margin: 5px;
            background-color: red;
            cursor: pointer;
            float: left;
        }
    </style>
</head>

<body>
    <div>my div</div>
    <div>my div</div>
    <div>my div</div>
    <div>my div</div>
    <div>my div</div>
</body>

</html>

 

- replace()

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(document).ready(
            function() {
                $("div").click(function() {
                    // <div>를 지정한 태그로 교체함 (text 교체 개념이 아닌 tag 교체 개념)
                    $(this).replaceWith("<h1><b>JQUERY IS GREAT</b></h1>");
                });
            }
        );
    </script>
    <style>
        #division {
            width: 60px;
            height: 60px;
            margin: 10px;
            padding: 12px;
            border: 2px solid red;
            background-color: blue;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <p>click square below</p>
    <span id="result">

    </span>

    <div id="division">
        this is blue square
    </div>
</body>

</html>

 

- toggle()

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(document).ready(
            function() {
                $(".clickme").click(function() {
                    $(".target").toggle("slow", function() { // hide(), show()가 전환되며 실행됨 (스위치 개념)
                        $(".log").text("complete!");
                    });
                });
            }
        );
    </script>
    <style>
        .target {
            width: 60px;
            height: 60px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="clickme">click me</div>
    <div class="target">target</div>
    <div class="log">log</div>
</body>

</html>

저작자표시 비영리 변경금지 (새창열림)

'제이쿼리' 카테고리의 다른 글

[제이쿼리] select(), change(), keydown(), keyup(), keypress(), scroll()  (0) 2020.08.12
[제이쿼리] mouseenter(), mouseleave(), hover()  (0) 2020.08.12
[제이쿼리] navigator()  (0) 2020.08.12
[제이쿼리] next(), first(), last(), eq()  (0) 2020.08.12
[제이쿼리] append(), prepend() / before(), after() / remove() / addClass()  (0) 2020.08.12

'제이쿼리' Related Articles

티스토리툴바