Hacosa j query 4th

HACOSA jQuery STUDY#4. jQuery 유틸리티

jQuery.support로 기능 찾기• 1.3버전에서 추가된 기능• 브라우저의 특정 기능 지원 여부 확인 기능• jQuery.support.xxxx• 많이 사용되지는 않는다고 함……

jQuery.support로 기능 찾기 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 반환

jQuery.support로 기능 찾기 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)) var week = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]; $.each(week, function(index, value){ $(‘#week’).append(‘<li>’ + value + ‘</li>’; }); ‒ $( ).each 와는 다른 메소드 <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; } ‒ $.each()는 개체나 배열을 첫번째 매개변수로 받으며, $( ).each( )는 선택 된 jQuery 컬렉션만 처리가 가능하다

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) ‒ 두 개의 배열의 요소들을 첫번째 배열에 합친다. var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’]; var weekend = [‘Saturday’, ‘Sunday’]; var week = $.merge(weekday, weekend); ‒ 주의! 첫 번째 배열의 원래값이 필요하다면 $.merge( ) 메소드 호출 전에 카피해 놓아야 한다.

jQuery.merge로 두 개의 배열을 결합하기• $.merge( ) method ‒ $. merge(first, second) ‒ 두 개의 배열의 요소들을 첫번째 배열에 합친다. var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’]; var weekend = [‘Saturday’, ‘Sunday’]; var week = $.merge(weekday, weekend); ‒ 주의! 첫 번째 배열의 원래값이 필요하다면 $.merge( ) 메소드 호출 전에 카피해 놓아야 한다. var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’]; var weekend = [‘Saturday’, ‘Sunday’]; document.writeln("weekday : " + weekday.join(, ‘) + “<br />” ); var week = $.merge(weekday, weekend); 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 class="dup"> 4번 </div> <div class="dup"> 5번 </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

http://www.mulder21c.com	87
http://mulder21c.com	25

Hacosa j query 4th

by Seong Bong Ji on Feb 08, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 112

Statistics

Hacosa j query 4th — Presentation Transcript