jQuery

コードのメモ

  • HTMLの読み込みを最後まで待つコード

    HTMLを最後まで読み込んだ後に{ }の中の処理が実行される

$(function(){
  //HTMLを読み込んだ後に実行する処理
});
  • スタイルを変更するコード

    "セレクタ"に該当する要素のCSSの"プロパティ"を"値"に変更する処理

$('セレクタ') .css('プロパティ', '値');

css( );･･･jQueryメソッド、その中身は引数。CSSプロパティと値を入れる。
$('セレクタ')･･･HTMLに指定されている、「id = 'セレクタ名' 」に対して命令している
$( )･･･「HTML要素を元にしてjQuery独自の要素を生成する」機能を持った関数。 この関数によってjQuery形式に変換された要素のことをjQueryオブジェクトという

つまり、「HTML要素を$( )関数によってjQueryオブジェクトに変換し、css( );メソッドでそのオブジェクトに変更を加えている」

<補足>(考え中)
$()にidを指定するとjQueryオブジェクトを取得できる(1行目)。Java ScriptのDOMのgetElementByIdで取得できるのは、Elementオブジェクトそのもの。(2行目)
以下は同じ

console.log($('#id'))
console.log(document.getElementById('id'))

もし、jQueryでDOMと同等のものを取得したい場合は以下のように書く

$('#id').get(0)
  • 実行タイミングをコントロールするコード

    マウスオーバーした時とか、マウスアウトした時のタイミングで動きを加える

$('セレクタ') .on('イベントタイプ', イベントハンドラ);

on( );･･･特定のタイミングに実行したい命令の設定をするメソッド

  • イベントタイプ
イベントタイプ 該当するタイミング
mouseover 要素にマウスが乗った時
mouseout 要素がマウスから離れた時
mousedown 要素上でクリックボタンが押された時
mouseup 要素上でクリックボタンが離れた時
mousemove 要素上でマウスが動かされた時
click 要素がクリックされた時
dblclick 要素がダブルクリックされた時
keydown 要素にフォーカスした状態で、キーボードのキーが押された時
keyup 要素にフォーカスした状態で、キーボードのキーが離された時
focus 要素にフォーカスが当たった時(フォーカスできる要素のみ)
blur 要素からフォーカスが外れた時(フォーカスできる要素のみ)
change 入力内容が変更された時(textarea要素、input要素、select要素など)
resize 要素がリサイズされた時
scroll 要素がスクロールされた時 
function(){
    //任意の処理
  }

イベントハンドラの中には、イベントタイプで指定したタイミングで実行して欲しい処理の内容を記述する

  • アニメーション
$('セレクタ').animate({
      'CSSプロパティ': '値',
      'CSSプロパティ': '値'
    },
  アニメーション時間
);

animate( );･･･処理対象をアニメーション化するメソッド

animateメソッドの一つ目の引数にはアニメーション完了時の見た目を表現するCSSプロパティと値を指定する。二つ目の引数にはどのくらい時間をかけてアニメーションさせるかを指定する。時間の単位はミリ秒。1500の場合1.5秒かかる。

  • もっとアニメーション
$('セレクタ').animate({
      'CSSプロパティ': '値',
      'CSSプロパティ': '値'
    },
  アニメーション時間,
  'イージングの種類',
  function(){
    //アニメーション終了時に実行する処理
  }
);
  • CSSプロパティの種類
CSSプロパティ 説明
opacity 要素の不透明度
  • イージングの種類
イージングの種類 説明
linear 一定のスピードでアニメーションする
swing アニメーションの変化する速度が変わる
  • アニメーション終了時に実行する処理

アニメーションが完了した後に画面を元に戻したい場合などはfunction(){}の中に処理を書く

  • アニメーションの途中でも次のアニメーションに移りたい場合
stop( true | false )

stop()･･･要素のアニメーションを停止するメソッド

引数 説明
true アニメーションをストップする
false アニメーションをストップさせない

コードの書き方

$('セレクタ').stop(true).animate({
});
メソッド名 使い方
find() jQueryオブジェクトの各要素の子孫要素を対象として要素を絞り込む
filter() jQueryオブジェクトの各要素を対象として要素を絞り込む