下面是我用jQueryjQuery的属性的获取和设置写的一个小案例:美女画廊
html部分
<div id="dv">
<h1>美女画廊</h1>
<a href="img/1.jpg" title="美女A">
<img src="img/1-small.jpg" alt="" title="美女A">
</a>
<a href="img/2.jpg" title="美女B">
<img src="img/2-small.jpg" alt="" title="美女B">
</a>
<a href="img/3.jpg" title="美女C">
<img src="img/3-small.jpg" alt="" title="美女C">
</a>
<a href="img/4.jpg" title="美女D">
<img src="img/4-small.jpg" alt="" title="美女D">
</a>
</div>
<br>
<img src="img/1.jpg" alt="" class="image">
<br>
<p>选择一个图片</p>
css部分
body {
background-color: #666;
}
#dv {
margin: 0 200px;
}
#dv a img{
width: 200px;
height: 100px;
}
.image {
width: 820px;
height: 360px;
margin: 0 200px;
}
p{
margin: 0 200px;
}
jQuery部分
<script src="./jquery-1.12.4.min.js"></script>
<script>
// 需求:点击目录栏的小图,下面的大图会随之发生改变
// p标签里的文本也会发生对应改变
// 入口函数
$(function(){
// 点击a标签包裹的图片
$("a").click(function(){
// 把下面的img标签里的路径设置成对应a标签的路径
$(".image").attr("src",$(this).attr("href"));
// 把p标签的文本设置成a标签的title属性值
$("p").text($(this).attr("title"));
return false;
});
});
</script>