JQuery真的很牛 （一）

JQuery簡介
一：普通的JavaScript的缺點是:每種控制項的操作方式不統一，不同瀏覽器下有區別，要編寫跨瀏覽器的程式非常麻煩。因此出現了很多對JavaScript的封裝，比如Prototype ,Dojo  ,ExtJS   ,JQuery 等，這些庫對JS進行了封裝，簡化了開發。這些庫是對JS的封裝，也就是咱們調用JQuery的一句話，而在JQuery內部這句函數就幫我們調用Js中的代碼幾十句，因為JQuery就是JavaScript文法寫的一些函數類，內部仍然是調用JavsScript實現的，所以並不是代替JavaScript的。使用JQuery的代碼，編寫JQuery的擴充外掛程式等仍然需要JavaScript的技術，JQuery本身就是一堆JS函數。
二：它能做做呢？尺寸小，使用簡單方便（Write Less Do More）鏈式編程（$("#div1").Draggble().hide().fly()）隱式迭代（自動對於多個元素進行迭代方法調用），屏蔽瀏覽器差異相容性好（IE6.0+ ,FF2+ ,Safari 3.0+  ,Opera9.0+  ,Chrome ）   外掛程式豐富，開源，免費。在這幾個中JQuery-1.4.1-Vsdoc.js是在輸入東西時自動提示功能效果。

JQuery是最火的JavaScript庫，已經被整合到VS2010了，得到了MS的支援，
 
                                 第一部分：簡單的JQuery 
一：$(document).ready(function(){載入完畢！});——簡寫方式[$(function(){alert("載入完畢！");});]   在JQuery中註冊事件的函數，和普通的Dom不一樣，不需要在元素上標記onload  onclick  onclientclick等東西了。

二：和onload類似，但是onload只能註冊一次是這樣寫的（window.onload=function(){alert("載入完畢！")}）如果寫多個這樣事件的話也只能執行最後一個它沒有C#中的+=機制，後註冊的取代先註冊的，而ready則可以多次註冊都會被執行。
三：JQuery的ready和Dom的onload的區別：onload是在所有Dom元素分明建完畢，圖片,Css等都載入完畢後才被觸發，而ready則是Dom元素建立完畢後就被觸發，這樣可以提高網頁的響應速度。在JQuery中也可以用$(window).load()來實現onload那種事件調用的時機。
三：JQuery提供的一些函數：
$.map(arr,fn);是對數組arr中每個元素調用fn函數逐個進行處理，fn函數將處理返回，最後得到一個新數組。
例子，得到一個元素值是原數組值二倍的新數組
 var array=[2,3,4];
   var arr=$.map(array,function(item){ return item*2;});
   alert(arr);

但是$.map()不能處理Dictionary式的數組可以用到$.each(dic,value)函數。
var dic={"tom":23,"jery":22};
   $.each(dic,function(key,value){alert(key+"的年齡是"+value);});
當然也可以用$.each()處理一般的數組不過也要寫上key and value 如下：
var array=[2,3,4];
   $.each(array,function(key,value){alert(key+"="+value);});
其結果為：0=2,1=3,2=4.
但是若只用Item 時就會只顯示key的值，這對於我們來說沒有什麼意義。

也可以取到value這時可以用不帶參數的function()而在後面用this關鍵字就可以啦如下
：

var array=[2,3,4];
   $.each(array,function(){alert(this);});結果為：2，3，4。
當用關鍵字this 時用Dictionary也是顯示它的值如下：

var dic={"tom":23,"jery":22};
 $.each(dic,function(){alert(this);});
結果為：23,22.

                           　　　　 第二部分：JQuery對象，Dom對象

1）：
JQuery對象就是通過去時JQuery封裝Dom對象後產生的對象：
alert($('#div1').html()) 。 Dom對象要想通過JQuery進行操作，先要轉換為JQuery對象。如：
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () { alert($("#div1").html()); });
    </script>
</head>
<body>
<div id="div1">你好呀<font color="Red">朋友</font></div>
</body>
【注意】Array是JS語言本身的對象，不是Dom對象，因此不需要轉換為JQuery對象才能用

2）：
$("#div1").html()等價於：document.getElementById("div1").innerHTML;
$("#div1")得到的就是JQuery對象，JQuery對象只能調用JQuery對象封裝的方法，不能調用Dom對象的方法，Dom對象也不能調用JQuery對象的方法，所以alert($("#div1").innerHTML);是錯的，因為innerHTML是DOM對象的屬性。

3）：
將Dom對象轉換為JQuery對象的方法，$(dom對象)；當調用JQuery沒有封裝的方法的時候必須用Dom對象，轉換方法：var domobj=jqobj[0]或者var domobj=jqobj.get(0);例子如下：
$(function (){var div1=document.getElementById("div1");$(div1).html();});

4):
JQuery修改樣式：$("#div1").css("background","red");獲得樣式：
$("#div1").css("background");修改value:$("#txtname").val("abc");獲得value:$("#un").val();類似的還有獲得設定innerText,innerHTML用text()和html()。

                  　　　　　　　　　　　　    第四部分 JQueru選取器

1):
JQuery選取器用於尋找滿足條件的元素，比如可以用$("#控制項id");來根據控制項id獲得控制項的JQuery對象，相當於getElementById();
2):
$("TagName");來擷取所有指定標籤名的JQuery對象，相當getElementByTagName
:例子如下：
<script type="text/javascript">
       // $("p").click(function () { alert("你點我了！我是"); })這句是不能執行的，因為在此時dom元素還沒有載入完畢，這和在dom中把初始化事件放到onload事件中是一樣的。
        $(function () { $("p").click(function () { alert("你點我了！我是"); }) });這也是一種隱式迭代，給所有的選擇出來的元素增加click事件響應。

3）Css選取器。同時選擇擁有相同樣式的多個元素：例子如下
先自己隨便寫一個樣式：
 <style type="text/css">
    .test{background-color:Red}
    </style>
再定義幾個元素：
<p class="test">abc</p>
<p class="test">節能</p>
<p class="test">sdkfsldkfjsdlf</p>
再小試一把就OK啦：
 $(function () { $(".test").click(function () { alert($(this).text()); }); });

4）：多條件選取器：$("p,div,span.menuitem"); 同時選擇p 標籤，div標籤和擁有menuitem樣式的span標籤。注意選取器運算式中的空格不能多也不能少。容易出錯！！
層次選取器：（1）$("div li") 獲得div下的所有li 元素（後代 子 子的子的所有的li 標籤只要是在本div中的）
   （2）：$("div>li") 獲得div下的直接li子項目。
   （3）：$(".Testcss+div")獲得樣式名為Testcss之後的第一個div元素；
   （4）：$(".Testcss~div")  獲得樣式名為.Testcss之後所有的div元素；