![8dae4ccfa9215fff3d2833a6434f815f.png](https://i-blog.csdnimg.cn/blog_migrate/5bf4165d4e454b9b80e936c90bc25b93.jpeg)
这个练习运用最多的就是attr属性了,在这个练习中我不经意间把append打成了addclass,就会不听使唤了,所以添加一下这两个方法的使用:
JQuery文档操作_append()方法:在每个 p 元素结尾插入内容
举个栗子:
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
JQuery属性操作_addclass()方法:向一个元素中添加一个类
举个栗子:
$("button").click(function(){
$("p:first").addClass("intro");
});
正文
HTML代码
<h2>图片切换</h2>
<div class="head"><img id="Gpimag" src="img/01.jpg" /></div>
<p class="last_img">
<a href="img/01.jpg"><img src="img/01.jpg" alt="标题一" /></a>
<a href="img/02.jpg"><img src="img/02.jpg" alt="标题二" /></a>
<a href="img/03.jpg"><img src="img/03.jpg" alt="标题三" /></a>
<a href="img/04.jpg"><img src="img/04.jpg" alt="标题四" /></a>
</p>
CSS修饰
body {
width: 700px;
height: 650px;
border: 1px solid red;
margin: 0 auto;
padding: 0;
text-align: center;
}
h2 {
float: left;
margin-left: 20px;
}
img {
margin: auto;
}
.head img {}
.last_img img {
width: 160px;
border: 1px solid cornflowerblue;
}
JQuery
$(document).ready(function(){
$("h2").append('<em></em>');
$(".last_img a").click(function(){
var $p1=$(this).attr("href");
var $p2=$(this).attr("title");
$("#Gpimag").attr({src :$p1,alt: $p2});
$("h2 em").html("("+$p1+")");
return false;
});
});