[jQuery기초] 요소조작_이벤트_slice_trim_extend_each

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

 

slice

선택자를 기준으로 시작과 끝 index의 값에 의해 요소를 반환한다.
index는 0부터 시작한다.

// HTML
<div id="box">
<div>1번</div>
<div>2번</div>
<div>3번</div>
<div>4번</div>
</div>

// jQuery
$('#box div').slice(1); // 2번 div 반환
$('#box div').slice(1,3); // 2번, 3번 div 반환

var array = ['red', 'green', 'blue', 'black', 'pink'];
array.slice(2,4); // 'blue', 'black' 반환

 

trim

문자열의 시작과 끝에서 모든 줄 바꿈, 공백 및 탭을 제거한다.
중간에 포함된 공백 문자는 그대로 유지된다.

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

// jQuery
var newText = $.trim($('#box').text()); // Box 앞에 공백이 제거
$('#box').text(newText);

// 출력
<div id="box">Box</div>

 

extend

둘 이상의 객체의 내용을 첫번째 객체에 병합한다.
키 값이 같은게 있다면 덮여쓰기가 된다.
첫번째 인자 값으로 빈 객체를 넣지 않는다면 객체가 참조되어 삽입된 객체 값들이 변경될 수 있다.

var box1 = { color : 'red', width : '100px' };
var box2 = { color : 'blue', height : '100px' };
var newBox = $.extend({}, box1, box2); 

// { color : 'blue', width : '100px', height : '100px' } 형태로 출력된다.

 

each

반복문으로 DOM에 접근할 수 있다.
내부에서 $(this)를 사용할 경우 해당 객체에 접근할 수 있다.

// HTML
<ul>
<li>1번</li>
<li>2번</li>
<li>3번</li>
</ul>

// jQuery
$('li').each(function(index, element){ // 인자 값으로 index와 해당 element에 접근할 수 있다.
  if(index === 0){
  	$(this).css('color', 'red'); // this로 접근
  }else{
  	$(element).css('color', 'blue'); // element 인자로 접근
  }
});