aspigのブログ

aspigのブログ

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

Amebaでブログを始めよう!
まず説明を読む。

エレメントの集合から、指定したポジションのエレメントだけを取り出す。
ゼロからlength-1までのうちから、合致する位置にあるエレメントだけが戻される。

言い回しが意味不明だ。エレメントの集合ってなんだ?
サンプルに try とか catch とかまだ見たことない書式が入っていたので省いたシンプル仕様コードが以下。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryを始めてみる</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("p").eq(1).css("color", "red");
});
</script>
</head>
<body>
<p>これが最初のブロックです。</p>
<p>ここが2番目(ポジション=1)</p>
<p>ここは3番目のブロックになります</p>
</body>
</html>

これでも同じ結果になった。
つまり 全ての <p>タグの0,1,2の1番目のcss.color=redとしたわけですね。
これは分かります。
きっと $("p.aclass") とかすると、aclass クラスのあたった<p>タグの2つめを選択できるのでしょう。
・・・一応やってみる。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryを始めてみる</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("p.aclass").eq(1).css("color", "red");
});
</script>
</head>
<body>
<p>これが最初のブロックです。(no-classの1番目)</p>
<p class="aclass">ここが2番目(aclassの1番目)</p>
<p class="aclass">ここは3番目(aclassの2番目)</p>
<p>ここが4番目(no-classの2番目)</p>
<p class="aclass">ここが5番目(aclassの3番目)</p>
<p>ここが6番目(no-classの3番目)</p>
</body>
</html>

これで<p class="aclass">のPOSITION-1(2番目)が赤くなる想定。
表示の結果「ここは3番目(aclassの2番目)」という具合に、想定の通りの結果となった。

しかしまだ出てきてないのに、try~catch とか気軽に出さないで欲しい・・・

全然分からなかった context の意味。とほほのjQuery入門』を見てみた。

要素を $(selector, context) の形式で指定した場合の context を返します。context が指定されていない場合は document が返されます。
var = $("input", document.form1).context.nodeName;    // FORM

やっぱり分からない。
ウェブ帳』というページを見てみる。

jQuery(expression, context)
この関数は、エレメントとマッチさせるCSSセレクターを含む文字列を受け取る。
基本の関数となります。ほとんどのjQuery構文がこの形であるか、なんらかで利用しております。
利用方法は合致するエレメントを抽出するためのexpressionを受け取ることである。
もしcontextが何も指定されなければ、$()関数は現在のHTMLのDOMエレメントを検索。
逆に指定されれば、expressionはそのcontextに対して合致するものを検索。

第二引数 context で指定されたDOMエレメントの中の expression を検索する、という意味ですよね。
これはちょっと違う話しか?でも、これで前記事で不明だった $("ul", document.body) の意味もクリアです。
まぁ結局、DOMエレメント.context.nodeName ってするとそのタグ名が取り出せる、ということは分かった。
他はまたこの表現が出てきた時に考えることとして、詳細は一旦保留することにした。(もう飽きたから)

特定のドキュメントコンテクストを抜く出す?

jQueryオブジェクトが持つDOMノード上でのオブジェクトを保持します。

ってどういうことだ?
全然分からないのでサンプルコードを見てみる。

【jquery部】
$("ul")
.append("<li>" + $("ul").context + "</li>")
.append("<li>" + $("ul", document.body).context.nodeName + "</li>");
【HTML部】
Context:<ul></ul>
【表示結果】
Context:
.・[object HTMLDocument]
.・BODY

なんだろ???一生懸命考えてみよう。
<ul>タグの中身が無いときに <ul>タグの context が何か?っていうと、[object HTMLDocument] ってこと?
まぁHTMLドキュメントだろうとは思うけど・・・
んで、次のはなんだろ? 
 $("ul", document.body) ってなんだ???
全然わからないので、他のサイトでの説明を探してみよう。
jquery入門』とういページにサンプルがあった。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../css_js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var test = $("div", document.body);
$("div").text(test.context);
});
});
</script>
</head>
<body>
<button>click</button>
<div></div>
</body>
</html>

えぇ~っと・・・
var test = $("div", document.body) という行はきっと bodyの中の<div>タグを変数 test に入れるってことだろぉ。(と勝手に解釈)
次の行は $("div").text(test.context) <div>タグにtest.contextのテキスト、つまり<div>タグのcontextをテキスト形式で入れる?
なんだなんだ?
結局全然わからない・・・

次に続く