Skip to content

jQuery

DOM is ready

$(function() {
  // Document is ready
});

jQuery(function( $ ) {
  // Your code using failsafe $ alias here...
});

# CoffeeScript
$ ->
  $('p').css('color', 'red')

Events

イベント発火

see also: JavaScript #タッチパネル対応 

$( "#foo" ).trigger( "click" );

データ変更イベント

$(document).on('change', 'select[name="hoge"]', function(){

アンカーのクリックイベントで、初期動作（この場合はページ遷移）を中止

$("a").click(function(event){
  alert(this.href);
  event.preventDefault();
});

Elements

クラス切り替え

$(this).toggleClass("highlight");

何番目の要素か

var index = $("div#test0 ul li").index(this);

要素名を取得する

var tag = $(".hoge")[0].tagName;
- - - - - - - - - - - - - - - - - - - - - - -
$(".hoge").each(function(){
    var tag = $(".hoge").get(0).tagName;
});

jQueryでoption要素を生成するスマートな方法 at 日本の天ぷら情報

連想配列のキーを「value」と「text」にして値を与えてoptionを生成すると勝手にプロパティを展開

var prefs = [
  {value:'00', text:'--選択して下さい--'},
  {value:'01', text:'北海道'},
  {value:'02', text:'青森県'},
  {value:'03', text:'岩手県'},
               :
];
$('select').empty();
$.each(prefs, function(){
  var option = $('<option>', this);
  $('select').append(option);
});

SELECT要素のOPTIONをjQueryで選択状態にする

<select name="city">
  <option value=""></option>
  <option value="tokyo" >東京</option>
  <option value="nagoya">名古屋</option>
  <option value="nagoya">京都</option><!-- valueの指定ミス例 -->
  <option value="osaka" >大阪</option>
</select>

<script>
$('select[name="city"]').val('tokyo');   //東京が選択される
$('select[name="city"]').val('fukuoka'); //存在しないvalを指定 → 先頭のOPTIONが選択される
$('select[name="city"]').val('nagoya');  //OPTIONの重複したvalueを指定 → 複数あるうちの最後 京都 が選択される
$('select[name="city"]').val();          //選択されているOPTIONのvalueを返す
</script>

フォーム入力値をリアルタイム取得する

jQueryで要素の表示・非表示を判定する方法: 小粋空間

jQuery.Deferredで順番にアニメーションを実行する | 2GRAVITY

jQuery でフォームの2重送信を禁止する方法 | ウェブル

$('form').submit(function() {
    $(this).submit(function () {
        alert('フォームからのデータ送信は一度ずつ行なって下さい。');
        return false;
    });
});

Plugins

jQuery Cards - A hand selected repository of cool jQuery Plugins
A repository of over 1000 quality jQuery plugins

jQuery File Upload Plugin

File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.

IE6以上対応で複数ファイルやドラッグアンドドロップ、プログレスバー、プレビュー等、非常に高機能なアップロードライブラリ。

Tips

Version

$.fn.jquery
//=> 1.11.3

繰り返し

Ajax

Tips