develope_kkyu

[JQUERY] 제이쿼리 선택자 본문

FrontEnd/JQUERY

[JQUERY] 제이쿼리 선택자

developekkyu37 2022. 12. 22. 12:48
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>선택자</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        // $(function(){
        // });
        $(document).ready(function(){
            // 직접 선택자
            $(".wrap-1").css("border", "1px solid orange");
            $(".wrap-1 p").css("background-color","yellow");
            
            // 근접 선택자
            $(".active").next("p").css("background-color","aqua");

            // 위치 선택자
            $(".wrap-1 p").eq(1).css("font-size","5px");
            // $(".wrap-1 p").gt(2).css("font-size","20px");
            
            // 속성 선택자
            $("input[type='text']").css("background-color", "orange");

            // 객체 조작 : 신규등록, 변경, 삭제.
            // 아래 시점에 active라는 클래스를 삭제하였기에 blue 색상은 미적용됨
            // 아래 코드로 인해서 <p>내용</p>로 변함.
            $(".wrap-1 p").eq(1).removeClass("active");
            $(".active").next("p").css("background-color","blue");

            // 아래 코드로 인해서.
            // <p class="active-insert">내용</p>로 바뀜
            $(".wrap-1 p").eq(1).addClass("active-insert");
            $(".active-insert").next("p").css("background-color","green");

            // 강제로 Tag를 포함한 문서를 추가하고자 할 때
            $(".wrap-2").append("<p>안녕하세요</p>");
        });
    </script>
</head>
<body>
    <div class="wrap-1">
        <p>텍스트1</p>
        <p class="active">내용</p>
        <p>
            <a href="http://www.naver.com">네이버</a>
        </p>
        <p>
            <input type="text" value="HELLO"/>
        </p>
    </div>
    <div class="wrap-2">
        <p>내용5</p>
        <p>내용6</p>
    </div>
</body>
</html>

--

728x90

'FrontEnd > JQUERY' 카테고리의 다른 글

[JQUERY] 애니메이션 - 박스 옮기기  (0) 2022.12.22
[JQUERY] 리스트 숨기기  (0) 2022.12.22
'FrontEnd/JQUERY' Related Articles more