좀 뒤늦게 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' 값을 리턴한다.
요소 선택
요소 선택의 방법
- id :
$('#myID')
- class:
$('.myClass')
– 복수 요소가 집합으로 선택된다. - attributes:
$('input[name=first_name]')
– 역시 복수요소 가능하다. - 컴마로 구분한 요소:
$('div.myClass, ul.people')
– 복수 요소 - 가상 셀렉터:
$('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 하면 언래핑됨
몇 가지 폼 요소에 대한 유사 셀렉터로는 다음의 것이 있다.
checked
:disabled
:enabled
:input
:selected
:password
:reset
:radio
:text
:submit
:button
:image
: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 요소들을 캐치했다면 다음과 같은 조작 메소드를 이용할 수 있다.
.html()
.text()
.attr()
.width()
.height()
.position()
.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()
을 쓴다.