JQuery中的DOM操作-实训报告

实训报告

编制人： 姓 名 学习情景编号 4 学 号 学习情景名称 班级 成绩 学时 4 JQuery中的DOM操作 一、 实验目的与及要求 实训任务 1．制作图片展示效果 2．制作留言板前端局部更新效果 3．制作邮件删除效果 4．表格隔行变色和当前行变色 训练技能点 1．学会查找节点、创建节点、删除节点 2．学会复制节点、替换节点、遍历节点 3．能够根据需要动态改变页面元素的样式 4．能够动态改变元素的属性 5．通过元素的隐藏、显示制作选项卡、菜单等效果 二、 实训任务和步骤 实训1. 制作图片展示效果 训练要点 （1）掌握获取和设置属性的方法attr() （2）掌握创建节点和插入节点的方法 （3）掌握html()方法 需求说明 在页面中有四幅小图片和一个图片展示区域，当鼠标移入某幅小图片时，在图片展示区域可看到其对应的大图。为凸显当前的小图状态，把其它三幅小图透明度设为，如图1所示。 图1 图片展示效果 实现思路及步骤 1.设计页面HTML结构，应用CSS样式。 2.为四幅小图片绑定鼠标移入事件。 3.获取当前发生鼠标移入事件的小图片的src属性，将其作为大图的src属性值。这样大图也就随之改变了。 4.为凸显当前的小图状态，把其它三幅小图透明度设为。 实训2. 制作留言板前端局部更新效果 训练要点 （1）进一步练习选择器的使用 （2）练习创建节点和插入节点的方法 需求说明 当在“昵称”和“留言内容”文本框内输入信息后，单击“单击这里提交留言”按钮，输入的信息会显示在页面上端的留言板中，如图2所示。若没有输入昵称和留言内容，单击“单击这里提交留言”时不能发送留言。 图2 留言板前端局部更新效果 实现思路及步骤 1.设计页面HTML结构，应用CSS样式。 2.找到“单击这里提交留言”按钮，绑定onclick事件。 3.在“昵称”和“留言内容”文本框中显示提示文字，获得焦点时提示文字消失，失去焦点时若内容为空，则再次显示提示文字。 4.获取用户输入的“昵称”和“留言内容”。 5.若用户输入了“昵称”和“留言内容”，则创建一条留言，并显示在页面上面的留言板中。 6.将“昵称”和“留言内容”文本框的value值变为初始值。 实训3. 制作邮件删除效果 训练要点 （1）进一步练习选择器的使用 （2）练习删除节点的方法 需求说明 在邮件列表前都有一个复选框，单击可以选中或取消选中。当单击“全选/全不选”按钮，所有复选框都随之选中或取消选中。单击“删除邮件”按钮可删除被选中的邮件，如图3所示。 图3邮件删除效果 实现思路及步骤 1.设计页面HTML结构，应用CSS样式。 2.找到“全选/全不选”按钮，绑定onclick事件。 3.查找所有的复选框，把每个复选框的checked属性值变为true或false，实现全选或全不选。 4.找到“删除邮件”按钮，绑定onclick事件。 5.查找所有checked属性值为true的复选框，删除其所在的行，即删除了该邮件。 实训4. 表格隔行变色和当前行变色 训练要点 （1）进一步练习选择器的使用 （2）练习追加样式、删除样式、改变css样式的方法 需求说明 请使用jQuery实现如图4所示的学生信息表，表格的奇数行和偶数行背景颜色不同，奇数行背景色为#d9ffdc，偶数行背景色为#a5e5aa。表头的背景色为#00a40c，当用户鼠标移入某行，该行背景色变为#ff9，使数据显示一目了然。 图4 表格隔行变色和当前行变色 实现思路及步骤 1.设计页面HTML结构，应用CSS样式，将表格的背景色全部设置为#d9ffdc。 加载完成后，单独为表头设置背景色，然后为偶数行设置不同的背景颜色，即设置节点的backgroundColor属性，可以直接通过css()方法设置，也可以先在css样式表中设置好类样式，然后使用addClass()方法添加该样式。 3.为每一行绑定鼠标移入事件，鼠标移入某行后，该行背景色设置为#ff9。 4.为每一行绑定鼠标移出事件，鼠标移出某行后，该行背景色恢复为初始颜色。 三、 实训结果记录 四、 实训小结

注：1、学生实验前填好实验报告的第二、三栏，并将其提交给教师。 2、学生实验后要提交与实验相关的各种源代码。