tamacyaのブック
mindiatamacyaのブック見出し語

jQueryの基礎

tamasally · 2012-01-02 更新

<span style="color: red">※HTMLCSSしか触ったことがない人用の解説です。</span>

下記サイトのサンプルスクリプトの説明
(上部のうさぎの吹き出しにロールオーバーすると文字が変化する)
http://semooh.jp/jquery/

$('.semooh a').hover(
function(){ $(this).text('ヌ?'); },
function(){ $(this).text('ヌー'); }//ロールオーバーしてない時
);

<span style="color: green">$('.semooh a')</span>
変化させる要素を指定
今回の場合は<div class="semooh">のリンクに対して//吹き出しの部分ですね!

<span style="color: red">.hover</span>
変化させるタイミングを指定
今回の場合は、対象にロールオーバーした時

<span style="color: hotpink">$(this)</span>
今回の場合は$(this)とは$('.semooh a')

<span style="color: orange">.text('ヌ?');</span>
要素内に表示させる文字を指定


「何をどのタイミングでどう変化させたいのか」
下記サイト等で調べてみる。
http://semooh.jp/jquery/