자주쓰는 jQuery 모음

실전에서 자주쓰는 jQuery 함수들을 모아 둡니다.

1. ID 찾기
 - ID로 태그를 찾습니다.
 $('#tagid') -> <div id="tagid"></div>

2. Class로 찾기
 - Class로 찾을 때에는 점을 씁니다.
$('.classid') -> <div class="classid"></div>

3. 태그로 찾기
 - div, table, span, input 등이 태그입니다. 이러한 태그를 찾습니다.
$('div') , $('table') , $('span') , $('input')

 - 사실 위의 태그로 찾는 일은 없고 attribute와 같이 찾는 경우가 많습니다.

 - 사용방법은 대괄호 안에 attribute Name과 Value를 적습니다.
$('input[name=rdoName]') <input id="tagid" type="radio" name="rdoName" />

 - input 은 radio나 checkbox로 쓰이는데 이럴때 체크한 태그만 찾는 쿼리입니다.
$('input[name=rdoName]:checked')

4. 여러개 찾아서 for문 돌리기
 - class나 tag로 찾을 경우 여러개가 나오는 경우가 대부분입니다.
$('input[name=rdoName]').each(function(index, item){
 // index 는 for문의 순차숫자이고, item은 해당 태그입니다.
 var value = $(item).val(); // 태그의 Value를 가져옵니다.
}

5. 태그에 데이터 저장하기
 - 태그에 데이터를 저장할 때 쓰입니다.
<div id="tagid" data-itemid="14"></div>
var itemidA = $('#tagid').data('itemid'); // 데이터를 가져올 때
$('#tagid').data('itemid', 15); // 데이터를 저장할 때
var itemidB = $('#tagid').data('itemid'); // itemidA 는 14 , itemidB는 15 입니다.
참고: $('#tagid').attr('data-itemid') 는 무슨값이 나올까요? 답은 14입니다. 이 부분은 다른 글에서 다뤄보겠습니다.

Jquery data() vs attr()

5. 태그에서 부모 태그 찾기
 - 이건 대부분 표영역에서 부모 아이템을 찾을 경우 씁니다.

 - 한단계 위의 부모를 찾는 함수(parent())도 있는데, 그 함수는 실전에서는 잘 쓰지 않습니다.
<tr data-itemid="13">
 <td onclick="fnClick(this); return false;"></td>
 <td></td>
</tr>
function fnClick(tag){
 var trTag = $(tag).closest('tr'); // 부모중 제일 가까운 tr태그를 찾습니다.
 var itemId = $(trTag).data('itemid'); // tr태그의 itemid를 가져옵니다. 값은 13
}