속성 탐색 선택자
선택한 요소를 기준으로 일치하는 속성의 포함 여부를 따져 요소를 선택하는 선택자이다.
예를 들어 선택한 이미지 요소 중 경로가 [images/logo.gif]와 일치하는 이미지 요소만 선택하고자 할 때 사용한다.
다음은 속성 탐색 선택자의 종류와 사용법에 대해 간단히 정리한 표이다.
| 종류 | 사용법 | 설명 |
| $(“요소 선택[속성]”) | $(“li[title]”) | <li>요소 중 title 속성이 포함된 요소만 선택 |
| $(“요소 선택[속성=값]”) | $(“li[title=’리스트’]”) | <li> 요소 중 title 속성값이 ‘리스트’인 요소만 선택 |
| $(“요소 선택[속성^=텍스트]”) | $(“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 속성이 적용된 요소만 선택 |
속성과 값에 따른 탐색 선택자
선택한 요소 중 지정한 속성과 일치하는 속성이 있는지, 없는지의 포함 여부를 따져 요소를 선택한다.
즉, 이 선택자는 포함하는 요소를 선택할 때 주로 사용한다.
기본형은 각각 다음과 같다.
1. $("요소 선택[속성]")
2. $("요소 선택[속성^=값]")
3. $("요소 선택[속성$=값]")
4. $("요소 선택[속성*=값]")
5. $(":type 속성값")1은 선택한 요소 중 지정한 속성이 포함된 요소만 선택한다.
2는 선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택한다.
3은 선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택한다.
4는 선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택한다.
5는 input 요소 중 type 속성값이 일치하는 요소만 선택한다.
다음은 속성과 값에 따른 탐색 선택자를 사용한 예제이다.
<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="https://easyspub.co.kr" target="_blank">EasysPub</a>
</p>
<p>
<a href="https://naver.com" target="_blank">Naver</a>
</p>
<p>
<a href="https://google.co.kr" target="_blank">Google</a>
</p>
<p>
<a href="https://daum.net" target="_blank">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>속성 상태에 따른 탐색 선택자
선택한 요소 중 속성 상태에 따라 요소를 선택한다.
기본형은 다음과 같다.
1. $("요소 선택:[visible|hidden]")
2. $(":selected")
3. $(":checked")1은 선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택한다.
2는 선택 상자 중 현재 선태된 옵션 요소만 선택한다.
3은 체크박스 또는 라디오 버튼 요소 중 체크된 요소만 체크한다.
다음은 속성 상태에 따른 탐색 선택자를 사용한 예제이다.
<script>
$(function(){
$("#wrap p:hidden").css({ //선택한 <p>요소 중 숨겨진 상태의 요소만 선택
"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();
});
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p sytle="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>그 외의 선택자 - 컨텐츠 탐색 선택자
요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자 이다.
다음은 컨텐츠 탐색 선택자의 종류와 사용법을 정리한 표이다.
| 종류 | 사용법 | 설명 |
| $(“요소 선택:contains(텍스트)”) | $(“li:contatins(‘내용2’)”) | <li> 요소 중 ‘내용2’라는 텍스트를 포함하는 요소만 선택한다 |
| $(“요소 선택”).contents() | $(“p”).contents() | 선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택한다. |
| $(“요소 선택:has(요소명)”) $(“요소 선택”.has(:요소명) |
$(“li:has(‘span’)”) $(“li”).has(‘span’) |
<li> 요소 중 <span>을 포함하는 요소만 선택한다. |
| $(“요소 선택:not(:제외요소)”) $(“요소 선택”.not(:제외요소) |
$(“li:not(:first)”) $(“li”) |
<li> 요소 중 첫번째 요소만 제외하고 선택한다. |
| $(요소 선택).filter(필터 요소) | $(“li”).filter(“.list2”) | <li> 요소 중 class 값이 “list2”인 요소만 선택한다. |
| $(요소 선택1).find(요소 선택2) | $(“li”).find(“strong”) | <li> 요소의 하위 요소인 <strong>만 선택한다 |
| $(“요소 선택1”).closest(“요소 선택2”) | $(“strong”).closest(“div”) | <strong>을 감싸는 상위<div>요소 중 가장 가까운 상위 요소를 선택한다. |
| end() | $(“li”).children(“a”).end() | 필터링이 실행되기 이전의 요소인 <li>가 선택된다. |
contains()/contents()/has()/not()/end() 탐색 선택자
contains() 는 선택한 요소 중 지정한 텍스트를 포함하는 요소만 선태가혹, contents()는 선택한 요소의 하위 요소 중 1
깊이의 텍스트와 태그 노드를 선택한다. has()는 선택한 요소 중 지정한 태그를 포함하는 요소만 선택한다.
not()은 선택한 요소 중 지정한 요소만 제외한 채 선택하고, end()는 필터링되기 이전의 선택자가 적용 되도록 한다.
1. $("요소 선택:contains(텍스트)")
2. $("요소 선택").contents()
3. $("요소 선택:has(요소명)") / $("요소 선택").not(제외할 요소 선택)
4. $("요소 선택:not(제외할 요소 선택)") / $("요소 선택").not(제외할 요소 선택)
5. $("요소 선택").탐색 선택자().end()다음은 선택한 요소에 지정한 텍스트 또는 태그를 포함하는지의 여부에 따라 선택을 결정하는 예제이다.
<script>
$(function(){
$("#inner_1 p:contatins(내용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>contatins(), 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>find()/filter()탐색 선택자
find() 탐색 선택자는 선택한 하위 요소 중에서 find()로 필터링한 요소만 선택한다.
filter() 탐색 선택자는 선택한 요소 중에서 filter()로 필터링한 요소만 선택한다.
즉, 둘의 차이점은 필터링 대상이 선택 요소를 기준으로 '하위요소'인지, '선택한요소'인지로 구분한다는 것이다.
1. $("요소 선택").find("하위 요소 중 필터링할 요소 선택")
2. $("요소 선택").filter("선택한 요소 중 필터링할 요소 선택")다음은 find()와 filter() 탐색 선택자를 사용한 예제이다.
<script>
$(function(){
$("#inner_1").find(".txt1")//id값이 "inner_1"인 요소의 하위 요소중 class 값이 ".txt1"인 요소를 선택
.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){
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>
선택자와 함께 알아두면 유용한 메소드
다음은 메소드의 종류와 사용법을 정리한 표이다.
| 종류 | 사용법 | 설명 |
| is(“요소 상태”) | $(“.txt1”).is(“.visible”) | 선택한 요소가 보이면 true를 반환 |
| $.noConflict() | var 변수 = $.noConflict(); 변수(“요소 선택”) |
$.noConflict()함수를 이용하면 현재 제이쿼리에서 사용중인 $ 메소드 사용을 중단하고 새로 지정한 변수명 메소드를 사용한다. |
| get() | $(“요소 선택”).get(0). style.color=”#f00” |
선택자에 get(0)을 적용하면 자바스크립트 DOM 방식의 스타일을 사용할 수 있다. |
is()메소드
선택한 요소의 상태가 지정한 속성과 일치하면 true를 반환하고, 그렇지 않으면 false를 반환한다.
is() 메소드는 입력 요소의 체크박스나 선택 상자의 '선택여부'또는 '보이는지의 여부'를 알아볼 때 주로 사용한다.
$("요소 선택").is(":[checked | selected | visible | hidden | animated]")checked 는 선택한 체크박스 또는 라이도 버튼 요소가 체크된 상태면 true를 아니면 false를 반환한다.
selected는 선택한 선택상자에 옵션 요소가 선택된 상태면 true를 아니면 false를 반환한다.
visible은 선택한 요소가 보이면 true를 아니면 false를 반환한다.
hidden은 선택한 요소가 숨겨진 상태면 true를 아니면 false를 반환한다.
animated는 선택한 요소가 애니메이션동작 상태면 true를 아니면 false를 반환한다.
다음은 is()메소드를 사용한 예제이다.
<script>
$(function(){
var result_1 = $("#inner_1 p")
.eq(0).is(":visible");
console.log(result_1); //true
var result_2 = $("#inner_1 p")
.eq(1).is(":visible");
console.log(result_2); //false
var result_3=$("#chk1").is(":checked");
console.log(result_3); //true
var result_4=$("#chk2").is(":checked");
console.log(result_4); //false
});
</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>
(참고 : do it 자바스크립트+제이쿼리 입문)
'Front > JQuery' 카테고리의 다른 글
| JQuery(이벤트 등록 메소드) (0) | 2020.05.22 |
|---|---|
| JQuery(객체조작) (0) | 2020.05.20 |
| JQuery(위치탐색선택자) (0) | 2020.05.20 |
| jquery(선택자) (0) | 2020.05.20 |
| jquery(연동) (0) | 2020.05.20 |