任务视频V2.0

任务视频V1.0

知识点

获取和设置属性

在jQuery中使用attr()方法来获取和设置元素属性。要获取图片的src属性，只需要给attr()方法传递一个参数，即属性名称。如果要设置图片的src属性值，继续使用attr()方法，不同的是，要传递两个参数，即属性名和对应的值。代码如下：

$img.attr("src"， "路径"); //设置图片<img>元素节点src属性的值

jQuery 1.6 开始新增了一个方法 prop()，它的作用与方法attr()相似，也可以设置或返回被选元素的属性和值，但这两个方法也是有区别的。

一般来说，具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()方法，其他的可使用 attr()方法。

删除属性

删除文档中某元素的特定属性，可以使用removeAttr()方法来实现。如果要删除图片的“title”属性，可以使用以下代码：

$("#photo").removeAttr("title");

教学课件V2.0

教学课件V1.0

制作图片展示效果

任务描述

在页面中有四幅小图片和一个图片展示区域，当鼠标移入某幅小图片时，在图片展示区域可看到其对应的大图。为凸显当前的小图状态，把其它三幅小图透明度设为0.2，如图所示。

任务分析

根据任务描述，需要进行以下几步操作：

1.设计页面HTML结构，应用CSS样式。

2.为四幅小图片绑定鼠标移入事件。

3.获取当前发生鼠标移入事件的小图片的src属性，将其作为大图的src属性值。这样大图也就随之改变了。

4.为凸显当前的小图状态，把其它三幅小图透明度设为0.2。

任务实现

$(function() {

        $("divimg").addClass("alpha");

        $("divimg:eq(0)").removeClass("alpha");

        $("divimg").mouseover(function() {

                varbig_src = $(this).attr("src");

            $("#test").attr("src"，big_src);

                $(this).removeClass("alpha").siblings().addClass("alpha");

        });

});

根据所给素材，实现如图所示的图片切换效果。当用户单击某幅缩略图时，在上面显示对应的大图，同时在标题“图片切换”后面添加“Image2”、“Image3”等。

参考答案