処理の概要

リンクにマウスオーバーすると、リンクのタイトルをテキストボックスに表示する

処理のフロー：

　(1)リンクにマウスポインターを乗せる
　(2)リンクのa要素からtitle属性の値を取得
　(3)取得したタイトル属性をテキストボックスに表示する

画面イメージ

#####画像１

#####画像２

ソースコード

index.html

<body>
       <a href="" title="グーグルの検索サイトです。" class="link">
         グーグル
       </a>
       <br>
       <a href="" title="ヤフーの検索サイトです。" class="link">
         ヤフー
       </a>
       <br>

       <textarea style="height: 2em; width: 400px; color: blue;" id="output"></textarea>
    </body>

main.js

$(function(){
    $("a.link").hover(function(){
        var ele = $(this);
        var title = ele.attr("title");
        $("#output").val(title);
    },function(){
        $("#output").val("");
    })
})

ポイント

html：
(1) -
js：
(1)attrで属性を取得する（html系はattr。input系はprop）
(2)hover()メソッドにイベントを登録する。このとき、第一引数は【乗った時用の処理】、第二引数は【外れた時用の処理】

参考資料

JavaScript(仕事の現場でサッと使える！デザイン教科書)　p170