読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

jQuaryのイベントの種類

・イベントの記述

・一つのイベント

$("セレクタ").イベント(function(){

  }})
;

・複数のイベント

$("セレクタ").イベント1 イベント2 (function(){

  }})
;

・親セレクタの中の子セレクタを指定

$("親セレクタ").イベント("#子セレクタ"function(){

  }})
;

・this(親セレクタと同じセレクタ

$("セレクタ").on("イベント",

  function(){$(this).css("color","#f00")

  }})
;

・イベントの種類

・on(いろいなイベントを指定できる。#aに対しbを実行)

$("#a").on("b",function(){

  })
;

・off(onイベントを排除できる)

$("#a").off("click",function(){

  })
;

・click(#aクリックで実行)

$("#a").click(function(){

  })
;

・mousedown(#aの上でマウスのボタンが押された時)

$("#a").mousedown(function(){

  })
;

・mouseup(#aの上でマウスをクリックして話したときに実行)

$("#a").mouseup(function(){

  })
;

・mousemove(#aの上でマウスを動かしたときに実行)

$("#a").mousemove(function(){

  })
;

・mousemove(#aの上でマウスを動かしたときに実行)

$("#a").mousemove(function(){

  })
;

・hover(#aの上にマウスを乗せたときに実行)

$("#a").hover(function(){

  })
;

・touchstart(スマホ画面をタッチしたときに実行)

$("body").on("touchstart",function(){

  })
;

・touchmove(スマホ画面をタッチして移動しているときに実行)

$("body").on("touchmove",function(){

  })
;

・touchend(スマホ画面をタッチし終わったときに実行)

$("body").on("touchend",function(){

  })
;

・change(#aに変更があった時実行)

$("#a").on("touchend",function(){

  })
;

・keypress(キーボードを押したときに実行)

$("body").keypress(function(){

  })
;

・focus(フォーカスしたときに実行)

$("body").focus(function(){

  })
;

・focus(フォーカスしたときに実行)

$("body").blur(function(){

  })
;

・resize(ウィンドウサイズを変えた時)

$(window).resize(function(){

  })
;

・scroll(スクロールした時)

$(window).scroll(function(){

  })
;