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

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

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

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

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

1. DOM

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

2. jQuery

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

태그만 가능?? -> 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를 사용하는 이유중의 하나라고 생각됨.