본문 바로가기
내마음대로만들어보자/JS

속성 탐색 선택자

by 소농민! 2021. 8. 19.
728x90

선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자이다.

예를들어, 선택한 이미지 요소 중 경로가 [images/logo.gif]와 일치하는 이미지 요소만 선택하고자할때 사용한다.

 

* 속성 탐색 선택자의 종류

종류 사용법 설명
$("요소 선택[속성]") $("li[title]") <li> 요소 중 title속성이 포함된 요소만 선택한다.
$("요소 선택[속성=값]") $("li[title='리스트']") <li> 요소 중 title 속성값이 '리스트' 인 요소만 선택한다.
$("요소 선택[속성^='http://']") $("a[href^='http://']") <li>요소 중 href 속성값이 http:// 로 시작하는 요소만 선택한다.
$("요소 선택[속성$=텍스트]") $("a[href$='.com']") <li> 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택한다.
$("요소 선택[href*=텍스트]") $("a[href*='easyspub']") <li> 요소 중 href 속성값 중에서 'easyspub'을 포함하는 요소만 선택한다.
$("요소 선택:hidden") $("li:hidden") <li> 요소 중 숨겨져 있는 요소만 선택한다.
$("요소 선택:visible") $("li:visible") <li> 요소 중 보이는 요소만 선택한다.
$(":text") $(":text") <input>요소 중 type 속성값이 "text"인 요소만 선택한다.
$(":selected") $(":selected") selected 속성이 적용된 요소만 선택한다.
$(":checked") $(":checked") checked 속성이 적용된 요소만 선택한다.

 

* 속성과 값에 따른 탐색 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#wrap a[target]")       //target 속성을 포함하는 요소만 선택
.css({"color":"#f00"});

$("#wrap a[href^=https]")   //href 속성값이 "https"로 시작하는 요소만 선택
.css({"color":"#0f0"});

$("#wrap a[href$=net]")    //href 속성값이 "net"으로 끝나는 요소만 선택
.css({"color":"#00f"});

$("#wrap a[href*=google]")  //href 속성값에 "google"이 포함된 요소만 선택
.css({"color":"#000"});

$("#member_f :text")             //input 요소 중 type 속성값이 "text"인 요소만 선택
.css({"background-color":"#ff0"});

$("#member_f :password")  // input 요소 중 type 속성값이 "password"인 요소만 선택 
.css({"background-color":"#0ff"});
});
</script>
</head>
<body>
<div id="wrap">
<p><a href="http://easyspub.co.kr" target="_blank">EasysPub</a></p>
<p><a href="https://naver.com">Naver</a></p>
<p><a href="http://daum.net">Google</a></p>
<p><a href="http://google.co.kr">Daum</a></p>
</div>
<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>
</body>
</html>

* 속성 상태에 따른 탐색 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#wrap p:hidden").css({
"display":"block",
"background":"#ff0"
});

var z1 = $("#zone1 :selected").val( );    //id값이 "zone1"인 요소의 하위 <select>요소 중 selected된 <option>요소만 선택
console.log(z1);

var z2 = $("#zone2 :checked").val( );   //id값이 "zone2"인 요소의 하위 <input>요소 중 checked된 <input> 요소만 선택
console.log(z2);

var z3 = $("#zone3 :checked").val( );
console.log(z3);
});
</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>

 

* 콘텐츠 탐색 선택자 (contains() / contents() / has() / not() / end() )

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#inner_1 p:contains(내용1)")     // 선택한 <p> 요소 중 "내용 1"을 포함하는 요소만 선택
.css({"background-color":"#ff0"});

$("#inner_1 p:has(strong)")          // 선택한 <p>요소 중 <strong> 요소를 포함하는 요소만 선택
.css({"background-color":"#0ff"});
 
$("#outer_wrap").contents( )       // id값이 "outer_wrap"인 요소의 하위 요소의 텍스트 와 태그 노드 선택
.css({"border":"1px dashed #00f"});

$("#inner_2 p").not(":first")      // id값이 "inner_2"인 요소의 하위 <p> 요소에서 첫번째 요소만 제외하고 선택
.css({"background-color":"#0f0"});

