selector

これ何がうれしいのか一瞬分からなかったけど、ＨＴＭＬの置き換えみたいなことをするんですね。
なんつぅかテンプレート的な動きというか・・・
サンプルの動きは、Some selectors:<ul></ul> というＨＴＭＬコードの <ul></ul> に対してリスト内容を付加するというものです。
サンプルjquery コードは

$("ul")

.append("<li>" + $("ul").selector + "</li>")

.append("<li>" + $("ul li").selector + "</li>")

.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");
これで中身の無かった <ul>タグの中にリストが入れ込まれる。
<ul>タグが複数ある場合は全てこれが実行される。（ $("ul") としているからであって、ここでクラスやＩＤを指定すれば <ul>タグの特定が出来る )
多分使うときというのは、javascriptで生成されたリストを表示する、という場合なのだろうと思われる。

サンプルコード

<!doctype html>

<head>

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

$(function(){

$("ul")

.append("<li>" + $("ul").selector + "</li>")

.append("<li>" + $("ul li").selector + "</li>")

.append("<li>" + $("div#foo ul:not([class])").selector + "</li>");

});

</script>

<style>

div { width:60px;height:60px;margin:4px;float:left;background-color:blue; }

</style>

</head>

<body>

Some selectors:

<ul>

<li>pre added list 1

<li>pre added list 2

</ul>

</body>

</html>

length

どう見ても size() と同じだ。
違いは何か？調べてみたが分からない。
ただ、size() よりファンクションコールのオーバーヘッドがない分 length の方が速いという記事を見つけたので length を使うことにしよう。

サンプルコード

<!doctype html>

<head>

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

$(function(){

$(document.body).click(function () {

$(document.body).append($("<div>"));

// var n = $("div").size();

// $("span").text("There are " + n + " divs." + "Click to add more.");

var n = $("div").length;

$("span").text("There are " + n + " divs." + "Click to add more.");

});

</script>

<style>

div { width:60px;height:60px;margin:4px;float:left;background-color:blue; }

</style>

</head>

<body>

<span>Click here...</span>

</body>

</html>

size()

今度は size()
説明によると・・・

jQueryオブジェクトのエレメント数を返す。
返される値はjQueryオブジェクトのlengthプロパティと同じである。

どういう事でしょ？
サンプルコードは以下。

$(document.body).click(function () {

$(document.body).append($("<div>"));

var n = $("div").size();

$("span").text("There are " + n + " divs." + "Click to add more.");

}).click();

つまり <div>タグの数を数えているようだ。
上のコードは、<body>タグ内がクリックされると、<div>タグを追加し、<div>タグの総数をカウント。その後 <span>タグの中に<div>タグの数をメッセージと共に表示する。
という感じでしょうか？
自分のコードに入れてみる。

<!doctype html>

<head>

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

$(function(){

$(document.body).click(function () {

$(document.body).append($("<div>"));

var n = $("div").size();

$("span").text("There are " + n + " divs." + "Click to add more.");

}).click();

});

</script>

<style>

div { width:60px;height:60px;margin:4px;float:left;background-color:blue; }

</style>

</head>

<body>

<span>Click here...</span>

</body>

</html>

概ねオッケーです。ほぼ想定通り動きました。
けど、最初から青いボックスがひとつ表示されていること、そしてメッセージの内容が初期の「Click here...」ではなく「There are,,,」の方になっている。
要は、クリックしてないのに勝手に一回実行されてる？って感じです。

なんだろ？ってことでよ～っくソースを見てみると、ひとつ見逃してたものがありました。
それは最後の　}).click();　です。この click() は何をしてるのかな？

この .click()を取ると、上記の問題が解決しました。つまり .click()を取ると最初から青いボックスは表示されないし、初期メッセージも「Click here...」になっています。ということはこの　.click() をつけるとクリックされる前に一回処理される、ということなのか？
イベントしての「前部」のclickは分かるけど、最後についてるこれはなんだろ？
ＤＯＭエレメントの後ろに記述されているので、これはその対象エレメントをクリック（実行）するということと同義だということでしょう。
ただ、書き方として DOMelement.click(........................).click(); というように元々クリックされたら実行する、という前のclickと同じ文中（末）に、自動的にこのエレメントをクリックせよという click() が同時に一行に書かれていることが気持ち悪い。
そのうちなれるんだろぉなぁ～っと前向きに考えることにしよう。

aspigのブログ

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

selector

length

size()