[jQuery] 찾은 노드 다루기

1.찾은 노드개수 구하기

$대상.length;

ex) var nodeLength = $("div).length;

    해당 html의 div 노드의 총 개수를 구함

2.찾은 노드중 n번째 노드 접근하기

$대상.eq(index);

ex) var $div_3 = $("div").eq(3);

    해당 html의 div 노드중 세번째 노드의 jQuery객체를 리턴

3.자바스크립트 DOM 객체 접근

$대상.get(index)

ex) var $div_3 = $("div").get(3);

    $div_3.style.color = "#f00";

    해당 html의 div노드중 세번째의 노드의 DOM객체를 리턴하여 세번째 div의 색을 빨간색으로 바꿨다.

2번(jQuery객체 접근), 3번(DOM객체 접근) 리턴값 비교

위에서 보는것처럼 두 객체가 다르다는 것을 잘 비교하자.

jQuery는 만능이 아니다. jQuery로 할 수 없는건 직접 자바스크립트를 사용하여 처리해야 될 수도 있으므로 이 차이를 잘 알아두자.

다시한번 말하지만 자바스크립트 DOM 작업을 좀더 쉽게 컨트롤하기 위한 라이브러리 임을 알자

(jQuery의 내부는 자바스크립트 DOM과 자바스크립트 문법으로 되어있음을 알자)

4.순차적으로 찾은노드에 접근하기

$대상.each(function(index){

     var $target = $(this); OR $대상.eq(index);

});

ex) // jQuery객체를 이용해 변경 

    $("li").each(function(index){

         $(this).html(index + "번째 li");

    });

    OR 

    

    //DOM객체를 이용하여 변경

    $("li").each(function(index){

         this.innerText = index + "번째 li";

    });

    

    해당 html의 모든 li노드를 찾아 몇번째 li인지 텍스트로 나타낸다. (index는 0부터 시작)

     

 - $(this)의 의미 

여기서 this는 index 번째의 DOM객체를 의미한다.

그런데 여기에 $()로 감싸 놓았기 때문에 $(index번째 DOM객체) 이므로

$(this)는 index번째 DOM객체를 포장하고있는 jQuery객체란 뜻이다.

로그를 통해 보면 쉽게 알 수 있다.

5.찾은 노드 중에서 특정 노드만 찾기

$대상.filter("선택자")

찾은 노드 중에서 특정 노드만을 사용 싶을때 사용

ex) $("li").filter(".test").html("테스트클래스를 가지고 있는 li입니다.");

    해당 html안의 모든 li노드 객체중에서 test라는 클래스를 가진 li만 "텍스트를 테스트클래스를 가지고 있는 li입니다." 라고 변경

6.찾은노드의 자손 노드 중 특정 노드 찾기

$대상.find("선택자")

찾은 노드의 하위(자식,자손)노드를 모두 검색한다.

그렇기 때문에 바로 한단계 하위(자식)노드를 찾고 싶으면 children() 메서드를 사용

filter()와 find()의 차이는 filter()는 현재 노드 중에서 찾아내고 find는 현재 노드를 제외한 하위노드 중에서 찾아낸다.

ex) var $ul = $("ul");

    $ul.find(".test").html("ul의 하위 노드중 test라는 클래스를 가진 노드");

    해당 html안의 모든 ul노드의 하위 객체중 test라는 클래스를 가진 노드의 텍스트를 바꿔준다.

7.인덱스 값 구하기

$대상.index()

ex) $("li").click(function(){

     alert("클릭한 li의 인덱스는 " + $(this).index() +"입니다.")

    });

$목록.index(대상DOM)

ex) var $li = $("li");

    $li.click(function(){

         alert("클릭한 li의 인덱스는 " + $li.index(this) +"입니다.");

    })

    해당 html의 클릭한 li노드의 인덱스를 알려준다.