こんなHTMLがあるとします。
idに**が付いてますね。
<input id="foo0" type="text" />
<input id="foo1" type="text" />
<input id="foo2" type="text" />
こういうIDに括弧が付いたモノに対して
普通の#付きのjQueryセレクタでは選択できません。
$("#foo0"); // 取れません
属性フィルタattribute=valueでとるのが正解です。
$("id='foo[0]'");
0311更新：
もし具体的なタグがわかってあれば、
それを指定することでパフォーマンスを向上できます。
上記の例で言うと
$("inputid='foo[0]'");
このほうが速いです。
指定した値が配列中にあれば、そのインデックスを返します。
配列に存在しなければ戻り値は-1になりますので注意してください。
var array = ["a", "b", "c"];
if ($.inArray("d", array) == -1) {
// d is not in array
}
下記のコードは間違いですよ。。。
if ($.inArray("d", array)) {}
パラメータで渡された値が配列であるかどうかを判別します。
戻り値はtrueかfalseです。
jQueryでマウス右クリックを無効にする方法です。
"contextmenu"のイベントはjQueryのドキュメントには乗ってませんが、
それのハンドラでreturn falseすることで簡単に実現できます。
$("document").bind("contextmenu", function(){
return false;
});
jQueryのAPIを一枚の紙にまとめたものです。
ノートはPDFファイルで、ダウンロードすることができます。
jQuery APIノート
作者はMattさんです。ありがとうございました。
他にもHTML、CSS、JavaScript、PHP、Mac、Windows、Photoshop、Browserなどのノートが満載です。
HTML, CSS, PHP, Javascript And More Cheat Sheets
興味のある方は直接作者のサイトを参照してください。
iframeでXMLを読み込んた場合、XMLのdocumentを正しく指定すれば
普通のDOM操作のようにXMLに対して操作できます。
FirefoxとIEの取り方が異なるため、その方法を紹介します。
こんなXMLファイルの中の各name要素のテキストを取るとします。
<?xml version=”1.0″ encoding=”utf-8″ ?>
<games>
<game>World of Warcraft</game>
<game>Warcraft III</game>
<game>StarCraft</game>
<game>Final Fantasy</game>
</games>
$("iframe").attr("src",xmlUrl).one("load", function(){
var xmlDocument = this.contentWindow.document.XMLDocument;
$(xmlDocument).find("game").each(function(){
var game = $(this).text();
// ほかの処理
});
});
$("iframe").attr("src",xmlUrl).one("load", function(){
var xmlDocument = this.contentWindow.document.ActiveElement;
$(xmlDocument).find("game").each(function(){
var game = $(this).text();
// ほかの処理
});
});
xmlUrlは実際XMLファイルのURLです。
下記の英語掲示板で見つけたんです。
How to Get XML Document from iFrame
jQueryのeach()は関数のためcontinueやbreakなどのループ制御文は使えません。
グーグル先生に聞いたら代わりの方法が見つかりました。
そもそもIDというのは一つのページ内でユニークなはずですが、
何らかの理由で同じIDを持つ形になったとしましょう。
その場合普通のjQueryの#idセレクタでは一つの要素(順番的に最初に合致した要素)しか選択できません。
そこで[id=xx]の形で属性フィルタで全ての選択することができます。
以下サンプルコードです。
$("#foo").css("background-color","gray");
$("[id=bar]").css("background-color","green");
<h2>use #id selector</h2>
<input type="text" id="foo" value="Text1" />
<input type="text" id="foo" value="Text2" />
<h2>use attribute selector *id=xx*</h2>
<input type="text" id="bar" value="Text3" />
<input type="text" id="bar" value="Text4" />
<input type="text" id="bar" value="Text5" />
以下のjsfiddleで実際実行してみてくださいー
FireQueryはFirebugを拡張したアドオンで、jQueryをよりよくサポートできるんです。
jQueryのオブジェクトをコンソールで確認したり、マウスオーバーで画面上のレーヤーで表示されたりして
大変便利になります。
これ以外でもjQuerifyというやつがあって、
jQueryが適用されてないhtmlにもfirebugのコンソールで直接jQueryのコードを書いてそのまま動作確認ができます。
まずfirebugのconsoleのjQuerifyをクリックします。するとjqueryが適用されたと表示されます。
次は「>>>」のところでjquery文を書けばOKです。
今のlive関数は二番目の引数にデータを渡すことができません。
bindとliveのシグネチャーは以下になります。
bind(type, *data*, fn)
live(type, fn)
いざ使おうと思って単純にbindをliveに変換したところアプリは動かなくなっちゃいました。
回避方法はいろいろありますが、以下の記事によりますと
jQuery 1.3.3ではliveにもdataを渡すことができるそうです。
作者はjQueryのコアコントリビュートだそうです。
jQuery Edge: Live Events now with Data
今まで平気に$(expression)を使ってきましたが、
この二番目のcontextパラメータでセレクタの範囲を決まることができます。
この関数はjQueryのコア関数で幅広く使われ、
もっとも一般的な使い方はcontextを省略したものでしょう。
$("div")
contextが何も指定されなければ、$()関数は現在のHTMLのDOMエレメントを検索する。
逆にDOMエレメントやjQueryオブジェクトなどのcontextが指定されれば、expressionはそのcontextに対して合致するものを捜します。
簡単にいうとfind()関数と似ています。
実践でいうと以下の二つは同じ機能をしています。
$("body").find("div");
$("div,body");