728x90
1. 기본선택자
| 선택자 종류 | 설명 | |
| 태그 선택자 | $("p") | p요소를 선택합니다. |
| id 선택자 | $("#pkt") | id = "pkt" 요소를 선택합니다. |
| class 선택자 | $(".logo") | class = "logo" 요소를 선택합니다. |
| 자식 선택자 | $("#gnb > ul > li") | class = "gnb" > ul 태그 > li 요소를 선택합니다. |
| 하위 선택자 | $("#gnb ul") | class = "gnb" 안에 존재하는 ul 요소를 선택합니다. |
| 인접 선택자 | $("#aa + #bb") | #aa 다음에 오는 #bb 요소를 선택합니다. |
| 형제 선택자 | $("#aa ~ #cc") | #aa 의 형제 요소 #cc 선택합니다. |
| 종속 선택자 | $("div.util") | div 요소중 class가 util인 요소를 선택합니다. |
| 그룹 선택자 | $(".left , .right , #banner") | .left , .right , #banner 요소들을 선택합니다. |
| 전체 선택자 | $("*") | 모든 요소를 선택합니다. |
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$(".logo").css("border","4px solid yellow"); //class 선택자
$("#logo").css("border","4px solid red"); //id 선택자
$("p").css("border","4px solid blue"); //태그 선택자
$("#abc").css("border","4px solid pink"); //id 선택자
$("#abc ul").css("border","4px solid purple"); //하위 선택자
$("#abc > ul > li").css("border","4px solid green"); //자식 선택자
$("div.pkt").css("border","4px solid black"); //div 요소 중 class가 pkt인 요소를 선택
});
</script>
<div class="logo">.logo(class)</div>
<div id="logo">#logo(id)</div>
<p><P>상,하 여백</p>
<div id="abc">
<ul>과일
<li>바나나</li>
<li>복숭아</li>
</ul>
<li>해당안됨</li>
</div>
<div class="pkt">div.pkt</div>
[실행결과]
2. 속성 선택자
| 선택자 종류 | 설명 | |
| 요소[속성] | $("span[class]") | span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. |
| 요소[속성 = '값'] | $("span[class='abc']") | span 요소 중 class가 'abc'인 요소를 선택합니다. |
| 요소[속성 != '값'] | $("span[class!='abc']") | span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. |
| 요소[속성 ~= '값'] | $("span[class~='abc']") | span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg_abc'는 선택되지 않습니다. |
| 요소[속성 *= '값'] | $("span[class*='abc']") | span 요소 중 class가 'abc'를 포함하는 요소를 모두 선택합니다. 'bg abc' , 'bg_abc' 모두 선택합니다. |
| 요소[속성 |= '값'] | $("span[class|='abc']") | span 요소 중 class가 'abc'나 'abc-'로 시작하는 요소를 선택합니다. |
| 요소[속성 ^= '값'] | $("span[class^='abc']") | span 요소 중 class가 'abc'로 시작하는 요소를 선택합니다. |
| 요소[속성 $= '값'] | $("span[class$='abc']") | span 요소 중 class가 'abc'로 끝나는 요소를 선택합니다. |
ex)
<style>
li {
margin:5px;
}
</style>
<script>
$(document).ready(function(){
$(".list1 > li[class='list_1']").css("border","2px solid red");
$(".list1 > li[class!='list_1']").css("border","2px solid orange");
);
</script>
<ul class="list1">
<li class="list_1">내용1_1</li>
<li class="list_2">내용1_2</li>
<li class="list_3">내용1_3</li>
</ul>
<script>
$(function(){
$(".list2 > li[class~='list']").css("background","yellow");
$(".list2 > li[class*='list']").css("border","2px solid green");
});
</script>
<ul class="list2">
<li class="list bg">내용2_1</li>
<li class="list_1">내용2_2</li>
<li class="list_2">내용2_3</li>
</ul>
<script>
$(function(){
$(".list3 > li[class|='list']").css("border","2px solid blue");
});
</script>
<ul class="list3">
<li class="list">내용3_1</li>
<li class="list-1">내용3_2</li>
<li class="list-bg">내용3_3</li>
</ul>
<script>
$(function(){
$(".list4 > li[class^='list']").css("border","2px solid navy");
$(".list4 > li[class$='bg']").css("background","yellow");
});
</script>
<ul class="list4">
<li class="list">내용4_1</li>
<li class="list-1">내용4_2</li>
<li class="list-bg">내용4_3</li>
</ul>
3. 필터선택자
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
<script>
function result(){
$(document).ready(function(){
var a = $('input[type="text"]').val();
var b = $('input[type="password"]').val();
var c = $('input[type="radio"]').val();
var cc = $('input[name="m_gender"]:checked').val(); //checked
var d = $('input[type="number"]').val();
var e = $('input[type="checkbox"]').val();
var ee = $('input[id="m_hobby"]:checked').val(); //checked
var f = $('select[id="m_level"]').val();
console.log(a);
console.log(b);
console.log(c);
console.log(cc);
console.log(d);
console.log(e);
console.log(ee);
console.log(f);
});
}
</script>
아이디 : <input type="text" id="m_id" name="m_id" value="1111"><br>
비밀번호 : <input type="password" id="m_pass" value="2222"><br>
성별 : <input type="radio" name="m_gender" value="F" checked>여
<input type="radio" name="m_gender" value="M">남<br>
나이 : <input type="number" id="m_age" value="28"><br>
취미 : <input type="checkbox" id="m_hobby" value="Y">축구<br>
레밸 :
<select id="m_level">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<button onclick="result()">확인</button>
</body>
</html>
4. 위치 필터 선택자
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
<table cellspacing=0>
<tr><th>이름</th><th>나이</th></tr>
<tr><td>아린</td><td>22</td></tr>
<tr><td>미연</td><td>21</td></tr>
<tr><td>지수</td><td>20</td></tr>
<tr><td>윈터</td><td>19</td></tr>
</table>
<script>
$(document).ready(function(){
//위치 값은 0부터 출발
$("tr:odd").css('background','red'); //홀수 번째 위치 선택
$("tr:even").css('background','orange'); //짝수 번째 위치 선택
$("tr:first").css('background','green'); //첫 번째 위치 선택
$("tr:last").css('background','green'); //마지막에 위치 선택
});
</script>
'JAVASCRIPT Programming > JQuery' 카테고리의 다른 글
| [JQuery] 웹 class속성 제어 (0) | 2024.07.15 |
|---|---|
| [JQuery] 웹요소 제어 (0) | 2024.07.15 |
| [JQuery] 배열 (0) | 2024.07.15 |
| [JQuery] JQuery 연결방법 (0) | 2024.07.15 |