初学者如何使用JQuery实现javascript DOM 编程艺术上的效果（一）

本文以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);
    });
});

实现方法

1. 为了方便查找ul>li>a元素，我为每一个链接增加了一个aa类，当然不增加此类也依然可以查找到ul>li>a元素，下次将增加一个不添加类的jquery方法。
2. 首先为a链接增加一个点击响应事件，其次阻止a标签的默认跳转行为，否则后续代码将无法生效；然后，将当前链接的href值定义为orgin，方便后续调用；最后将id为placeholder的src值用origin替换即可实现点击链接切换图片。同理可替换图片的描述文字，在此不做多说。