-
[jQuery/javascript]find(),join(), end(), hover() 예제프로그램/jQuery/Javascript 2013. 9. 9. 22:47
join,find,end,hover 사용방법에 대해 간단하게 알아 보겠습니다.
filter : 현재 검색된 객체(집합)에서 다시 한번 검색하는 메소드. 부모 포함해서 찾고 앞에 객체가 filter 조건인것들 본인을 찾기
find : 현재 검색된 객체(집합)의 자손들에서 검색 하는 메소드, 자식의 레벨은 상관없습니다. 자식들중에서 찾기
children : 현재 검색된 객체(집합)의 직속 자식만 검색하는 메소드filter는 검색된 결과 객체 집합에서 특정 집합으로 다시 한번 검색 할때 사용합니다.
find 검색된 결과 객체 집합의 하위레벨을 다 뒤져서(자손) 검색 할때 사용 합니다.
children 검색된 결과 객체 집하의 바로 자식들만 뒤져서(자식) 검색 할때 사용합니다.
* 참고
filter : http://api.jquery.com/filter/
find : http://api.jquery.com/find/children : http://api.jquery.com/children/
예제
<!DOCTYPE html>
<html>
<head>
<style>
p { font-size:20px; width:200px; cursor:default;
color:blue; font-weight:bold; margin:0 10px; }
.hilite { background:yellow; }
.ttt{ background:pink; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<p>
When the day is short
find that which matters to you
or stop believing
</p>
<script>
// p태그의 문자들을 공백으로 split 하여 나누면서
var newText = $("p").text().split(" ").join("</span> <span>");
// 앞뒤에 <span>으로 감싸준다
newText = "<span>" + newText + "</span>";// html을 받아와서 p태그에 다시 넣어준다.
$("p").html( newText )
.find('span') // span 태그를 찾아 hover 액션을 준다 ( hilite 클래스를 넣었다 지웠다 함 )
.hover(function() {
$(this).addClass("hilite");
},
function() { $(this).removeClass("hilite");
})
.end() //끝이 아니라 span 찾는 시점으로 다시 올라간다 t라는 문장을 찾아 css를 입혀준다.
.find(":contains('t')")
.css({"font-style":"italic", "font-weight":"bolder"});</script>
</body>
</html>'프로그램 > jQuery/Javascript' 카테고리의 다른 글
[javascrip/jQuery] 클립보드 제거, 프린터스크린키 막기, 복사방지 (0) 2013.09.09 [jQuery/javascript] 동적 이미지 크기 맞춤/조절 (0) 2013.09.09 (javascript/function) jquery html 최적화 (2) 2013.08.26 (jquery/function) trim - 공백제거 (0) 2013.08.26 (jquery/plugin) 달력 datepicker (0) 2013.08.19