hacosa j query 4th

HACOSA jQuery STUDY#4. jQuery 유틸리티

jQuery.support로 기능 찾기

• 1.3버전에서 추가된 기능

• 브라우저의 특정 기능 지원 여부 확인 기능

• jQuery.support.xxxx

• 많이 사용되지는 않는다고 함……


boxModel

- 브라우저가 W3C CSS 박스 모델 명세에 따라 렌더링 하면 True 반환

cssFloat

- style.cssFloat가 현재의 CSS float 값을 가져오기 위해 사용되었다면 True 반환

IE의 경우 styleFloat를 지원. false를 반환 함

hrefNormalized

- 브라우저가 getAttribute(‘href’)값을 원래 값 그대로 가져오면 True 반환

IE의 경우 full-URL을 반환한다고 함….

jQuery Document에는 false를 반환한다고 나와있으나 IE8에서 테스트해보면 true 반환… -ㅅ- ;;;

htmlSerialize

- 브라우저가 innerHTML을 사용하여 <link>요소를 적절히 직렬화하면 True 반환

IE의 경우 false 반환

noCloneEvent

- 브라우저가 DOM 요소를 복제할 때 이벤트 핸들러를 복제하지 않으면 True 반환

IE의 경우 false 반환


opacity

- 브라우저가 CSS opacity 스타일을 해석 할 수 있으면 True 반환

IE의 경우 alpha filter를 대신 사용하고 있으며 false 반환

objectAll

- 요소에 대해 getElementsByTagName(‘*’)를 사용할 때 모든 자식 요소를 반환하면 True 반환

1.6.4 버전에서 지원되지 않음…… -ㅅ- ;; 실제로 찍어보면 undefined 반환, jQuery Document에도 없음

scriptEval

- <script> 태그에 대해 appendChild 사용하는 것이 스크립트를 실행하게 되면 True 반환

1.6버전에서 삭제 됨. 1.5.1 이후 버전에서는 scriptEval() method로 변경

style

- getAttribute(‘style’)이 요소에 지정된 인라인 스타일을 반환할 수 있으면 True 반환

tbody

- <tbody> 요소 없이도 <table> 요소를 허용하면 True 반환IE에선 false를 반환한다고 되어 있으나… IE8에서 테스트 결과 true 반환… -ㅅ- ;;

jQuery.each를 사용하여 배열과 개체를 반복하여 처리하기

• $.each( ) method

‒ $.each(collection, callback(indexInArray, valueOfElement))

‒ $( ).each 와는 다른 메소드

‒ $.each()는 개체나 배열을 첫번째 매개변수로 받으며, $( ).each( )는 선택

된 jQuery 컬렉션만 처리가 가능하다

var week = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’];

