初心者はどのようにJQueryを使ってjavascript DOMのプログラミング芸術の上の効果を実現します(一)

本文はjavascript DOMプログラミング芸術第2版を例に、今後あまり紹介しない.本書は私のような新人として勉強する過程の延長と思考である.
第四章:リンクをクリックして画像と説明を切り替える
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で置き換えるとリンク切替画像をクリックできます.同じ理屈で画像の記述文字を置き換えることができ、ここではあまり言わない.