이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌5 - jQuery - 2년 전 등록 / 일 년 전 수정

제이쿼리 유틸(jQuery utils)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간에는 제이쿼리 유틸들에 대해 알아보겠습니다. 유틸이란 유틸리티를 뜻하죠. 유틸리티는 무언가를 관리하는 데 도움을 주는 프로그램을 뜻합니다.

제이쿼리에는 코드를 관리하는 데 도움을 주는 유틸들이 내장되어 있습니다. 굳이 선택자를 통해 태그를 선택하지 않고도 바로 쓸 수 있습니다.

$.each

배열이나 객체를 반복하는 메소드입니다. ES5의 forEach이나 for ~ in문과 비슷합니다. 함수의 첫 번째 인자는 , 두 번째 인자는 입니다.

$.each(['zero', 'hero', 'nero'], function(key, val) {
  console.log(key, val);
}); // 0, zero, 1, hero, 2, nero
$.each({ zero: 'me', hero: 'friend', nero: 'enemy' }, function(key, val) {
  console.log(key, val);
}); // zero, me, hero, friend, nero, enemy
['zero', 'hero', 'nero'].forEach(function(val, key) {
  console.log(val, key);
}); // zero, 0, hero, 1, nero, 2

$.extend

첫 번째 객체에 다른 객체들의 속성을 복사하는 메소드입니다. ES2015의 Object.assign과 비슷합니다.

$.extend({ zero: 'genious' }, { zero: 'babo', hero: 'friend' }); // { zero: 'babo', hero: 'friend' });
Object.assign({ }, { zero: 'babo' }); // { zero: 'babo' }

$.trim

문자열의 좌우 공백을 제거하는 유틸입니다. 문자열.trim() 메소드와의 차이점은 거의 없어 보입니다.

$.trim('   zero   '); // zero
'   zero   '.trim(); // zero

$.inArray

배열 안에 해당 요소가 몇 번째에 있는지 검사하는 메소드입니다. 없으면 -1을 반환합니다. 배열.indexOf 메소드와 비슷합니다.

var arr = ['zero', 'hero', 'nero'];
$.inArray('hero', arr); // 1
$.inArray('jero', arr); // -1
arr.indexOf('zero'); // 0

$.proxy

this를 바꾸는 메소드입니다. ES5에서의 bind 메소드와 비슷합니다.

var func = function() {
  console.log(this);
};
var obj = { zero: 'babo' };
func(); // window
var newFunc = $.proxy(func, obj);
newFunc(); // obj
var bindFunc = func.bind(obj);
bindFunc; // obj

$.type

기존에 있던 typeof 연산자를 조금 보완한 것입니다. typeof 연산자는 배열과 null, Date 등을 모두 object라고 표시합니다. 또한 new를 통해서 만든 문자열, 숫자, 불린도 모두 object라고 표시하고요. 정규표현식도 브라우저마다 다르게 처리합니다. 제이쿼리의 $.type은 위의 것들을 구분해줍니다.

$.type(new Date); // date
$.type([1, 2, 3]); // array
$.type(null); // null
$.type(/s/); // regexp

다음 시간에는 제이쿼리 태그를 생성, 복사, 이동, 제거하는 방법에 대해 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

3개의 댓글이 있습니다.
16일 전
$.proxy는 this가 바인딩 할 객체를 참조할 수 있도록 도와주는거죠?
16일 전
네 그렇습니다.
16일 전
$.extend 는 concat() 이랑 비슷하죠?
16일 전
concat이랑 완전 다릅니다. Object.assign이랑 비슷해요.
일 년 전
$.inArray
var arr = ['zero', 'hero', 'nero']; 작은따음표 빠진거같아요~