jQuery(elements)

同じようなのが続く・・・
以下のソースを書いてみる。

<!doctype html>

<head>

<title>jQueryを始めてみる</title>

$(document.body).css("background","black");

</script>

</head>

<body>

</body>

</html>

背景が黒くなるはず・・・　　ならない。
はっ！？もしかして<body>タグがまだ読み込まれる前に実行してしまっているからではないか？
と思いつき <body>タグの後ろに移してみる。

<!doctype html>

<head>

<title>jQueryを始めてみる</title>

</head>

<body>

</body>

$(document.body).css("background","black");

</script>

</html>

おぉっ！背景が黒くなりました。
って事は前項の　jQuery(html, [ownerDocument])　も同じだろ。ってことでやってみた。

<!doctype html>

<head>

<title>jQueryを始めてみる</title>

</head>

<body>

</body>

$("<div><p>Hello</p></div>").appendTo("body");

</script>

</html>

「Hello」と表示された。
なぁるほどぉそういうことか。

でも確か jquery は、なんか最後に実行するようにする書き方があったような・・・
まぁそのうち出てくるだろってことで、一旦解決とします。

jQuery(html, [ownerDocument])

２番目は「jQuery(html, [ownerDocument])」である。
読んでは見たが相変わらず意味不明だが、とりあえずサンプルを動かして見ることに。
試しに書いてみたソースコードは以下の通り。

<!doctype html>

<head>

<title>jQueryを始めてみる</title>

$("<div><p>Hello</p></div>").appendTo("body");

</script>

</head>

<body>

</body>

</html>jQuery(html, [ownerDocument])

これで<body>タグ内に <div><p>Hello</p></div> が表示されるはず・・・

何も表示されない。
打つ手が無いので、一旦保留。

jQuery(expression, context)

これからは、「jQuery日本語リファレンス」を読み進めていくことにする。
まず一つ目、ＣＯＲＥの「jQuery(expression, context)」を見てみよう。

この関数は、エレメントとマッチさせるCSSセレクターを含む文字列を受け取る。
jQueryの核になる関数である。jQueryの全てはこの関数を基本にしているか、もしくは何がしかの形で使っている。この機能の最も基本的な利用方法は、合致するエレメントを抽出するためのexpression（大抵はCSSを含む）を受け取ることである。
もしcontextが何も指定されなければ、$()関数は現在のHTMLのDOMエレメントを検索する。逆にDOMエレメントやjQueryオブジェクトなどのcontextが指定されれば、expressionはそのcontextに対して合致するものを捜します。
expressionの文法については、Selectorsのページを参照。

う～ん、何言ってるかさっぱりわからん。
そもそも用語が分からな過ぎる。
エレメントってなんだ？
『html javascript エレメントってなに？』ってググってみる。

「Yahoo!知恵袋」に答えが書いてあった。

エレメントとは、HTMLを構成する要素のことです。で、その要素の特性や情報の定義を記述しているのがHTMLタグです。つまり、エレメントとはHTMLタグで表記している全てのもののことです。ちなみに、HTMLやBODY、コメント（）もエレメントに含まれます。

なるほど、要はタグとその中身ですね。
じゃぁ次に、CSSセレクタってなに？
このページに説明がありました。

cssで、div.trigger { cursor: pointer; } と書いた場合の、div.trigger の部分の事ですね。
ということで一行目が理解できる？

この関数は、エレメントとマッチさせるCSSセレクターを含む文字列を受け取る。

いや．．．全然わかんない。
単語は全部わかるのに、分の意味が分からない。
サンプルを見てみよう。

サンプル1

documentの最初のform内にある、全てのinputタグでtypeがradioのものを抽出する。

$("input:radio", document.form[0]);

なるほど、何となく分かるけど・・・
更に次のサンプルは？

サンプル2

AJAXで戻ってきたXMLから、全てのdivを抽出する。

$("div", xml.responseXML);

いやいや、全然わからないよ。
いきなりAJAXかい！？
もう一つあるようなので、次にいこう。

サンプル3

全てのdocumentの中から、divの中にpが入れ子になっているものを抽出して枠線を付ける。

$("div > p").css("border", "1px solid gray");

を？なんとなく分かるぞ？
<div><p>xxxx</p></div>の<p>タグ全部を意味するってことだね。

ふ～ん、こうやってエレメント(？)を選択できるのか。
既にやった表示非表示のソースにも似たような感じのが出てましたね。

$('div.example').hide();

とか。これの、$('div.example')　の部分の話しだね。
でも結局いまのところは、

逆にDOMエレメントやjQueryオブジェクトなどのcontextが指定されれば、expressionはそのcontextに対して合致するものを捜します。

という文章は意味不明のままだ。
ちなみにＤＯＭってなんだろ？
いろんなページを見てみたけど、イマイチよく分からない。
要約して言えば、ＨＴＭＬやＸＭＬなどのタグ？を規定する仕様のこと？
今はまぁそんな理解でいいや、そのうちわかるだろ。

ということでこの件について基礎は分かったけど、応用がいろいろありそうだ。
それはまた後々・・・

aspigのブログ

ブログの説明を入力します。

jQuery(elements)

jQuery(html, [ownerDocument])

jQuery(expression, context)