코밍이의 하루
[JQuery] 선택자 본문
1. 개발 환경
구분 | 내용 |
사용 언어 | HTML5, JS, jQuery |
개발환경 | Visual Studio Code |
참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
웹브라우저 | Chrome |
2. 주요 문법
1) 선택자
- HTML 요소를 선택하여 가져온다.
2) 제이쿼리 선택자
- 선택한 요소의 디자인 속성을 적용할 때 사용
- '동적' 스타일 적용
- $()에 문자형 데이터로 CSS 선택자를 입력
기본형 |
① 선택한 요소에 지정한 스타일 적용 $("CSS 선택자").css("스타일 속성명", "값"); ② 선택한 요소에 지정한 속성 적용 $("CSS 선택자").attr("속성명", "값"); |
3) 문서 객체 모델(DOM : Document Object Model)
- HTML 문서 객체 구조
- 최상위 객체 <html> , 하위 객체 <head>, <body>
- <body> 태그 : 문단태그, 테이블태그, 폼 태그 등 포함
- 모든 태그를 객체라고 부름
- 태그에는 기능과 속성 포함
(ex. <img> 태그는 이미지를 출력하는 기능이 있고 src, alt, width, height 와 같은 속성 포함)
4) 기본 선택자
- <body> 영역에 있는 문서 객체를 선택할 수 있는 선택자
구분 | 종류 | 사용법 | 설명 |
직접 선택자 |
전체 선택자 | $("*") | 모든 요소 선택 |
아이디 선택자 | $("#아이디명") | id 속성에 지정한 값을 가진 요소 선택 | |
클래스 선택자 | $(".클래스명") | class 속성에 지정한 값을 가진 요소 선택 | |
요소 선택자 | $("요소명") | 지정한 요소명과 일치하는 요소들만 선택 | |
그룹 선택자 | $("선택 1, 선택 2, ... 선택 n") | 선택1, 선택2 ...선택n에 지정된 요소들을 한 번에 선택 | |
종속 선택자 | $("p.txt_1") $("p#txt_1") |
<p> 요소 중 class 값이 txt_1인 요소 또는 id 값이 txt_1인 요소 선택 | |
인접 관계 선택자 |
부모 요소 선택자 | $("요소 선택").parent() | 선택한 요소의 부모 요소 선택 |
상위 요소 선택자 | $("요소 선택").parents() | 선택한 요소의 상위 요소 모두 선택 | |
가장 가까운 상위 요소 선택자 | $("요소 선택").closest("div") | 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택 | |
하위 요소 선택자 | $("요소 선택 하위 요소") | 선택한 요소에 지정한 하위 요소 선택 | |
자식 요소 선택자 | $("요소 선택>자식 요소") | 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택 | |
자식 요소들 선택자 | $("요소 선택").children() | 선택한 요소의 모든 자식 요소 선택 | |
형(이전) 요소 선택자 | $("요소 선택").prev() | 선택한 요소의 바로 이전 요소 선택 | |
형(이전) 요소들 선택자 | $("요소 선택").prevAll() | 선택한 요소의 이전 요소 모두 선택 | |
지정 형(이전) 요소들 선택자 | $("요소 선택").prevUntil("요소명") | 선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택 | |
동생(다음) 요소 선택자 | $("요소 선택").next() $("요소 선택+다음 요소") |
선택한 요소의 다음 요소 선택 | |
동생(다음) 요소들 선택자 | $("요소 선택").nextAll() | 선택한 요소의 다음 요소 모두 선택 | |
지정 동생(다음) 요소들 선택자 | $("요소 선택").nextUntil("h2") | 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택 | |
전체 형제 요소 선택자 | $(".box_1").siblings() | class 값이 box_1인 요소의 형제 요소 전체를 선택 |
3. 소스 코드 및 실행 결과
- jq_sample1_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#title").css("color","red");
})
</script>
</head>
<body>
<p id="title">제목</p>
</body>
</html>
'웹언어 공부 > JQuery' 카테고리의 다른 글
[JQuery] jQuery 배열 메소드 (0) | 2021.08.18 |
---|---|
[JQuery] 탐색 선택자 - 위치 탐색 선택자 (0) | 2021.08.17 |
[JQuery] 선택자 - 인접 관계 선택자 (0) | 2021.08.17 |
[JQuery] 선택자 - 직접선택자 (0) | 2021.08.17 |
[JQuery] 제이쿼리 기본 다지기 (0) | 2021.08.17 |