$("#inner_2 p").eq(2).end()     //id 값이 "inner_2"인 요소의 하위 <p> 요소에서 인덱스가 2인 요소를 선택한다. 그러나 다시 end()
                                                       메서드를 적용하기 때문에 인덱스를 선택하기 전의 선택자가 적 용된다. 
.css({"color":"#f00"});
});
</script>
</head>
<body>
<div id="outer_wrap">
<h1>콘텐츠 탐색 선택자</h1>
<section id="inner_1">
<h1>contains( ), contents( ), has( )</h1>
<p><span>내용1</span></p>
<p><strong>내용2</strong></p>
<p><span>내용3</span></p>
</section>
<section id="inner_2">
<h1>not( ), end( )</h1>
<p>내용4</p>
<p>내용5</p>
<p>내용6</p>
</section>
</div>
</body>
</html>

 

* find() / filter() 탐색자

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#inner_1").find(".txt1")             // id값이 "inner_1"인 요소의 하위 요소 중 class값이 ".txt"인 요소를 선택한다.
.css({"background-color":"#ff0"});

$("#inner_1 p").filter(".txt2")      //id값이 "inner_1"인 요소의 하위 요소 중 class 값이 ".txt2"인 요소를 선택한다. 
.css({"background-color":"#0ff"});

$("#inner_2 p").filter(function(idx, obj){    //id값이 "inner_2"인 요소의 하위 요소인 <p> 개수만큼 익명 함수가 실행된다. 
console.log(idx);
return idx % 2 == 0;
})
.css({"background-color":"#0f0"});    
});
</script>
</head>
<body>
<div id="outer_wrap">
<h1>콘텐츠 탐색 선택자</h1>
<section id="inner_1">
<h2>find( ), filter( )</h2>
<p class="txt1">내용1</p>
<p class="txt2">내용2</p>
</section>

<section id="inner_2">
<h2>filter(function)</h2>
<p>index 0</p>
<p>index 1</p>
<p>index 2</p>
<p>index 3</p>
</section>
</div>
</body>
</html>

 

* is() 메서드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>  
<script src="js/jquery.js"></script>
<script>
$(function(){
var result_1 = $("#inner_1 p")
.eq(0).is(":visible");
console.log(result_1);

var result_2 = $("#inner_1 p")
.eq(1).is(":visible");
console.log(result_2);

var result_3 = $("#chk1").is(":checked");
console.log(result_3);

var result_4 = $("#chk2").is(":checked");
console.log(result_4);
});
</script>
</head>
<body>
<div id="outer_wrap">
<h1>is( )</h1>
<section id="inner_1">
<h2>문단 태그 영역</h2>
<p>내용1</p>
<p style="display:none;">내용2</p>
</section>

<section id="inner_2">
<h2>폼 태그 영역</h2>
<p>
<input type="checkbox" name="chk1" id="chk1" checked>
<label for="chk1">체크1</label>

<input type="checkbox" name="chk2" id="chk2">
<label for="chk2">체크2</label>           
</p>
</section>
</div>
</body>
</html>

$("요소 선택").is(":[checked | selected | visible | hidden | animated]")

 

checked 는 체크박스 또는 라디오 버튼 요소가 체크된 상태면 true를 아니면 false 를 반환한다.

selected 는 선택상자에 옵션 요소가 선택된 상태면 true를 아니면 false를 반환한다.

visible 는 선택한 요소가 보이면 true 아니면 false 를 반환한다.

hidden 는 선택한 요소가 숨겨진 상태면 true 아니면 false를 반환한다.

animated는 선택한 요소가 애니메이션 동작 상태면 true 아니면 false를 반환한다.

 

저작자표시

'내마음대로만들어보자 > JS' 카테고리의 다른 글

attr() / removeAttr() 메서드  (0) 2021.08.21
html() / text() 메서드  (0) 2021.08.21
index() 메서드  (0) 2021.08.19
$.inArray() / $.isArray() / $.merge() 메서드  (0) 2021.08.19
$.map() / $.grep() 메서드  (0) 2021.08.18

관련글

티스토리툴바