jQuery必知必會

jQuery優點

   輕量級 
   強大的選擇器
   出色的DOM操做的封裝
   可靠的事件處理機制
   完善的Ajax
   不污染頂級變量
   出色的瀏覽器兼容性
   鏈式操做方式
   隱式迭代
   行爲和結構層分離
   豐富的插件支持
   完善的文檔
   開源

 jQuery選擇器是其最核心的部分  分爲四大類

     基本選擇器

     層次選擇器

     過濾選擇器  

     表單選擇器

基本選擇器是最經常使用的選擇器  能夠根據標籤的名字、ID名字或者class名字來選擇元素
#id  根據指定的id來匹配元素
.class   根據制定的類名字來匹配元素
element   根據指定的元素的名字匹配元素
*   匹配全部的元素
selector1,selector2,…selectorN   將每個匹配到的元素合併到一塊兒返回

層次選擇器
jQuery(‘ancestor   descendant’):選取ancestor中的全部的descendant(後代)元素
jQuery(‘parent>child’):選取parent中的全部的child(子元素)
jQuery(‘prev+next’):選取緊跟在prev後的同級別的next元素可用next()方法代替
jQuery(‘prev~siblings’):選取緊跟在prev後的同級別的全部的元素  可用nextAll()方法代替  

過濾選擇器分爲：

基本過濾選擇器
內容過濾選擇器
可見性過濾選擇器 
子元素過濾選擇器
屬性過濾選擇器
表單過濾選擇器

基本過濾選擇器
:first    選取第一個元素
:last     選取最後一個元素
:not(selector)  去除與跟定選擇器匹配的元素
:even    選取索引值爲偶數的全部的元素 從0開始
:odd      選取索引值爲奇數的全部的元素 從0開始
:eq(index)   選取索引值等於index的全部的元素 從0開始
:gt(index)     選取索引值大於index的全部的元素 從0開始
:lt(index)      選取索引值小於index的全部的元素  從0開始
:header    選取全部的標題元素 例如h1 h2  h3等
:animated   選取全部的正在執行動畫的元素

內容過濾選擇器
:contains(text)    選取含有文本內容爲text的元素
:empty    選取不包含子元素的空元素
:has(selector)   選取含有選擇器所匹配的元素的元素
:parent   選取含有子元素的元素

可見性過濾選擇器 
:hidden    選取全部的不可見的元素
:visible     選取全部的可見的元素

屬性過濾選擇器
[attribute]    選取擁有此屬性的元素
[attribute=value]    選取屬性值爲value的元素
[attribute!=value]   選取屬性值不等於value的元素 也包括不含屬性名爲attribute的元素
[attribute^=value]   選取屬性值以value開頭的元素
[attribute$=value]    選取屬性值以value結尾的元素
[attribute*=value]    選取屬性值含有value的元素
[selector1][selector2][selector3]   用屬性選擇器合併成一個複合選擇器

子元素過濾選擇器
nth-child(index/even/odd/equation)   選取每一個父元素下的第index子元素/奇元素/偶元素/比較元素  索引從1開始
first-child   選取每一個父元素的第一個子元素
last-child    選取每一個父元素的最後一個元素
only-child   若是該元素是其父元素的惟一的子元素  那麼該元素就會匹配到
注意與基本過濾選擇器的區別

表單過濾選擇器
:enabled     選取全部的可見的元素
:disabled    選取全部的不可見的元素
:checked    選取全部的選中的元素(單選框、複選框)
:selected    選取全部的被選中的元素(下拉菜單)

表單選擇器
:input     選取全部的<input>、<textarea>、<select>、           <button>元素
:text       選取全部的單行文本框
:password     選取全部的密碼框
:radio    選取全部的單選按鈕
:checkbox   選取全部的複選按鈕
:submit       選取全部的提交按鈕
:image   選取全部的圖像按鈕
:reset    選取全部的重置按鈕
:button  選取全部的button
:file     選取全部的上傳域
:hidden  選取全部的不可見元素 (包括display爲none的)

jQuery中DOM操做：
append()     向匹配的元素追加內容
appendTo()    顛倒append()操做
prepend()    向匹配的元素前置內容
preprendTo()   顛倒prepend()操做
after()    在匹配的元素後插入內容
insertAfter()   顛倒after()操做
before()  在匹配的元素前插入內容
insertBefore()   顛倒before()操做

