[Front end] jQuery CSS 선택자

 

jQuery에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있다.

태그 이름으로 선택

요소(element)의 태그 이름으로 HTML 요소를 모두 선택할 수 있다. 이는 자바스크립트의 getElementsByTagName() 메서드와 동일한 동작을 한다.

$('button').on('click', function() {
    $('span').css('fontSize', '30px');
});

 

아이디로 선택

요소의 아이디(id)로 특정 HTML 요소를 선택할 수도 있다. 이는 자바스크립트의 getElementsById() 메서드와 동일한 동작을 한다.

$('button').on('click', function() {
    $('#selectorId').css('fontSize', '30px');
});

 

클래스로 선택

클래스(class)로 같은 클래스의 HTML 요소를 모두 선택할 수 있다. 이는 자바스크립트의 getElementsByClassName() 메서드와 동일한 동작을 한다.

$('button').on('click', function() {
    $('.selectorClass').css('fontSize', '30px');
});

 

그밖에 선택

그밖에 속성(attribute) 및 여러 css로 선택에 해당되는 특정 HTML 요소를 선택할 수 있다.

$('#btn1').on('click', function() {
    $('span[title=selectorTitle]').css('fontSize', '30px');
});

$('#btn2').on('click', function() {
    $(this).css('fontSize', '30px');
});

$('#btn3').on('click', function() {
    $('ul li:first').css('color', 'red');
});