- 예제
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("div:eq(1)").css("border", "3px solid green")
.siblings().css("border", "3px solid blue")
.end()
.next().text("third")
.end()
.nextAll().css("background", "yellow")
.end()
.prev().css("background", "green");
$("div").find("p").css("color", "red")
.add("span").css("border", "1px solid red");
//$("p:eq(0)").parent().css("border", "5px solid red");
/*
var str = ""
$("p:eq(0)").parents().each(function(){
str += this.tagName + "\n";
});
alert( str );
*/
// children()와 contents()의 차이점
var str = "";
/*
$("div:eq(0)").children().each(function(i){
if(typeof(this.tagName)=="undefined"){ // 태그명이 없으면..
str += i + " : " + $(this).text() + "\n";
}else{ // 태그명이 있는 경우
str += i + " : 태그명(" + this.tagName + ") ==> " + $(this).html() + "\n";
}
});
*/
// CSS 분석이후 풀고서 확인해볼 자바스크립트
////////////////////////////////////////////////////
//$("div:eq(0)").contents().each(function(i){
// if(typeof(this.tagName)=="undefined"){ // 태그명이 없으면..
// str += i + " : " + $(this).text() + "\n";
// }else{ // 태그명이 있는 경우
// str += i + " : 태그명(" + this.tagName + ") ==> " + $(this).html() + "\n";
// }
//});
//alert( str );
///////////////////////////////////////////////////
});
</script>
<style type="text/css">
* { font-size:12px; font-family:돋움; }
div {
width:120px; height:120px; margin:10px; float:left;
border:1px solid silver; padding: 5px
}
</style>
</head>
<body>
<div>A <p>p a</p><span>test<span>안쪽</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>
