S eda1a14b50ee24bcab19b62f40858e76 jQuery

jQueryのjは小文字です。

Google AJAX API Loader



コード

ajax

$.ajax({
  dataType: "json",
  data: {
    "key": "value"
  },
  cache: true,
  url: "http://path/to/request/",
  success: function (data) {
    alert(data);
  }
});  

getJSON

最近は別ドメインからでも受けられるようにとりあえずJSONPで作ることが多くなりました
$.getJSON('/path/to/server', {request: data}, function(response){
});

サーバ側でこうする
$obj = getObjFunction();
$callback = htmlspecialchars(@$_GET['callback']);
return "$callback(" . json_encode($obj) . ")";

onloadみたいなやつ

$(document).ready(function(){
  ...
}

// 競合回避のため、いつもこうしてる
jQuery(function($){
  ...
});


data

jQuery要素にデータを関連付けられる。便利だね。
$('#header').data('key', 'value');
console.log($('#header').data('key'));

$.each

引数がよくわからんようになるのでメモ
$.each(myArray, function(key, value){
  console.log(value);
});

$.extend

jQuery.extend は覚えづらい

DOMオブジェクトとjQueryオブジェクト


DOMオブジェクトとjQueryオブジェクトが混在する。jQueryのあんまり好きじゃないところ…。
$('div').each(function(){
  // thisはDOM
});

var jqueryDiv = $('div');    // jQueryオブジェクト
var domDiv = $('div').get(); // DOMを取得

色を使うアニメーション

標準ではできない。数値化されてないかららしい。

これを使う。
http://plugins.jquery.com/project/color

$.stop

fadeInやslideUpなどアニメーションは、定義した順にキューに入ってひとつずつ実行される。連続してイベントを起こすと、起こした回数だけ後から実行されて格好悪い。

そういう時に、動作中のアニメーションを全てキャンセルするのに使う

$('#button').click(function(){
  $('#target').stop().fadeOut(10000);
});
  // stop(clearQueue, jumpToEnd)
  // stop(true, false) がアニメーション的に違和感ない
このサンプルはとてもわかりやすい

[jQuery]こんな機能があったんだ。jQuery stop()
http://www.kantenna.com/pg/2010/01/jqueryj...


プラグイン開発

jQuery使う場合は基本プラグイン化していった方がいい。
http://docs.jquery.com/Plugins/Authoring

プラグインのテンプレート
jQuery(function(){
  // ここにプラグイン共通のパラメータなど
  var commonParameters = {};

  $.fn.myPlugin = function(){
    // ここに要素固有の処理を書く
    
    // メソッドチェーンするため自分を返す
    return this;
  }
})

バグ?

IE8でtrのvisibleがおかしい

実証コード
hoge moge sage
"hoge moge" が正しいんだけど、IE8では "hoge moge sage" になる。
:visibleはwidthとheightが0以上であればvisibleだと判断してるんだけど、
IE8ではtrがhiddenでもwidthに0以上の値を返すかららしい。

1.3.3では直るっぽい。
http://dev.jquery.com/ticket/4512

わからん

・属性セレクタで「空でないやつ」を指定する簡単な方法(filter使ったらできたが)

リンク

本家ドキュメント
http://docs.jquery.com/Main_Page

jQuery開発者メモ
http://www.mikage.to/jquery/

jQueryを読み解く
http://gihyo.jp/dev/feature/01/jquery

もしかして

    他の人の「jQuery」

    S eda1a14b50ee24bcab19b62f40858e76

    無所属ソフトウェアエンジニア

    (1722words)

    最新

      最新エントリ