jquery 기본

좀 뒤늦게 jquery 기본 사용법(?)에 대해서 정리. 처음에는 JS문법으로 예제를 썼지만, 뒤로 갈 수록 LS문법을 씁니다.(괄호라든지 괄호라든지 괄호때문에…)

jQuery Object

jQuery 객체는 DOM 요소(단일요소 혹은 집합)에 대해 $()를 이용하여 생성한 객체를 의미한다. 이는 내부적으로 DOM 요소를 참조하면서 jQuery에 의해 제공되는 공통 API를 적용받게 된다.

속성들

.attr() 메소드는 getter/setter로 동작하며, 해당 DOM요소의 속성을 얻거나 변경할 수 있다.

$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
$('a').attr({
    title: 'all titles are the same too!',
    href: 'somethingnew.html'
});
$('a').attr('href'); //=> 첫 A 요소의 'href' 값을 리턴한다.

요소 선택

요소 선택의 방법

  1. id : $('#myID')
  2. class: $('.myClass') – 복수 요소가 집합으로 선택된다.
  3. attributes: $('input[name=first_name]') – 역시 복수요소 가능하다.
  4. 컴마로 구분한 요소: $('div.myClass, ul.people') – 복수 요소
  5. 가상 셀렉터: $('a.external:firset'), $('tr:odd'), $('#myForm :input')

필터링

요소 선택 후 필터링

$('div.foo').has('p') // <p> 태그를 포함하고 있는 div.foo 요소들
$('h1').not('.bar') // bar 클래스가 아닌 h1
$('ul li').filter('.current') // .current 클래스가 적용된 li
$('ul li').first() // 첫번째 ul li 요소
$('ul li').eq(5) // 6번째 요소 [5]로 subscription 하면 언래핑됨

몇 가지 폼 요소에 대한 유사 셀렉터로는 다음의 것이 있다.

  1. checked
  2. :disabled
  3. :enabled
  4. :input
  5. :selected
  6. :password
  7. :reset
  8. :radio
  9. :text
  10. :submit
  11. :button
  12. :image
  13. :file

셀렉션 다루기

id등의 유니크 식별자를 이용하지 않는 이상, jQuery 선택은 복수 요소에 대한 집합을 생성한다. 이 때 여러 속성 setter는 집합 내 모든 요소에 공통으로 적용된다. getter를 호출하면 그 중 맨 처음 요소의 값을 갖고오게 된다.

$('h1').html('hello world!');
// 모든 h1 요소의 내부 html 값이 'hello world!'가 된다.
$('h1').html(); // 'hello world!'

체이닝

$('#content').find('h3').eq(2).html('new text for the third h3!')

// 나눠쓰기
$('#content')
  .find('h3')
  .eq(2)
  .html('new text for the third h3!');

.end()를 쓰면 현재 체이닝을 완료하고 상위 체인으로 돌아갈 수 있다.

$('#content')
  .find('h3')
  .eq(2)
    .html('new text for the third h3!')
    .end()
  .eq(0)
    .html('new text for the first h3!')

DOM 요소 조작하기

특정 DOM 요소들을 캐치했다면 다음과 같은 조작 메소드를 이용할 수 있다.

  1. .html()
  2. .text()
  3. .attr()
  4. .width()
  5. .height()
  6. .position()
  7. .val()

appendTo, insertAfter, after 등을 이용해서 위치를 옮기거나 추가할 수 있다.

var li = $('#myList li:first').appendTo('#myList')
// 첫 원소를 맨끝으로 이동
// 혹은
$('#myList').append($('#myList li:first'))

이동 말고 복사는 clone()을 이용해서 복사하여 추가하면 된다.

$('#myList li:first').clone().appendTo('#myList')

제거

.remove(), .detach()가 있다. .remove()는 해당 객체를 완전히 제거하는 것이고 .detach()는 문서에서 떼어내지만 해당 객체의 속성이나 데이터를 유지한다.

새 요소 만들기

$()의 인자로 태그를 포함한 HTML 문자열을 전달하면 해당 요소를 생성한다.

$('<p>this is a new paragraph</p>');
$('<li class="new">new list item</li>');


