: devNote

jQuery Core[BASIC]

//태그명 직접입력 선택
$("div").    
// 클래스명으로 선택
$(".class").   
 //ID 명으로 선택
$("#id").   
// 모든 Element 선택 하여 CSS적용
$("*").css("border","1px")  
//다중 셀렉터  , 기준으로 해당요소들 모두 선택
$("div,span,p.myClass")    

[BASIC Filter]
//애니메이션 되고있는 Element 선택
$(":animated")    
//3번째 DIV요소 의미 ((index) 와 같은요소)
$("div:eq(2)")   

//DIV요소중 3번째 이후 부터 ((index) 보다 큰(이후) 요소)
$("div:gt(2)")   
// DIV 요소중 3번째 이전 ((index) 보다 작은(이전) 요소)
$("div:lt(2)")    
//  input 요소중 짝수 요소 선택
$("input:even")    
//  input 요소중 홀수 요소 선택
$("input:odd")    
// 체크 되지 않은 Input 요소를 css 백그라운드 색상 수정.
$("input:not(:checked)").css("background-color","blue");    
/h1,h2,h3 과 같은 요소 선택
$(":header")    
// 첫번째 DIV 선택  :first     : last // 마지막 DIV 선택
$("div:first) == $("div:eq(0)") == $("div:lt(1)")    

[Child Filter]
// 선택 요소중 첫번째 자식 요소 선택  (*nth-child의 (인덱스)는 1부터 시작)
$(" :first-child") == $(" :nth-child(1)") 
// tr 이 복수개일 경우 그중 자식 요소중 td의 첫번째 요소들이 선택된다.   last-child   // 마지막 자식 요소
$("tr td:first-child")    
// 부모 요소의 자식 (index..)번째의 요소 , index 는 1부터 시작.
$(" :nth-child(index/even/odd/equation)")   
// ul요소의 2번째 li요소들 선택
$("ul li:nth-child(2)")    
//ul요소의 짝수번째 li 요소들 선택
$("ul li:even")   
//ul요소의 홀수번째 li 요소들 선택
$("ul li:odd")    
//3*0, 3*1, 3*2, ...  (요소들을 선택)
$("ul li:nth-child(3n)")    
// 부모의 자식요소가 딱 한개만 존재하는(only) 요소 선택
$(" :only-child")  
// div > button  자식이 하나 있는 요소만 선택 text,css 변경
예) $("div button:only-child").text("bye~!").css("border"."2px red solid");  

[Hierarchy]

$("parent > child")                // 부모 요소의 자식 요소 선택 

예)$("DIV > SPAN")   - <div><span>Hello </span></div> : div 선택

$("ancestor descendant")      // 조상 하위의 모든 자손에 해당하는 요소 선택. 

예)$("form input")  - 폼 하위 input 모든 요소 선택

$("prev + next")                    // prev 요소 다음에 나오는 형제 요소 선택.

예) $("label + input).css("color","blue").val("Labeled!");

$("prev ~ siblings")              // prev 요소 다음에 나오는 '모든' 형제 요소 선택.

예) $("#prev ~ div").css("border","3px groove blue");

[Filter]

// text 를 포함한 요소 선택
$(" :contains(text)")
$("div:contains('hello')")    //ex. <div> hello, nice to meet you~~ </div>선택
// 비어있는 요소 선택.
$(" :empty")
$("td:empty").text("Was Empty!")
// selector 에 해당하는 요소를 자식요소로포함하는 요소 선택.
$(" :has(selector)")
$("div:has(p)")     // <div>HELLO in a paraGraph</div>

[Visibility Filter]

jQuery(" :hidden")  //$(" :hidden")     <!=>   jQuery(" :visible")

선택 요소

1.display:none             // visibility:hidden, opacity: 0 는 보이는것으로 간주됨.

2.type="hidden"

3.width:0;height:0

4.부모 요소가 hidden 인것.

$(" :button")        // <input type="button" />