1. 제이쿼리란?
: 자바스크립트를 이용해 만든 라이브러리 언어(자바스크립트로 만들어진 다양한 함수들의 집합)이다.
2. 선택자
: 선택자는 HTML요소를 선택하여 가져온다.
CSS는 정적인 반면 제이쿼리는 동적으로 스타일을 적용할 수 있다.
-선택한 요소에 지정한 스타일을 적용할 때
$("CSS 선택자").css("스타일 속성명", "값");
-선택한 요소에 지정한 속성을 적용할 때
$("CSS 선택자").attr("속성명", "값");
-직접 선택자
| 구분 | 종류 | 사용법 | 설명 |
| 직접선택자 | 전체 선택자 | $("*") | 모든 요소를 설명한다. |
| 아이디 선택자 | $("#아이디명") | id 속성에 지정한 값을 가진 요소를 선택한다. | |
| 클래스 선택자 | $(".클래스명") | class 속성에 지정한 값을 가진 요소를 선택한다. | |
| 요소 선택자 | $("요소명") | 지정한 요소명과 일치하는 요소들만 선택한다. | |
| 그룹 선택자 | $("선택 1, 선택 2, 선택3, ...선택n") | 선택 1, 선택2, 선택 3, ... 선택 n에 지정된 요소들을 한 번에 선택한다. | |
| 종속 선택자 | $("p.txt_1") $("p#txt_1") |
<p> 요소 중 class값이 txt_1인 요소 또는 id 값이 txt_1인 요소를 선택한다. |
-인접 관계 선택자
: 인접 관계 선택자를 사용하려면 문서 객체 구조와 관계를 잘 이해해야 한다.
→문서 객체 구조와 관계
<body>
<div id="wrap> //ⓐ
<div id="inner_wrap"> //ⓑ
<h1>제목1</h1> //ⓒ , ⓓ
<h2>제목2</h2> //ⓒ , ⓔ
<p>내용1</p> //ⓒ , ⓕ
</div>
</div>
</body>
=>
ⓐ는 ⓒ의 상위(closet)요소
ⓒ는 ⓐ의 하위 요소
ⓑ는 ⓒ의 부모(parent)요소
ⓒ는 ⓑ의 자식(children)요소
ⓓ는 ⓔ의 형(prev)요소
ⓕ는 ⓔ의 동생(next)요소
| 구분 | 종류 | 사용법 | 설명 |
| 인접 관계 선택자 | 부모 요소 선택자 | $("요소 선택").parent() | 선택한 요소의 부모 요소를 선택한다. |
| 상위 요소 선택자 | $("요소 선택").parents() | 선택한 요소의 상위 요소를 모두 선택한다. | |
| 가장 가까운 상위 요소 선택자 | $("요소 선택").closet("div") | 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택한다. |
|
| 하위 요소 선택자 | $("요소 선택 하위 요소") | 선택한 요소에 지정한 하위 요소를 선택한다. | |
| 자식 요소 선택자 | $("요소 선택>자식 요소") | 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택한다. |
|
| 자식 요소들 선택자 | $("요소 선택").children() | 선택한 요소의 모든 자식 요소를 선택한다. | |
| 형(이전) 요소 선택자 |
$("요소 선택").prev() | 선택한 요소의 바로 이전 요소를 선택한다. | |
| 형(이전) 요소들 선택자 |
$("요소 선택").prevAll() | 선택한 요소의 이전 요소 모두를 선택한다. | |
| 지정 형(이전) 요소들 선택자 |
$("요소 선택").prevUntil ("요소명") |
선택한 요소부터 지정한 요소의 이전 요소까지 모두 선택한다. |
|
| 동생(다음) 요소 선택자 |
$("요소 선택").next() $("요소 선택+다음 요소") |
선택한 요소의 다음 요소를 선택한다. | |
| 동생(다음) 요소들 선택자 |
$("요소 선택").nextAll() | 선택한 요소의 다음 요소 모두를 선택한다. | |
| 지정 동생(다음) 요소들 선택자 |
$("요소 선택").nextUntil("h2") | 선택한 요소부터 지정한 요소의 다음 요소까지 모두 선택한다. |
|
| 전체 형제 요소 선택자 |
$(".box_1").siblings() | class 값이 box_1인 요소의 형제 요소 전체를 선택한다. |
'프로그래밍 > JQuery' 카테고리의 다른 글
| 이벤트 등록 메서드 (0) | 2023.01.29 |
|---|---|
| JQuery_다양한 효과와 애니메이션 (0) | 2022.08.03 |
| JQuery_제이쿼리 이벤트 (0) | 2022.07.28 |
| JQuery_제이쿼리 문서 객체 선택자와 조작법(3) (0) | 2022.07.18 |
| JQuery_제이쿼리 문서 객체 선택자와 조작법(2) (0) | 2022.07.15 |