jQuery 이벤트 정리

출처 : http://snowple.tistory.com/355

+ 이벤트 등록(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() {

/* 로딩 성공했을 때 */

});