Peep

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

html 

HTML 문서에서 모든 요소를 가져오거나 추가할 수 있다. 
주석을 포함한 선택자의 모든 요소를 가져온다. 
XML에서는 사용할 수 없다.

// HTML 
<div id="wrap"> 
  <!-- 주석 --> 
  <div class="children">1번</div> 
  <div class="children">2번</div> 
  <div class="children">3번</div> 
</div> 

// jQuery 
// #wrap 안에 있는 모든 요소를 가져온다 
$('#wrap').html(); 

// #wrap 안에 있는 모든 요소를 빈 값으로 만든다.
$('#wrap').html(''); 

text 

HTML, XML에서 모두 사용할 수 있으며 모든 문자열을 가져오거나 추가할 수 있다. 
브라우저마다 HTML 파서의 차이가 있을 수 있으므로 줄바꿈 및 공백이 다를 수 있다.

// HTML 
<div id="wrap"> 
  <!-- 주석 --> 
  <div class="children">1번</div> 
  <div class="children">2번</div> 
  <div class="children">3번</div> 
</div> 

// jQuery 
// #wrap 안에 있는 텍스트 '1번 2번 3번'을 문자열로 반환 
$('#wrap').text(); 

// #wrap 안에 있는 모든 요소를 지우고 문자열 '새로운' 출력
$('#wrap').text('새로운');

empty

선택된 요소의 하위에 있는 모든 요소를 제거한다.

// HTML 
<div id="wrap"> 
  <div class="children">1번</div> 
  <div class="children">2번</div> 
  <div class="children">3번</div> 
</div> 

// jQuery 
// #wrap 안에 있는 모든 요소를 제거
$('#wrap').empty(); 

remove

선택된 요소를 포함한 하위에 있는 모든 요소를 제거한다.

// HTML 
<div id="wrap"> 
  <div class="children">1번</div> 
  <div class="children">2번</div> 
  <div class="children">3번</div> 
</div>

// jQuery 
// #wra과 함께 모든 요소 제거
$('#wrap').remove(); 

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

mouseenter & mouseover 

마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 
요소에 내부로 들어왔을 때 실행된다. 

차이점 
mouseenter 자식영역으로 이동했다고 재 감지되지 않는다. 
mouseover 자식영역으로 이동했을때 재 감지된다.

// HTML 
<div id="box"> 
	<div id="child"></div> 
</div> 

// jQuery 
// 마우스를 #box에서 #child로 이동해도 코드는 다시 실행되지 않음 
$('#box').mouseenter(function(){ 
	// 코드 작성 
}); 

// 마우스를 #box에서 #child로 이동 시 코드 다시 실행
$('#box').mouseover(function(){ 
	// 코드 작성 
}); 

mouseleave & mouseout 

마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 
요소에 내부로 들어왔을 때 실행된다. 
차이점 
mouseleave 자식영역에 들어가도 요소를 빠져나갔다고 감지하지 않는다. 
mouseout 자식영역에 들어가면 요소를 빠져나갔다고 감지한다.

// HTML 
<div id="box"> 
	<div id="child"></div> 
</div> 

// jQuery 
// 마우스를 #box에서 #child로 이동해도 코드는 다시 실행되지 않음 
$('#box').mouseleave(function(){ 
	// 코드 작성 
}); 

// 마우스를 #box에서 #child로 이동 시 코드 다시 실행
$('#box').mouseout(function(){ 
	// 코드 작성 
}); 

mousemove

마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 
요소에 내부에서 이동할 때 실행된다.

$('#box').mousemove(function(){ 
	// 코드 작성 
});

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

on 

이벤트를 제어할 수 있는 메서드이며 과거에 사용하던 bind, delegate, live 메서드들의 모든 기능을 제공한다. 
이벤트를 중첩해서 적용하고 싶은 경우 공백을 통해 입력한다.

$('button').on('click mouseenter', function(){ 
	// 코드 작성 
}); 

$('button').on('click', onClickFunction); 
function onClickFunction(){ 
	// 코드 작성 
};

one 

이벤트를 제어할 수 있는 메서드이며 on과 동일하나 첫번째 호출에만 실행되는 점만 다르다.

$('button').one('click', function(){ 
	// 코드 작성 
}); 

$('button').one('click', onClickFunction); 
function onClickFunction(){ 
	// 코드 작성 
};

on & one 

구문

$(선택자).on('이벤트이름', calbackFunction); 

동적으로 생성되는 DOM 요소에 이벤트 추가

