- 자식 선택자( " 부모 태그명 > 자식 태그명" ) : 자식으로 범위를 한정해 전체가 선택
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$.noConflict();
var J = jQuery;
J(function () {
J("body > *").css("color", "Red");
});
</script>
<title>Untitled Page</title>
</head>
<body>
<div>
<ul>
<li>Aplle</li>
<li>Bag</li>
<li>Cat</li>
<li>Dog</li>
<li>Elephant</li>
</ul>
</div>
</body>
</html>
- 후손 선택자( "부모 태그명 후손 태그명") "요소A 요소B" : 요소A의 후손으로 범위를 지정 모든 후손 선택
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$.noConflict();
var J = jQuery;
J(function () {
J("body *").css("color", "Red");
});
</script>
<title>Untitled Page</title>
</head>
<body>
<div>
<ul>
<li>Aplle</li>
<li>Bag</li>
<li>Cat</li>
<li>Dog</li>
<li>Elephant</li>
</ul>
</div>
</body>
</html>
※ 각 JQuery 실행 후 크롬에서 요소검사(F12) 로 확인 하면 확연한 차이를 알 수 있다.
'공부 > JQuery' 카테고리의 다른 글
| JQuery_[배열1(스크립트배열), 배열2(선택자)] (0) | 2013.01.07 |
|---|---|
| JQuery_[필터 선택자] (0) | 2013.01.07 |
| JQuery_[속성 선택자] (0) | 2013.01.07 |
| JQuery_[JQuery 선택자(전체, 태그, 아이디, 클래스)] (0) | 2013.01.07 |
| JQuery_[JQuery 이란?] (0) | 2013.01.07 |