-
j query 선택 자 종류카테고리 없음 2024. 8. 13. 14:48
목차
- 제이쿼리 선택자
- 인접관계 선택자
- 부모요소 선택자
- 하위요소 선택자
- 자식요소 선택자
- 형(prev)요소, 동생(next)요소 선택자
- 제이쿼리 체이닝 기법
- 전체 형 요소, 전체 동생 요소 선택자
- 전체 형제 요소 선택자
- 범위 제한 형, 동생 요소 선택자
- 상위 요소 선택자
- 가장 가까운 상위 요소 선택자
- 제이쿼리 탐색 선택자★
- 위치 탐색 선택자
- 1. first/last 선택자
- 2. even/odd 선택자
제이쿼리 선택자
제이쿼리 선택자란 DOM안의 태그 요소를 선택할때 사용하는 선택자 입니다.
제이쿼리 선택자의 종류로는 크게 '직접 선택자'와 '인접 관계 선택자'로 나눠집니다.
직접 선택자는 태그를 직접 선택한다고 해서 '직접 선택자' 라고 부릅니다.
*(전체 선택자), #(아이디 선택자), .(클래스 선택자), ,(그룹 선택자),
태그명.클래스명 또는 태그명#아이디명(종속 선택자)가 있습니다.
제이쿼리에서 태그를 선택할 때에는 $(" ")안에 선택자의 이름을 써주면 됩니다.
(직접 선택자 기본형)
1. $("선택자") : 어떤 특정 태그를 선택합니다.
- $("*") : 전체 선택자
- $(".클래스명") : 클래스 선택자
- $("#아이디명") : 아이디 선택자
- $("태그1,태그2") : 그룹 선택자
- $("태그.클래스명") : 종속 선택자인접관계 선택자
인접관계 선택자는 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이 있는 요소를 선택할때 사용합니다.
직접 선택자로 선택한 요소를 바로 감싸고 있는 윗계층의 부모요소는 parent요소라고 부르고 선택한 요소의 부모의 부모 처럼 상위에 있는 요소를 상위요소 closest요소라고 합니다.
그리고 선택한 요소의 바로 위에 있는 태그를 형 요소(prev)라고 하고 다음 줄에 위치한 태그를 동생요소(next)라고 합니다. 부모요소의 바로 아랫계층에 들어있는 자식요소들은 children요소라고 합니다.
인접관계 선택자는 메서드의 형태로 쓰입니다.
(기본형)
1. h2의 부모요소를 선택할 때
$("h2").parent()
2. h2의 동생요소를 선택할 때
$("h2").next()인접관계 선택자 사용해보기
부모요소 선택자
부모요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택합니다.
(기본형)
$("요소선택").parent()하위요소 선택자
하위 요소 선택자는 기준으로 선택한 요소의 하위 요소만 선택합니다.
css에서의 '후손' 요소를 의미합니다.
(기본형)
$("요소선택1 요소선택2")하위요소 선택자 사용해보기
자식요소 선택자
자식 요소 선택자는 선택한 부모요소를 기준으로 지정한 자식요소를 선택할때 사용합니다.
css에서 '자손'과 비슷한 개념입니다.
(기본형)
1. $("부모요소 > 자식요소")
2. $("부모요소").children("자식요소")
: 부모요소 안에 있는특정 자식요소를 1개 선택합니다.
3. $("부모요소").children()
: 부모요소 안에 있는 모든 자식요소를 선택합니다.자식요소 선택자 사용해보기
인접관계 선택자, 하위요소 선택자, 자식요소 선택자 입력 예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>제이쿼리 선택자</title> <!-- 제이쿼리 연결 --> <script src="./js/jquery.min.js"></script> </head> <body> <h1>인접관계 선택자</h1> <ul id="wrap"> <li> 리스트1 <ul> <li id="list_1">리스트1-1</li> <li class="list_2">리스트1-2</li> </ul> </li> <li>리스트2</li> <li>리스트3</li> </ul> <script> $(document).ready(function () { // 부모요소 선택자 $("#list_1").parent().css("border", "2px solid red"); // 하위 요소 선택자 $("#wrap ul").css("background-color", "pink"); // 자식요소 선택자 $("#wrap > li").css("color", "red"); $("#wrap").children(".list_2").css("color", "blue"); $("#wrap").children().css("text-decoration", "underline"); }); </script> </body> </html>갑자기 컴퓨터가 에러가 걸려 스타일이 안먹혔던 부분이 있는데
그건 그냥 무시하시고 제가 올려드린 코드들을 보면 될 것 같습니다!ㅠㅠ
형(prev)요소, 동생(next)요소 선택자
형 요소 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택하고 동생 요소 선택자는 선택한 요소를 기준으로 바로 다음 형제 요소만 선택합니다.
(기본형)
1. $("요소선택").prev() : 선택 요소를 기준으로 바로 위에 있는 형 요소 1개를 선택합니다.
2. $("요소선택").next() : 선택 요소를 기준으로 바로 아래에 있는 동생 요소 1개를 선택합니다.
3. $("요소선택1 + 요소선택2") : 앞에 선택한 요소를 기준으로 바로 다음에 오는 요소선택 2를 선택합니다.형(prev)요소, 동생(next)요소 선택자 사용해보기
형(prev)요소, 동생(next)요소 선택자 입력 예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>제이쿼리 선택자</title> <!-- 제이쿼리 --> <script src="./js/jquery.min.js"></script> </head> <body> <div id="wrap"> <h1>형, 동생 요소 선택자</h1> <p>내용1</p> <h2>제목2</h2> <p class="txt">내용2</p> <p>내용3</p> <p>내용4</p> </div> <script> $(function () { /* */ let style1 = { "background-color": "yellow", color: "blue", border: "2px dotted pink", }; let style2 = { "background-color": "tomato", color: "#fff", border: "2px dotted gold", }; // 내용2의 형 요소를 선택하여 css 적용하기 $(".txt").prev().css(style1); // 내용2의 동생요소를 선택하여 css 적용하기 $(".txt").next().css(style2); // h2 바로 뒤에 있는 p태그를 선택하기(.txt) $("h2 + p").css(style1); // h1 바로 뒤에 있는 h2태그를 선택하기(바로 뒤에 있지 않아 적용X) $("h1 + h2").css("font-style", "italic"); // 내용2의 동생요소인 내용4를 선택해서 css 적용하기 $(".txt").next().next().css(style2); }); </script> </body> </html>제이쿼리 체이닝 기법
메서드를 여러 개 연결하여 사용하는 기법입니다.
마치 체인이 연결 된 것 처럼 생겼다고 해서 체이닝 기법이라고 합니다.전체 형 요소, 전체 동생 요소 선택자
전체 형, 동생 요소 선택자는 선택한 요소를 기준으로 위에 있는 모든 형 요소를 선택하거나 아래에 있는 모든 동생 요소를 선택할때 사용합니다.
(기본형)
$("요소선택").prevAll() ← 전체 형
$("요소선택").nextAll() ← 전체 동생전체 형제 요소 선택자
전체 형제 요소 선택자는 선택한 요소를 기준으로 모든 형제 요소들을 선택할때 사용합니다.
단, 기준이 되는 요소에는 적용되지 않습니다.
(기본형)
$("요소선택").siblings()전체 형 요소, 전체 동생 요소 선택자 , 전체 형제 요소 선택자 사용해보기
전체 형 요소, 전체 동생 요소 선택자, 전체 형제 요소 선택자 입력 예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>제이쿼리 선택자</title> <!-- 제이쿼리 --> <script src="./js/jquery.min.js"></script> </head> <body> <div id="wrap"> <h1>형, 동생 요소 선택자</h1> <p>내용1</p> <h2>제목2</h2> <p class="txt">내용2</p> <p>내용3</p> <p>내용4</p> </div> <script> $(function () { /* */ let style1 = { "background-color": "yellow", color: "blue", border: "2px dotted pink", }; let style2 = { "background-color": "tomato", color: "#fff", border: "2px dotted gold", }; let style3 = { "background-color": "tomato", color: "#red", border: "2px solid brown", }; // 전체 형 요소에 style1을 적용하기 $(".txt").prevAll().css(style1); // 전체 동생 요소에 style3을 적용하기 $(".txt").nextAll().css(style3); // .tex의 모든 형 동생 요소들을 전부 선택하기 $(".txt").siblings().css(style2); }); </script> </body> </html>범위 제한 형, 동생 요소 선택자
선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형 요소 또는 동생 요소를 선택할때 사용합니다.
(기본형)
$("요소선택").prevUntil('범위 제한 요소 선택')
$("요소선택").nextUntil('범위 제한 요소 선택')범위 제한 형, 동생 요소 선택자 사용해보기
범위 제한 형, 동생 요소 선택자 입력 예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>제이쿼리 선택자</title> <!-- 제이쿼리 --> <script src="./js/jquery.min.js"></script> </head> <body> <nav> <ul> <li class="menu1">메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> <li class="menu4">메뉴4</li> <li>메뉴5</li> <li>메뉴6</li> <li class="menu7">메뉴7</li> </ul> </nav> <script> $(function () { /* */ let style1 = { "background-color": "yellow", color: "blue", border: "2px dotted pink", }; let style2 = { "background-color": "tomato", color: "#fff", border: "2px dotted gold", }; let style3 = { "background-color": "tomato", color: "#red", border: "2px solid brown", }; // .menu4부터 .menu1안에 있는 모든 형 요소를 선택하기 $(".menu4").prevUntil(".menu1").css(style1); // .menu4부터 .menu7안에 있는 모든 동생 요소를 선택하기 $(".menu4").nextUntil(".menu7").css(style3); }); </script> </body> </html>
상위 요소 선택자
상위 요소 선택자는 선택한 요소를 기준으로 모든 상위요소를 선택하거나 상위 요소 중 특정 요소를 선택할때 사용합니다.
(기본형)
1. $("요소선택").parents()
: 선택한 요소를 기준으로 상위 요소를 모두 선택합니다.
2. $("요소선택").parents("요소선택")
: 선택한 요소를 기준으로 상위 요소 중 특정 요소를 선택합니다.상위 요소 선택자 사용해보기
상위 요소 선택자 입력 예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>제이쿼리 선택자</title> <script src="./js/jquery.min.js"></script> </head> <body> <h1 class="title">선택자</h1> <section> <div> <p class="txt1">내용1</p> </div> </section> <section> <div> <aside> <p class="txt2">내용2</p> </aside> </div> </section> <script> $(function () { // .txt1의 모든 부모 요소를 선택합니다.(이때 body, html태그도 포함합니다.) $(".txt1").parents().css("border", "2px solid pink"); // .tex2의 부모 요소 중 section 태그를 선택합니다. $(".txt2").parents("div").css("border", "2px solid red"); }); </script> </body> </html>가장 가까운 상위 요소 선택자
선택한 요소를 기준으로 가장 가까운 상위 요소만 선택할때 .closest()메서드를 사용합니다.
(기본형)
$("요소선택").closest("요소선택")가장 가까운 상위 요소 선택자 사용해보기
가장 가까운 상위 요소 선택자 입력 예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>제이쿼리 선택자</title> <script src="./js/jquery.min.js"></script> </head> <body> <h1 class="title">선택자</h1> <section> <div> <p class="txt1">내용1</p> </div> </section> <section> <div> <aside> <p class="txt2">내용2</p> </aside> </div> </section> <script> $(function () { // .tex2의 부모 요소 중 가장 가까운 상위 요소를 선택하기 $(".txt2").closest("aside").css("background-color", "#ddd"); }); </script> </body> </html>
제이쿼리 탐색 선택자★
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색하여 더 정확하게 선택할 수 있습니다. 대표적인 탐색 선택자에는 배열의 index를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있습니다.
그 외에도 컨텐츠의 포함 여부로 다시 선택할 수 있는 '컨텐츠 탐색 선택자'와 '필터링 선택자'도 있습니다.위치 탐색 선택자
기본 선택자로 태그요소를 선택하면 이 요소들은 배열에 담깁니다.
이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있습니다.1. first/last 선택자
first선택자는 선택 된 요소 중 첫 번째 요소만 선택하고, last선택자는 요소 중 마지막 요소만 선택합니다.
(기본형)
$("요소선택:first") 또는 $("요소선택").first()
$("요소선택:last") 또는 $("요소선택").last()first/last 선택자 사용해보기
first/last 선택자 입력 예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>탐색 선택자</title> <script src="./js/jquery.min.js"></script> </head> <body> <ul id="menu"> <li>내용1</li> <li>내용2</li> <li>내용3</li> <li>내용4</li> </ul> <script> $(function () { // li중 첫번째와 마지막 요소 선택 $("li:first").css("color", "red"); $("li:last").css("color", "blue"); }); </script> </body> </html>2. even/odd 선택자
even선택자는 선택한 요소 중 홀수번째에 위치한 요소를 선택하고
odd선택자는 선택한 요소 중 짝수번째에 위치한 요소를 선택할때 사용합니다.
(기본형)
$("요소선택:even") : 홀수 번째(짝수 인덱스)
$("요소선택:odd") : 짝수 번째(홀수 인덱스)even/odd 선택자 사용해보기
even/odd 선택자 입력 예시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>탐색 선택자</title> <script src="./js/jquery.min.js"></script> </head> <body> <ul id="menu"> <li>내용1</li> <li>내용2</li> <li>내용3</li> <li>내용4</li> </ul> <script> $(function () { // li중 홀수번째와 짝수번째 요소 선택 $("li:even").css("background-color", "lightblue"); $("li:odd").css("background-color", "skyblue"); }); </script> </body> </html>