No sweet without sweat

콘텐츠 탐색 선택자(contain,contents,has,not,end) 본문

카테고리 없음

콘텐츠 탐색 선택자(contain,contents,has,not,end)

Remi 2021. 7. 25. 16:40
728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="JS/jquery.js"></script>
    <script>
        $(function(){
            $("#inner_1 p:contains(내용1)")
            .css({
                "background-color":"#ff0"
            });

            $("#inner_1 p:has(strong)")
            .css({
                "background-color":"#0ff"
            });
            
            $("#outer_wrap").contents()
            .css({
                "border":"1px dashed #00f"
            });

            $("#inner_2 p").not(":first")
            .css({
                "background-color":"#0f0"
            });

            $("#inner_2 p").eq(2).end()
            .css({
                "color" :"#f00"
            });
        });
    </script>
</head>
<body>
    <div id ="outer_wrap">
        <h1>콘텐츠 탐색 선택자</h1>
        <section id ="inner_1">
            <h1>contains(),contents(),has()</h1>
            <p>
                <span>내용1</span>
            </p>
            <p>
                <strong>내용2</strong>
            </p>
            <p>
                <span>내용3</span>
            </p>
        </section>

        <section id="inner_2">
            <h1>not(),end()</h1>
            <p>내용4</p>
            <p>내용5</p>
            <p>내용6</p>
        </section>
    </div>
</body>
</html>

728x90
반응형
저작자표시 (새창열림)
Comments