Jquery selector 정리

CHARTER1. ELEMENT 선택의 다양한 예

 

1.  CSS 선택

$("div").css("border","9px solid red");

 

2. RADIO 객체

$(':input:radio[name^='+id+']:checked').val()

3. CHECKBOX 객체

예제1) 전체 체크박스 선택 / 해제

 jQuery(document).ready(function(){
  $("#allCategory").bind("click",function(){
   var flag= $(this).attr('checked');
   if($("#allCategory").is(":checked")){
     $("input[name^='categoryName2']").attr('checked',true);
   }else{
    $("input[name^='categoryName2']").attr('checked',false);
   }
  });
});

예제2) 체크박스 체크 확인

if(!$("input:checkbox[id='agree']").is(":checked")){

alert("개인정보 동의에 확인해 주세요");

$("#agree").focus();

return false;

}

 

 

4. selecte객체

$("select[id=a]") or $("select[name=a]")

 

 

 

 5. 상위 객체 찾아가기

예제)

<dl>

<dt>퀴즈1<dt>

<dd>

<ul>

<li><input id="abc"></li>

</ul>

<dd>

<dl>

설명: abc객체의 가장가까운 dd를 찾아서 이전의 dt 엘리먼트의 택스트(퀴즈1)을 가져온다.

var title = $(':input:radio[name^='+id+']').closest('dd').prev('dt').text();

특정 id안에 있는  3번째  TD 에 span테그 추가 하기

 

$("#a0").find("td:eq(2)").html("<span>"+newEmartCode+"</span>");

 

<tr id="a0">

 <td></td>

 <td></td>

 <td><span></span></td>

</tr>

 

<tr id="a1">

<td></td>

<td></td>

<td></td>

</tr>

 

 

 

라벨 텍스트 가져오기

 

 

 

$(document).ready(function(){

$("input[name^=chk]").click(function(){

alert($('label[for='+this.id+']').text());

});