[jQuery] 셀렉터의 필터링
필그램
·2017. 11. 3. 05:37
셀렉터 내의 특정 부분을 필터라고 합니다.
필터의 용어는
= 첫번째, 마지막
= 짝수, 홀수
= 큰것, 작은것, 같은것
= 애니메이션이 동작중인 것
= 포커스를 주는것. 그쪽으로 이동이라 할수 있음.
= 제외하라는 의미
[ 예제]
헤더 안에 아래 내용을 넣고 내용을 보고, 한줄씩 주석을 풀어 확인합니다.
<script type="text/javascript">
$("document").ready(function() {
// 수정부분. 전체 주석 처리한 후 한줄씩 주석을 지워가며 확인하세요.
$("#example p:first").css("border", "3px solid red"); //첫번째 p
$("#example p:last").css("border", "3px dotted blue"); //마지막 p
$("#example .a").css("border", "3px dotted blue"); // 클래스 a
$("#example p:even").css("border", "2px solid red").css("background", "pink"); // p 중 홀수
$("#example .b:even").css("border", "3px solid red"); // 클래스 b중 홀수번째
$("#example p:not(p:eq(2))").css("border", "3px solid red"); // p중 2번째 빼고(not)
$("#example p").css("background", "purple") // id example 내의 p전체에 적용
});
</script>
첫번째 p
HTML은 아래를 이용하세요
<div id="example">
<p class="a">This is paragraph 1</p>
<p id="para1">This is paragraph 2</p>
<p class="b">This is paragraph 3</p>
<p id="para4" lang="en-us">This is paragraph 4</p>
<p id="para5" lang="en-gb">This is paragraph 5</p>
</div>
[진화된 필더링의 예]
>, ~, + 의 사용 예 입니다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../style.css" />
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("div > p").css("border", "3px dotted red"); // div 자식으로 포함된 p 만
$("div p").css("border", "3px dotted red"); // div 안의 p 모두
$("ul + div").css("border", "3px dotted red"); // ul 다음에 온 div 만 적용
$("#para1 ~ p").css("border", "3px dotted red"); // para1 아이디 뒤의 모든 p
$(".a ~ p").css("border", "3px dotted red"); // a클래스 뒤의 모든 p
});
</script>
</head>
<body>
<h1>jQuery Hierarchy Selectors</h1>
<div id="content">
<p>To select elements based on their position in the document tree, use the Hierarchy Selectors.</p>
<p>The Hierarchy Selectors work by examining the position of target elements relative to other elements:</p>
<ul id="list1">
<li><code>$("parent > child")</code>: selects "child" elements that are immediate descendants of the "parent"</li>
<li><code>$("ancestor descendant")</code>: selects "descendant" elements as long as they have an "ancestor" element
somewhere above them</li>
<p>div 직속자식으로 포함된 p 아니므로 첫번째 에서는 제외 </p>
<li><code>$("prev + next")</code>: selects the "next" element if it is immediately preceded by a "prev" element</li>
<li><code>$("prev ~ siblings")</code>: selects all "siblings" elements that come after a "prev" element</li>
</ul>
<div id="example">
<p class="a">This is paragraph 1</p>
<p id="para1">This is paragraph 2</p>
<p class="b">This is paragraph 3</p>
<p id="para4" lang="en-us">This is paragraph 4</p>
<p id="para5" lang="en-gb">This is paragraph 5</p>
</div>
</div>
</body>
</html>
'프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] 필터 3 (0) | 2017.11.05 |
|---|---|
| [jQuery] 제이쿼리 필터 2 (0) | 2017.11.04 |
| [jQuery] 셀렉터 사용하기 (Selectors) (0) | 2017.11.01 |
| [jQuery] 애니메이션 구현하기 (0) | 2017.11.01 |
| [jQuery] 제이쿼리 환경설정 (0) | 2017.11.01 |
