[JQuery] 제이쿼리, 선택자 종류 및 사용법!

참조 : https://sas-study.tistory.com/174?category=780544

 

CSS : 1.태그검색 -> 2. 속성제어

- javascript : 1. 태그검색 -> 속성,PCDATA,CSS제어

- jQuery : 1. 태그검색(BOM,DOM) -> 개량 -> 2 속성, PCDATA, CSS 제어 개량

 

div 태그에 모두 글자색 red 주기

1. DOM

 

1 2 3 4

var div = document.getElementsByTagName("div"); for(var i =0; i<div.length; i++){     div[i].style.color="red";  } Colored by Color Scripter

cs

 

2. jQuery

 

1

$("div").css("background-color","yellow");

cs

 

 

태그만 가능?? -> No!! jQuery는 모든 선택자를 활용 가능!

 

$(CSS 선택자) 함수

 - 태그를 검색해서 반환하는 역할

 

jQuery는 태그를 찾을 때 BOM이나 DOM을 사용하지 않고 CSS 선택자를 사용한다.

 

A. 태그선택자

-> $("div").css("color","blue"); 위에 내용과 비슷함.

 

B. 아이디 선택자

-> $("#box1").css("color","orange");

- id는 키역할을 하므로 특정 요소,객체, 태그를 제어하기 위해서 사용.

 

C. class 선택자

-> $(".box").css("color","yellow"); 

- class는 공통적인 속성을 가진, 즉 그룹핑되어 있는 요소들을 묶어서 제어하기 위해서 사용함.

 

D. 자식 / 자손선택자

-> $("#list1 li").css("color","green");

- list1이라는 id를 가진 태그안에 있는 li태그들을 모두 선택, 적용 depth 1이상. -> 바로 아래 자식태그만 건드리는것이 아닌 list1의 모오든 자식들..

 

-> $("#list1 > li").css("color","green");

- list1이라는 id를 가진 태그안에 있는 바로 1depth 아래있는 자식들 중 li태그만 선택됨. 

 

E. 형제 /인접 선택자

-> $("ul + ul").css("display","none");

- ul 태그가 연속적으로 붙어있는 태그들을 숨긴다. 뭐 이렇게 해석됨. 실제 개발에서 많이 사용될 일은 없을듯.. 개념, 존재만 알아두길.

 

F. 속성 선택자

-> $("div[title]").css("color","red");  1

- div중에 title속성이 있는 태그들만 가져옴. 활용할 여지가 많음. 개발하는 도중에서 특정 속성이 있는 태그들을 가져올떄 편함.

-> $(큰 부모태그의 id).find("*").attr('title') 2

- 이것과 비슷함. 차이점은 1번은 div태그 즉, 특정태그중에서 title 속성이 있는 특정태그를 가져오고, 2번은 모든태그들(부모태그 자식중에서) 중이서 title 속성이있는 모든 태그들을 가져오는 것. 

 

G. 여러가지 필터

-> $("li:nth-child(even)").css("color","blue");//even 짝수 odd 홀수

- 사실 이런 여러가지 필터 종류를 많이 구사할 줄 알아야 jQuery를 사용하는데에 의의가 있음. 개발속도가 무지하게 빨라지고 활용할 수 있는 창의적인 코딩이 가능함. 아직까지 jQuery를 사용하는 이유중의 하나라고 생각됨.

 

 

 

 

----------------------------------------------------------------------------------------------------

참조 : https://zangzangs.tistory.com/14

 

$("요소").first()

$("요소:first")

전체 요소 중 첫 번째 요소만 선택한다.

$("요소").last()

$("요소:last")

전체 요소 중 마지막 요소만 선택한다.

$("요소:odd")

요소 무리중 짝수 번쨰 요소만 선택한다.

$("요소:even")

요소 무리중 홀수 번쨰 요소만 선택한다.

$("요소:first-of-type")

요소 무리 중 첫 번째 요소만 선택한다.

$("요소:last-of-type")

요소 무리 중 마지막 요소만 선택한다.

$("요소:nth-child(n)")

요소 무리중 n 번째 요소만 선택한다.

$("요소:nth-child(숫자n)")

요소 무리 중 n의 배수 요소만 선택한다.

$("요소:nth-last-of-type(n)")

요소 무리 중 마지막 위치로부터 n번째에 있는 요소만 선택한다.

$("요소:only-child")

부모 요소내에 선택한 요소가 1개뿐인 요소만 선택한다.

$("요소:eq(index)")

$("요소").eq(index)

요소중 인덱스 n이 참조하는 요소를 불러온다.

$("요소:gt(n)")

요소 중 인덱스 n보다 큰 인덱스가 참조하는 요소를 불러온다.

$("요소:lt(n)")

요소 중 인덱스 n보다 작은 인덱스가 참조하는 요소를 불러온다.

$("요쇼").slice(n)

$("요쇼").slice(n, m)

 

"요소" 내에, 인덱스 n부터 참조하는 요소를 선택합니다.

"요소" 내에, 인덱스 n이상, m미만인 요소를 선택합니다.

출처: https://zangzangs.tistory.com/14 [장장스:티스토리]