728x90
반응형
SMALL
# 속성과 값에 따른 탐색 선택자
특정 속성을 포함하는 요소를 선택할 때 사용
$("요소선택[속성]")
선택한 요소 중 지정한 속성이 포함된 요소만 선택 함.
$("요소선택[속성^=값]")
선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택함
$("요소선택[속성$=값]")
선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택함
$("요소선택[속성*=값]")
선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택함
$(":type 속성값")
input 요소 중 type 속성값이 일치하는 요소만 선택함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function() {
$("#wrap a[target]").css({"color":"red"});
//id가 wrap인 항목에서 target 속성을 포함하는 요소만 선택 helloworld
$("#wrap a[href^=https]").css({"color":"orange"});
//id가 wrap인 항목에서 href 속성 값이 https로 시작하는 요소만 선택
$("#wrap a[href$=net]").css({"color":"yellow"});
//id가 wrap인 항목에서 href 속성 값이 net으로 끝나는 요소만 선택 daum
$("#wrap a[href*=google]").css({"color":"green"});
//id가 wrap인 항목에서 href 속성 값에 google을 포함하는 요소만 선택 google
$("#member_f :text").css({"background-color":"skyblue"});//_공백필요:text
//id가 member_f인 항목에서 input 속성 값이 text인 요소만 선택
$("#member_f :password").css({"background-color":"pink"});//_공백필요:password
//id가 member_f인 항목에서 input 속성 값이 password인 요소만 선택
});
</script>
</head>
<body>
<div id="wrap">
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<form action="#" method="get" id="member_f">
<p>
<label for="user_id">아이디</label><input type="text" name="user_id" id="user_id">
</p>
<p>
<label for="user_pw">비번</label><input type="password" name="user_pw" id="user_pw">
</p>
</form>
</div>
</body>
</html>
# 속성 상태에 따른 탐색 선택자
선택한 요소 중 속성 상태에 따라 요소를 선택 함.
$("요소 선택:[visible | hidden]")
선택한 요소 중 숨겨진 상태 또는 보여진 상태의 요소만 선택
$(":selected")
선택 상자 중 현재 선택된 옵션 요소만 선택
$(":checked")
체크박스 또는 라디오 버튼 요소 중 체크된 요소만 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
$(function(){
$("#wrap p:hidden").css({
"display":"block",
"background":"#ff0"
});
//id가 wrap인 항목의 p 요소 중 hidden인 상태의 요소만 선택. 내용2
var z1 = $("#zone1 :selected").val();
console.log(z1);
//id가 zone1인 항목의 요소 중 selected된 option 요소만 선택. opt2
var z2 = $("#zone2 :checked").val();
console.log(z2);
//id가 zone2인 항목의 요소 중 checked된 input 요소만 선택. 등산
var z3 = $("#zone3 :checked").val();
console.log(z3);
//id가 zone3인 항목의 요소 중 checked된 input 요소만 선택. female
})
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p style="display:none">내용2</p>
<p>내용3</p>
</div>
<form action="#">
<p id="zone1">
<select name="course" id="course">
<option value="opt1">옵션1</option>
<option value="opt2" selected>옵션2</option>
<option value="opt3">옵션3</option>
</select>
</p>
<p id="zone2">
<input type="checkbox" name="hobby1" value="독서">독서
<input type="checkbox" name="hobby2" value="자전거">자전거
<input type="checkbox" name="hobby3" value="등산" checked>등산
</p>
<p id="zone3">
<input type="radio" name="gender" value="male">남성
<input type="radio" name="gender" value="female" checked>여성
</p>
</form>
</body>
</html>
출처 : doit javascript
728x90
반응형
LIST
'JAVASCRIPT' 카테고리의 다른 글
| Javascript Jquery Contents search selector 제이쿼리 콘텐츠 탐색 선택자 (0) | 2022.06.02 |
|---|---|
| Javascript Jquery .val() 자바스크립트 .val() (0) | 2022.05.12 |
| Javascript Jquery Array related method 자바스크립트 제이쿼리 배열 관련 메서드 (0) | 2022.05.11 |
| Javascript Jquery Selector 제이쿼리 탐색 선택자 (0) | 2022.05.10 |
| Javascript Jquery Selector 자바스크립트 제이쿼리 선택자 2 (0) | 2022.05.09 |
