jQuery Selector 셀렉터 사용법

 

jQuery Selector 셀렉터 사용법

 

이번 포스팅에서는 jQuery의 기본 셀렉터에 대해서 알아보도록 하겠습니다.

 

셀렉터는 HTML DOM element 에 보다 쉽게 접근 할 수 있게 해주며

jQuery 에서 제공하는 막강한 기능의 적용도 쉽게 해줍니다.

 

그럼 jQuery 기본 셀렉터에는 어떤 것들이 있는지 알아보도록 하죠.

 

1. 모든 element 선택

 

[설명]

HTML 문서 내에 존재하는 모든 요소를 선택.

 

[사용법]

&("*")

 

[예] 

HTML DOM 내의 모든 요소의 테두리를 2px의 붉은 색으로 변경한다.

 

$(document).ready(function(){
    $("*").css("border", "2px solid red");
});

 

[적용전]공통

 

 

[적용후]

 

 

2. class 선택

 

[설명]

HTML 문서 내에 class를 선택. (명 앞에 '.' 이 붙는다.)

 

[사용법]

&(".class명")

 

[예] 

HTML DOM 내의 명이 search_box인 class를 찾아 테두리를 2px의 붉은 색으로 변경한다.

 

$(document).ready(function(){
    $(".search_box").css("border", "2px solid red");
});

 

[적용전]은 공통

 

[적용후]

 

 

 

3. id 선택

 

[설명]

HTML 문서 내에 id를 선택. (명 앞에 '#' 이 붙는다.)

 

[사용법]

&("#id명")

 

[예] 

HTML DOM 내에 id가 clickCnt 인 것을 찾아 테두리를 2px의 붉은 색으로 변경한다.

 

$(document).ready(function(){
    $("#clickCnt" ).css("border", "2px solid red");
});

 

[적용전]은 공통

 

[적용후]

 

 

4. element 선택

 

[설명]

HTML 문서 내에 element를 선택.

 

[사용법]

&("element")

 

[예] 

HTML DOM 내의 모든 <th> element 를 찾아 테두리를 2px의 붉은 색으로 변경한다.

 

$(document).ready(function(){
    $("th").css("border", "2px solid red");
});

 

[적용전]은 공통

 

[적용후]

 

 

5. multi 선택

 

[설명]

복수의 요소를 선택 가능.

 

[사용법5-1]

$("element.class#id")

 

[예5-1] 

HTML DOM 내의 <th> element중 id명이 title인 것을 찾아 테두리를 2px의 붉은 색으로 변경한다.

 

$(document).ready(function(){
    $("th#title").css("border", "2px solid red");
});

 

[적용전5-1]은 공통

 

[적용후5-1]

 

 

 

[사용법5-2]

$("element , .class , #id")   

 

[예5-2] 

HTML DOM 내의 element가 div중 class명이  search_box인 것과

class명이 lt이고 id가 clickCnt 인 것을 찾아 테두리를 2px의 붉은 색으로 변경한다.

 

$(document).ready(function(){
    $("div.search_box, .lt#clickCnt" ).css("border", "2px solid red");
});

 

[적용전5-2]은 공통

 

[적용후5-2]