本文以javascript DOM 编程艺术第二版为例，以后不多做介绍。本书只作为如我一般的新人学习过程中的一种延伸和思考。
第四章：点击链接切换图片与描述
JS代码
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
JQuery代码
$(document).ready(function() {
$(".aa").click(function(event) {
event.preventDefault();
var orgin = $(this).attr('href');
$('#placeholder').attr('src', orgin);
var orgintitle = $(this).attr('title');
$('#description').html(orgintitle);
});
});
实现方法
- 为了方便查找ul>li>a元素，我为每一个链接增加了一个aa类，当然不增加此类也依然可以查找到ul>li>a元素，下次将增加一个不添加类的jquery方法。
- 首先为a链接增加一个点击响应事件，其次阻止a标签的默认跳转行为，否则后续代码将无法生效；然后，将当前链接的href值定义为orgin，方便后续调用；最后将id为placeholder的src值用origin替换即可实现点击链接切换图片。同理可替换图片的描述文字，在此不做多说。
