jQuery - 선택자

1.요소 선택자

$("요소") -  html의 요소를 선택합니다.

$("div").text("선택");

 

 

2.아이디선택자

$("#id") - 아이디로 html의 요소를 선택합니다.

$("#box").text("선택");

 

 

 

3.클레스선택자

$(".class") - html의 클레스요소를 선택합니다.

$(".box").text("선택");

 

 

 

4.모든 선택자

$("*") - 모든 요소를 선택합니다.

$("*").text("선택");

 

 

 

5.자식 선택자

$("ul > li") - ul 밑에 li 요소를 선택합니다.

$("ul > li").text("선택");

5.자손선택자 선택자

$("#box div") - #box 밑에 모든 div를 선택합니다.

$("#box div").text("선택");

 

 

 

6.형제 선택자(1)

$("#box + div") - #box의 바로 다음 형제인 div를 선택합니다.

$("#box + div").text("선택");

 

 

7.형제 선택자(2)

$("#box ~ div") - #box의 바로 다음 형제인 모든 div를 선택합니다.

$("#box ~ div").text("선택");

 

 

8.위치 선택자(1)

$("div:first") - 첫번째 div요소를 선택합니다.

$("div:last") - 마지막 div요소를 선택합니다.

$("div:odd") - 홀수번째 div요소를 선택합니다.

$("div:even") - 짝수번째 div요소를 선택합니다.

$("box:first").text("선택");

 

 

9.위치 선택자(2)

$("div:eq(n)") - n번째 div요소를 선택합니다.

$("div:gt(n)") - n번째 div요소 이후 div요소를 선택합니다.(n번째 div 포함x)

$("div:lt(n)") - n번째 div요소 이전 div요소를 선택합니다.(n번째 div 포함x)

*jQuery순선는 0번재부터 시작

$("box:eq(n)").text("선택");

 

 

 

 

10.속성 선택자

$("div[src="a.png]") - div속성값이 a.png인 선택자를 선택합니다.

$("div[src*="png]") - div속성값이 png를 포함하는 선택자를 선택합니다.

$("div[src^="png]") - div속성값이 접미사가 png인 선택자를 선택합니다.

$("div[src$="png]") - div속성값이 접두사가 png인 선택자를 선택합니다.

$("div > a[href$='com']").css({"color":"red"});

 

 

 

 

11.filter() - filter() 조건으로 한번 더 걸러준다.

$("div").filter(".box").text("SELECTED");

div 요소 중 클래스가 box인 요소의 텍스트를 SELECTED로 바꾼다.

 

 

 

 

12.not() - filter()의 반대로 조건에 해당되는 것들을 제외시켜 준다.

$("div").not(".box").text("SELECTED");

div요소 중 클래스가 box가 아닌 요소의 텍스트를 SELECTED로 바꾼다.

 

 

 

 

13.parent() - 선택된 요소의 부모 요소 선택

$("div").parent().text("SELECTED");

div의 부모 요소를 텍스트를 SELECTED로 바꾼다.

 

 

 

 

14.children() - 선택된 요소의 자식 요소 선택

$("div").children().text("SELECTED");

div의 아래의 모든 자식·자손의 클래스가 box인 요소의 텍스트를 SELECTED로 바꾼다.

 

 

 

 

15.find() - 선택된 요소의 자식·자손 선택

*children()은 한 단계 아래 자식만 찾는다면 find()는 모두 찾아낸다.

$("div").find('.box').text("SELECTED");

div의 아래의 모든 자식·자손의 클래스가 box인 요소의 텍스트를 SELECTED로 바꾼다.

 

 

 

 

16.siblings() - 선택된 요소의 이웃요소를 선택

$("div").siblings().text("SELECTED");

div의 이웃요소의 텍스트를 SELECTED로 바꾼다.

 

 

 

---

개인 공부용으로 만들었습니다. 
다른 분들에게도 도움이 되었으면 좋겠습니다. 
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.