[jQuery] 필터 3
필그램
·2017. 11. 5. 03:31
필터 3번째 강좌 입니다.
이번에 좀더 세밀한 필터를 보겠습니다.
<script type="text/javascript">
$("document").ready(function() {
$("p:contains('3')").css("border", "3px dotted blue");
// p가 3을 포함할때 적용
$("p:parent").css("border", "3px dotted blue");
// p안에 다른 tag나 텍스 있을때만 적용
$("div:has(p[class=a])").css("border", "3px dotted blue");
// p안에 다른 tag나 텍스 있을때만 적용
$("div p:first-child").css("border", "3px dotted blue");
// div다음에 오는 첫번째 p에 css를 적용
$("div p:last-of-type").css("border", "3px dotted blue");
//div다음에 오는 마지막p에 css적용,하나만 있을 경우는 위와동일하게 적용
$("div p:nth-child(2nd)").css("border", "3px dotted blue");
//div 다음에 오는 p중 2번째 마다 css를 적용, 즉 2,4,6,8...
});
</script>
스크립트를 주석처리 한 후 한줄씩 풀어서 브라우저에서 [html 코드]를 실행해봅니다.
<html>
<head>
<title>Child, Visibility, and Content Filters</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css" />
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("p:contains('3')").css("border", "3px dotted blue");
// p가 3을 포함할때 적용
$("p:parent").css("border", "3px dotted blue");
// p안에 다른 tag나 텍스 있을때만 적용
$("div:has(p[class=a])").css("border", "3px dotted blue");
// p안에 다른 tag나 텍스 있을때만 적용
$("div p:first-child").css("border", "3px dotted blue");
// div다음에 오는 첫번째 p에 css를 적용
$("div p:last-of-type").css("border", "3px dotted blue");
//div 다음에 오는 마지막 p에 css를 적용, 하나만 있을 경우는 위와 동일하게 적용
$("div p:nth-child(2nd)").css("border", "3px dotted blue");
//div 다음에 오는 p중 2번째 마다 css를 적용, 즉 2,4,6,8...
});
</script>
</head>
<body>
<h1> Child, Visibility, and Content Filters 사용해보기</h1>
<div id="content">
<p> p 적용 문단입니다. 하나만 있는 경우 입니다</p>
<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] 제이쿼리 체이닝(Chain) (0) | 2017.11.05 |
|---|---|
| [jQuery] 필터 4 (0) | 2017.11.05 |
| [jQuery] 제이쿼리 필터 2 (0) | 2017.11.04 |
| [jQuery] 셀렉터의 필터링 (0) | 2017.11.03 |
| [jQuery] 셀렉터 사용하기 (Selectors) (0) | 2017.11.01 |