$.each(week, function(index, value){

$(‘#week’).append(‘<li>’ + value + ‘</li>’;

});

<ul>

<li><a href=“http://mail.naver.com”>네이버 메일</a></li>

<li><a href=“http://cafe.naver.com”>네이버 카페</a></li>

<li><a href=“http:// mail.naver.com/note”>네이버 쪽지</a></li>

</ul>

$(“ul li a”).each(function(index){

var link = $(this).attr(“href”);

window.open(link);

return false;

}

jQuery.grep을 사용하여 배열 필터링 하기

• $.grep( ) method

‒ $. grep(array, function(elementOfArray, indexInArray) [ , invert])

‒ 배열로부터 필터링 시키는 함수를 통해 특정한 배열만 반환

<dt> 평일 </dt><dd id=“weekday”></dd>

<dt> 주말 </dt><dd id=“weekend”></dd>

var week = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’];

var weekday = $.grep(week, function(day, index){

return (index < 5)

});

var weekend = $.grep(week, function(day, index){

return (index >= 5)

});

$(“#weekday”).text(weekday.join(“, “));

$(“#weekend”).text(weekend.join(“, “));

jQuery.map을 사용하여 배열 항목을 반복하며 수정하기

• $.map( ) method

‒ $. map(array, callback(elementOfArray, indexInArray)) v1.0

$. map(arrayOrObject, callback(value, indexOrKey)) v1.6

‒ 배열[이나 객체]의 모든 요소를 콜백함수를 통해 가공하여 새로운 배열[객

체 v1.6]로 변환

var dayOfWeek = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’, ‘Sunday’];

var weekdayname = $.map(dayOfWeek, function(value, i){

return value.substr(0, 3);

};

jQuery.merge로 두 개의 배열을 결합하기

• $.merge( ) method

‒ $. merge(first, second)

‒ 두 개의 배열의 요소들을 첫번째 배열에 합친다.

‒ 주의! 첫 번째 배열의 원래값이 필요하다면 $.merge( ) 메소드 호출 전에

카피해 놓아야 한다.

var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’];

var weekend = [‘Saturday’, ‘Sunday’];

var week = $.merge(weekday, weekend);

jQuery.merge로 두 개의 배열을 결합하기

• $.merge( ) method

‒ $. merge(first, second)

‒ 두 개의 배열의 요소들을 첫번째 배열에 합친다.

‒ 주의! 첫 번째 배열의 원래값이 필요하다면 $.merge( ) 메소드 호출 전에

카피해 놓아야 한다.






document.writeln("weekday : " + weekday.join(', ‘) + “<br />” );


document.writeln("week : " + week.join(', ‘) + “<br />” );

document.writeln("weekday : " + weekday.join(', ‘) + “<br />” );

weekday : Monday, Tuesday, Wednesday, Thursday, Friday

week : Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday

weekday : Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday

jQuery.unique를 사용하여 중복된 배열 항목 필터링 하기

• $.unique( ) method

‒ $. unique(array)

‒ DOM 요소 배열을 정렬하고 중복된 요소를 삭제

‒ 문자열이나 숫자의 배열에서는 동작 X, DOM 요소 배열에서만 동작<div> 1번 </div>

<div id="target"> 2번 </div>

<div class="dup"> 3번 </div>



<div> 6번 </div>

<script>

var divs = $("div").get();

document.writeln("처음 DIV 갯수 : " + divs.length + "개 <br />");

divs = divs.concat($(".dup").get());

document.writeln("가공중 DIV 갯수 : " + divs.length + "개 <br />");

divs = $.unique(divs);

document.writeln("유니크한 DIV 갯수 : " + divs.length + "개 <br />");

</script>

처음 DIV 갯수 : 6개

가공중 DIV 갯수 : 9개

유니크한 DIV 갯수 : 6개

jQuery.trim을 사용하여 폼 값 또는 문자열에서 공백 제거하기

• $.trim( ) method

‒ $. trim(str)

‒ 문자열의 시작, 끝 부분의 공백 제거

<input type=“text” id=“usrID” value=“ mulder21c ” />

<script>

var usrID = $.trim($(“input”).val());

</script>

jQuery.data를 사용하여 DOM에 개체와 데이터 첨부하기

• $.data( ) method

‒ $.data(element, key, value)

‒ Json 형식으로 데이터를 저장

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

$.data(store); // store의 unique id 반환 (데이터 저장소 index)

$.data(store, “name”, “지성봉”); // store의 데이터 저장소의 “name” 키에 “지성봉” 을 저장

$.data(store, “name”); // store의 데이터 저장소에서 “name” 키에 해당하는 값 반환

jQuery.extend를 사용하여 개체 확장하기

• $.extend(target [,object1][,objectN]) method

‒ 두 개 이상의 개체를 첫번째 개체에 합침

‒ 동일한 속성이 있을 경우 후자의 것으로 덮어 씌움

<script>

var obj = {apple:1,banana:5}

var obj2 = {apple:3, graph : 4}

$.extend(obj, obj2);

$.each(obj, function(index, value){

document.writeln(index + " : " + value + "<br />");

});

</script>

apple : 3

banana : 5

graph : 4

hacosa j query 4th

Education