[JSP] jQuery Selectors
jQuery Selectors
$("#id")
$("#kkk")
<div id="kkk">
--> 아아디이름으로 찾을때 앞에 # 붙힌다
$("div")
<div >
--> element이름으로 바로 찾기(다 찾음)
$(".class이름")
$(".myClass")
<div class="myClass">
--> 클래스 이름으로 찾기(다 찾음)
$("*")
--> document 전체에 모든 element 찾음
$("s1,s2,...")
$("div,span,p.myClass")
<div>
<p class="myClass">
<span>
---> 순서대로 다찾음(div->span-->p.myClass)
$("s1 s2")
$("div p")
<div>
<p>
</div>
--> s1안에있는 s2만 찾음(s2만 실행)
$("s1 > s2")
$("div > p")
<div>
<p>
</div>
--> 앞에꺼랑 거의 비슷하지만 div랑p사이에 다른element가있으면
못찾음,즉 바로붙어있는 자식만 찾을때 사용
$("s1 + s2")
$("div + p")
<div>
<p>
--> s1을 기준으로 s1이랑 같은레벨의
바로붙어있는 element의 s2만찾음
$("s1 ~ s2")
$("div ~ p")
<div>
<p>
--> 위에랑 거의 똑같은데 바로붙어있는애들말고
s1이랑 같은레벨의 s2를 다찾음
$("s1:first")
$("p:first")
<p>
<p>
---> 첫번째 s1만 찾음
$("s1:last")
$("p:last")
<p>
<p>
---> 마지막 s1만 찾음
$("s1:not(selector)")
$("p:not(.myClass)")
<p class="myClass">
<p class="Class">
---> p중에서 클래스이름이 myClass아닌거만 다찾음
$("tr:even")
<tr>0</tr>
<tr>1</tr>
<tr>2</tr>
<tr>3</tr>
--> tr중에서 짝수번째있는거만 찾음
$("tr:odd")
<tr>0</tr>
<tr>1</tr>
<tr>2</tr>
<tr>3</tr>
--> tr중에서 홀수번째있는거만 찾음
$("tr:eq(n)") n=2
<tr>0</tr>
<tr>1</tr>
<tr>2</tr>
<tr>3</tr>
--> tr중에서 n번째있는거만 찾음(0부터시작)
$("tr:gt(n)") n=2
<tr>0</tr>
<tr>1</tr>
<tr>2</tr>
<tr>3</tr>
--> tr중에서 n보다 큰거만 찾음(0부터시작)
$("tr:gt(n)") n=2
<tr>0</tr>
<tr>1</tr>
<tr>2</tr>
<tr>3</tr>
--> tr중에서 n보다 작은거만 찾음(0부터시작)
$(":header")
<h1></h1>
<h2></h2>
---> h1,h2,,들만 찾음(타이틀만들때)
$("img:animated")
<img id="move">
--> animated 효과가 적용된것만 찾음
$("span:contains('jQuery')")
<span>jQuery</span>
<span>java</span>
<span>jsp
<b>jQuery</b>
</span>
--> span안에 문자열에 jQuery포함된거 찾음(하위노드에 포함되있어도 기준까지 다선택)
$("td:empty")
<tr><td>1</td><td>2</td></tr>
<tr><td></td><td><4/td></tr>
<tr><td>5</td><td></td></tr>
-->문자열이 비어있는거만 선택
$("div:has(span)")
<div>
<span></span>
</div>
-->자식으로 span을가지고있는 div만 선택
$("div:parent")
<div>
<p>
<div>
--> 부모인 div다 선택(자식이있는div는 다 선택)
div안에 텍스트가 있어도 선택
왜냐면 text도 하나의 node이므로
$(":hidden",document.body)
<input type="hidden">
<span style="display:none">
--> document.body하위에 있는 style중 display가 none이거나
input type이 hidden인 애들 다 선택
$(":visible","body")
<div>hi</div>
<p style="display:none">
<div>hello
<p style="display:none">
</div>
--> body에서 화면에 보이는 애들 다 선택
만약 히든이라도 부모가 보이는애면 얘도 선택
*참고*
$(":visible","body") 와 $("body:visible") 의차이
$(":visible","body") : body안에서 visible 찾기
$("body:visible") : body자체가 visible인지 찾기
$("div[attribute]") attribute=id
<div id="xx">
</div>
<div>
</div>
--> div중에서 id있는애들만 선택
*attribute 예외*
$("div[style]")
<div id="xx">
</div>
<div>
</div>
--> div중에서 style있는애들만 선택
(style은 기본으로 다있음!!)
$("input[name='group1']")
<input type="radio" name="group1">
--> input중에 name이있고 name이 group1인 애들만 선택
$("input[name!='group1']")
<input type="radio" name="group2">
--> input중에 name이있고 name이 group1이 아닌 애들만 선택
$("input[name^='jQuery']")
<input type="radio" name="jQuery is simple">
<input type="radio" name="simple is jQuery">
--> input중에 name이있고 name이 jQuery로 시작하는 애들만 선택
$("input[name$='jQuery']")
<input type="radio" name="jQuery is simple">
<input type="radio" name="simple is jQuery">
--> input중에 name이있고 name이 jQuery로 끝나는 애들만 선택
$("input[name*='jQuery']")
<input type="radio" name="jQuery is simple">
<input type="radio" name="simple is jQuery">
--> input중에 name이있고 name이 jQuery가 들어가있는 애들 다 선택
$("input[value][name$='simple']")
<input value="aa" name="jQuery is simple">
-->여러 조건 한번에. input에 value값이 있고 name이 simple로 끝나는 애 선택
$("td:nth-child(2)")
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
--> td의 부모를 기준으로 2번째 애들 선택(1부터 시작)
숫자뿐만 아니라 다른애들도 쓸 수 있음.(even,odd,equation,3n 등등)
$("td:frist-child")
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
--> td의 부모를 기준으로 첫번째 애들 선택
$("td:last-child")
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
--> td의 부모를 기준으로 마지막 애들 선택
$("td:only-child")
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td></tr>
--> td의 부모를 기준으로 자손이 1명인 애들만 선택