jQueryサンドボックス

このページは、日々、不肖・サイロス誠が気になったjQueryの話を、
自分のサーバを持っているのを良い事に練習しまくろうとう言う魂胆が見え見えの
いろんな方々へ知識を共有するためのページです。

また、このページは、参考文献欄などに、Amazonへのアフィリエイトリンクを張らせていただいております。
強制ではありませんが、本ページ&本の著者の方へのリスペクトとしてご活用くださいませ。

Last Modified 2013.10.01 Cyross Makoto


使用しているバージョン

jQuery Version  
jQuery UI Version  


その1・jQueryって何なのさ?[2011.11.06]

jQueryは、Javascriptの見栄えを良くするときに、めっちゃ手抜きしたい効率的にコードを書きたいときに使うライブラリです。 jQueryには、以下の特徴があります。
  • 指定の要素を抽出? getElementByIdなんて長いっつーの!
    jQueryならもっと簡単に書けるぜ!
  • さらに特定の子孫を抽出? jQueryならもっと簡単に(略)
  • さらにさらにCSS要素を追加? jQueryならもっと(略)
  • イベントハンドラ? jQueryなら(略)
  • ajax? jQ(略)
  • ブラウザローカル? なにそれ?おいしいの?
・・・というふうに、Javascriptでやりたかったあんなコトやこんなことを上手に覆い隠してくれる便利なライブラリです。
コレさえあれば、あんなに頭を抱えていたWebページ作成も、ちょっと工夫でこの旨さ!
…Javascriptの知識が十分にあれば

その2・jQueryってどこでゲット出来るのさ?[2011.11.06]

jQueryは公式サイトがあるので、そこからパシっと取ってきてください。
トップページにデカデカと「ここをクリックしてjQueryをゲットしよう!」というボタンがあるので、迷わずクリック!
あ、「PRODUCTION」と「DEVELOPMENT」という2種類がありますが、PRODUCTIONはコード圧縮・難読化済み、DEVELOPMENTOは未圧縮になっていますので、コードを読んでみたい方は「DEVELOP」のほうをどうぞ。
あとは、HTMLのscriptタグ使って読みこむだけです。

その3・jQueryのバージョンはいくつ?[2011.11.06]

jQueryのバージョンを求めるときは、一旦jQueryオブジェクト作って、versionプロパティを求めればOK!
$().version
ページの上にある、バージョン番号も、この方法でゲットしてます。
$("#ほげほげ").text($().version)
ちなみに、jQuery UIのバージョン番号は、
$.ui.version
で求められます。

その4・磯野-、apply使おうぜー[2011.11.12]

いきなりjQueryではなく、Javascriptの話ですが、配列の内容を複数の引数を持つ関数に渡したい(要は、Rubyで配列に*(配列展開)付けて渡すようなもん)時は、往々にしてあるはずです。
そんなときに便利なのがapply関数
関数オブジェクトのメソッドのように呼び出します。これは、
配列をthisで表した関数オブジェクトの引数リストに展開して、その関数を呼び出す
という、そのまんまなもの。
たとえば、fooという関数があるとしますです。
function foo(a, b){ return a+b; }
しかし、渡したい引数は配列の各要素。もちろん、
x = [1,2]; foo(x[0], x[1]); // → (ここはjQueryで出力されます)
ともかけますが、不定引数の時に、不定数配列の要素をそれぞれ割り当てるのは、コード書くのがめんどくさいメンテナンス性に欠けるわけで。
というわけで、apply関数を使うとホラこの通り。
x = [1,2]; foo.apply(null, x); // → (ここはjQueryで出力されます)
ほら、簡単でしょ?

え、第1引数のnullは何だって? これは、関数内で"this"を参照したときのオブジェクトに変わるわけです。
実際のfoo関数はthis使ってないので、null渡しても問題ないのです。

その5・textとhtmlの違い[2011.11.23]

jQueryには、textとhtmlの2種類のメソッドがあります。大差ないように見えますが、実は大きな違いがあります。
まず、取得(引数なしでメソッドを呼び出す)のときの違いは、
  • html
    • 囲まれているタグも含めて出力する
    • エスケープコードはそのまま出力する(一部変換して出力)
  • text
    • 囲まれているタグは削除して出力する
    • エスケープコードは変換されて出力する
html()での取得例
この文書をクリックすると、
 html() の結果が取得できますなんちゃって
text()での取得例
この文書をクリックすると、
 text() の結果が取得できますなんちゃって
結構内容が違います。では、設定(引数月でメソッドを呼び出す)時の違いは、
  • html
    • HTMLとして挿入
  • text
    • 単純なテキストとして挿入(エスケープコードも再変換)
html()での設定例
text()での設定例
となります。結構違う結果となります。これを応用すれば、HTMLエスケープ文字を単純な文字に置き換え、なんてのも簡単にできます。

そのX・参考にしたものはこちらをどうぞ1[2011.11.12]

  • Javascript第5版
    通称「サイ本」。この本がJavascript解説本のデファクトスタンダードといえる存在。
    ただし、原書の著者は特徴ある文体で有名なので、次の「パーフェクトJavascript」を押さえてからの方がいいかも。

そのX・参考にしたものはこちらをどうぞ2[2011.11.12]

  • パーフェクトJavascript
    Javascriptの言語使用を平易な言葉&日本語で解説している名著です。
    この本をマスターできれば、サイ本への理解が進むと思います。
    また、jQueryやHTML5の解説もあり、周辺情報収集もできます。