📌 1. 기본 선택자
📎 선택자란?
선택자는 HTML 요소를 선택해서 가져온다. 제이쿼리 선택자는 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다.
📎 기본 선택자 사용 방법
-
특정한
태그를 선택한다. 태그명에 id선택자 혹은 class 선택자를 입력할 수 있다.$("태그명")
-
선택한 요소에 지정한
속성을 적용한다.$("태그명).css("스타일 속성명","값");
<script> $(function(){ $("#name").css("color","red"); }); </script>
📎 기본 선택자 종류
아이디 선택자: 아이디 속성에 지정한 값을 가진 요소를 선택한다.$("#아이디명")
클래스 선택자: 클래스 속성에 지정한 값을 가진 요소를 선택한다.$(".클래스명")
전체 선택자: 모든 요소를 선택한다.$("*")
요소 선택자: 지정한 요소명과 일치하는 요소들만 선택한다.$("요소명")
그룹 선택자: 지정된 요소들을 한 번에 선택한다.$("선택1, 선택2,...")
종속 선택자: 요소들중 클래스(아이디)인 요소를 선택한다.$("요소.클래스명")
$("요소#아이디명")
📎 기본 선택자 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 선택자</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// 태그 선택자 예시
$("#btn1").click(function(){
$("p").css("color","blue");
});
// 아이디 선택자 예시
$("#btn2").click(function(){
$("#element1").css("color","red");
});
// 멀티 선택자 예시
$("#btn3").click(function(){
$("#element2,#element3").css("color","green");
});
// 클래스 선택자 예시
$("#btn4").click(function(){
$(".elements").css("color","yellow");
});
});
</script>
</head>
<body>
<h1 id="element1">이것이 heading 1입니다.</h1>
<h2 id="element2">이것이 heading 2입니다.</h2>
<h3 id="element3">이것이 heading 3입니다.</h3>
<h4 class="elements">이것이 heading 4입니다.</h4>
<h5 class="elements">이것이 heading 5입니다.</h5>
<h6 class="elements">이것이 heading 6입니다.</h6>
<hr>
<p>이것이 하나의 단락입니다.</p>
<p>이것이 하나의 단락입니다.</p>
<p>이것이 하나의 단락입니다.</p>
<input type="button" id="btn1" value="태그선택자"/>
<input type="button" id="btn2" value="아이디 선택자"/>
<input type="button" id="btn3" value="멀티선택자"/>
<input type="button" id="btn4" value="클래스선택자"/>
</body>
</html>
📌 2. 속성 선택자
📎 속성 선택자란?
각각의 요소는
속성(attribute)를 가질 수 있으므로 속성 값을 이용하여 관련된 엘리먼트에 접근이 가능하다.
📎 속성 선택자 종류(1)
| 속성 선택자 | 용도 | 예시 |
|---|---|---|
| $("태그[속성]") | 속성에 해당 되는 요소 선택 | $("a[href]") |
| $("태그[속성='값']") | 속성과 같이 모두 일치하는 요소 선택 | $("a[href='http://www.naver.com']") |
| $("태그[속성*='값']") | 속성에 값이 포함되어 있는 요소 선택 | $("div[id*='content']") |
| ='값']") | 속성에 값으로 끝나는 요소 선택 | ='content']") |
| $("태그[속성^='값']") | 속성에 값의 단어로 시작되는 요소 선택 | $("div[id^='content']") |
| $("태그[속성!='값']") | 속성에 값이 아닌 요소만 찾기 | $("div[id!='content']") |
| $("태그[속성!='값']") | 속성에 값이 아닌 요소만 찾기 | $("div[id!='content']") |
| $("태그:visible/hidden") | 선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택 | $("div:visible") |
| $("태그:selected")") | 선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택 | $("div:selected") |
| $("태그:checked")") | 체크 박스 또는 라디오 버튼 요소 중 체크된 요소만 선택 | $("div:checked") |
📎 속성 선택자 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 선택자</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("input[name='id']").css("background" , "gold");
$("input[name='pwd']").css("background" , "silver");
$("select[name='skillSelect']").css("background" , "aqua");
$("textarea[name='content']").css("background" , "purple");
});
$("input[name='skillRadio']").change(function(){
alert("라디오 엘리먼트가 선택되었습니다.");
});
$("input[name='skillCheckbox']").change(function(){
alert("체크박스 엘리먼트가 선택되었습니다.");
});
});
</script>
</head>
<body>
<form>
<fieldset>
<p>id : <input type="text" name="id"></p>
<p>password : <input type="password" name="pwd"></p>
<p>skill radio :
<input type="radio" name="skillRadio"> html
<input type="radio" name="skillRadio"> css
<input type="radio" name="skillRadio"> javascript
</p>
<p>skill checkbox :
<input type="checkbox" name="skillCheckbox"> html
<input type="checkbox" name="skillCheckbox"> css
<input type="checkbox" name="skillCheckbox"> javascript
</p>
<p>skill select:
<select name="skillSelect">
<option>html</option>
<option>css</option>
<option>javascript</option>
</select>
</p>
<p>content:<br>
<textarea rows="10" cols="30" name="content"></textarea>
</p>
<p><input type="button" id="btn" value="버튼"/></p>
</fieldset>
</form>
</body>
</html>
.png)
📌 3. 폼 요소 선택자
📎 폼 요소 선택자란?
폼 요소와 관련된 속성을 선택하고 접근이 가능하다.
📎 폼 요소 선택자 종류
| 폼 요소 선택자 | 용도 |
|---|---|
| $(":input") | 모든 input요소 선택 |
| $(":text") | 모든 input요소중 type="text"인 요소만 선택 |
| $(":password") | 모든 input요소중 type="password"인 요소만 선택 |
| $(":radio") | 모든 input요소중 type="radio"인 요소만 선택 |
| $(":checkbox") | 모든 input요소중 type="checkbox"인 요소만 선택 |
| $(":submit") | 모든 input요소중 type="submit"인 요소만 선택 |
| $(":reset") | 모든 input요소중 type="reset"인 요소만 선택 |
| $(":button") | 모든 input요소중 type="button"인 요소만 선택 |
| $(":image") | 모든 input요소중 type="image"인 요소만 선택 |
| $(":file") | 모든 input요소중 type="file"인 요소만 선택 |
| $(":hidden") | 모든 input요소중 type="hidden"인 요소만 선택 |
📎 폼 요소 선택자 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 요소 선택자</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(":text").css("background" , "green");
$(":password").css("background","gray");
$(":file").css("background","purple");
$(":button").css("background","yellow");
$(":submit").css("background","orange");
$(":radio").change(function(){
alert("라디오 엘리먼트가 선택되었습니다.");
})
$(":checkbox").change(function(){
alert("체크박스 엘리먼트가 선택되었습니다.");
});
});
</script>
</head>
<body>
<form>
<p>text : <input type="text"></p>
<p>password : <input type="password"></p>
<p>file : <input type="file"></p>
<p>button : <input type="button" value="button"></p>
<p>submit : <input type="submit" value="submit"></p>
<p>radio : <input type="radio" name="r"> <input type="radio" name="r"> <input type="radio" name="r"></p>
<p>checkbox : <input type="checkbox" name="c"> <input type="checkbox" name="c"> <input type="checkbox" name="c"></p>
</form>
</body>
</html>
📌 4. 자식 선택자
📎 자식 선택자란?
자식 요소의 속성을 선택하고 접근이 가능하다.
📎 자식 선택자 종류
자식 선택자: 직계 자식만 선택한다.$('부모요소1>자식요소2')
후손 선택자: 선택자 하위 요소를 선택한다.$('요소1 요소2)
📎 자식 선택자 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 선택자</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#header>h1").css("color" , "gold");
});
$("#btn2").click(function(){
$("#section h1").css("color" , "silver");
});
});
</script>
</head>
<body>
<hr>
<div id="header">
<h1>Header Basic</h1> <!--header안에 있으므로 직계자식-->
<div id="nav1">
<h1>Navigation1</h1> <!--header안에 있긴 하나, nav라는 부모가 있으므로 직계가 아님-->
</div>
<div id="nav2">
<h1>Navigation2</h1> <!--header안에 있긴 하나, nav라는 부모가 있으므로 직계가 아님-->
</div>
<div id="nav3">
<h1>Navigation3</h1> <!--header안에 있긴 하나, nav라는 부모가 있으므로 직계가 아님-->
</div>
</div>
<hr>
<div id="section">
<h1 class="title">Selector</h1> <!-- section의 직계자식 -->
<div id="nav4">
<h1>Navigation4</h1> <!-- section의 후손 -->
</div>
<div id="nav5">
<h1>Navigation5</h1> <!-- section의 후손 -->
</div>
</div>
<input type="button" id="btn1" value="버튼1"/>
<input type="button" id="btn2" value="버튼2"/>
</body>
</html>
.png)
📌 5. 필터 목록
📎 필터란?
필터는 '여과하다'의 뜻으로, 원하는 요소를 다양한 방식으로 걸러내는 역할을 한다. 선택자와 필터를 조합하여 엘리먼트를 탐색할 수 있다.
📎 필터 목록 종류
| 필터목록 | 용도 | 예시 |
|---|---|---|
| $(:odd) | 지정한 선택자의 홀수번째만 선택 | $(‘tr:even’) |
| $(:even) | 지정한 선택자의 짝수번째만 선택 | $(‘tr:odd’) |
| $(:eq(index)) | 선택자의 index번째만 선택 | $("tr:eq(2)") |
| $(:gt(index)) | 선택자의 index번째보다 뒤에 요소 선택 | $("tr:gt(2)") |
| $(:lt(index)) | 선택자의 index번째보다 앞의 요소 선택 | $("tr:lt(2)") |
| $(:first-child) | 각각 첫번째 자식요소 선택 | ("tr:first-child") |
| $(:last-child) | 각 각 마지막 자식요소 선택 | ("tr:last-child)") |
| $(:nth-child(n)) | n번째 자식요소 선택 | ("tr:first-child(3)") |
| $(:not(selector)) | Selector 와 일치되는 요소를 제외한 나머지 요소를 반환 | - |
| $(:focus) | 현재 포커스가 위치한 요소를 반환 | - |
📎 필터 사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본필터 목록</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// $("tr:odd").css("background" , "gold"); // 홀수만
// $("tr:even").css("background" , "silver"); // 짝수만
// $("tr:eq(5)").css("background" , "red"); // 5번째 tr선택
// $("tr:lt(5)").css("background" , "green"); // 5번째보다 작은 tr을 모두 선택
// $("tr:gt(5)").css("background" , "skyblue"); // 5번째보다 큰 tr을 모두 선택
$("tr:first-child").css("background" , "red"); // 첫번째 tr 선택
$("tr:nth-child(3)").css("background" , "orange"); // 세번째 tr 선택
$("tr:nth-child(5)").css("background" , "yellow"); // 다섯번째 tr 선택
$("tr:nth-child(7)").css("background" , "pink"); // 일곱번째 tr 선택
$("tr:last-child").css("background" , "blue"); // 마지막 tr 선택
});
</script>
</head>
<body>
<table border="1">
<tbody align="center">
<tr>
<td>정가</td>
<td>50,000원</td>
</tr>
<tr>
<td>판매가</td>
<td>45,000(10%할인)</td>
</tr>
<tr>
<td>포인트적립</td>
<td>3P 적립</td>
</tr>
<tr>
<td>포인트 추가적립</td>
<td>만원 이상 구매시 1,000P 추가 적립<br>5만원 이상 구매시 2,000P 추가 적립<br>편의점 배송 이용시 300P 추가 적립</td>
</tr>
<tr>
<td>발행일</td>
<td>2021-01-01</td>
</tr>
<tr>
<td>페이지 수</td>
<td>350쪽</td>
</tr>
<tr>
<td>ISBN</td>
<td>1234567-1234567</td>
</tr>
<tr>
<td>배송료</td>
<td>2,000원</td>
</tr>
<tr>
<td>배송안내</td>
<td>
<strong>[당일배송]</strong> 당일배송 서비스 시작!<br>
<strong>[휴일배송]</strong>휴일에도 배송받는 Bookshop
</td>
</tr>
<tr>
<td>도착예정일</td>
<td>지금 주문 시 내일 도착 예정</td>
</tr>
</tbody>
</table>
</body>
</html>
