[카테고리:] JavaScript

만약 웹브라우저에서 입력한 url이 다음과 같다고 가정하면..

http://localhost/map.html?x=925641&y=1666020&level=10

위의 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;
}

filter

filter 함수는 이미 선택된 항목에 대해서 다시 한번 더 선택을 하고자 할 때 사용합니다.

$('h1').css('background', '#ff0000').filter(':even').css({'color', '#00ff00');

인자를 함수 객체를 던져 처리하는 형태도 가능하며, 아래의 예는 h1 요소 중 짝수번째 요소들에 대한 처리입니다.

$('h1').filter(
    function(index) {
        return (index % 2) == 0;
    }
).css({'color', '#00ff00'});

eq, first, last

요소에 대한 위치 순서로 선택하는 선택자 함수입니다.

$('p').eq(3).css('color', '#00ff00'); // 4번째 요소
$('p').first().css('color', '#ff0000'); // 첫번째 요소
$('p').last().css('color', '#0000ff'); // 마지막 요소
$('p'').eq(-1).css('color', '#ff00ff'); // 끝에서 첫번째 요소

add

이미 선택된 요소들에 다른 요소를 추가하는 함수입니다.

$('p').css('color', '#ff0000').add('span').css('background', '#ffff00');

is

해당 요소가 선택 조건에 맞는지를 검사합니다.

$('h1').each(
    function() {
        if($(this).is('.a')) {
            $(this).css('color', '#ff0000');
        }
    }
);

find

특정 태그 또는 클래스를 갖는 요소를 선택하는 함수입니다.

var doc = $('
 ... 
 ... 
 ... 
');
doc.find('p').each(
    function(index) {
        $(this).css('background', '#0000ff');
    }
);