위의 url에서 QueryString으로 지정된 파라메터를 다음과 같은 JavaScript 코드로 얻을 수 있다고 합시다.
var qs = getQueryStringObject();
var x = qs.x; // 925641
var y = qs.y; // 1666020
var l = qs.level; // 10
이때 getQueryStringObject 함수는 다음과 같습니다.
function getQueryStringObject() {
var a = window.location.search.substr(1).split('&');
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i) {
var p = a[i].split('=', 2);
if (p.length == 1)
b[p[0]] = "";
else
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
}
$('p').eq(3).css('color', '#00ff00'); // 4번째 요소
$('p').first().css('color', '#ff0000'); // 첫번째 요소
$('p').last().css('color', '#0000ff'); // 마지막 요소
$('p'').eq(-1).css('color', '#ff00ff'); // 끝에서 첫번째 요소
늦깍이에 웹 개발의 험난한 파도 속에 허욱적 대고 있는 요즘.. jQuery에서 가장 많이 사용하는 선택자가 까마귀 고기로 보여 컨닝 페이퍼 만들어 봅니다.
전체 선택자
$('*').css('color', 'red');
Tag 선택자
$('h1').css('color', 'orange');
ID 선택자
$('#abc').css('color', 'orange');
여러 개의(OR 조건) 선택자
$('h1, p, #abc').css('color', 'orange');
class 선택자
$('.item').css('color', 'black');
AND 조건 선택자
$('.item.abc').css('color', 'black');
자식 선택자
$('div > p').css('color', 'black');
후손 선택자
$('div p').css('color', 'black');
속성 선택자
$('h1[tt').val('good'); // 속성을 가지는 것 선택
$('h1[tt=aa').val('good'); // 속성값 일치하는 것 선택
$('h1[tt~=aa').val('good'); // 속성값에 단어로써 포함하는 것 선택
$('h1[tt^=aa').val('good'); // 속성값의 시작에 일치하는 것 선택
$('h1[tt$=aa').val('good'); // 속성값의 끝에 일치하는 선택
$('h1[tt*=aa').val('good'); // 속성값에 포함하는 것 선택
$('.a:checked').val('good'); // checked된 input 요소
$('.a:disabled').val('good'); // 비활성화된 input 요소
$('.a:enabled').val('good'); // 활성화된 input 요소
$('.a:focus').val('good'); // 포커스 대상 input 요소
$('.a:input').val('good'); // input, textarea, button, select 요소
alert( $('.a > option:selected').val() ); // class 'a'를 가진 select 요소 자식 중 선택된 option 요소
var myArray = [1, 2, 3, 4, 5];
if ($.inArray(4, myArray) !== -1) {
alert('found.');
}
다음은 어떤 객체에 또 다른 객체의 키-값을 복사해 주는 플러그인입니다. $.extend의 첫번째 인자는 복사가 되어 값이 저장될 대상 객체입니다. 그리고 두번째 이후의 인자는 복사될 키-값을 담고 있는 객체들입니다. 아래의 코드는 secondObj의 키-값을 firstObj에 복사해 주는 코드인데요. 결국 firstObj.foo는 secondObj.foo의 값으로 변경됩니다. $.extend는 첫번째 인자를 반환하므로 newObject === firstObj는 true입니다.
var firstObj = { foo: 'bar', a: 'b' };
var secondObj = { foo: 'baz' };
var newObject = $.extend(firstObj, secondObj);
alert(firstObj.foo);
if (newObject === firstObj) {
alert('equal');
}
다음 코드는 함수 호출시 내부의 this를 개발자가 의도한 객체로 하여 함수를 호출하도록 하는 플러그인입니다. 아래의 코드에서 myFunction는 전역 객체인 Window의 소유로 이 함수를 그대로 호출하면 함수 내부에서 this는 Window 객체가 됩니다. 그러나 12번 코드를 통해 myFunction 함수에 대한 내부 this를 myObject로 변경해주는 함수로 myProxyFunction를 생성하고 있습니다. 실제로 이 myProxyFunction를 13번 코드처럼 그대로 호출하면 함수 내부의 this는 myObject가 됩니다. JavaScript의 이벤트 리스너 함수에서 this 객체가 다소 혼란스러울 때가 있습니다. 이 혼란의 시기에 이 플러그인이 해결점이 될 수 있겠습니다.
var myFunction = function () {
alert(this);
};
var myObject = {
foo: 'bar',
toString: function () { return 'myObject'; }
};
myFunction();
var myProxyFunction = $.proxy(myFunction, myObject);
myProxyFunction();
다음은 배열을 순회하면서 원하는 값들로 구성된 배열을 생성하는 플러그인입니다. 7번 코드의 실행을 통해 arr 배열의 요소 객체의 id 속성만으로 구성된 배열을 생성해 반환합니다. 11번 코드는 새롭게 생성된 배열의 값을 확인하는 코드입니다.
var arr = [
{ id: 'a', tagName: 'li' },
{ id: 'b', tagName: 'li' },
{ id: 'c', tagName: 'li' }
];
var result = $.map(arr, function (value, index) {
return value.id;
});
$.each(result, function (i, v) {
alert(i + ' : ' + v);
});
