[jQuery] 기본 선택자 (1) - 직접 선택자

[jQuery] 기본 선택자 (1) - 직접 선택자

반응형

선택자

선택자는 HTML 요소를 선택해서 가져오는 역할을 한다. jQuery(제이쿼리)는 이 선택자를 통하여 HTML의 요소를 보다 쉽게 선택하여 동적인 CSS, 이벤트, 애니메이션 등을 적용할 수 있다. 매우 많은 선택자가 존재하며 본글에서는 기본선택자 중에 직접 선택자에 대하여 알아보고자 한다.

직접 선택자

구분 종류 사용법 설명 직접 선택자 전체 선택자 $("*") 모든 요소를 선택 예시 $("*").css("border", "1px solid black"); 아이디 선택자 $("#아이디명") id 태그에 지정한 값을 선택 예시 $("#menu").css("border", "1px solid black"); 클래스 선택자 $(".클래스명") class 태그에 지정한 값을 선택 예시 $(".category").css("border", "1px solid black"); 요소 선택자 $("요소명") 지정한 요소명과 일치하는 요소들을 선택 예시 $("h1").css("border", "1px solid black"); 그룹 선택자 $("선택 1, 선택 2, ...") 선택 1, 선택 2 에 지정된 요소들을 한번에 선택 예시 $("#menu, .category, h1").css("border", "1px solid black"); 종속 선택자 $("p.txt_1")

$("p#txt_1") 태그 중 class 태그가 txt_1 또는 id 태그가 txt_1 인 요소를 선택 예시 $("p.description").css("border", "1px solid black");

$("p#price").css("border", "1px solid black");

직접 선택자를 사용하여 내가 원하는 요소(태그)를 '직접' 선택하여 CSS 를 비롯한 이벤트, 애니메이션을 적용할 수 있다.

더보기 개인 학습을 위해 작성되는 글입니다. 제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다. 참조 서적: 자바스크립트 + 제이쿼리 입문 : 정인용

반응형

from http://maenco.tistory.com/96 by ccl(A) rewrite - 2021-10-28 22:27:38