[jQuery] 2. 기본선택자(아이디 선택자, 태그 선택자, 클래스 선택자)

1. 아이디 선택자

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

 

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

    <script>
        $(function(){
            // 순수 js방식으로 아이디값으로 요소 선택
            document.getElementById('id1').style.color = 'red';
            document.getElementById('id1').innerHTML = 'H1 변경';


            // jQuery 방식 => $("#아이디명")
            $("#id1").css("color","pink");
            $("#id2").html("h2변경"); 
            // .html()  : 선택된 요소의 innerHTML과 관련된 기능을 수행
        })
    </script>

 

▶ jQuery 방식으로 아이디 요소 선택

=>    $("#아이디명")

 

ex)

 

☞ .html()  : 선택된 요소의 innerHTML과 관련된 기능을 수행

☞ "h2변경"으로 값이 변경되어 출력됨

 

 

결과 화면

 

 

---

2. 태그 선택자

    <p>JAVA</p>
    <p>oracle</p>
    <p>jdbc</p>

    <h5>html</h5>
    <h5>css</h5>
    <h5>javascript</h5>

    <script>
        $(function(){
            // 바닐라 자바스크립트 방식 => document.getElementsByTagName()
            const p = document.getElementsByTagName('p');
            // p.style = 'yellow';   // p태그 배열에 yellow가 추가됨
            // p가 배열이기 떄문에 style 값을 적용할 수 없음

            for(let i=0; i<p.length; i++){
                p[i].style.color = 'red';
            }
            console.log(p);

            // jQuery방식 => ${'태그명'}
            $("h5").css("color","blue");

            // 여러 종류의 태그들을 동시에 선택하고자 할때
            $("p, h5").css("backgroundColor", "pink");
        })
    </script>

 

▶ jQuery 방식 => ${'태그명'}.css();

 

▶ 여러 종류의 태그들을 동시에 선택하고자 할 때

${'태그명','태그명'}.css();

 

결과화면

 

 

---

3. 클래스 선택자

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

 

    <h1 class="item">Class1</h1>
    <h1 class="item select">Class2</h1>
    <h1 class="item select">Class3</h1>

    <script>
        $(function(){
            // 순수 js 방식
            const items = document.querySelectorAll(".item");
            items.forEach(function(item, index) {
                item.style.color = 'orange';
                item.onclick = () => console.log('클릭');
            })
        })

        // jquery 방식
        $(".select")
        .css("backgroundColor",'lightgray')
        .click(function(){
            alert("클릭");
        })

        // click() : 클릭이벤트와 관련된 기능 수행
    </script>

 

▶ jquery 방식

$(".select")         .css("backgroundColor",'lightgray')         .click(function(){             alert("클릭");         })

 

☞ 클래스가 "select" 요소를 선택하여 css 스타일을 주고, 클릭하면 알람창 "클릭"이 발생하도록 설정

☞ click() : 클릭이벤트와 관련된 기능 수행