[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명인 애들만 선택