3.1 선택된 결과의 집합을 루프 돌면서 처리하기
jQuery는 선택된 DOM요소의 집합에 대해 루프를 돌면서 처리 할 수 있는 기본 메서드 $().each 를 제공한다.
$("ul > li").each(function(i){
if(i%2 ==1){
$(this).addClass("odd");
}
else{
$(this).addClass("even");
}
});
Unsorted List의 하부 list중 홀수, 짝수번째 요소들마다 클래스를 다르게 적용한다는 예인데
each의 반복성에 대해 설명해 준다.
$("ul>li:odd").addClass("odd") <-이런 방식으로 odd번째(짝수) 녀석들에게 'odd'란 클래스를 적용한다.
3.2 선택집합을 특정 항목들로 줄이기
$("ol #east> li").eq(7).css("border-bottom","1px solid #000000");
Ordered List 중 id가 east인녀석의 하부 list의 eq(7)즉 8번째 오느 녀석에게 밑줄을 긋겠다는 이야기
# :eq(n)을 유용하게 사용할 수 있을 듯하다
$("li").css("background-color","#CCCCCC").eq(0).css("background-color","#ff0000");
List에 css를 적용하고 eq(0)즉 첫번재 자식에게는 다른 css를 적용한다는 이야기
3.3 선택된 jQuery 개체를 원래의 DOM개체로 변환하기
$("div")[0].innerHTML;
위 예제는 첫번째 div안의 HTML값을 모두 반환한다.
var lis=$("ol li").get().reverse();
get()메서드는 배열을 반환하고 reverse()메서드는 반환된 배열을 역순으로 정렬한다.
$.each(lis.function(i){
$("ol").append("<li>"+ lis[i].innerHTML + "</li>");
});
반복한다 list의 처음 부터 끝까지 !!
ol요소를 찾고 뒤에 lis의 html내용을 출력한다.
3.4 선택집합에서 항목의 인덱스 얻기
$("div").click(function(){
alert("you clicked on div with an index of"+ $("div").index(this));
});
div요소를 클릭할경우 클릭된 div요소를 반환한다. (숫자로반환)
3.5 기존 배열로부터 고유한 배열 만들기
$(document).ready(function(){
var arr = $.map($("LI"), function (item, index){
while(index<3){
return $(item).html();
}
return null;
});
$(document.body).append("<span>The first three authors are:"+arr.join(", ""</span>");
LI요소에서 item을 가져오는데 index가 3이하인경우 에만 html값을 리턴한다
즉 1~3번의 내용을 가져온다 .map은 매핑함수로 배열로 가져와서 arr배열로 넣어준다.
두번째는 body에 html을 append하는 문구인데 arr.join즉 가져온 배열을 하나의 문자열로 만들어줘서
출력한다.
3.6 선택된 집합의 일부에 대해 동작 수행하기
$("p").slice(1, 3).wrap("<i></i>");
p요소중 1부터 3미만 즉 1,2번 째 내용을 <i>태그로 감싼다 (.wrap())
3.7 jQuery가 다른 라이브러리와 충돌하지 않도록 설정하기
1)jQuery.noConflict(); 를 지정하게 되면 $지정자를 다른 Library에게 양보하고
자신은 jQuery를 사용한다.
2) var j = jQuery.noConflict();를 사용하면 jQuery문구대신 j라는 문자로 사용가능하다.
3) (function($){
$("div #jQuery").css("ffont-weight","bold");
})(jQuery);
이런식으로 묶어버리면 기존과 동일하게 사용가능하다.
3.8 플러그인을 통해 기능 추가하기
플러그인 사이트를 통해서 플러그인을 추가시켜주면
추가적인 메서드를 통해 확장된 기능을 사용 가능하다.
3.9 사용된 질의 알아내기
#("div").find("a").selector;
//"div a"를 반환한다.