jQuery 小節

一、主流的js庫有prototype、dojo、ExtJS、jQuery。
jQuery是一個JavaScript庫。提供更簡潔，更快速的方法來操作頁面的元素。
    網址：http://jquery.com   當前版本1.4.4


二、核心函數的使用：$代表jQuery對象。
 1. $(expr[,context]) 工廠函數：根據指定的表達式查找所有匹配的元素，並存放到jQuery對象中。
    ·參數expr: 是一個由CSS選擇器組成的表達式
    ·參數context: 指定查找的上下文，默認是整個文檔。


 2. $(html): 根據提供的原始HTML標記字符串，創建由jQuery對象包裝的DOM元素。
           document.createElement("img"); 


 3. $(elements)：把傳入的DOM元素轉成jQuery包裝的對象並放入jQuery對象中。


 4. $(callback): 是 $(document).ready(callback)的簡寫。用得少。
     常用方式：$(document).ready(callback);


 5.  對象訪問：each(callback)  以每一個匹配的元素作爲上下文來執行一個函數。 


三、選擇器：
 基本
 1. *            匹配所有元素。多用於結合上下文來搜索。
 2. .class       根據給定的類匹配元素。 如 $(".myClass")
 3. element      根據給定的元素名匹配所有元素。如 $("input")
 4. #id          根據給定的ID匹配一個元素。如 $('#myId')
 5. selector1,selector2,selectorN  將每一個選擇器匹配到的元素合併後一起返回。


 層次
 6. ancestor descendant   在給定的祖先元素下匹配所有的後代元素 (匹配後代節點)
 7. parent > child        在給定的父元素下匹配所有的子元素  (匹配子節點)
 8. prev + next           匹配所有緊接在 prev 元素後的 next 元素 (匹配兄弟節點)
 9. prev ~ siblings       匹配 prev 元素之後的所有 siblings 元素 (匹配兄弟節點)


 過濾：通過特定的過濾規則來篩選出所需的DOM元素，該選擇器都以”:”開頭。
基本過濾  :first、:last、:not、:even、:odd、:eq、:gt、:lt、:header、:animated
內容過濾  :contains、:empty、:has、:parent
可見性過濾:hidden、:visible
屬性過濾  [attName]、[attName=value]、 [attName!=value]、 [attName^=value]、 [attName$=value]、 [attName*=value]、 [selector1][selector2][selectorN]
子元素過濾   :nth-child、:first-child、:last-child、:only-child
表單對象過濾選擇器： :input、:text、:password、:radio、:checkbox、:submit、:reset、:image、:file、:hidden
表單對象屬性過濾選擇器： :enabled、:disabled、:checked、:selected


四、操作元素的屬性
   attr(name)         取得第一個匹配元素的屬性值
   attr(properties)   將一個“名/值”形式的對象設置爲所有匹配元素的屬性
   attr(key,value)    爲所有匹配的元素設置一個屬性值
   attr(key,[fn])     爲所有匹配的元素設置一個計算的屬性值
   removeAttr(name)   從每一個匹配的元素中刪除一個屬性


五、操作html的方法
1. html代碼
      html()       取得第一個匹配元素的html內容。
      html(val)    設置每一個匹配元素的html內容。
2. 文本
      text()       取得所有匹配元素的內容。
      text(val)    設置所有匹配元素的文本內容
3. 值
      val()        獲得第一個匹配元素的當前值。
      val(val)     設置每一個匹配元素的值。


六、DOM文檔處理
1. 內部插入
   append(content),  appendTo(content),  prepend(content), prependTo(content).
2. 外部插入
   after(content), before(content), insertAfter(content), insertBefore(content).
3. 包裹：wrap()、wrapAll()
4. 替換：replaceWith(content)、
5. 刪除：empty()、 remove([expr])、detach([expr])
6. 複製：clone()、clone(true)


七、CSS操作
css(properties)     把一個“名/值對”對象設置爲所有匹配元素的樣式屬性。屬性名包含 “-”的話，必須使用引號
css(name,value)     在所有匹配的元素中，設置一個樣式屬性的值


八、事件
頁面載入事件：ready(fn) 
事件處理： bind , one , trigger, triggerHandler, unbind
事件委派： live(type,[fn]), die([type],[data])
事件切換： hover(over, out),  toggle(fn, fn2, [fn3, fn4, ...]) 
事件：
load([fn]) 、 unload([fn])、 error([fn])、
blur([fn])、focus([fn])、resize([fn])、scroll([fn])、select([fn])、
change([fn])、click([fn])、dbclick([fn])、 submit([fn])、
keydown([fn])、keypress([fn])、keyup([fn])、
mousedown([fn])、mousemove([fn])、mouseout([fn])、mouseover([fn])、mouseup([fn])


九、效果
1. 基本
   show()            顯示隱藏的匹配元素
   show(speed,[callback])   動畫顯示所有匹配的元素，顯示完成後可選地觸發一個回調函數,三種預定速度之一的字符串("slow", "normal", "fast")或表示動畫時長的毫秒數值(如：1000)
   hide()、hide(speed,[callback])
   toggle() 、toggle(switch)、toggle(speed, [callback])
2. 滑動
    slideDown(speed, [callback])
    slideUp(speed,[callback])
    slideToggle(speed, [callback])
3. 淡入淡出
    fadeIn(speed, [callback])
    fadeOut(speed, [callback])


十、AJAX的支持
1. $.ajax([options])               jQuery底層AJAX實現
2. load(url, [data], [callback])   載入遠程HTML文件代碼並插入至DOM中
    默認使用 GET 方式，傳遞附加參數時自動轉換爲POST方式
3. $.get(url, [data], [callback], [type])   通過GET請求載入信息
4. $.getJSON(url, [data], [callback])       通過GET請求載入JSON數據
5. $.getScript(url, [callback])             通過GET請求載入並執行一個JS文件
6. $.post(url, [data], [callback], [type])  通過POST請求載入信息，如果響應類型爲json，自動轉換成JSON對象。


7. 事件：ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)


8. $.ajaxSetup([options])  設置全局AJAX默認選項: $.ajaxSetup({cache:false});
9. serialize()             序列化表單內容爲字符串(名=值&名=值)
10. serializeArray()       序列化表單內容爲JSON數組結構數據({"名"：值, "名": 值})


十一、插件應用
1. 表單驗證插件：
2. 官方UI：常用組件：Datepicker、Dialog、Tabs
    1) 添加插件JS、某個主題的樣式表和圖片：
        jquery-ui-1.8.1.custom.min.js、jquery-ui-1.8.1.custom.css、images
3. 數據表格插件： jqGrid
4. 數據表格排序插件：tablesorter