JQuery

JQuery 제이쿼리 선택자_기본선택자

lily_y 2023. 10. 12. 17:24

🌷 선택자는 HTML 요소를 선택하여 가져온다

🌷 제이쿼리 선택자는 CSS 선택자와 마찬가지로 선택 한 요소의 디자인 속성을 적용할 때 사용할 수 있디

🌷 제이쿼리 선택자를 사용하여 ‘동적’으로 스타일을 적용한다

 

 

 

 

 

HTML의 문서 객체 구조

 

그림으로 보면 조금 더 이해하기 쉬울것이다.

 

 

 

 

 

 

 

 

 

 

선택자를 사용하기 위해 문서객체를 불러들일 때에,

 

선택자 사용 방법의 2가지 사례

 

1. document.ready

2. function

을 먼저 작성하는 두 가지의 방법은 모두 정상적인 작성 방법이다

 

 

 

🍁 선택한 요소에 지정한 스타일을 적용

           $("CSS 선택자").css("스타일 속성명", “값”);     

🍁 선택한 요소에 지정한 속성을 적용

           $("CSS 선택자").attr("속성명", "값");      

 

 

 

<head>
<meta charset="UTF-8">
<title> 선택자 </title>  

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

제이쿼리에 들어가기 앞서,

앞으로 head 상단에 jquery를 불러들이는 걸 한다는걸 잊지말자😋

 

 

 

 

 

기본선택자에 대해 작업을 통해 알아보도록 하자

🎀 전체 선택자

$("*")

 

<script>
    $(function(){
        $("*").css("border","1px solid blue");
        //선택자에 *가 들어가면 바디태그의 전체를 선택함을 의미함
        //이와같이 작성할 경우 전체외각이 다 나타남 (html / head / body )
    });
</script>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접 선택자</h3>
</body>

 

 

 

 

 

 

🎀 아이디 선택자

$("#아이디명")

 

 

 

    <script>
        $(function () {
            $("#tit").css("background-color", "#ff0").css("border", "2px solid #f00");
            //tit문서객체에 css를 적용했는데 연속해서 한번 더 적용함 : 체이닝방식(조금더 유연한)
            // $("#tit").css("background-color","#ff0");
            // $("#tit").css("border", "2px solid #f00");
        });
    </script>
</head>

<body>
    <h1>제이쿼리</h1>
    <h2 id="tit">선택자</h2>
    <h3>직접 선택자</h3>
</body>

 

💡 체이닝 방식이란 ?       

선택한 요소에는 메서드를 연속해서 사용할 수 있는데, 이를 마치 체인이 엮인 모양과 같다고 하여 ‘체이닝 기법’이라 한다.

제이쿼리에서는 한 객체에 다양한 메서드를 줄줄이 이어서 사용을 할 수 있다.

메서드 사용이 완료되면 문장 마지막에는 세미콜론(;)을 작성하여 마무리하면 된다.

 

          $(요소 선택).css(속성1, 값1).css(속성2, 값2).css(속성3, 값3);

 

 

 

 

🎀 클래스 선택자

$(".클래스명")

 

    <script>
        /* 클래스 선택자
        $(".클래스명")
        */
        $(function () {
            $(".tit").css("background-color", "#ff0").css("border", "2px dashed #f00");
        });
        //<h2 class=“tit”>선택자</h2>
    </script>
</head>

<body>
    <h1>제이쿼리</h1>
    <h2 class="tit">선택자</h2>
    <h3>직접 선택자</h3>
</body>

 

 

 

 

 

 

🎀 요소명 선택자

$("요소명")

 

 

 

    <script>
        /*
        요소명 선택자
        $("요소명")
        */
        $(function () {
            $("h2").css("background-color", "#0ff").css("border", "2px dashed #f00");
        });
        //<h2>선택자</h2>
    </script>
</head>

<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접 선택자</h3>
</body>

 

 

 

 

 

 

 

🎀 그룹 선택자

$("요소 선택 1, 요소 선택 2, 요소 선택 3,…요소 선택 n");

 

 

 

<script>
/*
그룹 선택자
$("요소 선택 1, 요소 선택 2, 요소 선택 3,…요소 선택 n");
*/
    $(function(){
        $("h1, #tit3").css("background-color","#0ff").css("border", "2px dashed #f00");
    });
    //<h1>과 <h3>의 tit3태그가 선택
</script>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3 id="tit3">직접 선택자</h3>
    <h3>인접 선택자</h3>
</body>

 

 

 

 

 

 

 

🎀 종속 선택자

$("요소명#id 값")

$("요소명.class 값")

 

 

 

    <script>
        $(function () {
            /*종속 선택자
            $("요소명#id 값")
            $("요소명.class 값")
           
            tip: 종속 선택자는 요소명과 id 값 사이에 공백이없지만 하위 선택자는 공백이 있습니다.
            */
            $("h1#tit").css("background-color", "#0ff").css("border", "2px dashed #f00");
        });
        //h1태그 중 하나를 선택한 것 : tit의 제이쿼리글자가 스타일 적용됨

    </script>
</head>

<body>
    <h1 id="tit">제이쿼리</h1>
    <h1>이거는h1중 두번째</h1>
    <h2>선택자</h2>
    <h3 class="tit">직접 선택자</h3>
</body>