初心者による jQuery 基礎

jQueryの基本的な構文

jQueryで行われる処理の流れは、

1. $()関数で命令の対象となるHTML要素をjQueryオブジェクトに変換
2. そのjQueryオブジェクトに対して独自メソッドを呼び出して変更を加える

jQueryの基本的な構文は、

sample.js

//jQueryオブジェクト.変更する命令
$(HTML要素).メソッド('引数', '引数')

また、HTMLを最後まで読み込んだ時点で実行するために、jQueryは以下のようになる。

sample.js

$(function){
 //HTMLがロードされたのちに実行する処理
}

onメソッド

onメソッド構文は次のように書く

sample.js

on('イベントタイプ', 'イベントハンドラ')

ちなみに、thisプロパティは「onメソッドに指定してあるイベントが発生した要素」が格納される。
thisを使うことで、

1. 処理のパフォーマンスが上がる
2. コードの汎用性を持たせられる
そして一番重要なのが、
3. $()関数に複数のセレクタを指定した場合にthisを使うことで処理の切り分けをしてくれる

というメリットがある。

イベントタイプ

主なイベントタイプは、

mouseover : 要素にマウスが乗った時
mouseout : 要素からマウスが離れた時
mousedown : 要素上でクリックボタンが押されたとき
mouseup : 要素上でクリックボタンが離れた時
mousemove : 要素上でマウスが動かされたとき
click : 要素がクリックされたとき
dbclick : 要素がダブルクリックされたとき
keydown : 要素にフォーカスした状態で、キーボードのキーが押されたとき
keyup : 要素にフォーカスした状態で、キーボードのキーが離れた時
focus : 要素にフォーカスが当たった時
blur : 要素からフォーカスが離れた時
change : 入力内容が変更されたとき
resize : 要素がリサイズされたとき
scroll : 要素がスクロールされたとき

イベントハンドラ

sample.js

function() {
 //任意の処理
}

たとえば、

sample.js

$('#type').on('mouseover', function(){
 $('#type').css('color', '#ebc000')
})

のように使う。

メソッドチェーン

メソッドチェーンとは、「メソッドを鎖(チェーン)のようにつなげて記述し、実行するプログラム手法」です。書き方は、

sample.js

$('セレクタ').メソッドA().メソッドB().メソッドC()...

たとえば、

sample.js

$(function(){
 $('#type')
  .on('mouseover', function(){
   $('#type').css({
    color: '#ebc000',
    backgroundColor: '#ae5e9b'
   })
  .on('mouseout', function(){
   $('#type').css({
    color: '',
    backgroundColor: ''
   })
  })
  })
})

なお、実行の順番が結果に関係しないメソッドについては、順番を変えても同様の結果となる。
このメソッドチェーンのメリットは、

1. $()関数の記述が一回で済むため可読性が上がる。
2. プログラムの処理速度が上がる。

stopメソッド

実行中のアニメーションを途中でキャンセルするにはstop()メソッドを使います。

sample.js

stop( true | false )

参考資料

「jQuery最高の教科書」