jQuery 제이쿼리 문서 객체 선택자

Javascript/JQuery 2019. 12. 6. 12:24

728x90

선택자는 HTML요소를 선택해서 가져옵니다. CSS선택자와 마찬가지로 선택한 요소의 디자인속성을 적용하는 등 사용하고 이 때 HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없어 정적이나 제이쿼리/자바스크립트 선택자를 이용하면 동적으로 스타일을 적용할 수 있습니다.

HTML의 문서 객체 구조를 그림으로 표현하면 나무 모양으로 생긴 트리구조로 가장 상위에 위치하는 html은 뿌리(Root)라 부르고, 뿌리부터 가지처럼 뻗어나가는 모양의 요소를 노드(Node)라고 합니다. 노드의 종류는 요소노드, 텍스트노드, 속성노드가 있습니다.

jQuery 선택자(selector) 사용 방법

선택자를 사용하기 위해서는 문서 객체를 불러와야 하기에 1이 아닌 2나 3의 방법으로 불러와야 합니다.
1은 body가 생성되기 이전에 선택자가 먼저 실행되어 선택자로 문서 객체를 선택할 수 없습니다.

방법 1 (x)	방법 2	방법 3
<script> $("#txt").css("color", "red"); </script> <body> <p id="txt">hello</p> </body>	<script> $(document).ready(function(){ $("#txt").css("color", "red"); }); </script> <body> <p id="txt">hello</p> </body>	<script> $(function(){ $("#txt").css("color", "red"); }); </script> <body> <p id="txt">hello</p> </body>

1. 선택한 요소에 지정한 스타일 적용

$("CSS 선택자").css("스타일속성명", "값");

2. 선택한 요소에 지정한 속성 적용

$("CSS 선택자").attr("속성명", "값");

선택자는 $()에 문자형 데이터로 CSS 선택자를 입력합니다.

var soondae = $( "p" );

기본 선택자

<body>영역에 있는 문서 객체를 선택할 수 있는 선택자로 직접선택자와 인접관계선택자로 나눠집니다.
* 저장된 선택들은 DOM 이 변경될 때 자동적으로 업데이트 되지 않습니다.

구분	종류	사용법	설명
직접 선택자	전체 선택자	$("*")	모든 요소 선택
	아이디 선택자	$("#ID")	id 속성에 지정한 값을 가진 요소 선택
	클래스 선택자	$(".Class")	class속성에 지정한 값을 가진 요소 선택
	요소 선택자	$("Element")	지정 요소명과 일치하는 요소들만 선택
	그룹 선택자	$("C1, C2, C3, ...")	그룹적으로 선택
	종속 선택자	$("p.txt_1") $("p#txt_1")	P 요소 아래의 요소 txt_1 선택 *하위선택자와 다름
인접 관계 선택자	부모 요소 선택자	$("Element").parent()	선택요소의 부모 요소 선택
	상위 요소 선택자	$("Element").parents()	선택요소의 모든 상위 요소 선택
	가장 근접한 상위요소	$("Element").closest("div")	선택요소의 상위 요소 중 가장 가까운 div만 선택
	하위요소 선택자	$("Element 하위element")	선택요소에 지정한 하위요소 선택
	자식요소 선택자	$("Element >자식element")	선택요소 기준 자식관계에 지정한 요소만 선택
	복수 자식요소 선택자	$("Element").childern()	선택요소의 모든 자식 요소 선택
	이전요소(형) 선택자	$("Element").prev()	선택요소의 바로 이전 요소 선택
	복수 이전요소 선택자	$("Element").prevAll()	선택요소의 모든 이전 요소 선택
	이전 지정요소들 선택자	$("Element").prevUtil("요소명")	선택요소부터 지정요소의 이전요소까지 모두 선택
	동생(다음)요소 선택자	$("Element").next() $("Element+nextElem..")	선택요소의 다음 요소 선택
	복수 동생(다음)요소 선택자	$("Element").nextAll()	선택요소의 다음 모든 요소 선택
	지정 동생 요소들 선택자	$("Element").nextUtil("요소명")	선택요소부터 지정요소의 다음요소까지 모두 선택
	전체 형제요소 선택자	$(".box_1").siblings()	box_1 요소의 형제요소 전체를 선택

직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하며
전체, 아이디, 클래스, 요소명, 그룹 선택자(쉼표로 연결)가 있습니다.

* 체이닝 기법

한 객체에 다양한 메서드를 연속해서 사용하는 기법.

$("Element").css(elem, val).css(elem, val).css(elem, val);

728x90

저작자표시 비영리 변경금지

'Javascript > JQuery' 카테고리의 다른 글

jQuery 제이쿼리 탐색 선택자 (5)	2019.12.21
[jQuery] Ajax로 xml 파싱하기 (2)	2019.12.16
오류: 다른 요소(element)도 같이 선택되는 문제 (1)	2019.12.05
jQuery (5) Ajax 기술 사용해서 json 파싱하기 (0)	2019.07.03
jQuery (4) 애니메이션 효과 (0)	2019.06.28

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.