jQuery | Selector

jQuery | Selector

jQuery 선택자란 ?

jQuery에서 원하는 HTML 의 DOM (DOcuMent) 를 찾기 위해서

$(선택자) 

jQuery(선택자)

와 같은 표현식을 사용한다.

또한 jQuery 는 CSS Selector 방식을 사용하고 있다.

 

jQuery | Selector 선택자 종류

// 태그 선택자
$('태그명')
$('body') 
$('footer')

특정한 태그를 ' ' 안에 작성하면 된다.

 

// 아이디 선택자
$('#id')
$('#temp')
$('#subButton')

특정 id를 가진 요소를 # 뒤에 작성하면 된다.

 

// 클래스 선택자
$('.클래스명')
$('.nav_bar')
$('.temp')

특정 class를 가진 요소를 . 뒤에 작성하면 된다.

 

이렇게 크게 3가지로 어떠한 요소를 선택해서 어떠한 동작을 취할 수 있다.

 

 

 

jQuery | Selector 활용 예시

---

<h1 id="element1">Heading 1</h1>
<h2 id="element2">Heading 2</h2>
<h3 id="element3">Heading 3</h3>
<h4 class="elements">Heading 4</h4>
<h5 class="elements">Heading 5</h5>
<h6 class="elements">Heading 6</h6>

 

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

 

---

 

이러한 코드가 있다면 jQuery Selector 로 요소를 지정해 변경해줄 수 있다.

각각 <p> 따로 <h1> , <h2> ,,, 따로 CSS 적용시키려거나

특정 id 값 , 클래스 값을 가지고있는 요소만 변경시키고 싶다면...

 

$().ready(function(){
    $("#element1").css("color" , "lightgray");          // element1 의 아이디를 가진 요소를 변경
    
    $("#element2 , #element3").css("color" , "yellow"); // element2 , 3 의 아이디를 가진 요소 변경
    
    $(".elements").css("color" , "blue");               // elements 의 클래스에 속한 요소를 변경
});

이와같은 jQuery 문을 써주면 된다. $("p")에 css 메서드를 사용하여 $("p").css("color" , "red"); 이 처럼 색을 빨강색으로 변경해주었다.

 

---

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

이 처럼 지정한 곳에만 색이 변하는걸 알 수 있다.