4.1 jQuery.support로 기능 찾기
(function ($){
$(document).ready(function(){
$('a').filter(function(){
var href = $(this).attr('href');
if(!jQuery.support.hrefNormalized){ //URL을 표준 링크로 만든다.
var loc = window.location;
href = href.replace(loc.protocol + '//' +
loc.host + loc.pathname, '');
}
return (href.substr(0, 1) == '#'); //앵커 태그 형태가 <a href = //Th인지를 검사
})
.click(function (){ //특별한 클릭 처리기 코드 });
});
})(jQuery);
-support()속성값
boxModel - 브라우저가 w3c css박스 모델 명세에 따라 렌더링 하면 True를 반환
cssFloat - style.cssFloat가 현재의 css float값을 가져오기 위해 사용되었다면 true를 반환
hrefNormalized - 브라우저가 getAttriute('href')의 결과값을 원래의 값 그대로 인식한다면 True를 반환
htmlSerialize - 브라우저가 innerHTML 어트리뷰트를 사용하여 링크 요소를 적절하게 직렬화하면 true를 반환
leadingWhitespace - 브라우저가 innerHTML을 사용할 때 공백을 유지하면 True를 반환
noCloneEvent - 브라우저가 요소를 복제 할 때 이벤트 처리기를 복제하지 않으면 True를 반환
objectAll - 요소에 대해 getElementsByTagName('*')를 사용 할 때 모든 자식 요소를 반환하면 True를 반환
opacity - 브라우저가 css opacity 스타일을 해석할 수 있으면 True를 반환
scriptEval - <script>태그에 대해서 appendChild를 ㅅ ㅏ용하는 것이 스크립트를 실행하게 되면 true를 반환
style - getAttribute('style')이 요소에 지정된 인라인 스타일을 반환할 수 있으면 true를 반환
tbody - 브라우저가 <tbody>요소 없이도 <table>요소를 허용하면 true를 반환
# 꼭 필요할 때만 찾아볼듯 -_-;
4.2 jQuery.each를 사용하여 배열과 개체를 반복하여 처리하기
(function ($) {
$(document).ready(function(){
var months = [ 'January', 'February', 'March', 'Aprill', 'May', 'June', 'July', 'August', 'September', 'October', 'Nobember', 'December'];
$.each(months, function(){
$('$months').append('<li>' + this + '</li>');
});
var days = { Sunday: 0, Monday: 1, Tuesday: 2, Wednesday : 3, Thursday : 4, Friday: 5, Saturday: 6 };
$.each(days, function(key){
$('$days').append('<li>' + key + ' (' + this + ') </li>');
});
})
})(jQuery);
4.3 jQuery.grep을 사용하여 배열 필터링 하기
(function ($) {
$(document).ready(function(){
var months = [ 'January', 'February', 'March', 'Aprill', 'May', 'June', 'July', 'August', 'September', 'October', 'Nobember', 'December'];
months = $.grep(months, function(value, i){
return (value.indexOf('J') == 0 );
});
$('$months').html( '<li>' + months.join('</li><li>') + '</li>');
});
}) (jQuery);
// 대문자 J가 포함된 녀석들을 찾아서 (필터링) 저장후 출력
// indexOf(a,b) = a는 검사할 요소 , b는 시작위치
4.4 jQuery.map 을 사용하여 배열 항목을 반복하며 수정하기
(function ($) {
$(document).ready(function(){
var months = [ 'January', 'February', 'March', 'Aprill', 'May', 'June', 'July', 'August', 'September', 'October', 'Nobember', 'December'];
months= $.map(months, function(value, i){
return value.substr(0, 3);
});
$('$months').html( '<li>' + months.join('</li><li>') + '</li>');
});
});(jQuery);
//첫 세글자만 반환해서 저장 이후 .join연산으로 긴 문자열로 만들어 출력
4.5 jQuery.merge로 두개의 배열을 결합하기
(function($) {
$(document).ready(function(){
var horseBreeds = ['Quarter horse', 'Thoroughbred', 'Arabian'];
var draftBreeds = ['Belgian', 'Percheron'];
var breeds = $.merge( horseBreeds, draftBreeds );
$('#horsed').html( '<li>' + breeds.join('</li></li>') + '</li>' );
});
})(jQuery);
//두배열을 합병되어 출력된다.
4.6 jQuery.unique를 사용하여 중복된 배열 항목 필터링하기
(function ($) {
$(document).ready(function(){
var animals = $('li.animals').get();
var horses = $('li.horses').get();
var tmp = $.merge( animals, horses );
tmp = $.unique( tmp );
$('#animals').append( $(tmp).clone() );
});
})(jQuery);
//merge로 합쳐진 배열에 .unique를 이용하여 중복제거후 다시 저장한다.
4.7 jQuery.isFunction 을 사용하여 콜백 함수 확인하기
(function($){
$.fn.myplugin = function(settings){
return this.each(function(){
settings = $.extend({ onShow: null }, settings);
$(this).show();
if( $.isFunction( settings.onShow) ) {
settings.onShow.call(this);
}
});
};
$(document).ready(function(){
$('div').myPlugin({
onShow: function() { alert('My callback!'); }
});
});
})(jQuery);
//이부분은 추후에 다시 봐봐야 할듯 :: 약간 헷갈린다.
4.8 jQuery.trim을 사용하여 폼 값 또는 문자열에서 공백 제거하기
<input type="text" name="first_name" class="cleanup" />
<input type="text" name="last_name" class="cleanup" />
(function($){
$(document).ready(function(){
('input.cleanup').blur(function(){
var value = $.trim( $(this).val() );
$(this).val( value );
});
});
})(jQuery);
// trim으로 blur이벤트 발생시 현재 value의 공백을 제거하고 다시 저장한다.
// blur : 대상 element가 focus()를 잃었을 때 발생 (onblur() )
4.9 jQuery.data를 사용하여 DOM개체와 데이터 첨부하기
$('#myId').data('myObject', { label : $('#myLabel')[0] });
var myObject = $('#myId).data('myObject');
myObject.label;
//HTML
<div id="time" class="updateTime"></div>
//새로운 데이터를 받을 준비 - 이벤트 연결
$(document).bind('setData', function(evt, key, value){
if(key == 'clock' ){
$('.updateTime').html( value );
}
});
//'updateTime' 클래스를 갖는 요소에 대해 'time'데이터를 업데이트 한다.
setInterval(function(){ $(document).data('clock', (new Date()).toString() ); }, 1000);
4.10 jQuery.extend를 사용하여 개체 확장하기
(function($) {
$.fn.myPlugin = function(options) {
options = $.extend({
message : 'Hello World',
css: { color :'red' }
}, options);
return this.each(function() {
$(this).css(options.css).html(options.message);
});
};
})(jQuery)
//myPlugin은 옵션값으로 css와 html에 적용시키겠다는 말
var obj = { hello: 'world' };
obj = $.extend(obj, { hello : 'big world' }, { foo: 'bar' });
alert( obj.hello ); //big world출력
alert( obj.foo ); //bar 출력
$('div').myPlugin({ css: { color: 'blue' } }); //css를 적용시킨다. 색을 파란색으로
$.fn.extend({
$.fn.myPlugin = function() {
options = $.extend({
message : 'Hello World',
css: { color :'red' }
}, options);
return this.each(function() {
$(this).css(options.css).html(options.message);
});
};
});
// 위 예제랑 동일한듯 하지만 options이 없다 단일 개체를 반환한단다 -_-
var obj1 = { foo: { bar : '123', baz: '456' }, hello: 'world' };
var obj2 = { foo: { car: '789' } });
var obj3 = $.extend( obj1, obj2 );
//obj3는 { foo: { car : '789' }, hello: 'world' } 이된다.
하지만 첫 매개 변수를 true로 전달한다면
var ob3 = $.extend( true, obj1, obj2);
//obj3는 { foo: { bar : '123', baz: '456' car: '789' }, hello: 'world' }; 가된다.
// 깊은 복사가 이뤄진다.