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()을 쓴다.

이미지의 크기를 알려주는 북마클릿

이미지 사이즈를 체크해서 title 속성으로 넣어주는 스크립트. 북마클릿으로 만들어서 손쉽게 웹페이지의 이미지들의 가로/세로 크기값 및 CSS에서 지정한 가로/세로 값을 툴팁으로 알려줌. 일일이 인스펙터에서 확인하기 귀찮아서 만듬.

javascript:/*Lastest Version*/
(function(){
    var latestVersion = '1.8.2';
    var jQueryEnabled = false;
    if(window.jQuery === undefined || window.jQuery.fn.jquery < latestVersion){
        var script = document.createElement('script');
        script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/'+latestVersion+'/jquery.min.js';
        script.onload = script.onreadystatechagne = initMyjQuery;
        document.getElementsByTagName('HEAD')[0].appendChild(script);
    }
    else {
        initMyBookmarklet();
    }
    function initMyjQuery(){
        if($ === undefined){
            $ = jQuery;
        }
        jQueryEnabled = true;
        initMyBookmarklet();
    }
    function initMyBookmarklet(){
        var ai = $('img');
        for (i=0;
             i<ai.length;
             i++) {
         var ii = $(ai[i]);
         ii.attr('title', 'width : ' + (ii.attr('width')?ii.attr('width'):'----') + ' X height: ' + (ii.attr('height')?ii.attr('height'):'----') + '\n CSS ==> ' + (ii.css('width')?ii.css('width'):'----') + ' X ' + (ii.css('height')?ii.css('height'):'----:'));
        }
    }
})();

 

jQuery 공부하기 – 1

jQuery는 “더적게 써서 (타이핑해서) 더 많은 일은 한다”는 취지로 만들어진 자바스크립트 프레임워크이다. 114kb라는 저용량에도 불구하고 상당히 많은 내용을 포함하고 있으며, 자바 스크립트를 통해 DOM을 제어할 때의 가장 귀찮은 점 두 가지 – 원하는 객체를 특정(selecting element)하는 일과 그 객체들에 대해 반복적으로 어떤 작업을 수행하는 것-를 매우 간단히 만들어줄 수 있다. 덕분에 jQuery를 사용하는 경우, 자바 스크립트 코드를 기존 대비해서 엄청나게 줄일 수 있다고 한다.

jQuery는 기본적으로 ‘선택자’를 사용하여 DOM 객체들을 골라올 수 있다. 기존 자바스크립트에서는 document 객체를 통해 id, 이름, 태그 이름, 클래스 이름을 기준으로 객체를 선택할 수 있었는데, jQuery에서는 기본적으로 CSS 선택자를 그대로 사용해서 원소(들)을 쉽게 선택할 수 있고, 선택한 각각의 원소에 대해 반복적인 작업을 쉽게 수행할 수 있다.

예를 들어, 문서의 모든 div 요소는 자바 스크립트로는 다음과 같이 선택이 가능한데,

var allDivs = document.getElementsByTagName('DIV');

위 구문으로 구한 결과물은 모든 DIV 요소를 원소로 가지는 배열이다. 따라서 이 들에 대해서 만약 css의 폰트 색상을 빨간색으로 바꾼다고 하면

var allDivs = document.getElementsByTagName('DIV');
for (var i=0;i < allDivs.length; i++) {
    allDivs.style.color = 'red';
}

비슷하게 코드를 쓰게 되는데… 이게  jQuery에서는 단 한줄로 표현된다.

$('div').css({'color':'red'});

$()는 선택자를 이용해서 DOM 요소를 검색하고 그에 해당하는 요소(들!)을 jQuery 객체로 포장해서 반환한다. ($는  jQuery의 줄임이다.) 게다가 jQuery 객체는 배열과 단독객체가 거의 구분되지 않는 것으로 보이며 (.is(Array) 구문을 통해 배열인지 아닌지는 구분할 수 있긴하다.) 이는 배열인 jQuery 객체의 어떤 메소드를 실행하면, 같은 메소드가 그 내부에 있는 모든 원소에 대해 동일하게 적용된다. 위의 예시에서도 볼 수 있듯이 css  속성을 업데이트하는 메소드를 사실상 ‘배열’인 jQuery 객체에서 호출하면, 자동적으로 배열에 포함된 모든 요소에 대해 동일한 메소드를 반복해서 적용하게 된다.

이러한 패턴은 자바스크립트 코드의 양을 획기적으로 줄일 수 있다. 게다가 간단한 페이드, 슬라이드 효과를 손쉽게 구현할 수 있기도 하다. 또한 대부분의 jQuery 메소드는 jQuery 객체를 리턴하는데, 적절한 리턴이 없을 거라 생각되는 메소드는 통상 객체 스스로를 리턴한다. 따라서   특정 동작을 실행하는 구문 뒤에 그 다음에 실행할 메소드를 연속적으로 써서 코드 길이를 줄일 수 있다. 다음은 이러한 예를 나타낸다.

$('p').hide().text('Newly Updated').show();

모든 p 엘레멘트에 대해서 숨김 처리를 한 후, 그 텍스트 내용을 Newly Updated로 바꾸고 다시 내용을 표시한다. 이 과정을 자바스크립트로 표현하는 건 꽤나 기나긴 과정을 요구한다.

var allPs = document.getElementsByTagName('P');
for (var aP in allPs) {
    aP.style.display = 'none';
}
for (var aP in allPs) {
    aP.innerHTML = 'Newly Updated';
}
for (var aP in allPs) {
    aP.style.display = 'block';
}

그나마 정수 값으로 for 루프를 돌리지 않아서 타이핑 양을 줄여서 쓴 코드임에도 길다. 하지만 jQuery 코드에서 살짝만 변경을 준다면, 그냥 자바스크립트로 구현하자니 머리가 살짝 아파오는 수준이 된다.

$('p').hide(1000).text('Newly Updated').show(1000);

위 코드는 1초간 모든 P 엘레멘트를 사라지게 하고 (높이가 줄어들면서 없어짐) 다시 텍스트를 바꿔서 1초간 나타나는 효과를 보인다. 제법 훌륭하다. 이걸 jQuery를 쓰지 않으려면…. 자세한 과정은 생략하겠다.

이처럼 간략히 살펴본 바대로 jQuery는 자바스크립트를 통해 문서객체모델에 대한 접근을 CSS 선택자를 통해 매우 편리하고 쉽게 만들어주며, 연속적인 변경 작업을 할 수 있도록 해 작성해야 하는 코드를 극적으로 줄여준다.

jQuery의 또하나의 강점은 CSS 변경을 통한 애니메이션을 손쉽게 구현할 수 있도록 해주는 것인데, 요 부분은 다음 기회에 다뤄보기로 하겠다. 성마른 사람은 다음 주소에서 jQuery에서 제공하는 애니메이션 및 시각 효과를 살펴보면 된다.

http://api.jquery.com/category/effects/