waitedForU
[04] jQuery 필터 본문
1. jQuery 필터
1) first/last 필터
- $("태그:first/last") : 지정된 태그의 첫태그/마지막 태그
>>>> jfilter_01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first/last filter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:first").css("color","red");
$("li:last").css("color","blue");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
2) even/odd 필터
- $("태그:even/odd") : 지정된 태그의 짝수/홀수 번째 태그
>>>> jfilter_02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>even/odd filter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:odd").css("color","red");
$("li:even").css("color","blue");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
3) eq/gt/lt 필터
- $("태그명:eq(번호)") : 지정된 번호의 태그(0부터 시작)
$("태그명:gt(번호)") : 지정된 번호보다 뒤의 태그(0부터 시작)
$("태그명:lt(번호)") : 지정된 번호보다 앞의 태그(0부터시작)
>>>> jfilter_03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>eq/gt/lt filter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:lt(2)").css("color","red");
$("li:eq(2)").css("color","blue");
$("li:gt(2)").css("color","green");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
4) header/contain/has/parent 필터
- $("태그:header") : h1 ~ h6까지의 heading태그
$("태그:contain(문자열)") : 특정 문자열을 포함하고 있는 태그
$("태그1:has(태그2)") : 특정 태그를 포함하고 있는 태그
$("태그:parent) : 자식태그 혹은 문자열을 포함하고있는 태그
>>>> jf_header.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:header</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(":header").css("color","red");
});
</script>
</head>
<body>
<h1> 텍스트 텍스트 텍스트 텍스트 텍스트 </h1>
<p> 텍스트 텍스트 텍스트 텍스트 텍스트 </p>
<h6> 텍스트 텍스트 텍스트 텍스트 텍스트 </h6>
</body>
</html>
>>>> jf_contain_has.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:contains,:has</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:contains('샘플')").css("color","red");
$("li:has(strong)").css("color","green");
});
</script>
</head>
<body>
<ul>
<li><strong> 텍스트</strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 샘플 샘플 샘플 샘플 샘플 샘플 </li>
</ul>
</body>
</html>
>>>> jf_parent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parent 필터</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:parent").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li></li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li></li>
</ul>
</body>
</html>
'JQuery' 카테고리의 다른 글
| [06] jQuery 이벤트 (0) | 2016.05.20 |
|---|---|
| [05] jQuery 기본 명령어 (0) | 2016.05.20 |
| [02] Selector - CSS3 (0) | 2016.05.20 |
| [01] jQuery 설치, Selector - CSS, CSS2 (0) | 2016.05.20 |