jQuery / 이벤트, 셀렉터, DOM 관련 함수, AJAX 정리

jQuery 이벤트 정리

---

+ 이벤트 등록(live)
.live() 은 .bind()를 기초로 엘리먼트에 이벤트 핸들러 함수를 연결할 때 몇가지 기능을 추가한 함수.
보통 Ajax등으로 동적으로 생성된 엘리먼트에 대해서는 .bind()함수를 통해 이벤트를 추가해 주지 못한다. 따라서 live() 함수는 동적으로 생성된 엘리먼트에 대해서도 이벤트를 추가해 주는 기능을 가지고 있다.

$('#id').live('click', function(e) {

/* TODO */

}); 

등록할 수 있는 이벤트 타입
- click
- dblclick
- keydown
- keypress
- keyup
- mousedown
- mousemove
- mouseout
- mouseover
- mouseup


+ 이벤트 등록(bind)

$('#id').bind('click', function(e) {

/* TODO */

}); 

jQuery 셀렉터 정리

---

+ 선택

$('div')  /* 문서 안의 모든 div를 선택 */
$('#myid')  /* id="myid" 인 유일한 엘리먼트를 선택 */
$('.myclass')  /* 클래스가 class="myclass" 인 엘리먼트를 선택 */
$('p#myid')  /* id가 myid 이면서 p 태그인 유일한 엘리먼트를 선택 */
$('a img')  /* <a> 엘리먼트의 하위 엘리먼트들 중에서 <img> 를 가진 엘리먼트를 선택 */ 
$('#main p')  /* id가 main인 하위 엘리먼트들 중에서 <p> 태그를 가진 엘리먼트를 선택 */ 
$('li > ul')  /* <li> 엘리먼트의 하위 엘리먼트들 중에서 <ul>인 엘리먼트들을 선택 */ 
$('[name=myname]')  /* name의 속성값이 myname인 엘리먼트를 선택 */ 
$('a[href=address]')  /* <a>를 가진 엘리먼트에서 속성 href가 address인 것을 선택 */  

+ 폼 셀렉터

$(':input')  /* 모든 폼 엘리먼트(<input>, <select>, <textarea>, <button>)을 선택 */
$(':text')  /* 모든 텍스트 필드(<input type="text">) 를 선택한다. */ 
$(':radio')  /* 모든 라디오버튼 필드(<input type="radio">) 를 선택한다. */  
$(':checkbox')  /* 모든 체크박스 필드(<input type="checkbox">) 를 선택한다. */  
$(':checked')  /* 체크된 체크박스 또는 라디오버튼 엘리먼트를 선택 */

+ 사용자 정의 셀렉터

$('li').filter(':even').css('background-color', 'red')  /* <li> 태그 중에서 짝수번째 라인은 빨간색 배경 지정 */
$('li:eq(2)')  /* 3번째 <li>를 선택 */
$('.myclass:eq(1)')  /* 클래스명이 myclass인 엘리먼트 가운데 2번째 엘리먼트를 선택 */ 
$('li').eq(2).css('background-color', 'red')  /* <li> 태그중에서 2번째 태그에 배경을 빨간색을 지정 */ 

+ 찾기

$('#conditions').find('li')  /* id가 conditions인 하위 모든 엘리먼트들 중에서 <li> 태그를 가진 것 선택 */
$('li').prev() / $('li').prevAll()
$('li').next() / $('li').nextAll()

+ 체크박스의 값을 콤마(,)로 만들기

$(':checkbox').map(function() {

return this.id;

}).get().join(',');
>> 4,5,8 

 


DOM 처리

---

+ 기본속성 설정

$('#check_input').attr('checked', false)  /* 체크해제 */
$('#check_input').attr('title', 'mytitle')  /* id가 check_input인 엘리먼트의 title 속성을 "mytitle"로 변경 */ 
$('#check_input').attr({

alt: 'test',
title: 'test' 

}); 
if ($('#save').prop('checked') == true) {

/* id가 save인 엘리먼트가 체크된 상태 */

} 
.width()  /* 길이 설정 */  

+ 객체 생성

var odv = $(document.createElement('div'));
odv.attr('id', 'test');
odv.addClass('ui-state-condition'); 

 

+ 입력과 선택

.html()
.text()
.val()
$('input:text.item').val(function() {

return this.value;

}); 
.index()  /* 몇번째 엘리먼트인지 숫자로 반환 */ 

 

AJAX

---

+ ajax

$.ajax({

type: "POST",

url: "histogram.php",
data: {key : value, key1: value1},
dataType: "html",
beforeSend: function() { },
success: function(res, textStatus) {

$('#id').html(res);

} 

}); 

+ load

$('#id').load('condition.php', {key: value, key1: value1}, function() {

/* 로딩 성공했을 때 */

});