实验二jQuery文档处理【实验目的】1、掌握jQuery选择器的使用；2、掌握jQuery遍历DOM元素的常用方法；3、掌握jQuery文档处理的常用方法。
【实验准备】1、复习教材相关内容；2、预习本次实验；【实验内容】1、实现网页选项卡。
其效果如图2-1～2-3所示。
图2-1图2-2图2-3代码如下：tabcard.html<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html;charset=gb2312"/><title>第一题</title><link href="css/style.css"rel="stylesheet"type="text/css"/><!--引入jQuery--><script src="js/jquery-1.4.2.js"type="text/javascript"></script><script type="text/javascript">$(function(){var$div_menu=$(".tab_menu ul li");$div_menu.click(function(){$(this).addClass("selected").siblings().removeClass("selected");var index=$(this).index();var$div_box=$(".tab_box div").eq(index);$div_box.show().siblings().hide();});})</script></head><body><div class="tab"><div class="tab_menu"><ul><li class="selected">时事</li><li>体育</li><li>娱乐</li></ul></div><div class="tab_box"><div>时事</div><div class="hide">体育</div><div class="hide">娱乐</div></div></div></body></html>style.css*{margin:0;padding:0;}body{font:12px/19px Arial,Helvetica,sans-serif;color:#666;}.tab{width:240px;margin:50px;}.tab_menu{clear:both;}.tab_menu li{float:left;text-align:center;cursor:pointer;list-style:none;padding:1px6px; margin-right:4px;background:#F1F1F1;border:1px solid#898989;border-bottom:none;}.tab_menu li.hover{background:#DFDFDF;}.tab_menu li.selected{color:#FFF;background:#6D84B4;}.tab_box{clear:both;border:1px solid#898989;height:100px;}.hide{display:none}2、实现图片的放大提示效果，其效果如图2-4所示。
图2-4代码如下：pictip.html<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html;charset=utf-8"/><title>第二题</title><!--引入jQuery--><script src="js/jquery-1.4.2.js"type="text/javascript"></script><style type="text/css">body{margin:0;padding:40px;background:#fff;font:80%Arial,Helvetica,sans-serif;color:#555;line-height:180%;}img{border:none;}ul,li{margin:0;padding:0;}li{list-style:none;float:left;display:inline;margin-right:10px;border:1px solid#AAAAAA;}/*tooltip*/#tooltip{position:absolute;border:1px solid#ccc;background:#333;padding:2px;display:none;color:#fff;}</style><script type="text/javascript">//<![CDATA[$(function(){var x=10;var y=20;$("a.tooltip").mouseover(function(e){this.myTitle=this.title;this.title="";var imgTitle=this.myTitle?"<br/>"+this.myTitle:"";var tooltip="<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></head><body><h3>有效果：</h3><ul><li><a href="images/apple_1_bigger.jpg"class="tooltip"title="苹果iPod"><img src="images/apple_1.jpg"alt="苹果iPod"/></a></li><li><a href="images/apple_2_bigger.jpg"class="tooltip"title="苹果iPod nano"><img src="images/apple_2.jpg"alt="苹果iPod nano"/></a></li><li><a href="images/apple_3_bigger.jpg"class="tooltip"title="苹果iPhone"><img src="images/apple_3.jpg"alt="苹果iPhone"/></a></li><li><a href="images/apple_4_bigger.jpg"class="tooltip"title="苹果Mac"><img src="images/apple_4.jpg"alt="苹果Mac"/></a></li></ul></body></html>【总结与体会】通过本次试验，更深一步的理解并掌握了掌握了jQuery选择器的使用、掌握了jQuery 遍历DOM元素的常用方法、掌握了jQuery文档处理的常用方法，与传统的JS 比起来更易操作。