선택자(selector)는 jQuery에서 가장 중요한 요소입니다. 화면에서 원하는 곳을 선택하기 위해 적절한 선택자를 사용해야 하고, 그것을 원활히 처리할 수 있는 방법으로 마크업 구조를 짜야 합니다.
선택자에 할당된 내용은 꽤 많습니다. 하나당 하나씩 포스팅을 할 예정입니다. 예제가 많은 편이라 재미있는 내용이 되겠네요.
jQuery 의 Selector 시작하겠습니다.
All Selector ("*")
모든 요소를 선택할 때 사용합니다.
원문 링크 
http://api.jquery.com/all-selector/
개요 : CSS 선택자(selector)와 일치하는 요소들(elements)을 사용하기 위한 문자열을 사용합니다.
- jQuery("*")
- 주의 : 이 선택자는 사용하지 않는 것이 좋습니다. 아주 느려질 수 있습니다. 소개는 해드리지만 사용하진 마세요~.
예 제
문서안에 모든 요소(head, body 등등)를 찾습니다. 찾은 수에 3px 짜리 빨간색 테두리를 그려 줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
</body>
</html>미리보기
예 제
head, script 와 같은 요소를 제외한 document.body 안의 모든 요소를 선택하는 일반적인 방법입니다.
<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
#test {
width: auto; height: auto; background-color: transparent;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div id="test">
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</div>
<script>
var elementCount = $("#test").find("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
</body>
</html>미리보기
문서의 모든 요소를 선택하는 방법은 쓰지 않아야 합니다. 어떤 일이 일어날지 모릅니다. 사용자들 속터져서 죽습니다. 2번째 예제처럼 어떤 범위안에 모든 내용이 필요할 경우에만 유용하게 사용하시면 되겠습니다. 그런데 실제로 그렇게 사용할 일도 별로 없습니다.
와~ 짧고 굵네요. ㅎㅎ;; 모두 선택하는 선택자(selector) 사용법 다들 아시죠??
그럼 즐프하세요.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name~="value"] (2) | 2011.01.21 |
|---|---|
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name*="value"] (2) | 2011.01.21 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name|="value"] (2) | 2011.01.20 |
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : ":animated" (9) | 2011.01.20 |
| jQuery 쉽게하기 - API 깨부시기, jQuery Core (12) | 2011.01.19 |
| jQuery 쉽게하기 - 기본부터 시작하자, 함수(Function) 편 (4) | 2011.01.18 |
| jQuery 쉽게하기 - 기본부터 시작하자, 배열(Array) 편 (4) | 2011.01.18 |
| jQuery 쉽게하기 - 기본부터 시작하자, Object 편 (8) | 2011.01.17 |
