您的位置：360文档中心› 实验二 JQUERY文档处理

实验二 JQUERY文档处理

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

实验二jQuery文档处理

【实验目的】

1、掌握jQuery选择器的使用；

2、掌握jQuery遍历DOM元素的常用方法；

3、掌握jQuery文档处理的常用方法。

【实验准备】

1、复习教材相关内容；

2、预习本次实验；

【实验内容】

1、实现网页选项卡。其效果如图2-1～2-3所示。

图2-1图2-2图2-3

代码如下：

tabcard.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

第二题