Traversing - 찾기 관련 메서드
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// $("div:eq(1)")
// .siblings().css("border","1px solid blue")
// // div2번째의 형재들(자기 자신을뺀) 에게 적용
// .end()
// .next().text("third")
// //div2번째의 다음번째div에 적용
// .end()
// .nextAll().css("background","yellow");
// //2번째 이후에 나오는 모든 div에 적용
//
// $("div").find("p").css("color","blue")
// .add("span").css("border","1px solid red");
//
// children() ==> 바로 아래의 자식 엘리먼트만 검색 한다.
// contents() ==> 바로 아래의 모든 자식 요소들(문자데이터도 포함)을 검색한다.
// var str="";
// $("div:eq(0)").children().each(function(i,v){
// str +=i + " : tagName = "+v.tagName + " ==> "+$(v).html()+"\n";
// });
// str="";
// $("div:eq(0)").contents().each(function(i,v){
// if(typeof(v.tagName)==undefined){
// str += i+" : "+$(v).text()+"\n";
// }else {
// str +=i + " : tagName = "+v.tagName + " ==> "+$(v).html()+"\n";
// }
// });
// alert(str);
// $("p:eq(0)").parent().css("border","2px solid red");
// var str="";
// $("p:eq(0)").parent().each(function(){
// str+=this.tagName+"\n";
// });
// alert(str);
// $("div:eq(3)").prevAll().css("backgroundColor","yellow");
$("div:eq(3)").prev().css("backgroundColor","yellow");
});
</script>
<style type="text/css">
div{width:100px; height:100px; margin:10px; float:left;
border:1px solid silver; padding:5px;}
</style>
</head>
<body>
<div>A<p>p a</p><span>span a<span>span a a</span></span></div>
<div>B<p>p b</p></div>
<div>C<p>p c</p></div>
<div>D<br><span>span d</span></div>
<div>E<br><span>span e</span></div>
</body>
</html>
CSS 관련 메서드
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>속성 설정 하기(추가 삽입)</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
alert($("img").eq(0).attr("src"));
$("#photos img")
.attr({"border":"1px","height":"100"})
.attr("title",function(i){
return(i+1)+"번째 이미지 입니다.";
});
//alert($("body").html());
$("#photos img").eq(-1).removeAttr("title");
// 마지막 번째 의 title 속성을 제거
});
</script>
</head>
<body>
<div id="photos">
<img src="image/한글.jpg"/>
<img src="image/2.jpg"/>
<img src="image/3GFST.jpg"/>
<img src="image/8f62be078e54cf04d3b918de815939d3.jpg"/>
<img src="image/a1SA.jpg"/>
</div>
</body>
</html>
이벤트(Event) 관련 메서드
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이벤트 관련 메서드</title>
</head>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#myBtn").bind("click",{name:"홍길동",gender:"남자"},
//이벤트를 처리하는 함수의 파라미터 변수는 이벤트 객체 변수이다.
function(e){
alert("제 이름은 "+e.data.name+"이고,"+e.data.gender+"입니다.");
});
$("#myMT").one("click",function(){
alert("이미지는 클릭 하지 마세요. 두번 말하지 않습니다.");
});
$("#testTrgg").bind("myTriggerOne",function(){
$(this).attr("src","./image/2.jpg");
});
$("#testTrgg").bind("myTriggerTwo",function(){
$(this).attr("src","./image/3GFST.jpg");
});
$("#trggBtn").toggle(
function(){$("#testTrgg").trigger("myTriggerOne")},
function(){$("#testTrgg").trigger("myTriggerTwo")}
);
$("#testHover").hover(
function(){$(this).css("border","2px solid blue")},
function(){$(this).css("border","0px")}
);
});
</script>
<body>
<div>
<span id="testHover"><img id="myMT" src="./image/a1SA.jpg"></span>
<img id="testTrgg" src="./image/8f62be078e54cf04d3b918de815939d3.jpg"/>
</div>
<input type="button" id="myBtn" value="내 소개!!">
<input type="button" id="trggBtn" value="Trigger Test">
</body>
</html>
이 글은 스프링노트에서 작성되었습니다.
'J-Query' 카테고리의 다른 글
| 7일차 Effects (0) | 2012.05.08 |
|---|---|
| 6일차 Utilities (0) | 2012.05.08 |
| 4일차 Methods (0) | 2012.05.08 |
| 3일차 export/change (0) | 2012.05.08 |
| 2일차 Selectors (0) | 2012.05.08 |
