JQuery真的很牛 （二）

　　第四部分：JQuery的迭代

1）：
如何判斷對象是否存在，JQuery選取器返回的是一個對象數組，調用text(),html() ,click（） 之類方法的時候其實是對數組中每個元素迭代調用每個方法，因此即使通過id選擇的元素不存在也不會報錯，如果需要指定的id是否存在，應該寫：

   <script type="text/javascript">
        $(function () {
            var result = $("#btn12");
            if (result.length <= 0)
            { alert("沒有找到指定的按鈕"); }
            else {
               result.mouseover(function () { alert("移上來了。"); });
            }
        });
</script>
在body裡邊寫點這個就行啦：
<body>
<input type="button" id="btn1" class="waring" value="確定" />
<input type="button" id="btn2" class="waring" value="取消" />
</body>
2）節點的遍曆：
【1】.next()方法用於擷取節點之後的第一個同輩元素，例子如下:
在body中寫幾個div
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</body>
 <script type="text/javascript">
        $(function () { $("div").click(function () { alert($(this).next().text()); }) });
    </script>
這樣就可以了在點擊每個div時都會顯示出它的下一個div的Text內容。

【2】而.nextAll()方法是把它後的所有內容顯示出來也包含在包含在它裡面的元素（）

也可以給它再加上過濾器在.nextAll("div")也就是只顯示是div元素裡邊的內容。

那麼對於這個節點都給遍曆了有什麼用呢？
下面算個小用處吧：可以在點某個div時讓它後面的所有div的background變為紅色具體代碼如下：

$(function () { $("div").click(function () { $.each($(this).nextAll("div"), function () { $(this).css("background", "red"); }); }) });

注意上邊的其實不用$.each();因為對於JQuery中它會自動迭代因此只用如下所寫就可以啦：
$(function(){$("div").click(function(){$(this).nextAll("div").css("background","red");});});
【3】siblings();用於獲得所有的同輩的元素：不管是後邊的還是前邊的注意上邊的.nextAll().next()、專指的是在本元素的後面的元素。
$(function(){$("div").click(function(){$(this).css("background","red");$(this).siblings("div").css("backgroud","yellow");})});

【為顯示下JQuery的鏈式編程上面的代碼還可以這樣寫如下：$(function(){$("div").click(function(){$(this).css("background","red"）.siblings("div").css("backgroud","yellow");})});也就是把對於一個對象的事件都給它串到一起一直點下去都沒問題 。但為減少出錯還是一個一個寫比較安全。
】

                             
   　　　　　　　　　　　　　　　　　　　　 第五部分  過濾選取器
一個小部分：
1):  :first選取第一個元素。如：$("#div:first") 選取第一個<div>。
2):  :last選取最後一個元素。$("#div:last")選取最後一個<div>。
3):  :not （選取器）選取不滿足“選取器”條件的元素。
$("input:not(.myClass)") ，就是要選取樣式名不是myClass的<input>。
4）：even ,:odd。選取索引是奇數，偶數的元素：$("input:even")選取索引是奇數的<input>

5)::eq(索引序號)，gt(),lt()選取索引等於，大於，小於索引序號的元素，比如$("input:lt(5)")選取索引小於5的<input>

例子：表格隔行變色除標題外的行:代碼如下：
 <script type="text/javascript">
        $(function () {
            $("#test tr:first").css("fontSize", "36"); $("#test tr:last").css("color", "red"); $("#test tr:gt(0):lt(3)").css("fontSize", "20");
            $("#test tr:gt(0):even").css("background", "red");
            $("#test tr:gt(0):odd").css("background", "yellow");
        });
       
    </script>

6):不僅可以使用選取器進行絕對位置，還可以進行相對定位，只要在$()指定第二個參數第二個參數為相對的元素。$("ul",$(this)).css("background","red");
例子修改點擊行的所有tdr 背景色。代碼如下：
<script type="text/javascript">
        $(function () { $("#t1 tr").click(function () { $("td", $(this)).css("background","red"); }); });
    </script>
body中這樣寫就OK啦
<table id="t1">
<tr><td>sdfsd</td><td>sdfsdfsdf</td><td>sdfsdfsdfsd</td></tr>
<tr><td>枯枯頂替頂替頂替</td><td>極一奪奪在</td><td>sdfsdfsdfsd</td></tr>
</table>
二個小部分：

1）屬性過濾選取器：

$("div[id]"); 選取有id屬性的<div> ——$("div[div1]")

$("div[title=test]")選取title屬性為"test" 的div

$（"input[name=abc]"）也可以$("input[name!=test]")
2)表單對象選取器（過濾器）
$("#form1 :enable")選取id為form1的表單內所有啟用的元素。
$("#form1:disabled")選取id為form1的表單內所有禁用的元素。
$("input checked") 選取所有選中的元素（Radio.CheckBox）
$("select :selected")選取所有選中的選項元素（下拉式清單）；
小例子：當把有的checkbox選中之後再點一按鈕時將其文本顯示出來：
在bodyk 這樣寫：
<body>
<input type="checkbox" value="北京"/>北京<br />
<input type="checkbox" value="南京"/>南京<br />
<input type="checkbox" value="東京"/>東京<br />
<input type="checkbox" value="西安"/>西安<br />
<input type="button" value="顯示選中文本" />
</body>

JQuery指令碼這樣寫：
 <script type="text/javascript">
        $(function () {
            $("input[value=顯示選中文本]").click(function () {
                alert($("input:checked").val());
            });
        });
    </script>
注意在$("input:checked")：兩邊一定不要有空格呀；並且這樣只會顯示出第一個選中的項這要用下$.each().迭代下。

body中這樣寫：
<body>
<input type="checkbox" name="names" value="孫業寶" />孫業寶<br />
<input type="checkbox" name="names" value="王丹丹" />王丹丹<br />
<input type="checkbox" name="names" value="章超" />章超<br />
<input type="checkbox" name="names" value="陳海波" />陳海波<br />
<p id="showname"></p>
</body>

而指令碼就這樣寫：
 <script type="text/javascript">
        $(function () {
            $("input[name=names]").click(function () {
                var arr = new Array();
                $("input[name=names]:checked").each(function (key, value) {
                    arr[key] = $(value).val();
                });
                $("#showname").text("你一共選擇了"+arr.length +"項"+arr.join(","));
            });
        });
    </script>
3）

$(":input") 選取所有<input>,<textarea>,<select>,<button>的元素。和
$("input")不一樣前者是所有的原來是input 的控制項全選取，而後者只選取
$(":text")與$("input[type=text]")等價只不過簡單用即選取所有單行文字框。