var myNewElement = $('<p>new element</p>')
myNewElement.appendTo('#content') // 추가 
myNewElement.insertAfter('ul:last') // 밴 후에 ul 끝으로 이동
$('ul').last().after(myNewElement.clone()) // 복사해서 하나 더 추가

다음은 새 리스트를 파퓰레이팅하는 법이다.

var lists = new Array();
for(var i=0; i < 100; i++) {
    lists.push($("<li>item " + i + "</li>"));
}
for(var i=0; i< 100; i++){
    $('ul').append(lists[i]);
}

객체 대신에 한꺼번에 하위 HTML을 모두 넣어도 된다. 따라서

[0 til 100].map -> "<li>item #it</li>"
.join '' |> $ \ul .append

이렇게 쓸 수 있다.

jQuery 객체와 DOM 요소

target = document.get-element-by-id \target
target.innerHTML = "<td>hello <b>World</b>!</td>"


$ target .html "<td>Hello <b>World</b>!</td>"

jQuery 객체와 DOM요소는 별개의 것이다. jQuery 객체는 DOM요소 객체를 감싼 computational context라고 보면 된다.

또한 래핑할 때마다 새로운 객체가 생성되기 때문에, 두 개의 jQuery 객체가 같은 DOM에 대해서 여러번 생성됐을 때 이들은 같은 게 아니다.

var logo1 = $('#logo');
var logo2 = $('#logo');
logo1 === logo2; // false

요소 순회

하위 요소 찾기

.children()은 선택된 요소의 하위 요소 중에서 특정한 조건을 만족하는 하위요소들을 리턴한다. .find()는 자손 요소 계층을 모두 탐색한다.

부모 요소 찾기

.parent()는 직계 상위 부모 요소를 리턴한다. .parents()는 지정한 요소까지의 부모 계층에 속한 요소들을 리턴한다. parentsUntil()은 주어진 요소까지의 계층을 탐색하는데, 최종 계층인 주어진 요소는 포함하지 않는다. .closest()는 부모 계층 중에서 가장 가까운 노드를 찾는다.

이웃/형제 요소

.next(), .nextAll(), prev(), prevAll(), nextUntil(), prevUntil() 등으로 찾을 수 있다.

데이터

.data는 특정 DOM 요소에 데이터를 바인딩해둘 수 있다. 별도의 스크립트 코드에 데이터를 바인딩하는 것은 메모리누수의 원인이 되리 수 있는데, 이 방법을 이용하면 해당 DOM이 제거될 때 메모리도 반환된다.

유틸리티 함수

$.trim()

string.trim()과 동일하다.

$.inArray()

Array.index()와 동일하다.

$.extend()

두 객체를 더하여 새로운 객체를 만든다.

$.proxy()

특정 함수와 객체를 바인드한다. function.bind()와 같다고 보면 된다.

타입테스팅

$.isArray, $.inFunction, $.isNumeric 함수는 주어진 객체의 타입을 확인한다.

$.each()

주어진 배열 혹은 객체의 요소들을 순회한다.

sum = 0
arr = [1 to 10]
$.each arr, (i, e) !-> sum += e
console.log sum #=> 55

sum = 0
obj = a:1, b:2, c:3
$.each obj, (k, v) !-> sum += v
console.log sum #=> 6

jQuery 셀렉션을 순회하는 경우는 다음과 같이 생각할 수 있는데,

$.each ($ \p), (i, e) -> $ e .addClass \special

이 경우에는 $().each()를 쓸 수 있다.

$ \p .each (i, e) -> $ e .addClass \special

아는 줄여서

$ \p .addClass \special

위와 같이 쓸 수 있다. 하지만, jQuery 컬렉션은 getter를 호출하는 경우에는 첫 원소의 값만을 가져오므로 다음과 같이 써야 하는 경우도 있다.

$ \p .each (i, e) -> console.log $ e .text!

$.map()

$.filter는 지원하지 않는듯?

일반 배열 객체에 대해서 함수형 스타일의 map을 지원하는 함수이다.

a = [1 to 10]
$.map a, (i, e) -> e * 2 + 1
|> console.log
## [3, 5, 7 ... 21]

역시 jQuery 셀렉션은 .map()을 쓴다.