元素操做：
remove()  刪除節點  例 jQuery(‘ul li’).remove()  也可在remove()中添加過濾條件 jQuery(‘ul li’).remove(‘li[title!=菠蘿]’)
empty()  清空節點  jQuery(‘ul li:eq(1)’).empty()  清空第二個li元素中的內容
clone()   複製節點 jQuery(‘#li’).clone().appendTo(‘ul’)  若是想在複製節點的同時也具備行爲 可用clone(true)
replaceWith()  替換節點  如jQuery(‘p’).replaceWith(‘<strong>你最不喜歡的水果是?</strong>’)
replaceAll()   顛倒replaceWith()操做  如jQuery(‘<strong>你最不喜歡的水果是？</strong>’).replaceAll(‘p’);
wrapAll()    將全部的匹配的元素用一個元素來包裹  如jQuery(‘strong’).wrapAll(‘<b></b>’)  會獲得
        <b>
             <strong>你最喜歡的水果1</strong>
             <strong>你最喜歡的水果2</strong> 
        </b>
wrap()  將每一個匹配的元素用一個元素包裹起來 如jQuery(‘strong’).wrap(‘<b></b>’)   會獲得
        <b><strong>你最喜歡的水果1</strong></b>
        <b><strong>你最喜歡的水果2</strong></b>
wrapInner()  將每一個匹配的子元素用另一個元素包裹起來

屬性操做
 獲取和設置屬性   
      獲取:   jQuery(‘p’).attr(‘title’)
      設置屬性:jQuery(‘p’).attr(‘title’,’your title’);
      刪除屬性：jQuery(‘p’).removeAttr(‘title’)
樣式操做
       jQuery(‘p’).attr(‘class’,’classname’);
追加樣式
        jQuery(‘p’).addClass()
移除樣式
        jQuery(‘p’).removeClass()

toggleClass()    切換樣式
hasClass()  判斷是否含有某個樣式 同is(‘.className’)
html()     獲取或者設置html代碼
text()    獲取或者設置文本框的值
val()    獲取或者設置表單元素的值
children()   獲取匹配元素的子元素 
next()    獲取匹配元素後緊鄰的同輩的元素
prev()    獲取匹配元素前緊鄰的同輩的元素
nextAll()   獲取匹配元素後的全部的同輩的元素
siblings()   獲取匹配元素前臺全部的同輩的元素
closest()  獲取匹配元素最近的元素
find()   查找匹配元素的全部的後代元素
css()   設置獲取獲取css樣式  能夠傳輸json格式的參數  批量的設置多個樣式
height()  設置或者獲取元素的高度 注意和css(‘height’)的區別
width()  設置或者獲取元素的寬度  注意和css(‘width’)的區別

offset()  獲取元素在當前視窗的相對偏移  返回的是個對象 包括top和left兩個屬性
position()   獲取元素相對於最近的一個position樣式屬性設置爲relative和absolute的祖父節點的相對的偏移  返回的也是個對象                 包括top和left兩個屬性
scrollTop()  獲取元素的滾動條距頂端的距離
scrollLeft ()   獲取元素的滾動條距左邊的距離

jQuery中的事件
注意jQuery(document).ready()和window.onload的區別
事件綁定  bind(type,[,data],fn) 第一個爲事件類型 包括             blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,
mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等，
也能夠是自定義事件名稱 第二個爲可選的參數 第三個爲綁定的處理函數

簡寫綁定操做
jQuery(‘p’).click(fn),jQuery(‘mouseover’).click(fn)
合成事件
主要有兩個  
jQuery(‘p’).toggle(fn1,fn2)  單擊的時候分別執行fn1和fn2兩個函數
hover(fn1,fn2)   鼠標移上去和移走的時候分別執行fn1和fn2兩個函數
事件冒泡
若是想阻止冒泡的話能夠用event.stopPropagation()
阻止事件的默認行爲 能夠採用event.preventDefault()
若是上面兩個都想阻止 能夠直接在fn中return false
事件對象的屬性
event.type:獲取事件的類型 如click  dbclick
event.preventDefault():阻止事件的默認行爲
event.stopPropagation():阻止事件的冒泡
event.target()   獲取觸發事件的元素
event.relatedTarget()   獲取相關元素
event.pageX()  獲取光標相對於頁面的x座標
event.pageY()   獲取光標相對於頁面的y座標
event.which()   在鼠標單擊事件中獲取到鼠標的左 中 右鍵
event.metaKey()   鍵盤事件中獲取ctrl鍵
event.originalEvent()   指向原始的事件對象

移除事件
移除某個元素的單擊事件  jQuery(‘p’).unbind(‘click’)
移除某個元素的全部的事件 jQuery(‘p’).unbind()
假如某個元素的單擊事件綁定了多個函數 可用jQuery(‘p’).unbind(‘click’,fn1)來
解除fn1的事件處理程序 

模擬操做
經常使用模擬:  不必定要單擊纔會觸發  能夠用trigger()方法模擬操做 
                jQuery(‘#btn’).trigger(‘click’)

觸發自定義事件  
jQuery(‘#btn’).bind(‘myClick’,fn1)  能夠經過jQuery(‘#btn’).trigger(‘myClick’)觸發
傳遞數據  trigger(type,[,data])
trigger()方法會執行瀏覽器的默認行爲 若是不想執行瀏覽器的默認行爲 可用jQuery(‘input’).triggerHander(‘focus’)
能夠一次綁定多個事件類型
jQuery(‘div’).bind(‘mouseover  mouseout’,fn1)
添加事件的命名空間 便於管理
jQuery(‘div’).bind(‘click.plugin’,fn1)
jQuery(‘div’).bind(‘mouseover.plugin’,fn2)
jQuery(‘div’).bind(‘dbclick’,fn3)
在執行jQuery(‘div’).unbind(‘.plugin’)的時候 dbclick事件依然會觸發
相同事件名稱 不一樣命名空間的執行方法

jQuery(‘div’).bind(‘click’,fn1)
     jQuery(‘div’).bind(‘click.plugin’,fn2)
     jQuery(‘#btn’).click
     (
           function()
           {
                jQuery(‘div’).trigger(‘click!’);  //注意click後面的感嘆號
           }
      )
當單擊div元素的時候  fn1和fn2事件處理程序都會執行 當單擊button元素的時候，
只會觸發fn1的事件處理程序

jQuery中的動畫

show()   顯示元素
hide()    隱藏元素
show(‘slow’)    讓元素在600毫秒內顯示出來
show(‘fast’)   讓元素在200毫秒內顯示出來
show(‘normal’)   讓元素在400毫秒內顯示出來
show(1000)  讓元素在1000毫秒內顯示出來
hide()方法帶參數時候與show()方法類似
fadeIn()   增長不透明度
fadeOut()   下降不透明度
slideUp()   從下向上隱藏元素  能夠帶參數
slideDown()  從上到下顯示元素 能夠帶參數
自定義動畫方法 animate()
jQuery(‘p’).animate({‘left’:’500px’},3000)  使得元素在3秒內向右移動500個像素
jQuery(‘p’).animate({‘left’:’+=500px’},3000)  在當前位置累加500個像素
jQuery(‘p’).animate({‘left’:’-=500px’},3000)   在當前位置累減500個像素

多重動畫
同時執行多個動畫:jQuery(‘p’).animate({‘left’:’500px’,’height’:’200px’},3000)
按順序執行動畫:
jQuery(‘p’).animate({‘left’:’500px’},3000).animate({‘height’:’200px’},3000)
fadeTo(3000,’0.2’)  在3秒內將元素的不透明度變爲0.2
動畫的回調函數
jQuery(‘p’).animate({‘top’:’200px’,’width’:’200px’},200,fn)  執行完動畫後執行fn
中止動畫
stop(false,false)
is(‘:animated’)  判斷某元素是否處於動畫狀態
toggle()  用來代替show和hide方法 會改變高度 寬度和不透明度
slideToggle()  用來代替slideUp()和slideDown()  只改變高度

jQuery與Ajax應用
分三層jQuery.ajax()是第一層,jQuery(param).load() /jQuery.get()/jQuery.post()是第二層,
jQuery.getScript()/jQuery.getJSON()是第三層
load()方法
1.載入html文檔
   load(url,[,data],[,callback]  url :請求地址
   data:發送至服務器端的key/value值
   callback:回調函數  不管成功仍是失敗都會調用回調函數
2.篩選載入的HTML文檔
   jQuery(‘#resText’).load(‘test.html   .param’)
3.傳遞方式
   根據data自動指定 若是沒有參數傳遞 採用get方式傳遞 反之  則自動轉化爲post方式

4.回調函數
function(responseText,txtStatus,XMLHttpRequest)
{

}
responseText :請求返回的內容
textStatus:請求狀態 success/error/notmodified/timeout四種
XMLHttpRequest:XMLHttpRequest對象
jQuery.get()
全局函數
jQuery.get(url,[,data],[,callback],[,type])
url:請求的地址
data:發送至服務器端的key/value數據會做爲QueryString附加到請求的URL中
callback:載入成功時的回調函數
type:服務器返回內容的格式 xml/html/json/script/text/_default

callback形式以下

function(data,textStatus)

{

        //data:返回的內容 能夠是XML JSON或者html片斷等

        //textStatus:請求狀態 success/error/notmodified/timeout

}

數據格式:
html片斷:
     實現起來只須要不多的工做量,可是這種固定的數據結構並不必定可以在其它的web程序中獲得重用
XML文檔:
     該數據能夠利用強大的jQuery選擇器的功能，這種數據的可移植性是其它的數據格式所沒法比擬的,所以以這種格式提供的數據的重用性大大的提升,不過xml體積相對龐大,解析和操做他們的速度要慢一些

JSON格式

在不遠的未來  新版的JavaScript中的XML將會和JSON同樣容易解析,不過在它到來

以前,json依然有着很強的生命力

json的格式很是的嚴格,構建的json文件必須是完整無誤的,任何的一個不匹配或者

缺乏逗號,都會致使頁面腳本的終止運行,甚至還會帶來更加嚴重的負面影響

post()方法
它與get()方法的結構和使用方式都相同,不太重大區別以下
1.GET請求會將參數跟在URL後面進行傳遞,而POST請求則是做爲HTTP消息的實體內容發送給web服務器,固然 在ajax請求中 這種區別對用戶來講是不可見的 
2.GET請求對傳輸的數據大小有限制(一般不能大於2K),而使用POST方式傳輸的數據量比GET方式大的多(理論上不受限制)
3.GET方式請求的數據會被瀏覽器緩存起來,所以其它人即可以從瀏覽器的歷史記錄中讀取到這些數據,例如賬號和密碼等等,在某些狀況下GET方式會帶來嚴重的安全性問題,而POST方式相對來講就能夠避免這些問題 

 

getScript()方法
動態加載script文件 能夠用回調函數
getJSON()
動態加載JSON文件,處理JSON文件的時候能夠利用each函數
jQuery.each()不一樣於jQuery對象的each()  它是一個全局函數,不操做jQuery對象
而是以一個數組或者對象做爲第一個參數,以一個回調函數做爲第二個參數,回調函數中有兩個參數 第一個爲索引 第二個爲對應的變量或者內容
ajax()
只有一個參數 以key/value的形式存在
url:發送請求的地址
type:請求方式 POST或者GET 默認爲GET 注意其它的HTTP請求方法
timeout:設置請求的超時時間(毫秒) 此設置將覆蓋ajaxStart()等方法的全局設置
data:請求的數據 通常的JSON格式的數據
dataType:預期返回的數據類型
beforeSend:發送請求前可修改的XMLHttpRequest對象的函數  例如添加自定義的
HTTP頭.在beforeSend()中若是返回false能夠取消本次ajax請求
complate:請求完成後的回調函數(請求成功或者失敗的時候均會調用)
                    function(XMLHttpRequest,textStatus)
                    {

                    }
success:請求成功時的回調函數(只有請求成功的時候纔會回調)
                   function(data,textStatus)
                  {
                  }
error:請求失敗時的回調函數(只有在請求失敗的時候纔會調用)
                  function(XMLHttpRequest,textStatus,errorThown)
                  {
                  }
global:默認爲true,表示是否會觸發全局的ajax事件,爲false表示不會觸發全局事件

序列化元素
serialize()  將DOM內容序列化爲字符串
serializeArray()   將DOM內容序列化爲JSON格式的數據
param()   用來對一個json對象進行序列化

Ajax全局函數
ajaxStart(callback) :  ajax開始請求的時候調用的函數
ajaxComplete(callback):  ajax請求完成時執行的函數
ajaxError(callback):   ajax請求錯誤的時候觸發的函數 捕捉到的錯誤做爲最後的一個參數傳遞
ajaxSend(callback):  ajax請求發送前要執行的函數
ajaxSuccess(callback):  ajax請求成功的時候執行的函數
ajaxStop(callback):  ajax請求中止的時候觸發的函數

插件的使用和寫法 livequery()的使用方法 ui插件的使用方法 cookie插件的使用方法 自定義jQuery插件的寫法