jQuery 배열

개발관련/jQuery2011. 4. 21. 12:26HanQ eNFO
  1. jQuery와 배열

     

    1. 배열로부터 jQuery 오브젝트 생성

     - $함수에 넣으면 OK
       $([1,2,3])
     - NodeList와 같은 넣어주어도 해석
       $(document.getElementsByTagName("div"))
       // $("div")와 같음

    2. jQuery를 활용하여 배열 처리

     - 길이 조회
       $("div").length
       // document.getElementsByTagName("div").length 와 같음
     - 특정 인덱스의 요소를 취득
       . [] 이나 get(index)를 사용하면, 특정의 인덱스의 DOM 요소를 취득할 수 있음
       $("div")[0]
       $("div").get(0)
       // document.getElementsByTagName("div")[0]와 같음
       . eq를 사용하면, 특정의 인덱스의 요소만을 포함한 jQuery 오브젝트가 되돌아 옴
       $("div").eq(0)
       // $(document.getElementsByTagName("div")[0]) 또는
       // $("div:first") 같음
       . reverse 한 뒤에 한층 더 jQuery 오브젝트로 하려면 , 모두에 소개한 것처럼,$()에 넣는다.
       $($("div").get().reverse())
       . get()의 내부에서는 $.makeArray(this)가 실행되고 있음
       . $.makeArray()는 배열과 같은 것(NodeList나 arguments, jQuery 오브젝트 등)을 배열로 변환할 때 편리함
     - jQuery 오브젝트로부터 배열을 작성
       . each!(제일인수가 인덱스, 제2인수가 요소)  
       $("div").each(function(i, elem){elem.className="foo"+i;})
       // 이하의 코드와 같은
       // var elems = document.getElementsByTagName("div");
       // for(var i = 0; i < elems.length; i++)
       //     elems[i].className = "foo" + i;
       OR
       $("div").each(function(){this.className = "foo";})
       // $("div").attr("className", "foo")와 같음
       . map!
       $("div").map(function(){return this.className;})
       // ["", "class1", "class2", ...]
       // (클래스명 일람을 포함한 jQuery 오브젝트)
       . filter!(인덱스 번호도 올수 있음)
       $("div").filter(function(){
        return this.className == "foo";
       })
       // $("div.foo")와 같음
       OR
       $("div").filter(function(i){
        return i % 2 == 0;
       })
       // $("div:even")와 같음
       . filter 에는 CSS 실렉터도 사용할 수 있다.
       $("div").filter(".foo")
       . map과 filter를 한 후에 end()를 부르면, 원래의 jQuery오브젝트로 돌아옴
       $("div")
        .filter(".foo")
            .style("display", "none")
        .end()
        .filter(".bar")
            .style("display", "block")
        .end()
       // 이하는 같음
       // $("div.foo").style("display", "none");
       // $("div.bar").style("display", "none");

이 글은 스프링노트에서 작성되었습니다.

'개발관련 > jQuery' 카테고리의 다른 글

jQuery 배열  (0) 2011.04.21
기타 유용  (0) 2011.04.21
xml 데이터 파싱 예제  (0) 2011.04.21
jModal(모달리스)  (0) 2011.04.21
기본셀렉터 치터  (0) 2011.04.21
문자열함수  (0) 2011.04.21
블로그 주인 사진AuthoreNFO
자주 잊어먹는것들을 기록해 놓을려고합니다.^^