.find()
이 메소드는 DOM 안에 있는 엘리먼트를 찾는 메소드로서 .children() 메소드와 비슷합니다. 다른점은 .children() 메소드는 단지 single level down 만 한다고 하네요.
.find() 정리한 다음에 .children()도 정리해야 겠네요.
곧바로 예제부터 볼께요.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$("p").find("span").css('color','red');
</script>
</body>
</html>스크립트를 보면 p 태그에서 span을 찾아서 css를 적용해서 색을 빨강으로 바꾸네요.
그러면 첫번쨰 Hello와 두번째 good 이 빨간색으로 바뀔겁니다.
<!DOCTYPE html>
<html>
<head>
<style>
span { color: blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
<script>
var $spans = $('span');
$("p").find( $spans ).css('color','red');
</script>
</body>
</html>두번째 예제는 해당 엘리먼트를 변수에 담았네요. 그래서 p 태그내에 있는 span에 있는 내용이 빨간색으로 변합니다.
div 에 있는 span에는 적용이 안 될 겁니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { font-size:20px; width:200px; cursor:default;
color:blue; font-weight:bold; margin:0 10px; }
.hilite { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
When the day is short
find that which matters to you
or stop believing
</p>
<script>
var newText = $("p").text().split(" ").join("</span> <span>");
newText = "<span>" + newText + "</span>";
$("p").html( newText )
.find('span')
.hover(function() {
$(this).addClass("hilite");
},
function() { $(this).removeClass("hilite");
})
.end()
.find(":contains('t')")
.css({"font-style":"italic", "font-weight":"bolder"});
</script>
</body>
</html>세번째 예제는 좀 복잡하네요.
newText 변수에 어떤 내용을 담았는데요.
p 태그 안에있는 내용들을 한칸 띄어쓰기 된 부분을 기준으로 모두 나누고 각각 span 을 적용하는 겁니다. 그러면 각 단어별로 span 이 따로따로 적용이 되겠죠.
다음에는 p 태그 안에 html부분에 이 newText를 담은 다음에 span을 찾습니다.
거기에 마우스를 올리면 hilite 라는 클래스가 적용이 되도록 했네요. 마우스가 빠져나가면 그 클래스 적용이 해제되구요.
hilite 클래스는 jQuery에 미리 정해진 클래스 인가 봅니다. 배경을 노란색으로 hilite 해 주네요.
여기서 끝이 아니라 t 자가 들어가 있는 단어들을 찾아서 폰트 스타일을 이탤릭으로 바꾸고 또 볼드체로 바꿉니다.
좀 복잡하군요.
.find 가 다른 여러 메소드와 협동해서 이렇게 복잡한 일을 하네요.
'jQuery Mobile > jQuery API' 카테고리의 다른 글
| 우아하게 화면 scroll 하기 (0) | 2012.12.20 |
|---|---|
| .clone() 메소드 알아보기 (0) | 2012.08.23 |
| .delegate() 메소드 알아보기 (0) | 2012.08.23 |
| jQuery API 몇개 훑어보기 .html(), .text(), .bind() (0) | 2012.08.10 |
| jQuery API .live() 공부하기 (2) | 2012.08.09 |