普通のobjectが存在するか調べる時にこうすることが多いので、どうもこうやって書いてしまう癖があります…。

if($('#foo')){
    //do something
}

でも、jQueryで要素があるか判定するのには、こうしないといけません。

if ($('#myDiv).length) {
        // your code
}

Improve your jQuery – 25 excellent tips

• node-mysql — A node.js module implementing the MySQL protocol
• node-mysql-native — Mysql client module for node.js, written in JavaScript. No other mysql runtime required.
• node-mysql-libmysqlclient — MySQL bindings for Node.js using libmysqlclient.
• node-mysql-pool — MySQL connection pool for node.js on top of Felix Geisendörfer’s MySQL client node-mysql.

今回は、node-mysqlを使う。node-界隈は、同じようなことをできる同じようなパッケージがわらわらあるので、よくわかんない時は、とりあえず一番活発なやつ使えば、まあ、よいと思う。笑

sudo npm install

npm install mysql
mysql@0.9.4 ./node_modules/mysql
└── hashish@0.0.4

まずは基本的な設定から

var mysql = require('mysql');
var TEST_DATABASE = 'nodejs_mysql_test';
var TEST_TABLE = 'test';
var client = mysql.createClient({
  user: 'mysqluser',
  password: 'password',

  host: foo.bar

  database: sample

});

接続の設定は、createClientの引数に設定してやってもいいし、

client.host = "foo.bar";

client.database = "sample";

みたいな感じに、メソッドでもいける。他にもあるけれど、詳細は、git/node-mysqlで。

queryを投げるには、cakePHPなどでやるように

client.query('USE sample_table');

みたいにそのままSQL文を書いてやる。

client.query(
  'INSERT INTO '+TEST_TABLE+' '+
  'SET title = ?, text = ?, created = ?',
  ['super cool', 'this is a nice text', '2010-08-16 10:00:23']
);

そのまま変数に突っ込む事も可能だけれど、サニタイズしないといけないので、?で項目を指定しておいて、二つ目の引数に値を配列にまとめて入力している。

node-mysqlクライアントオブジェクトはこれ(質問に対して)を支援することのできるエスケープメソッドを持っています。自分でそれを呼び出すこともできるし、そのパラメータを受け入れるqueryの形式を使うこともできます。たとえば、

client.query('SELECT id, user_name FROM user WHERE email=?',

    [req.body.login], ...

The node-mysql Client object has an escape method that can help with this. You can either call that manually, or use the form of query that accepts parameters. E.g:

client.query('SELECT id, user_name FROM user WHERE email=?',

    [req.body.login], ...

http://stackoverflow.com/questions/5878266/using-mysql-with-nodejs-and-express-node-mysql

たぶん…とは思ってて調べてなかったのだけれど、どうやらエスケープメソッドで、ちゃんとサニタイズしているらしい。

insertやupdateはこれだけでもよいのだが、selectの場合は結果を返す変数が欲しいので、１つ目でselect文、二つ目の引数にコールバック関数を指定してやる。

client.query(
  'SELECT * FROM '+TEST_TABLE,
  function selectCb(err, results, fields) {
    if (err) {
      throw err;
    }

    console.log(results);
    console.log(fields);
//    client.end();
  }
);

で、僕が使ったときにはまってしまったのはここのポイント

client.end();

一度client.end()してしまうと、MySQLとの通信を終了してしまうので、それ以後全く通信できなくなる。end()メソッドをちゃんと理解してなかったのが悪いんだけど…

client.end([callback])
接続を閉じるためにCOM_QUITパケットをスケジュールに組み込みます。コネクションの華麗な切断を試みる前に、すべての投げられたqueryが実行されます。
Schedule a COM_QUIT packet for closing the connection. All currently queued queries will still execute before the graceful termination of the connection is attempted.

ちなみにこんなのもある。

client.destroy([callback])
クライエントに対し直ちに接続を切断させます。これは接続を切断する方法としてはあまり良い方法ではありません。きをつけて使ってください。
Forces the client connection to be destroyed right away. This is not a nice way to terminate the connection, use with caution.

ので、何度も通信する必要があるものは、不用意にclient.end()してはいけない。

Socket.IO 0.8.0 with support for Firefox6 WebSockets and Chrome betas.
Server
0.8.0 / 2011-08-28
==================
* Added hybi7 support.
* Added hybi10 support. [einaros]
(Socket.IO Official MLより一部省略)

ChromiumのBlogやMozillaのDev Blogでも触れてますが、hybi7, hybi10で脆弱性に対応しています。

The WebSocket protocol specification is now largely stable, having solved previous security concerns.

Please upgrade your servers to ones which support HyBi 10.

http://blog.chromium.org/2011/08/new-websocket-protocol-secure-and.html

WebSocket の実装を最新仕様に対応

Firefox 6 では仕様上のセキュリティ問題が修正済みの WebSocket (ietf-07) がサポートされましたが、Firefox 7 ではその後の仕様更新 (ietf-10) に対応しています。
Firefox 7 の主な新機能を紹介します @ Mozilla Developer Street

Socket.IO@0.8.3に更新してみたところ、Websocketがどうしたことか動かない。firebugのコンソールを見てみると、”ws://hogehoge/への接続に失敗しました”なんたらと表示されている。しかも、Socket.IO 0.7xで動いていたxhr-pollingも動かないし、jsonp-pollingまで動かない。

公式のMLにもそんな話はのってないですし、最初はポートかなあとも思ったんですが、XHR-pollingは今まで問題なく動いてたので、おそらくローカルな問題が原因だと思い、googleってみると、やはりありました。

うーん、ちゃんと接続切れない。原因不明。
そういえばNOD32がのHTTPチェックがきいていた。でもこの前はsendが送れなかっただけのはず（その時はsocket.ioじゃなかったけど）

http://d.hatena.ne.jp/motsat/20110411/1302530960

一応今回もHTTPチェックを解除。
そして、socket.io版のコードを試す。
接続切れなくなった。

不思議なことが起こったら、NOD32を疑うことからはじめよう。忘れていました。

socket.ioのwebsocket接続がdisconnected、connectedを繰り返してしまう

Firewall (kaspersky/avast) blocked messages when I using websocket server (socket.io on node.js), what can i do? (except change default setting in firewall) port 8080 or 8000 thx a lot

Firewall blocks websocket @ Stackoverflow

　どうやらNOD32, Avast!, Kasperskyあたりのウイルス対策ソフトはwebsocketでの通信を不正なアクセスか何かと誤認することがあるみたいです。
ウェブ関連の機能を停止したところ、ChromeもFirefox6も問題なく通信することができました。

　たぶんFirefoxのxhr-pollingしか動作を確認してなかったから気づかなかっただけで、おそらく、0.7xでもchromeなどでは動いてなかったんだと思います。

Node.js単体に関してはこちらの記事とほぼ同様の流れ。
Amazon Web Serviceでnode.jsを起動させてみた

wget http://nodejs.org/dist/node-v0.4.11.tar.gz
tar xvzf node-v0.4.11.tar.gz
cd node-v0.4.11

ec2-user> ./configure
Checking for program g++ or c++          : not found
Checking for program icpc                : not found
Checking for program c++                 : not found
/home/ec2-user/node-v0.4.11/wscript:232: error: could not configure a cxx compiler!
~/node-v0.4.11

ここで、コンパイラがないとおこられる

sudo yum install gcc-c++
sudo yum install openssl-devel

もし無い場合はopenssl-develも、私の場合はもうつかってたのでなし。

これでいけるか、と思ったが、突然重くなって落ちた。Googleさんに尋ねてみたところ、この2つの記事に出くわす。
node.jsをAmazon EC2のmicroインスタンスに入れる時の注意
Amazon EC2 MicroインスタンスのAmazon LinuxにNodeをインストールした
どうやら、CPU負荷が高くなりすぎて、make中にkillされてしまったらしい。

ただ、make cleanして、もういちど./configure, make, make installしたところすぐ終了。

ec2-user> ./configure
Checking for program g++ or c++          : /usr/bin/g++
Checking for program cpp                 : /usr/bin/cpp
Checking for program ar                  : /usr/bin/ar
Checking for program ranlib              : /usr/bin/ranlib
Checking for g++                         : ok
Checking for program gcc or cc           : /usr/bin/gcc
Checking for gcc                         : ok
Checking for library dl                  : yes
Checking for openssl                     : yes
Checking for library util                : yes
Checking for library rt                  : yes
--- libeio ---
Checking for library pthread             : yes
Checking for function pthread_create     : yes
Checking for function pthread_atfork     : yes
Checking for futimes(2)                  : yes
Checking for readahead(2)                : yes
Checking for fdatasync(2)                : yes
Checking for pread(2) and pwrite(2)      : yes
Checking for sendfile(2)                 : yes
Checking for sync_file_range(2)          : yes
--- libev ---
Checking for header sys/inotify.h        : yes
Checking for function inotify_init       : yes
Checking for header sys/epoll.h          : yes
Checking for function epoll_ctl          : yes
Checking for header port.h               : not found
Checking for header poll.h               : yes
Checking for function poll               : yes
Checking for header ['sys/types.h', 'sys/event.h'] : not found
Checking for header sys/queue.h                    : yes
Checking for function kqueue                       : not found
Checking for header sys/select.h                   : yes
Checking for function select                       : yes
Checking for header sys/eventfd.h                  : yes
Checking for function eventfd                      : yes
Checking for SYS_clock_gettime                     : yes
Checking for library rt                            : yes
Checking for function clock_gettime                : yes
Checking for function nanosleep                    : yes
Checking for function ceil                         : yes
Checking for fdatasync(2) with c++                 : yes
'configure' finished successfully (3.415s)
~/node-v0.4.11

ec2-user> node -v
v0.4.11

ちゃんと、/usr/local/bin/nodeに入ってる。

次にnpm のインストール
EC2ではないけれど、この記事が非常に参考になった。
Installing Node.js and NPM on Ubuntu 10.04 and try a simple chat application
一時的に/usr/localの所有権を$USERに移してるのは、インストールコマンドを実行するため。
sudo shだとよくないってどっかに書いてあった気がするけど忘れた。汗

sudo chown -R $USER /usr/local
curl http://npmjs.org/install.sh | sh
sudo chown -R root /usr/local
npm -v
1.0.27

npmインストールされた！
次に、socket.io

sudo npm install socket.io
sudo: npm: command not found
~

???
というわけで、困ったときのStackoverflowさんに聞いてみる。

sudo changes PATH – why?
On EC2: sudo node command not found, but node without sudo is ok

どうやら、sudo したときのPATHの設定がセキュリティの関係上リセットされるらしい。
しかも、/usr/local/binをPATHに読み込んでくれない。なので、visudoでpathに/usr/local/binを追加する。

sudo visudo

Defaults    secure_path = /sbin:/bin:/usr/sbin:/usr/bin:/usr/local/bin

ec2-user> sudo npm install socket.io
socket.io@0.8.2 ./node_modules/socket.io
├── policyfile@0.0.4
├── redis@0.6.6
└── socket.io-client@0.8.2
~

/usr/local/binにPATHが通って、sudoからnpm, nodeできるように！

一行程度を表示させたい時の条件分岐

<?php if($hoge){
     echo $hage;
  }else{
     echo $huge;
  }
?>

表示させたい時が沢山あるときの条件分岐

<?php if($this->value): ?>
  Hello
<?php elseif($this->asd): ?>
  Your name is: <?= $this->name ?>
<?php else: ?>
  You don't have a name.
<?php endif; ?>

要は、if{}もif: endif;も同じだけど、
echoをたくさん書くのは、MVC使ってるときにやるのいやでしょ？ってことらしいです。

They are the same but the second one is great if you have MVC in your code and don’t want to have a lot of echos in your code. F.e. in my .phtml files (Zend Framework) I will write something like this:

別にif(): endif;じゃなくても、以下のようにすれば、複数行でいけるみたいですが…。
全然美しくない…

<? if($condition) { ?>
   HTML content here
<? } else { ?>
   Other HTML content here
<? } ?>

works cited
http://stackoverflow.com/questions/564130/difference-between-if-and-if-endif

まず、先に結論から言ってしまうと、プライベートメンバを実装できる。

まず、プライベートメソッドについて、MDNのClosureの頁が、簡潔にまとめてくれているのでそれを引用したい。

“Javaのような言語は、プライベートメソッド、つまり同じクラスからのみ呼び出せるメソッドを宣言できる。

JavaScriptは、ネイティブにプライベートメソッドを生成することはできないが、クロージャを使ってそれを真似することができる。プライベートメソッドは、単にコードへのアクセスを制限するだけでなく、それを使うことによって、グローバルな名前空間を強力に管理し、コード中に不要なメソッドをまき散らすことも避けられる。”

Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class.
JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures. Private methods aren’t just useful for restricting access to code: they also provide a powerful way of managing your global namespace, keeping non-essential methods from cluttering up the public interface to your code.

また、プライベートメソッドと同様に、プライベートな変数を宣言することもできる。
プライベートメンバについては、少し長いが、Pro Javascript Design Patterns P.33 のPrivate Members Through Closuresにある例が非常にわかりやすいので、これを一部引用したい。

var Book = function(newIsbn, newTitle, newAuthor) { // implements Publication

     // プライベートメンバ
     var isbn, title, author;
     // プライベートメソッド
     function checkIsbn(isbn) {
          ...
     }

     // 以下、特権付きメソッド
     this.getIsbn = function() {
          return isbn;
     };
     this.setIsbn = function(newIsbn) {
          if(!checkIsbn(newIsbn)) throw new Error('Book: Invalid ISBN.');
          isbn = newIsbn;
     };
     this.getTitle = function() {
          return title;
     };
     this.getAuthor = function() {
          return author;
     };
}

この例では、Book関数の中にある、isbn, title, authorといったプライベートな変数、checkIsbnというプライベートメソッドには、クロージャによって囲われているため、この関数の外側からは直接に全くアクセスできない。しかし、それらにアクセスする方法はある。

”プライベートメソッド、変数にアクセスするメソッドは、全てBook内で宣言されている必要がある。これらは、パブリックであるがプライベートなメソッドと変数にアクセスできるため、特権付きメソッド(privileged method)と呼ばれている。”

Any method that needs to access these variables and functions need only be declared
within Book. These are called privileged methods because they are public but have access to
private attributes and methods.

つまり、プライベートメンバを宣言している関数の内部に、それにアクセスするためのメソッドをつくり、そのメソッドに外部からアクセスすることによって、プライベートメンバにアクセスできるようにしているのだ。

以上クロージャによって、プライベートメンバ(= プライベートメソッド、変数)を作成することができ、それによって、(1)コードのアクセスの制限、(2)名前空間の管理、(3)コード中にメソッドを書き散らすことを防ぐことができる。

Pascal-Emmanuel Gobry, Friday, June 10, 2011

Appleがクラウドコンピューティングに加わることが明らかになった今、最も有名なコンシューマクラウドコンピューティングの会社であるGoogleと、Appleのやり方がどれだけ違うのかをみてみることは、面白いことに違いない。実は、アップルのクラウドに対するビジョンは、Googleのそれとは大きく違っている。

When it became obvious Apple would come out with a cloud computing offering, it would be interesting to see how they would do things differently from Google, the most prominent consumer cloud computing company. And indeed, Apple’s vision for the cloud is very different from Google’s.

なんと、Appleのビジョンは、Microsoftのクラウドに対するビジョンと、非常によく似ているのだ。

In fact, Apple’s vision for the cloud is pretty much Microsoft’s vision for the cloud.

そして、Microsoftが遠い昔にやるはずだったことを、Appleがやったというのは、Microsoftにとって非常に耐え難いことだ。

And it’s pretty humiliating for the Redmond company that Apple did what Microsoft should have done a long time ago.

Googleにとっては、クラウドは 「クラウド + WEB」で、Appleにとっては、クラウド + インターネットのあちら側で物事を処理するソフトウェア:これが、GoogleとAppleのビジョンの違いだ。

Here’s how Google and Apple’s vision of the cloud differ: for Google, the cloud means cloud + web; for Apple, cloud computing means cloud + software, with the internet stuff happening behind the scenes.

Googleが消費者に提供するクラウドコンピューティングサービス、例えば、Eメール、ワードプロセッサ、スプレッドシートなどといったものは、全て、ブラウザの中で起きることだ。Googleにとって、クラウドコンピューティングの要は、Webによって、デスクトップのソフトを置き換えてしまうということなのだ。

All of the cloud computing services Google offers to consumers, like email, word processing and spreadsheets, happen within the browser. To Google, the point of cloud computing is to replace desktop software with the web.

Appleにとって、クラウドコンピューティングというのは、ソフトウェアの代替ではなく、デスクトップのソフトウェアを補強するものなのだ。Eメールやデータ、曲など、全てものは、バックアップを不要ものとし、どこからでもアクセスできるようにするため、まるで魔法のように自動でクラウドに同期される。Appleにとって、クラウドコンピューティングの要点は、ソフトウェアをより良いものすることにあるのだ。

For Apple, cloud computing doesn’t replace software, it augments it. All of your email, data, songs and stuff is automagically synced to the cloud so that you don’t have to do backups and you can access it anywhere. To Apple, the point of cloud computing is to make the software better.

実は、それは、クラウドコンピューティングについてMicrosoftが延々とに言ってきた(しかし、実際には行っていない)ことでもある。

That also happens to be what Microsoft has been saying (but not really doing) about cloud computing forever.

彼らのクラウドコンピューティングに対するスローガンは、いつも、ソフトウェア+サービス(Software plus Service)だった。つまり、全てをブラウザ上で置き換えるには、デスクトップ上のクライアントソフトは、高機能すぎるということだ。(そして、Microsoftは今のところ正しい。Google SpreadsheetはExcelの相手になってすらいない。) だがしかし、クラウドサービスは、ソフトウェアを補強することができるのだ。

Microsoft’s slogan for cloud computing has always beeen “Software plus Services.” In other words, client software on the desktop is too rich and interactive to be replaced with everything in the browser (and they’re right, so far–Google Spreadsheet is just no match for Excel), but cloud services can augment the software.

Appleが見せたように、これは、Googleに代わるパワフルなビジョンである。デスクトップの高機能性と使いやすさ、そして、クラウドコンピューティングの(オートセーブ、同期、バックアップが不要であること、どこからでもアクセスできるといった)優れた点をそれぞれ良いとこ取りした環境をつくりだすことができるのだ。

This is an alternative vision to Google’s and also a powerful one, as Apple has shown. You can create an environment that’s “the best of both worlds”: the richness and user friendliness of desktop software, and the advantages of cloud computing (autosave, syncing, no backups, access anywhere).

Microsoftにとっての問題は、ビジョンを実現するため、10年余りの歳月があったのにもかかわらず、iCloudのようなものを思いつけなかったことだ。一方、Appleも試はしていたが、柄にもなく、優れたクラウドサービスを提供することに何度も失敗を繰り返した。(つまり、MobileMe and .Mac のようなガラクタ)

The problem for Microsoft is that they had almost a decade to come up with something like iCloud to realize that vision, and they didn’t. Meanwhile Apple tried and, uncharacteristically, failed and failed over again to build a strong cloud offering (MobileMe and .Mac before it were duds).

Googleにとって、iCloudというのは悩ましい。なぜなら、iCloudは、消費者にとって、Androidと比べた時、iOSをより魅力的なものにするからだ。

For Google, iCloud is an annoyance, because it makes iOS even more appealing to consumers vis-à-vis Android.

Microsoftにとって 、iCloudというのは屈辱である。

For Microsoft, iCloud is a humiliation.

—-

Googleのビジョンを実現するためには、Webブラウザが、今より遙かに高機能に進化しなくては不可能だろう。そしてブラウザの進化には、長い時間がかかることは、今までのHTMLをめぐる歴史を見れば明らかだ。はたして、どちらがユーザーの心をつかみとるのだろうか･･･。

2000ページを超える JavaScript Bibleによると、定義は以下のようになる。

「JavaScriptのコアの部分では、closureというのは、ある関数の中で定義されたローカル変数を、その関数が実行された後でさえ、生かすことができるという事実を意味する。- 普通は、ローカル変数は関数が実行された後に終わりをむかえるのだ。」

At the core of JavaScript, closures refer to the fact that you can keep a local variable defined in a function alive even after the function has executed — which normally signals the end of life for a local variable — Javascript Bible P.456

つまり、普通は、関数でスコープを作ると、その関数の外からアクセスできないようになるのだけれど、クロージャがあると、その関数スコープの外から、その関数内の変数にアクセスできるようになるということ、らしい。とは言っても、言葉だけではよくわからないので、実際にみてみよう。

e.g.

function f(){
     var b = "b";
     return function(){
          return b;
     }
}

ここで、
b => undefined
としても、当然ではあるのだけれど、グローバルのスコープからは、関数のスコープを覗くことはできないので、b は、undefinedを返す。

そこで、以下のように、f()から、関数g()を生成すると、

var g = f();
g();

g(); => b

f()のスコープの外側から、f()内の変数にアクセスできる。

ここでは、「クロージャがどういうものか」を見たが、それがいったい何の役に立つのか、それから、これはクラスと何が違うのか(厳密な意味では、JavaScriptにクラスは無いが)、クロージャのパフォーマンスあたりについては、よくわからないので、次回以降順番に見ていきたい。

Closure (2) 何が出来るのか

大半のリリースで、我々は既存のコードとの互換性を保とうと努力しているが、jQuery 1.6では、既存のコードに多少の変更を必要とするかもしれない。

In most releases we try to main compatibility with existing code. However, there are a few cases where jQuery 1.6 may require changes to existing code

data-属性における大文字小文字のマッピング / Case-mapping of data- attributes

jQuery 1.5 は、要素にセットされたどんなdata-属性も、JSONセマンティクスを使って、自動的にそのdata属性をJavascriptの値へ変換する機能を.data()メソッドに導入した。jQuery 1.6では、我々は、-(dash)を埋め込むデータ属性のキャメルケース化に関して、この機能をW3C HTML5の仕様書にマッチするようアップデートした。たとえば、つまり、data-max-value=”15″という属性は、jQuery 1.5.2では、{ max-value: 15 }というデータオブジェクトを作成したが、jQuery 1.6では、{ maxValue: 15 }になる。

jQuery 1.5 introduced a feature in the .data() method to automatically import any data- attributes that were set on the element and convert them to JavaScript values using JSON semantics. In jQuery 1.6 we have updated this feature to match the W3C HTML5 spec with regards to camel-casing data attributes that have embedded dashes. So for example in jQuery 1.5.2, an attribute of data-max-value=”15″ would create a data object of { max-value: 15 } but as of jQuery 1.6 it sets { maxValue: 15 }.

.prop(), .removeProp(), .attr()

1.6のリリースでは、我々は、DOM属性とDOMプロパティのハンドリングを別のメソッドへ分割した。新しい.prop() メソッドは、DOM要素のプロパティを取得/セットし、.removeProp()は、プロパティを削除する。過去、jQueryはプロパティと属性の線引きをあいまいにしていた。一般的に、DOM属性は、<input type=”text” value=”abc”>のvalue属性のような、HTMLなどから取得されたDOM情報の状態を表し、DOMプロパティは、文書の動的な状態を表す。例えば、ユーザーが上のinput要素をクリックして、defと入力したとしたら、.prop(“value”)はabcdefだけれども、.attr(“value”)はabcのままである。

In the 1.6 release we’ve split apart the handling of DOM attributes and DOM properties into separate methods. The new .prop() method sets or gets properties on DOM elements, and .removeProp() removes properties. In the past, jQuery has not drawn a clear line between properties and attributes. Generally, DOM attributes represent the state of DOM information as retrieved from the document, such as the value attribute in the markup <input type=”text” value=”abc”>. DOM properties represent the dynamic state of the document; for example if the user clicks in the input element above and types def the .prop(“value”) is abcdef but the .attr(“value”) remains abc.

大半の場合、ブラウザは属性値(attribute value)をプロパティの開始値として扱うが、checkedやdisabledといった、真偽(Boolean)属性は普通とは違うセマンティクスを持つ。

In most cases, the browser treats the attribute value as the starting value for the property, but Boolean attributes such as checked or disabled have unusual semantics.

例えば、<input type=”checkbox” checked>というマークアップを考えてみよう。checked属性の存在は、DOM .checkedプロパティが真であることを意味する、属性は値を持たないけれど。上記のコードでは、checked属性の値は、空の文字列(属性を特定できない場合は、undefined)であるが、checkedプロパティは真になる。

For example, consider the markup <input type=”checkbox” checked>. The presence of the checked attribute means that the DOM .checked property is true, even though the attribute does not have a value. In the code above, the checked attribute value is an empty string (or undefined if no attribute was specified) but the checked property value is true.

jQuery 1.6以前では、.attr(“checked”)は、真偽プロパティの値(true)を返したが、jQuery 1.6では、実際の属性の値(つまり、空の文字列)が返され、これはユーザーがチェックボックスをクリックして、状態が変化したときでも変化しない。

Before jQuery 1.6, .attr(“checked”) returned the Boolean property value (true) but as of jQuery 1.6 it returns the actual value of the attribute (an empty string), which doesn’t change when the user clicks the checkbox to change its state.

チェックボックスの現在の状態を調べる代わりの手段がいくつかある。最もパフォーマンスが優れた方法は、クリックされた要素をthisが参照する時の、イベントハンドラ内部のthis.checkedのように、DOMプロパティを直接に使うことだ。jQuery 1.6以降を使うコードでは $(this).prop(“checked”)という新しいメソッドが比較的速く、this.checkedと同じ値を取得する。それと、$(this).is(“:checked”)という表現なら全てのバージョンのjQueryで動作する。

There are several alternatives for checking the currently-checked state of a checkbox. The best and most performant is to use the DOM property directly, as in this.checked inside an event handler when this references the element that was clicked. In code that uses jQuery 1.6 or newer, the new method $(this).prop(“checked”) retrieves the same value as this.checked and is relatively fast. Finally, the expression $(this).is(“:checked”) works for all versions of jQuery.