반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

.find() 메소드 알아보기

2012. 8. 23. 03:38 | Posted by 솔웅


.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 가 다른 여러 메소드와 협동해서 이렇게 복잡한 일을 하네요.


반응형

Comment

이전 1 2 3 4 5 6 다음