본문 바로가기
JAVASCRIPT

Javascript Jquery Selector 자바스크립트 제이쿼리 선택자 2

by devorldist 2022. 5. 9.
728x90
반응형
SMALL

# 종속 선택자

<!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>
        $(function(){
            $("h1.cute").css("background-color", "pink").css("border", "2px dashed yellow");
        });
    </script>
</head>
<body>
    <h1 class="cute">제이쿼리</h1>
    <h2>선택자</h2>
    <h3 id="hello">인접 선택자</h3>
    <h3>직접 선택자</h3>
</body>
</html>

# 부모 요소 선택자

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>
        $(function() {
            $("#list_1").parent().css("border", "2px dashed pink");
        });
    </script>
   
</head>
<body>
    <h1>인접 관계 선택자</h1>
    <ul id="wrap">
        <li> 리스트1
            <ul>
                <li id="list_1">리스트1-1</li>
                <li>리스트1-2</li>
            </ul>
        </li>
        <li> 리스트2</li>
        <li> 리스트3</li>
    </ul>
</body>
</html>
 
# 하위 요소 선택자
 
<!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>
        $(function() {
            $("#wrap h1").css({
                "background-color":"pink",
                "border":"4px dashed skyblue"
            });
        });
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <section>
            <h1>하위 요소 선택자</h1>
            <p>내용2</p>
        </section>
    </div>
</body>
</html>
 
# 자식 요소 선택자
 
<!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>
        $(function(){
            $("#wrap > h1").css("background-color", "pink");
            $("#wrap > section").css({
                "background-color":"yellow",
                "border":"2px dashed orange"
            });
        });
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <section>
            <h1>자식 요소 선택자</h1>
            <p>내용2</p>
        </section>
    </div>
</body>
</html>
 
# 형 / 동생 요소 선택자
 
<!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>
        $(function(){
            var sty1 = {
                "background-color":"red",
                "border":"2px dotted pink"
            }
            var sty2 = {
                "background-color":"orange",
                "border":"2px solid skyblue"
            }
            $(".txt").prev().css(sty1); //        <p>내용1</p>
            $(".txt + p").css(sty2); //        <p>내용3</p>
            $(".txt").next().next().css(sty1); //        <p>내용4</p>
        });
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
    </div>
</body>
</html>
 
# 전체 형 / 동생 요소 선택자
 
<!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>
        $(function(){
            var sty1 = {
                "background-color":"red",
                "border":"2px dotted pink"
            }
            var sty2 = {
                "background-color":"orange",
                "border":"2px solid skyblue"
            }
            $(".txt").prevAll().css(sty1); //h1, p
            $(".txt").nextAll().css(sty2); //p, p
           
        });
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
    </div>
</body>
</html>
 
# 전체 형제 요소 선택자
 
<!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>
        $(function(){
            var sty1 = {
                "background-color":"yellow",
                "border":"2px dotted pink"
            }            
            $(".txt").siblings().css(sty1);          
        });
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
    </div>
</body>
</html>
 
# 범위 제한 전체 형 / 동생 요소 선택자
 
<!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>
        $(function(){
            var sty1 = {
                "background-color":"yellow",
                "border":"2px dotted pink"
            }            
            $(".txt3").prevUntil(".title").css(sty1);
            $(".txt3").nextUntil(".txt4").css(sty1);  
        });
    </script>
</head>
<body>
    <div id="wrap">
        <h1 class="title">선택자</h1>
        <p>내용1</p>
        <p>내용2</p>
        <p class="txt3">내용3</p>
        <p>내용4</p>
        <p>내용5</p>
        <p class="txt4">내용6</p>
    </div>
</body>
</html>
 
# 상위 요소 선택자
 
<!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>
        $(function(){
            var sty1 = {
                "background-color":"pink",
                "border":"2px solid green"
            }
            var sty2 = {
                "background-color":"yellow",
                "border":"2px dashed red"
            }
            $(".txt1").parents().css(sty1);
            $(".txt2").parents("div").css(sty2);
        });
    </script>
</head>
<body>
    <h1 class="title">선택자</h1>
    <section>
        <div>
            <p class="txt1">내용1</p>
        </div>
    </section>
    <section>
        <div>
            <p class="txt2">내용2</p>
        </div>
    </section>    
</body>
</html>
 
# 가장 가까운 상위 요소 선택자
 
<!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>
        $(function() {
            $(".txt1").closest("div").css("border", "2px dashed pink");
        });
    </script>
</head>
<body>
    <h1>선택자</h1>
    <div>
        <div>
            <p class="txt1">내용</p>
        </div>
    </div>
</body>
</html>
 
 
출처 : doit javascript
728x90
반응형
LIST
저작자표시 비영리 변경금지

'JAVASCRIPT' 카테고리의 다른 글

Javascript Jquery Array related method 자바스크립트 제이쿼리 배열 관련 메서드  (0) 2022.05.11
Javascript Jquery Selector 제이쿼리 탐색 선택자  (0) 2022.05.10
Javascript Jquery Selector 자바스크립트 제이쿼리 선택자 1  (0) 2022.05.08
Javascript Function 자바스크립트 함수  (0) 2022.05.08
Javascript Browser Object Model 자바스크립트 브라우저 객체 모델  (0) 2022.05.08

관련글

티스토리툴바