jQuery에서 DOM 객체의 사용

jQuery에서는 다양한 방법으로 DOM 객체를 선택할 수 있다. Tag Name, Class, Name, Id 와 같이 document. 으로 선택할 수 있는 모든 객체를 선택 가능하다. 

I. Tag Name을 이용한 객체 선택 방법

1. $('TAG NAME') 을 이용한 전체 선택

2. $('TAG NAME:(POSITION)')을 이용한 first, last 객체 선택

$('li:first')

$('li:last')

$('li:even')

$('li:odd')

3. nth-child(index) 를 이용한 array와 비슷한 방법으로 객체 선택

$('li:nth-child(3)')

4. attribute를 이용한 객체 선택

$('li a[title=title]')

$(function() {

    $('a').css('color', 'Black');

    $('li a[title=title]').css('color', 'Red');

    $('li:nth-child(3)').css('color', 'Green');

    $('li:first').css('color', 'Yellow');

});

II. DOM 객체의 추가 및 삭제

appendTo, remove 를 통해서 새로운 object의 추가가 가능하다. 각 객체에 대한 선택이 매우 자유로운 편이다.

$(function() {

    var i = $('#nav li').size() + 1;

    console.log(i);

    $('a#add').click(function() {

        $('<li>' + i + '</li>').appendTo('#nav');

        i++;

        console.log(i);

    });

    $('a#remove').click(function() {

        $("#nav li:last").remove();

        i--;

        console.log(i);

    });

});