Help us understand the problem. What is going on with this article?

初心者による 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最高の教科書」

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした