jQuery를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 설정할 수 있다.
jQuery에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공하고 있다.
CSS 선택자를 이용한 선택
jQuery에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있다.
태그 이름로 선택
요소(element)의 태그 이름으로 HTML 요소를 모두 선택할 수 있다.
이는 자바스크립트의 getElementsByTagName() 메소드와 동일한 동작을 한다.
아래 예제에서 <button>을 클릭하면, <span>의 태그의 글씨가 사이즈 30px로 설정된다.
$("button").on("click", function() {
$("span").css("fontSize", "30px");
});
$() 함수에 전달되는 인수는 반드시 따옴표("")를 사용한 문자열 형태로 전달되어야 한다.
아이디로 선택
요소의 아이디(id)로 특정 HTML 요소를 선택할 수도 있다.
이는 자바스크립트의getElementsById() 메소드와 동일한 동작을 한다.
아래 예제에서 <button>을 클릭하면, 아이디가 devkuma인 글씨가 사이즈 30px로 설정된다.
$("button").on("click", function() {
$("#devkuma").css("fontSize", "30px");
});
클래스로 선택
클래스(class)로 같은 클래스의 HTML 요소를 모두 선택할 수 있다.
이는 자바스크립트의 getElementsByClassName() 메소드와 동일한 동작을 한다.
아래 예제에서 <button>을 클릭하면, 클래스가 devkuma인 글씨가 사이즈 30px로 설정된다.
$("button").on("click", function() {
$(".devkuma").css("fontSize", "30px");
});
그밖에 선택
그밖에 속성(attribute) 및 여러 css로 선택에 해당되는 특정 HTML 요소를 선택할 수 있다.
아래 예제에서 id가 btn1인 요소를 클릭하면, 속성 title이 devkuma인 글씨가 사이즈 30px로 설정된다.
$("#btn1").on("click", function() {
$("span[title=devkuma]").css("fontSize", "30px");
});
아래 예제에서 id가 btn2인 요소를 클릭하면, btn2 자신의 글씨가 사이즈 30px로 설정된다.
$("#btn2").on("click", function() {
$(this).css("fontSize", "30px");
});
아래 예제에서 id가 btn3인 요소를 클릭하면, <li>의 첫번째 항목의 글씨가 사이즈 30px로 설정된다.
$("#btn3").on("click", function() {
$("ul li:first").css("color", "red");
});
'jQuery' 카테고리의 다른 글
| [jQuery] 요소의 조작 - 요소의 내부 변경 .html() .text() (0) | 2018.11.09 |
|---|---|
| [jQuery] 요소의 조작 - 요소의 추가 .append() .prepend() .before() .after() (0) | 2018.11.09 |
| [jQuery] 요소의 선택 - 선택된 요소에 접근(getter / setter) (0) | 2018.11.09 |
| [jQuery] 요소의 선택 - jQuery 선택자(Selectors) (0) | 2018.11.09 |
| [jQuery] 요소의 선택 - CSS 선택자(Selector) (0) | 2018.11.09 |
| [jQuery] 개요 (0) | 2018.11.09 |
