HACOSA jQuery STUDY#3. 기초를 넘어서

선택된 결과 집합을 루프 돌면서 처리하기

• $( ).each( ) Method

‒ jQuery 객체에 있는 각 요소를 반복하여 처리

var urls = [];

$(“div#post a[href]”).each(function (i){

urls[i] = $(this).attr(‘href’);

});

ⅰ. id=“post” 인 DIV 객체 아래의 href 속성을 가진 Anchor Element 집합을 선택

ⅱ. $( ).each( ) method를 이용하여 ⅰ에서의 집합 전체를 루프 돌면서

ⅲ. href 속성의 값을 urls[ ] 배열에 할당

선택된 결과 집합을 루프 돌면서 처리하기

• $( ).each( ) 사용 예

<ul>

<li>Ralph</li>

<li>Hope</li>

<li>Brandon</li>

<li>Jordan</li>

<li>Ralphine</li>

</ul>

$(“ul > li”).each(function( ){

if ( i % 2 == 1) {

$(this).addClass(“odd”);

} else {

$(this).addClass(“even”);

}

});

홀수 행 ⇒ odd class

짝수 행 ⇒ even class

선택된 결과 집합을 루프 돌면서 처리하기

• $( ).each( ) 사용 예

<ul>

<li>Ralph</li>

<li>Hope</li>

<li>Brandon</li>

<li>Jordan</li>

<li>Ralphine</li>

</ul>

$(“ul > li”).each(function( ){

if ( i % 2 == 1) {

$(this).addClass(“odd”);

} else {

$(this).addClass(“even”);

}

});

홀수 행 ⇒ odd class

짝수 행 ⇒ even class

cf) $(“ul > li”).filter(“:odd”).addClass(“odd”).end().filter(“:even”).addClass(“even”);

선택집합을 특정 항목들로 줄이기

• .eq( ) method를 이용하여 원하는 항목으로 줄임

<ol>

<li> 1 st </li>

<li> 2 nd </li>

<li> 3 rd </li>

<li> 4 th </li>

<li> 5 th </li>

<li> 6 th </li>

<li> 7 th </li>

<li> 8 th </li>

</ol >

$(“ol > li”).eq(4).css(“border-bottom”, “1px solid #000000”);

1 st

2 nd

3 rd

4 th

5 th

6 th

7 th

8 th

선택된 jQuery 개체를 원래 DOM 개체로 반환하기

• .get(index) method 사용

• $(“div”)[0] 와 같이 배열 인덱스로도 사용 가능

<div>

click me

</div>

<div class=“test”>

test

</div>

<div>

click me

</div>

$(document).ready(function( ){

var inner = $(“div”).get(0).html();

alert(inner);

}

선택집합에서 항목의 인덱스 얻기

• .index([selector | element]) method 사용

<div>

click me

</div>

<div class=“test”>

test

</div>

<div>

click me

</div>

$(“div”).click(function( ){

alert(“clicked on div with an index of “ + $(“div”).index(this));

});

기존 배열로부터 고유한 배열 만들기

• $.map(array, callback(elementOfArray, indexInArray) ) method 사용

‒ 이미 가지고 있는 배열을 또 다른 배열로 매핑하는 메소드

<ol>

<li> aaaaaa </li>

<li> bbbbbb </li>

<li> cccccc </li>

<li> dddddd </li>

<li> eeeeee </li>

</ol>

var arr = $.map($(“li”), function (item, index){

while(index < 2) {

return $(item).html();

}

return null;

});

$(document.body).append(“<span>The first two are : “ + arr.join(“, “) + “</span>”);

선택된 집합의 일부에 대해 동작 수행하기

• .slice(start [, end]) method 사용

‒ 선택된 집합 중 start 부터 end 까지의 부분집합을 선택

<p>aaaaaa</p>

<p>bbbbbb</p>

<p>cccccc</p>

<p>dddddd</p>

$(“p”).slice(1,3).wrap(“<i></i>”);

<p>aaaaaa</p>

<i><p>bbbbbb</p></i>

<i><p>cccccc</p></i>

<p>dddddd</p>

jQuery가 다른 라이브러리와 충돌하지 않도록 설정하기

• jQuery.noConflict( ) method 이용

‒ $ 변수를 가장 먼저 구현하고 있는 라이브러리에 제어권 양보

‒ jQuery.noConflict( )를 호출한 이후에는 jQuery 변수를 사용하거나

다른 변수에 할당하는 방법으로 사용

<script type=“text/javascript”>

jQuery.noConflict( );

jQuery(document).ready(

jQuery(“div”).~~~~~ //jQuery Code

);

document.observe(“dom:loaded”, function(){

$(‘prototype’).setStyle …………….

}

var jq = jQuery.noConflict( );

jq(document).ready(

jq(“div”).~~~~

);

jQuery가 다른 라이브러리와 충돌하지 않도록 설정하기

• jQuery 코드를 클로저 내부로 캡슐화

<script type=“text/javascript”>

jQuery.noConflict( );

(function($) {

$(“div”).~~~~~~

})(jQuery);

사용된 질의 알아내기

• .selector, .context 속성 이용

$.fn.ShowQuery = function(i){

alert(“$(“\”” + $(this).selector + “\”, “ + $(this).context + “)”);

if(i < 3){

$($(this).selector, $(this).context).ShowQuery(i + 1);

}

};

END