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))
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)
‒ 두 개의 배열의 요소들을 첫번째 배열에 합친다.


‒ 주의! 첫 번째 배열의 원래값이 필요하다면 $.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

More Related Content

What's hot

Similar to Hacosa j query 4th

More from Seong Bong Ji

Hacosa j query 4th