クリックされたボックスの合計:0以下は占いのサンプルです。'良いことがありそうです。'可もなく不可もなくって感じです。'つらい1日になるかも知れません。乱数を発生するメソッドです。要素などにカーソルを重ねてもカーソルの形状は変わりません。設定することで、ユーザーにクリックできることを伝えることができます。発生したイベントの情報を、イベントオブジェクトから取得することができます。イベントオブジェクトには色々なプロパティやメソッドが用意されていて、それらを利用することで情報を取得したり、操作することができます。イベントオブジェクトは、イベントリスナー(イベントハンドラー)の引数に渡されます。座標を表示する例です。使って表示しています。渡されるイベントオブジェクトの引数名はここでは「eventObject」としていますが、何でもかまいません。座標の位置により背景色を変更しています。}});以下はマウス座標関連のプロパティです。以下は押されたキーのキーコードを表示する例です。どのキーコードかを調べるには「which」プロパティを使います。<span></span></p></div>テキストエリアなどの特定の要素へのキーを使った入力ではないので、対象を「window」にしています。「document」や「"html"」、「"body"」でも機能します。:以下は、特定のキーを押すと表示されている赤い丸を移動させるサンプルです。各キーのキーコードは以下の通りです。メソッドを利用して要素を移動させています。特定の要素にマウスが重なった際のイベントには、「mouseover/mouseout」と「mouseenter/mouseleave」があります。「mouseenter/mouseleave」を1つにまとめた「hover」もあります。特定の要素の上にマウスが重なったタイミングを検知して、処理を実行します。以下はショートハンドメソッドの書式です。セレクタで指定した要素にマウスが外れた時に実行する処理});通常これらは、組み合わせて使用するので、まとめて以下のように記述します。セレクタで指定した要素にマウスが外れた時に実行する処理});以下は、マウスポインターが画像に乗った時に画像の透明度(opacity)を上げ、外れた時に元に戻すサンプルです。画像の透明度を変更します。特定の要素の上にマウスが重なったタイミングを検知して、処理を実行します。以下はショートハンドメソッドの書式です。セレクタで指定した要素にマウスが外れた時に実行する処理});通常これらは、組み合わせて使用するので、まとめて以下のように記述します。セレクタで指定した要素にマウスが外れた時に実行する処理});以下は、マウスポインターが画像に乗った時に画像を入れ替え、外れた時に元に戻すサンプルです。要素が入れ子になっている場合に、わずかの違いがあります。通常はそれほど意識する必要はありませんが、違いを確認してみます。要素がある場合の例です。});mouseover/mouseout.outer.inner上記サンプルで、対象の要素を横一線に横断するようにマウスポインターを動かした場合の結果は以下のようになります。イベントが、外側の要素を出入りした時だけでなく、外側と内側の要素を出入りした時にも発生していることがわかります。});mouseenter/mouseleave.outer.inner上記サンプルで、対象の要素を横一線に横断するようにマウスポインターを動かした場合の結果は以下のようになります。mouseenter:outermouseleave:outer今度は、外側の要素に出入りした場合にだけイベントが発生し、外側と内側の要素を行き来した場合にはイベントは発生しないことがわかります。いうメソッドが用意されています。});以下は、マウスポインターが画像に乗った時にボーダーを表示し、外れた時にボーダーを消すサンプルです。alt="each"></p>ボーダーを表示する際に、全体の幅が変わらないように、ボーダーの幅の分だけ幅と高さを調整しています。click()以下はクリックイベントのショートハンドメソッドの書式です。要素)をクリックすると写真を表示するサンプルです。使って非表示(hidden)にしておきます。変更して写真を表示させています。使っても可能ですが、その場合、非表示の際は、写真の領域(高さと幅)が確保できません。それが意図したことであれば問題ありません。属性に指定されたリンク先に移動するのがデフォルトの動作です。属性に指定されたリンク先に移動してしまいます。false」を追加します。命令だけが実行されます。属性に写真へのリンクなどを指定しておけば、ユーザーはその写真を見ることができます。指定しても、デフォルトの動作が実行されてしまう場合は、プラグイン(スムーズスクロールなど)が影響していないかを調べてみる必要があるかも知れません。以下はリンクをクリックすると写真が変わるサンプルです。この例では複数のリンクがあります。フィルターを使って、それぞれのリンクに対してクリックイベントを設定しています。使うと、もっと簡潔に、そして後で変更する場合も簡単な書き方ができます。イベント(この例ではクリック)が発生した要素を取得するセレクタです。記述すると、イベントが発生した要素を取得(参照)することができます。使って記述すると以下のようになります。以下は、シンプルなフォトギャラリーの例です。指定してフォトギャラリーで使用する写真を非表示にしています。属性を使ってタイトルを表示し、その下に「prev」「next」のコントロール用のリンクを配置しています。2行目は、現在何番目の写真が表示されているかを判定するためのカウンタ用の変数を初期化(0に)しています。属性を取得してタイトルとして表示しています。5行目から、クリックイベントの設定をしています。クリックすると次の写真を表示するために、カウンタを1つ増加させています。