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插件的寫法

版權聲明：本文為CSDN部落客「weixin_34037977」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/weixin_34037977/article/details/91991734