안녕하세요.
빅한입니다.
이번에는 선택자(selector) 중에서 필터 선택자에 대해서 알아보겠습니다.
대략적인 선택자의 기능에 대해서는 여기서 확인해 주세요!
글에 내용에 있어서 수정할 부분이나 궁금한 부분이 있으면 공유해서 서로 win-win할수 있는 공간이 되었으면 합니다
그럼 본격적으로 서술하도록 하겠습니다.
먼저 이번 선택자인 기본 필터에 관한 내용은 간단히 서술 하면 다음과 같습니다.
- :animated - 선택자를 실행할 때 애니메이션 진행 상태에 있는 모든 요소를 선택
- :even - 일치하는 집합 내의 인덱스가 0을 포함한 짝수인 요소를 선택
- :odd - 일치하는 집합내의 인덱스의 홀수 번째 요소를 선택
- :focus - 현재 포커스가 있는 요소를 선택
- :eq(n) - 일치하는 집합 내의 인덱스 n에 있는 요소를 선택
- :gt(n) - 일치하는 세트 내의 인덱스 보다 큰 인덱스에서 모든 요소를 선택
- :lt(n) - 일치하는 집합 내의 인덱스보다 작은 인덱스의 모든 요소를 선택
- :first - 첫 번째로 일치하는 DOM 요소를 선택
- :last - 마지막으로 일치하는 요소 선택
- :root - document의 루트 요소 선택
- :header - h1, h2, h3 등과 같이 헤더인 모든 요소를 선택
- :lang(language) - 지정된 언어의 모든 요소를 선택
- :not(selector) - 지정된 선택자와 일치하지 않는 모든 요소를 선택
- :target - document의 URL의 flagment 식별자로 지정된 대상 요소를 선택
그럼 예제를 따라서 한번 따라가도록 해볼까요?
허접하지만 천천히 이해하기 쉽도록 진행하도록 하겠습니다.
폴더 구성
폴더 구성은 다음과 같습니다.
├ root
│ ├ lib
│ │ ├ jquery-3.4.1.min.js
│ ├ selector
│ │ ├ selctor_basic_filter.html
폴더 구성에서 보시는 봐와 같이 jQuery는 3.4.1 버전을 사용하였습니다.
jQuery 다운로드는 여기를 참고하시고 소스는 아래와 같습니다.
selector_basic_filter.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../lib/jquery-3.4.1.min.js"></script>
<style>
td{
height: 400px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<ul>
<li id="move">0번째 노드<input type="text" name="node0" value="0번째 노드"></li>
<li>1번째 노드<input type="text" name="node1" value="1번째 노드"></li>
<li>2번쨰 노드<input type="text" name="node2" value="2번째 노드"></li>
<li>3번째 노드<input type="text" name="node3" value="3번째 노드"></li>
<li>4번째 노드<input type="text" name="node4" value="4번째 노드"></li>
<li>5번째 노드<input type="text" name="node5" value="5번째 노드"></li>
<li>6번째 노드<input type="text" name="node6" value="6번째 노드"></li>
<li>7번째 노드<input type="radio" name="radio" value="7번째 노드"></li>
<li>8번째 노드<input type="radio" name="radio" value="8번째 노드"></li>
<li>9번째 노드<input type="radio" name="radio" value="9번째 노드"></li>
<li>10번째 노드<input type="checkbox" name="node10" value="10번째 노드"></li>
<li>11번째 노드<input type="checkbox" name="node11" value="11번째 노드"></li>
<li>12번째 노드<input type="checkbox" name="node12" value="12번째 노드"></li>
<li><h3>13번째 노드</h3></li>
<li lang="en-us">14번째 노드</li>
<li lang="euc-kr">15번째 노드</li>
<li>16번째 노드</li>
<li id="move">17번째 노드</li>
</ul>
</td>
<td>
<button id="example1">1(:animated)</button><br>
<button id="example2">2(:even)</button><br>
<button id="example3">3(:odd)</button><br>
<button id="example4">4(:focus)</button><br>
<button id="example5">5(:eq(1))</button><br>
<button id="example6">6(:gt(6))</button><br>
<button id="example7">7(:lt(4))</button><br>
<button id="example8">8(:first)</button><br>
<button id="example9">9(:last)</button><br>
<button id="example10">10(:root)</button><br>
<button id="example11">11(:header)</button><br>
<button id="example12">12(:lang(euc-kr))</button><br>
<button id="example13">13(:not(:eq(3)))</button><br>
</td>
</tr>
</table>
<script>
(function fnAnimation(){
$("#move").slideToggle("slow",fnAnimation);
})()
$(function(){
$("#example1").click(function(e){
$("*").css("background-color","");
$("li:animated").css("background-color","skyblue");
})
$("#example2").click(function(e){
$("*").css("background-color","");
$("li:even").css("background-color","skyblue");
})
$("#example3").click(function(e){
$("*").css("background-color","");
$("li:odd").css("background-color","skyblue");
})
$("#example4").click(function(e){
$("*").css("background-color","");
$('li:eq(5) input').focus();
$(":focus").css("color","red");
})
$("#example5").click(function(e){
$("*").css("background-color","");
$("li:eq(1)").css("background-color","skyblue");
})
$("#example6").click(function(e){
$("*").css("background-color","");
$("li:gt(6)").css("background-color","skyblue");
})
$("#example7").click(function(e){
$("*").css("background-color","");
$("li:lt(4)").css("background-color","skyblue");
})
$("#example8").click(function(e){
$("*").css("background-color","");
$("li:first").css("background-color","skyblue");
})
$("#example9").click(function(e){
$("*").css("background-color","");
$("li:last").css("background-color","skyblue");
})
$("#example10").click(function(e){
$("*").css("background-color","");
$(":root").css("background-color","skyblue");
})
$("#example11").click(function(e){
$("*").css("background-color","");
$(":header").css("background-color","skyblue");
})
$("#example12").click(function(e){
$("*").css("background-color","");
$("li:lang(euc-kr)").css("background-color","skyblue");
})
$("#example13").click(function(e){
$("*").css("background-color","");
$("input:not(:eq(3))").css("background-color","skyblue");
})
})
</script>
</body>
</html>다들 아시겠지만 허접한 샘플입니다.
예제가 간단하게 제작되어서 실제로 여러방법으로 진행해 보시면더 좋을듯 싶습니다.
우선 html으로 작성된 내용은 <li>를 중점으로 예제를 구성해보았고
해당 선택자의 기능을 알아보고자 <button>의 이벤트로 구성해 보았습니다.
script의 버튼 이벤트와 관련된 내용들은 직접 브라우저의 console에서 진행하셔도 무방합니다.
console은 크롬을 예를 들면 윈도우에선 "F12"를 누르면 나오는 창을 말합니다.
맥에서는 "options+command+i" 입니다.
메뉴에서는 "설정 > 도구 더보기 > 개발자 도구"를 선택하시면
console을 이용할 수 있습니다.
:animated
현재 애니메이션 진행중인 상태의 요소를 선택하는 필터입니다.
예제에서 0번째 노드는 지속적으로 slideToggle을 호출하고 있습니다.
즉 애니메이션 효과가 지속적으로 진행함을 알수 있습니다.
버튼 "1(:animated)"를 클릭하시거나 console에 이렇게 입력하시면
$("li:animated").css("background-color","skyblue");0~17번째 노드중 애니메이션이 진행중인 0번째만 선택된것을 확인할수 있습니다.
선택한 후 '.css("background-color", "skyblue");'이 구문은
$(selector)가 선택한 요소의 CSS(style)의 속성중 배경색을 하늘색으로 변경한다는 의미 입니다.
이후 동일한 css 속성을 사용하므로 내용은 생략하도록 하겠습니다.
$(selector).css("background-color","skyblue");:even
일치하는 집합 내의 인덱스가 0을 포함한 짝수인 요소를 선택을 합니다.
짝수인지 쉽게 알기 위하여 순서를 0~17까지 표시해 두었습니다.
$("li:even").css("background-color","skyblue");버튼 "2(:even)" 클릭 또는 console에 입력 하시면 <li>의 0번째 노드를 포함한 짝수번째 노도의 배경이 하늘색으로 변경된 것을 확인 할 수 있습니다.
:odd
일치하는 집합 내의 인덱스가 홀수인 요소를 선택합니다.
$("li:odd").css("background-color","skyblue");버튼 "2(:odd)" 클릭 또는 console에 입력하시면 <li>중 홀수번째 노드의 배경만이 하늘색으로 변경된 것을 볼수 있습니다.
:focus
현재 포커스가 있는 요소를 선택합니다.
$(":focus").css("color","red");버튼 "4(:focus)"을 클릭하면 포커스를 5번째 노드안에 있는 <input>에 두고 포커스가 활성화되어있는 곳의 글자색을 적색으로 변경되어지는것을 볼 수 있습니다.
console에서는 focus이벤트를 사용하더라도 console창에 포커스가 유지되어서 확인하기가 쉽지 않습니다. 따라서 이벤트를 통하여 확인하는 것이 쉬워보입니다.
:eq(n)
일치하는 집합 내의 인덱스 n에 있는 요소를 선택합니다.
$("li:eq(1)").css("background-color","skyblue");버튼 "5(:eq(1))"를 클릭 하거나 콘솔창에 위의 명령어를 입력하시면 선택된 <li>들중에 1번째 <li>를 선택하여 배경을 하늘색으로 변경된 것을 확인 하실수 있습니다.
:gt(n)
일치하는 세트 내의 인덱스 보다 큰 인덱스에서 모든 요소를 선택합니다.
즉 선택되어진 요소들에서 "n<인덱스"조건에 맞는 요소를 필터링 합니다.
주의할점은 기준점인 n은 포함되지 않는 것을 알아두세요!
$("li:gt(6)").css("background-color","skyblue");버튼 "6:(gt(6))"을 클릭하거나 콘솔에 입력하게 되면 6번째 노드보다 높은 노드들을 선택하여 배경을 하늘색으로 변경하게 됩니다.
:lt(n)
일치하는 집합 내의 인덱스보다 작은 인덱스의 모든 요소를 선택합니다.
즉 선택된 요소들중에서 "n<인덱스"조건에 해당되는 요소들을 필터링 합니다.
":gt(n)"과 동일하게 해당 기준인 "n"번째 노드는 선택되지 않습니다.
$("li:lt(4)").css("background-color","skyblue");버튼 "7:(:lt(4))"를 클릭하시거나 콘솔에 입력을 하면 선택된 <li>들 중 4번째 인덱스보다 낮은 노드들을 선택하여 하늘색 배경으로 변경되어 지는 것을 확인할 수 있습니다.
:first
첫 번째로 일치하는 DOM 요소를 선택합니다.
선택되어진 요소들중에서 가장 첫번째(0번째) 요소를 선택하게 됩니다.
이는 마치 eq(0)와 같을 것이고 단 한개의 요소만을 반환하는 것이 특징입니다.
$("li:first").css("background-color","skyblue");버튼 "8(:last)"을 클릭 하시거나 console에 입력해 보시면 선택한 <li>요소들 중에서 가장 첫번째가 하늘색 배경으로 변경됨을 확인 하실수 있습니다.
:last
마지막으로 일치하는 요소 선택합니다.
":first"필터와는 반대로 선택된 요소들중 가장 마지막에 있는 요소 한개를 선택하게 됩니다.
$("li:last").css("background-color","skyblue");버튼 "9(:last)"을 클릭하시거나 console에 입력하시면 <li>요소들 중 가장 마지막에 위치한 요소만 배경이 하늘색으로 변경된 것을 확인 할수 있습니다.
:root
document의 루트 요소 선택합니다.
$(":root").css("background-color","skyblue");버튼 "10(:root)"를 클릭거나 console에 입력하면 문서의 배경이 하늘색으로 변경됨을 확인할수 있습니다.
사실 이 필터는 제대로 사용하는 방법을 테스트 해보진 못하였습니다.
api 문서 자체가 document를 찾는다고 써있는데요. 아마도 HTML을 찾는다는 내용인것 같습니다.
팝업이나 inculude를 사용함에 따라서 사용할수 있을 것 같지만 이건 저만의 추측이고 추후에 테스트 해보고 확실해 지면 다시 올려보도록 하겠습니다.(__);;
:header
h1, h2, h3 등과 같이 헤더인 모든 요소를 선택합니니다.
$(":header").css("background-color","skyblue");버튼 "11(:header)"을 선택하거나 console에 입력하시면 <h3>의 태그를 가진 요소들이 하늘색 배경으로 바뀌는 것을 확인 하실수 있습니다.
<li>태그 안에 있는 header를 선택하고 싶다면 $("li :header")로 <li>태그의 하위 노드 모두 중에 header요소를 가진 아이를 선택하라는 뜻입니다.
:lang(language)
지정된 언어의 모든 요소를 선택합니다.
$("li:lang(euc-kr)").css("background-color","skyblue");버튼을 "12(:lang(euc-kr)"를 선택하시거나 console에 입력하시면 태그의 속성 "lang='euc-kr'"인 요소들이 선택된 것을 확인하실수 있습니다.
15번째 노드의 내용은 [<li lang="euc-kr">15번째 노드</li>] 입니다.
:not(selector)
지정된 선택자와 일치하지 않는 모든 요소를 선택합니다.
즉 선택된 요소중에 선택자에 해당되는 요소들을 제외시키는 것을 말합니다.
$("input:not(:eq(3))").css("background-color","skyblue");버튼 "13(:not(:eq(3)))"을 클릭하거나 console에 입력해보면 선택되어진 <input> 요소들 중에서 eq(3)에 해당되는 <input> 요소만 제외하고 배경이 하늘색으로 변경된것을 확인하실수 있습니다.
:target
document의 URL의 flagment 식별자로 지정된 대상 요소를 선택합니다.
사실 이 필터에 관하여는 이해하지 못하여 테스트를 하지 못했습니다.
알고 있으신 분은 댓글로 알려주시면 감사하겠습니다.
지금 까지 "기본 필터 선택자"에 관하여 알아보았는데요.
혹시 궁금한 내용이나 더 깊이 알고 싶으신 분들은 댓글에 남겨놓으시면
최대한 성심성의것 답변하겠습니다.
이글의 목적은 느낌만이라도 가져가시고 이러한 기능들이 있구나 라는 느낌만이라도 알아가셨으면 좋겠습니다.
앞으로 이 글을 읽고 참여하시는 분들과 함께 교감하며 성장하는 제가 되었으면 좋겠습니다.
감사합니다.
'Development > JavaScript' 카테고리의 다른 글
| [jQuery] 내용 필터 선택자 (Content Filter) (0) | 2019.09.04 |
|---|---|
| [jQuery] 자식 필터 선택자(Child Filter) (0) | 2019.09.01 |
| [jQuery] 속성 지시자(Attribute Selector) (0) | 2019.05.26 |
| [jQuery] 다운로드 및 적용 방법 (4) | 2019.05.23 |
| [jQuery] 선택자 - 기본 선택자 예제 (0) | 2019.05.23 |
