jquery 總結（1）

1、jquery的由來.

     jquery是為了簡化javascript的開發，而封裝了很多預定義的物件和實用函式，從而使javascript的使用更加方便快捷，能幫助使用者建立高雅度互動的Web 2.0特性的富客戶端頁面，並且相容更多的瀏覽器
     現在像javascript庫，除了jquery還有  MooTools  Prototype   Dojo   YUI  EXT_JS  DWR  。
     jquery的宗旨就是寫更少的程式碼，做更多的事（“write less do more”）
     它是輕量級的js，壓縮有隻有21K
     jQuery是一個快速的，簡潔的javaScript庫，使使用者能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX互動。
     jQuery能夠使使用者的html頁保持程式碼和html內容分離，也就是說，不用再在html裡面插入一堆js來呼叫命令了，只需定義id即可。

2、jquery簡單的例子
    <script  src="jquery.js"></script>
    <script  type="text/javascript">
         $(document).ready(function(){
             alert("歡迎學習jquery");
         });
   </script>
3 什麼是jQuery物件？
 jquery物件就是通過Jquery包裝dom物件後產生的物件
 jquery物件是jquery獨有的，
 注意：以後我寫程式碼的時候就會省略匯入包的過程，只體現主要步驟
 eg:  <input type="text" id="username" name="username"/>
   <script type="text/javascript">
   //通過javascript
   alert(document.getElementById("username").value);
   //通過jquery
   alert($("#username").val());
   </script>
 約定：如果獲取的是 jQuery 物件, 那麼要在變數前面加上 $.  
   var $variable = jQuery 物件
   var variable = DOM 物件
4、DOM物件 -----> JQuery物件  ($("#text"))-----獲取id="text"的元素  必須要有“#”
 <input type="text" id="username" name="username"/>
  <script type="text/javascript">
  //獲取dom物件
  var username = document.getElementById("username");
  //dom物件--->Jquery物件
  $username = $(username);
  </script>
5、JQuery物件----->DOM物件
 <input type="text" id="username" name="username"/>
  <script type="text/javascript">
  //獲取Jquery物件
  var $username = $("#username");
  //方法一：Jquery物件--->dom物件
  var username = $username[0];
  //方法二：Jquery物件--->dom物件
  var username = $username.get(0);
  </script>
6、Jquery選擇器（重點）
 1、基本選擇器
    基本選擇器是 jQuery 中最常用的選擇器, 也是最簡單的選擇器, 它通過元素 id, class 和標籤名來查詢
    DOM 元素(在網頁中 id 只能使用一次, class 允許重複使用).
    (1)#id  用法: $(”#myDiv”);  返回值  單個元素的組成的集合
       eg: <input type="text" id="username" name="username"/>
    <script type="text/javascript">
    var $username = $("#username");//通過id=“username”所獲得input元素的組成集合
    </script>
   
 (2)、Element  用法: $(”div”)     返回值  集合元素
  eg:  <input type="text" id="username" name="username"/>
  eg:  <input type="text" id="userpwd" name="userpwd"/>
    <script type="text/javascript">
    $("input")  --->即獲取所有的input元素。要想獲取每個的值，則需要遍歷該元素 
    </script>
   
 (3)、class   用法: $(”.myClass”)      返回值  集合元素
  eg:  <input type="text" class="text" name="username"/>
  eg:  <input type="text" class="text" name="userpwd"/>
    <script type="text/javascript">
    $(".text")  --->即獲取所有的class="text"元素。要想獲取每個的值，則需要遍歷該元素 
    </script>
 (4)、*   用法: $(”*”)      返回值  集合元素
   eg:  <script type="text/javascript">
    $("*")  --->返回document所有的元素
    </script>
 (5)、selector1, selector2, selectorN      用法: $(”div,span,p.myClass”)    返回值  集合元素
      說明: 將每一個選擇器匹配到的元素合併後一起返回.你可以指定任意多個選擇器, 並將匹配到的元素合併到一個結果內.
   其中p.myClass是表示匹配元素p class=”myClass”
 2、層次選擇器
  1 、ancestor descendant
    用法: $(”form input”) ;   返回值  集合元素
    說明: 在給定的祖先元素下匹配所有後代元素.這個要下面講的”parent > child”區分開.
    eg: <select id="myselect">
     <option>選項一</option>
     <option>選項二</option>
     <option>選項三</option>
    </select>
     <script type="text/javascript">
     $("select option");   取所有的後輩元素(包括option  text) 
     </script>
  2、parent > child用法: $(”form > input”) ;    返回值  集合元素
    說明: 在給定的父元素下匹配所有子元素.注意:要區分好後代元素與子元素
    eg:<select id="myselect">
     <option>選項一</option>
     <option>選項二</option>
     <option>選項三</option>
    </select>
     <script type="text/javascript">
     $("select option");   取所有的子元素(包括option 不包括 text) 
     </script>
  3、prev + next
    用法: $(”label + input”) ;   返回值  集合元素
    說明: 匹配所有緊接在 prev 元素後的 next 元素
  4、prev ~ siblings
    用法: $(”form ~ input”) ;    返回值  集合元素
    說明: 匹配 prev 元素之後的所有 siblings 元素.注意:是匹配之後的元素,不包含該元素在內,並且siblings匹配的是和prev同輩的元素,其後輩元素不被匹配.
    注意:  (“prev ~ div”) 選擇器只能選擇 “# prev ” 元素後面的同輩元素; 而 jQuery 中的方法 siblings() 與前後位置無關, 只要是同輩節點就可以選取
 3、過濾選擇器
  基礎過濾選擇器
   1、:first 用法: $(”tr:first”) ;   返回值  單個元素的組成的集合
      說明: 匹配找到的第一個元素
   2、:last 用法: $(”tr:last”)   返回值  集合元素
      說明: 匹配找到的最後一個元素.與 :first 相對應.
   3、:not(selector) 用法: $(”input:not(:checked)”)返回值  集合元素
     說明: 去除所有與給定選擇器匹配的元素.有點類似於”非”,意思是沒有被選中的input(當input的type=”checkbox”).
   4、:even 用法: $(”tr:even”)   返回值  集合元素
     說明: 匹配所有索引值為偶數的元素，從 0 開始計數.js的陣列都是從0開始計數的.例如要選擇table中的行,因為是從0開始計數,所以table中的第一個tr就為偶數0.
   5、: odd 用法: $(”tr:odd”) 返回值  集合元素
      說明: 匹配所有索引值為奇數的元素,和:even對應,從 0 開始計數.
   6、:eq(index) 用法: $(”tr:eq(0)”)    返回值  集合元素
      說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裡面的是索引值,不是元素排列數.
   7、:gt(index) 用法: $(”tr:gt(0)”)    返回值  集合元素
     說明: 匹配所有大於給定索引值的元素.
   8、:lt(index) 用法: $(”tr:lt(2)”)    返回值  集合元素 
      說明: 匹配所有小於給定索引值的元素.
   9、:header(固定寫法) 用法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素
      說明: 匹配如 h1, h2, h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.
      eg:  <h1>標題一</h1>
        <input type="text" id="username" name="username"/>
        <script language="javascript">
        $(”:h1”).css(”background”, “#EEE”); --吧所有的標題都變成“#EEE”的背景色
        </script>
   10、:animated(固定寫法)   返回值  集合元素
    說明: 匹配所有正在執行動畫效果的元素