jQuery 배열

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

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