-
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");
이 글은 스프링노트에서 작성되었습니다.
