kdoc - jQuery

  • 作成日：2010-10-07 14:39:16
  • 修正日：2014-08-19 09:42:05

jQuery

↑ページトップへ

書き方見本とか

↑ページトップへ

// 変数は$始まりで＆変数名はキャメルケースで。
var $myDiv = $("#myDiv");
$myDiv.click(function(){...});

// Bad
var $products = $(".products");
// Good
var $products = $("div.products");

// Bad
var $productIds = $("#products div.id");
// Good
var $productIds = $("#products").find("div.id");

// いまいち
$("div.data .gonzalez");
//　最適
$(".data td.gonzalez");

// これより
$(".data table.attendees td.gonzalez");
// こちら
$(".data td.gonzalez");

// 遅い
$('.class');
// この方が速い
$('.class', '#class-container');

// Bad
$('div.container > *');
// Better
$('div.container').children();

// Bad
$('div.someclass :radio');
// Good
$('div.someclass input:radio');

// Bad
$('#outer #inner');
$('div#inner');
$('.outer-container #inner');
// Good
$('#inner');

// DOMにいろいろ変更を加えるなら、一度デタッチしてから再度追加(DOM操作重いから)。
var $myList = $("#list-container > ul").detach();
//...a lot of complicated things on $myList
$myList.appendTo("#list-container");

// (同じ)
var $table = $( "#myTable" );
var $parent = $table.parent();
$table.detach();
// ... add lots and lots of rows to table
$parent.append( $table );

// 配列操作

// BAD
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>" + i + "</li>");
}

// GOOD
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>" + i + "</li>";
}
$myList.html(list);

// EVEN FASTER
var array = [];
for(var i = 0; i < 10000; i ++){
    array[i] = "<li>" + i + "</li>";
}
$myList.html(array.join(''));

// 存在しない要素にアクションさせない

// BAD: This runs three functions before it realizes there's nothing in the selection
$("#nosuchthing").slideUp();

// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

// 以下続く…

jQuery 日本語リファレンスより。
その他、いろいろなページより。

読み込み

↑ページトップへ

// DOM準備が終わってからコード実行
$(function(){
  // code...
});

//より安全
jQuery(function($) {
  // $関数がjQueryオブジェクトのエイリアスとして安全に使える
});

//昔の書き方
$(document).ready(function(){
  // code...
});

Google APIを使うなら以下。
→Google Libraries API - Developer's Guide - Google Libraries API - Google Code

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function(){
  // code...
});
</script>

バージョン指定は、例えば以下等もあり。

google.load("jquery", "1.4");
google.load("jquery", "1");

jQuery UIもOK。

google.load("jqueryui", "1.8.5");

コンフリクトを避ける

jQuery.noConflict();
(function($) {
  $(function() {
    // ここでは、$関数はjQueryオブジェクトとして動作する
  });
})(jQuery);
// スコープの外では、他のライブラリで定義された$関数として動作する

要素の取得

↑ページトップへ

$()

↑ページトップへ

//documentの最初のform内にある、全てのinputタグでtypeがradioのもの
$("input:radio", document.form[0]);
//xmlの中の全てのdiv
$("div", xml.responseXML);

要素を追加

↑ページトップへ

$("<div><p>Hello</p></div>").appendTo("body");

$('<img/>', {
    id: 'myimg',
    src: 'img/001.jpg',
    css: {
        margin: '10px'
    }
}).appendTo('#container');

// Internet Explorerでは動作しない
$("<input/>").attr("type", "checkbox");
// Internet Explorerでも動作する
$("<input type='checkbox'/>");

Each

↑ページトップへ

//$(this)
$("span").click(function () {
  $("li").each(function(){
    $(this).toggleClass("example");
  });
});

//引数
$("span").click(function () {
  $("li").each(function(_index, _elem){
    $(_elem).toggleClass("example");
  });
});

新しいメソッドを追加

↑ページトップへ

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();

入門

↑ページトップへ

jQuery言語入門 | tech.kayac.com - KAYAC engineers' blogより。

function

すべてjQuery pluguinとして。
elementsに対してのfunctionは$.fn、単独で使用するfunctionは$に実装。
最後にreturn this;。

$.fn.extend({
  'method_name' : function() {
    console.log(this);
    return this;
  }
});
$().method_name();
>> Document

変数

広域変数は$.extendで$に保持。

$.extend({
  'hoge' : 'huga'
});

console.log($.hoge);
>> huga

$.dataに保存する場合(「events」、「handler」は予約語なので避ける)。

$('a:first').data('first_link', true);

console.log($('a:first').data('first_link', true));
>> true

イベント

DOMに関連性のあるfunctionは独自イベントとして実装。

