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");

[참고 사이트]

• http://d.hatena.ne.jp/nitoyon/20081121/jquery_array