Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@_rough

初心者による jQuery 基礎

More than 1 year has passed since last update.

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最高の教科書」

0
Help us understand the problem. What is going on with this article?
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
_rough
Javascriptつよつよになりたい大学生 自分用のノートとして使ってます

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?