$('#header .tag a').bind('blink', function () {
  $(this).stop().fadeOut(300).fadeIn(300);
});

$('.meta a').click(function (e) { e.preventDefault();
  var contains = $(this).text();
  $('#header .tag a:contains("'+contains+'")').blink();
});

デバッグ用

8行でjQueryのデバッグが楽になるjQuery.pの紹介 | tech.kayac.com - KAYAC engineers' blogより。

$.fn.p = function (id) {
    var arg = [this];
    if (id) arg.unshift(id);
    if (!window.console) return this;
    var c = window.console || { 'log' : function () {} };
    (c.debug || c.log).apply(c, arg);
    return this;
};

使い方。

$('#aaa').p()
    .find('.bbb').p()
        .filter(':first').p()
            .addClass('head').p()
            .end()
        .end()
    .parents('tag').p()
        .children(':first').p()
            .addClass('head').p()
            .end()
        .end()
    .end()
;

スタイルの保持

javascript libraryを作るときに便利な3つのfunction | tech.kayac.com - KAYAC engineers' blogより。

(function ($) {
    var name_space = 'save_style';
    $.fn[name_space] = function () {
        $(this).each(function () {
            var result = {};
            var style = $(this).get(0).style;
            $.each(style, function (key, val) {
                result[val] = style[val];
            });
            $(this).data(name_space, result);
        });
        return this;
    };
    $.fn['load_style'] = function () {
        $(this).each(function () {
            $(this).attr('style', '');
            $(this).css($(this).data(name_space));
        });
        return this;
    };
})(jQuery);

jQuery pluginの書き方

jQuery Pluginの書き方 | tech.kayac.com - KAYAC engineers' blogより。

注意点

  • window.$に依存しない ($.noConflict()時にも動くように)
  • 最後はreturn this; (method chainが切れるので)
  • 複数要素が指定されている場合を考慮する (Plugin内のthisは.eachで処理する)
  • 名前空間を汚染しない (無名関数に閉じているのでPlugin自体の変数も外部から見えない)
(function($) {
    //このPluginの名前
    var name_space = 'basePlugin';
    $.fn[name_space] = function(options) {
        //いったん退避
        var elements = this;

        //設定情報の構築
        var settings = $.extend({
            //optionの初期値を設定
            'param' : 'value'
        }, options);

        //内部用method
        var inner_method = function () {
            //内部の共通処理の記述
        };

        //要素を一個ずつ処理
        elements.each(function() {
            $(this)
                //イベント等の設定
                .keyup(inner_method)
            ;
        });

        //method chain
        return this;
    };
})(jQuery);

フォーム値チェック

↑ページトップへ

// text 空チェック
if($('form input[name="text"]').val() == ''){
}
// チェックボックス チェックチェック
if(!$('form input[name="checkbox"]').attr('checked')){
}

もろもろ

↑ページトップへ

//要素数を返す
var n = $('li').size();
var n = $('li').length;

//pタグの中からポジションが1(ゼロから数えて2番目)のものを、赤色に変える。
$("p").eq(1).css("color", "red");

//.get() → 配列として返す

//配列の1つ目 $(this)[0]と同じ
$(this).get(0);

//配列の中のいくつめか(index)を返す
.index(elem);

aリンクを無効

そのままだと、画面遷移してしまうので。

$('#a').click(function(e){
    e.preventDefault();
});

location.hash

location.hash = 'aaaa';
// -> http://www.officek.jp/#aaaa

var location_hash = location.hash;
// -> aaaa

location.hashが変化した時にイベント。
→Ben Alman » jQuery hashchange event

画像サイズ

ロードされてから。

$('#img').load(function(){
    var w = $(this).width();
    var h = $(this).height();
});

Enterでsubmitさせない

# .allow_submitなinput（検索キー入力テキストボックスとか）はenter submit OK。
$(function() {
  $(document).on("keypress", "input:not(.allow_submit)", function(event) {
    return event.which !== 13;
  });
});

プラグイン

↑ページトップへ

テキストエリアtextarea 自動リサイズ

カルーセル

ーTiny Carousel: A lightweight jQuery plugin
http://www.baijs.nl/tinycarousel/

ツールチップ

確認ダイアログ

モバイル

カレンダー

Googleスプレッドシート

テンプレート

jQuery UIのダイアログ

Googleマップ

  • gmaps.js — the easiest way to use Google Maps
    http://hpneo.github.com/gmaps/examples.html

パノラマ画像

可変グリッドレイアウト

可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog
http://blog.xlune.com/2009/09/jqueryvgrid.html

select プルダウン インクリメンタルサーチ

TURNBOX.js - NOHT CO.,LTD.

  • 動きのある入力フォーム。