[jQuery] 02_기본 선택자

천재강쥐 2022. 9. 30. 12:19

jQuery의 기본 선택자에 대해 알아보자

기본 선택자

잠깐!

들어가기 전에 파일이 바뀔 때마다 반드시 라이브러리 연결해 주기

<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> <!-- 온라인 방식 -->
</head>

✔️ .css(): 요소 객체에 스타일과 관련된 기능을 수행
✔️ .html(): 선택된 요소의 innerHTML과 관련된 기능들을 수행하는 메소드

✔️ .click() : 클릭 이벤트와 관련된 기능을 수행하는 메소드

✔️ .val() : value 속성과 관련된 기능을 수행하는 메소드

✔️ .attr() : 그 이외의 속성들과 관련된 기능을 수행

✔️ .addClass() : 선택된 요소에 클래스를 추가해 주는 메소드
✔️ .removeClass() : 선택된 요소에 클래스를 제거해 주는 메소드

*아이디 선택자: $("#아이디명")****

👉🏻 특정 고유한 아이디값을 가진 요소 하나만을 선택하고자 할 때

    <h1 id="id1">ID1</h1>
    <h1 id="id2">ID2</h1>

    <script>
        $(document).ready(function() {

            // 순수 자바스크립트 방식 => document.getElementById("아이디명");
            // 선택된 요소 객체의 속성에 직접 접근해서 값을 변경(대입을 통해)
            document.getElementById("id1").style.color = "red";
            document.getElementById("id1").innerHTML = "h1 변경함";

            // jQuery 방식 => $("#아이디명")
            // 선택된 요소 객체에 메소드를 이용해서 값을 변경 (호출을 통해)
            $("#id2").css("color", "pink");
            $("#id2").html("h1 변경함");
        });
    </script>

*태그 선택자: $("태그명")****

👉🏻 특정 태그 종류인 요소들을 모두 선택하고자 할 때

    <p>JAVA</p>
    <p>ORACLE</p>
    <p>JDBC</p>

    <h5>HTML</h5>
    <h5>CSS</h5>
    <h5>JAVASCRIPT</h5>

    <script>
        jQuery(document).ready(function() {

            // 순수 자바스크립트 방식 => document.getElementsByTagName("태그명");
            var p = document.getElementsByTagName("p"); // [p, p, p]
            // p.style.color = "yellow"; // p는 배열이나 style 속성이 바로 적용 안 됨
            // 반복문을 돌려 줘야 함
            for(var i = 0; i < p.length; i++) {
                p[i].style.color = "red";
            }

            // jQuery 방식 => $("태그명")
            $("h5").css("color", "blue");
            // 해당 구문이 .ready 바깥에 기술된다면 스타일이 적용되지 않음!
            // ready 속성 자체가 태그들보다 위에 기술되는 건 상관없음 : 어차피 로드 후 적용되니까

            // 한꺼번에 여러 종류의 태그들을 동시에 선택하고자 한다면
            $("p, h5, #id1").css("backgroundColor", "pink");
        });
    </script>

*클래스 선택자 => $(".클래스명")****

👉🏻 특정한 클래스 속성을 가진 요소들을 선택하고자 할 때

    <!-- h1[class=item]{class$}*3 + Enter -->
    <h1 class="item">class1</h1>
    <h1 class="item select">class2</h1>
    <h1 class="item select">class3</h1>

    <script>
        $(document).ready(function() {

            // 순수 자바스크립트 방식 => document.getElementsByClassName("클래스명");
            var items = document.getElementsByClassName("item"); // [h1, h1, h1]
            for(var i = 0; i < items.length; i++) {
                items[i].style.color = "orange";
                items[i].onclick = function() {
                    console.log("클릭됨");
                };
            }

            // jQuery 방식 => $(".클래스명")
            $(".select").css("backgroundColor", "lightgrey");
            $(".select").click(function() {
                alert("클릭됨");
            });

            // .click() : 클릭 이벤트와 관련된 기능을 수행하는 메소드

        });
    </script>

*정리

👉🏻 요소를 선택하는 방법

순수 자바스크립트 방식: document 객체의 요소를 선택해 주는 함수를 호출해서 불러옴
jQuery 방식: $(선택자)

순수 자바 스크립트 방식	jQuery 방식
document.getElementById("아이디명")	$("#아이디명")
document.getElementsByTagName("태그명")	$("태그명")
document.getElementsByClassName("클래스명")	$(".클래스명")

👉🏻 선택된 요소에 속성값을 변경하고자 할 때

순수 자바스크립트 방식: 선택된 요소 객체의 속성에 직접 접근해서 대입하는 방식
jQuery 방식: 해당 속성과 관련된 기능을 제공하는 메소드를 호출하는 방식

	순수 자바 스크립트 방식	jQuery 방식
스타일 관련	선택된 요소 객체의 속성에 접근해서 선택된 요소에 메소드를 호출 .style.스타일속성명 = "변경할값";	.css("스타일속성명", "변경할값");
내용 관련	innerHTML = "변경할값";	.html("변경할값");
이벤트 관련	.on이벤트명 = function() {};	.이벤트명(function() {});

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