$('#box').on('click', 'button', function(){ 
	// 코드 작성 
});

off 

이벤트를 제어할 수 있는 메서드이며 on 메서드를 통해 연결시켰던 이벤트를 제거한다. 
off 메서드 안에 입력 값을 넣지 않으면 on 메서드로 설정한 모든 이벤트의 연결이 제거되므로 주의해야한다.

$('button').on('click', onClickFunction); 
$('button').click(onClickFunction); 

// 선택자의 모든 이벤트 제거 
$('button').off(); 

// 입력된 이벤트 제거
$('button').off('click'); 

trigger

on 메서드를 통해 이벤트가 실행되어 있으면 사용할 수 있는 메서드 
trigger 메서드를 통해 수동으로 이벤트를 실행할 수 있다.

$('button').on('click', onClickFunction); 

// 클릭 이벤트가 실행되어 onClickFunction 함수가 실행된다.
$('button').trigger('click'); 

focus 

탭 포커싱 이벤트로 on 메서드를 통해 사용할수도 있지만 포커싱 메서드들도 따로 존재한다. 
탭으로 포커싱하거나 마우스 클릭 시에 focus, focusin이 실행되며 포커싱이 빠질 경우 focusout이 실행된다. 
마우스 클릭 시에도 focus, focusin이 실행된다.

// HTML 
<a id="link" href="./경로"></a> 

// jQuery 
$('#a').focus(function(){ 
	// 코드 작성 
}); 
$('#a').focusin(function(){ 
	// 코드 작성 
}); 
$('#a').focusout(function(){ 
	// 코드 작성 
}); 

포커싱할때 : focusin 
포커싱빠질때 : focusout

click 

마우스 클릭 이벤트, on 메서드를 통해 호출할수도 있지만 click 메서드도 따로 존재한다.

$('button').click(function(){ 
	// 코드 작성 
}); 

마우스 더블 클릭 : dbclick 
마우스 클릭 버튼 누를때 : mousedown 
마우스 클릭 버튼 뗄때 : mouseup

hover

마우스 이벤트로 on 메서드를 통해 사용할수도 있지만 hover 메서드가 따로 존재한다. 
첫번째 function은 mouseenter를 의미하며 두번째 function은 mouseleave를 의미한다.

$('button').hover(function(){ 
	// mouseenter 코드 작성 

}, function(){ 
	// mouseleave 코드 작성 
});

// 해체 시
$('button').off('mouseenter mouseleave');

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

addClass 

선택자에 입력한 클래스를 추가한다. 
공백으로 구분하여 입력 값을 추가하면 여러개의 클래스를 추가할 수 있다. 
함수 형식으로도 사용할 수 있으며 인자 값으로 해당 선택자의 index값을 사용할 수 있다.

// HTML 
<div id="firstBox" class="box"></div> 
<div class="box"></div>

// jQuery
// #firstBox 클래스가 추가
$('#firstBox').addClass('color_box red_box'); 

// .box 클래스 추가된다
$('.box').addClass(function(index){
	return 'box_index' + index;
}); .

// 출력 결과
<div id="firstBox" class="box color_box red_box box_index0"></div>
<div class="box box_index1"></div>

removeClass 

선택자에 입력한 클래스를 제거한다. 
공백으로 구분하여 입력 값을 추가하면 여러개의 클래스를 제거할 수 있다. 
함수 형식으로도 사용할 수 있다.

// HTML 
<div id="firstBox" class="box color_box"></div> 
<div class="box"></div> 

// jQuery 
$('#firstBox').removeClass('color_box'); // #firstBox color_box 클래스 제거 
$('.box').last().removeClass(function(){ 
	return $(this).prev().attr('class'); 
}); // p.box 클래스가 제거된다. 

// 출력 결과 
<div id="firstBox" class="box"></div> 
<div></div>

hasClass 

선택자가 클래스를 포함하고 있는지를 확인하는 메소드 
여러개의 클래스인 경우 공백으로 구분할 수 있으며 순서는 동일해야한다. 
함수 형식으로도 사용할 수 있으며 인자 값으로 해당 선택자의 index값을 사용할 수 있다.

// HTML 
<div id="box" class="red blue item0"></div> 

// jQuery 

// true 반환 
$('#box').hasClass('red'); 

// true 반환 
$('#box').hasClass('red blue');

// false 반환 
$('#box').hasClass('blue red'); 

// true 반환
$('#box').hasClass(function(index){ 
	return 'item' + index; 
});