jQuery

4pt

jQueryのjは小文字です。

Google AJAX API Loader

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

コード

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/jqueryjquery_stop.php

プラグイン開発

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

プラグインのテンプレート

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

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

バグ？

IE8でtrのvisibleがおかしい

実証コード

<table id="target">
  <tr> 
  <td>hoge</td>
  <td>moge</td>
  <td style="display:none">sage</td></tr>
</table>  
<script type="text/javascript">
$(function(){
  var str = '';
  $('#target tr').children().filter(':visible').each(function(){
    str += $(this).text();
  });
  alert(str);
});
</script>

"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