jQuery中的DOM操作（3）
11、遍历节点树
<body>
<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
实例一：
<scripttype="text/javascript">
$(function(){
var $body = $("body").children();
var $p = $("p").children();
var $ul =$("ul").children();
alert( $body.length ); // <body>元素下有2个子元素
alert( $p.length ); // <p>元素下有0个子元素
alert( $ul.length ); // <p>元素下有3个子元素
for(var i=0;i<$ul.length;i++){
alert($ul[i].innerHTML );
}
});
</script>
实例二：
<scripttype="text/javascript">
<body>
<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
$(function(){
var $p1 = $("p").next();
alert( $p1.html() ); // 紧邻<p>元素后的同辈元素
var $ul = $("ul").prev();
alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素
var $p2 = $("p").siblings();
alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素
});
</script>
实例三：
<body>
<ptitle="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
<scripttype="text/javascript">
$(function(){
$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","red");
})
});
</script>
12、CSS-DOM
<body>
<input type="button"value="获取<p>元素的color"/>
<inputtype="button" value="设置<p>元素的color"/>
<inputtype="button"value="设置<p>元素的fontSize和backgroundColor"/>
<inputtype="button" value="获取<p>元素的高度"/>
<inputtype="button" value="获取<p>元素的宽度"/>
<inputtype="button" value="设置<p>元素的高度"/>
<inputtype="button" value="设置<p>元素的宽度"/>
<inputtype="button" value="获取<p>元素的的左边距和上边距"/>
<ptitle="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
$(function(){
//获取<p>元素的color
$("input:eq(0)").click(function(){
alert( $("p").css("color"));
});
//设置<p>元素的color
$("input:eq(1)").click(function(){
$("p").css("color","red")
});
//设置<p>元素的fontSize和backgroundColor
$("input:eq(2)").click(function(){
$("p").css({"fontSize":"30px","backgroundColor":"#888888"})
});
//获取<p>元素的高度
$("input:eq(3)").click(function(){
alert($("p").height() );
});
//获取<p>元素的宽度
$("input:eq(4)").click(function(){
alert( $("p").width());
});
//获取<p>元素的高度
$("input:eq(5)").click(function(){
$("p").height("100px");
});
//获取<p>元素的宽度
$("input:eq(6)").click(function(){
$("p").width("400px");
});
//获取<p>元素的的左边距和上边距
$("input:eq(7)").click(function(){
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;
alert("left:"+left+";top:"+top);
});
});
</script>
13、综合案例：超链接提示和图片提示效果
实例一：文字提示
第一步：
<body>
<p><ahref="#" class="tooltip"title="这是我的超链接提示1.">提示1.</a></p>
<p><ahref="#" class="tooltip"title="这是我的超链接提示2.">提示2.</a></p>
<p><ahref="#" title="这是自带提示1.">自带提示1.</a></p>
<p><ahref="#" title="这是自带提示2.">自带提示2.</a></p>
</body>
<scripttype="text/javascript">
$(function(){
$("a.tooltip").mouseover(function(e){
var tooltip = "<divid='tooltip'>"+ this.title +"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top":e.pageY + "px",
"left":e.pageX + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
$("#tooltip").remove(); //移除
});
});
</script>
点击之后，则不进行提示
第二步：
<scripttype="text/javascript">
$(function(){
var x = 10;
vary = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle =this.title;
this.title= "";
var tooltip = "<divid='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top":(e.pageY + y) + "px",
"left":(e.pageX + x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title= this.myTitle;
$("#tooltip").remove(); //移除
});
});
</script>
第三步：
<scripttype="text/javascript">
$(function(){
var x = 10;
vary = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle =this.title;
this.title ="";
var tooltip = "<divid='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top":(e.pageY+y) + "px",
"left":(e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top":(e.pageY+y) + "px",
"left":(e.pageX+x) + "px"
});
});
})
</script>
实例二：图片提示
第一步：
<body>
<h3>有效果：</h3>
<ul>
<li><ahref="images/apple_1_bigger.jpg" class="tooltip"title="苹果 iPod"><img src="images/apple_1.jpg"alt="苹果 iPod" /></a></li>
<li><ahref="images/apple_2_bigger.jpg" class="tooltip"title="苹果 iPod nano"><img src="images/apple_2.jpg"alt="苹果 iPod nano"/></a></li>
<li><ahref="images/apple_3_bigger.jpg" class="tooltip"title="苹果 iPhone"><img src="images/apple_3.jpg"alt="苹果 iPhone"/></a></li>
<li><ahref="images/apple_4_bigger.jpg" class="tooltip"title="苹果 Mac"><img src="images/apple_4.jpg"alt="苹果 Mac"/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>无效果：</h3>
<ul>
<li><ahref="images/apple_1_bigger.jpg" title="苹果 iPod"><imgsrc="images/apple_1.jpg" alt="苹果 iPod"/></a></li>
<li><ahref="images/apple_2_bigger.jpg" title="苹果 iPodnano"><img src="images/apple_2.jpg" alt="苹果 iPodnano"/></a></li>
<li><ahref="images/apple_3_bigger.jpg" title="苹果iPhone"><img src="images/apple_3.jpg" alt="苹果iPhone"/></a></li>
<li><ahref="images/apple_4_bigger.jpg" title="苹果 Mac"><imgsrc="images/apple_4.jpg" alt="苹果Mac"/></a></li>
</ul>
</body>
<scripttype="text/javascript">
$(function(){
varx = 10;
vary = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle= this.title;
this.title= "";
vartooltip = "<div id='tooltip'><img src='"+ this.href +"'alt='产品预览图'/><\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top":(e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title= this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top":(e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
图片下无文字显示
第二步：
<scripttype="text/javascript">
$(function(){
varx = 10;
vary = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle= this.title;
this.title= "";
varimgTitle = this.myTitle? "<br/>" + this.myTitle : "";
vartooltip = "<div id='tooltip'><img src='"+ this.href +"'alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top":(e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title= this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top":(e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
图片下有文字显示