jQuery基本API小結(上)--選擇器-DOM操做-動畫-Ajax

1、JQuery基礎選擇器

一、基本選擇器（CSS選擇器）

二、$()中的()不必定是指定元素，也多是函數。

三、「*」號選擇器，它的功能是獲取頁面中的所有元素：$(「*」)。 因爲使用*選擇器獲取的是所有元素，所以，有些瀏覽器將會比較緩慢，這個選擇器也須要謹慎使用。

四、sele1,sele2,seleN選擇器，同時選中多個元素。

 

五、層次選擇器

①、$("ance desc")其中ance desc是使用空格隔開的兩個參數。ance參數（ancestor祖先的簡寫）表示父元素；desc參數（descendant後代的簡寫）表示後代元素

②、$(「parent > child」) child參數獲取的元素都是parent選擇器的子元素（子輩），它們之間經過「>」符號來表示一種層次關係。

③、$(「prev + next」) 查找與「prev」元素緊鄰的下一個「next」元素

④、獲取prev 元素後面所有相鄰的元素

 

2、過濾性選擇器

該類型的選擇器是根據某過濾規則進行元素的匹配，書寫時以「：」號開頭,一般用於查找集合元素中的某一位置的單個元素。

1：注意：過濾器先後沒有空格，其實：前空格無關緊要，後面必須不能有空格

①    $(「xxxxxx:first」)獲取到xxxxxx過濾器過濾出的結果後的第一個元素。

②    $(「xxxxxx:eq(index)」)每個過濾器都會返回一組結果，eq(index)的做用就是經過索引獲取其中的某一個元素，索引從0開始

③    :contains(text) 選擇包含指定字符串的所有元素，排除html元素

④    :has(selector) 獲取選擇器中包含指定元素名稱的所有元素，其中selector參數就是包含的元素名稱，是被包含元素

⑤    :hidden過濾選擇器的功能是獲取所有不可見的元素

⑥    :visible過濾選擇器獲取的是所有可見的元素

⑦    :first-child子元素過濾選擇器則能夠獲取每一個父元素中返回的首個子元素，它是一個集合，經常使用多個集合數據的選擇處理。

⑧    :last-child子元素過濾選擇器的功能是獲取每一個父元素中返回的最後一個子元素，它也是一個集合

2：屬性選擇器:注意中括號前不能有空格

①   $(「xxxxxx[attribute=value]」)屬性選擇器的功能是獲取與屬性名和屬性值徹底相同的所有元素，其中[]是專用於屬性選擇器的括號符，參數attribute表示屬性名稱，value參數表示屬性值。

②   [attribute!=value]屬性選擇器的功能是獲取不包含屬性名，或者與屬性名和屬性值不相同的所有元素

③   [attribute*=value]，它能夠獲取屬性值中包含指定內容的所有元素（模糊查詢的功能）

3、表單選擇器

一、checked選擇器與元素之間沒有空格

①:input返回所有的表單元素，不只包括全部<input>標記的表單元素，並且還包括<textarea>、<select> 和 <button>標記的表單元素，所以，它選擇的表單元素是最廣的

②:checked能夠獲取處於選中狀態的所有元素。.

③:selected選擇器只能獲取<select>下拉列表框中所有處於選中狀態的<option>選項元素

 

4、jQuery操做DOM

簡單：attr()、html()、text()、addClass()、css()、removeAttr(name)、removeClass(class)

①selector.append(content)方法的功能是向指定的元素中追加內容，被追加的content參數，能夠是字符、HTML元素標記，還能夠是一個返回字符串內容的函數。

②$(content).appendTo(selector) 參數content表示須要插入的內容，參數selector表示被選的元素，即把content內容插入selector元素內，默認是在尾部。

③$(selector).before(content)和$(selector).after(content) 能夠在元素的先後插入內容，它們分別表示在整個元素的前面和後面插入指定的元素或內容

④$(selector).clone()方法能夠生成一個被選元素的副本，即複製了一個被選元素，包含它的節點、文本和屬性

⑤$(selector).replaceWith(content)和$(content).replaceAll(selector)

⑥$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)前者用於包裹元素自己，後者則用於包裹元素中的內容

⑦$(selector).each(function(index)) 參數function爲遍歷時的回調函數，index爲遍歷元素的序列號，它從0開始。

⑧remove()方法刪除所選元素自己和子元素，該方法能夠經過添加過濾參數指定須要刪除的某些元素，而empty()方法則只刪除所選元素的子元素。

 

5、jQuery 事件與應用

①ready()：ready()事件相似於onLoad()事件，但前者只要頁面的DOM結構加載後便觸發，然後者必須在頁面所有元素加載成功才觸發，ready()能夠寫多個，按順序執行。此外，下列寫法是相等的：$(document).ready(function(){})等價於$(function(){});

②$(selector).bind(event,[data] function) 參數event爲事件名稱，多個事件名稱用空格隔開，function爲事件執行的函數。

③$(selector).hover(over，out); hover()方法的功能是當鼠標移到所選元素上時，執行方法中的第一個函數，鼠標移出時，執行方法中的第二個函數，實現事件的切實效果

④$(selector).toggle(fun1(),fun2(),funN(),...)toggle()方法能夠在元素的click事件中綁定兩個或兩個以上的函數，同時，它還能夠實現元素的隱藏與顯示的切換，每次觸發事件時只執行一個函數（依次循環執行）

⑤$(selector).unbind(event,fun) 其中參數event表示須要移除的事件名稱，多個事件名用空格隔開，fun參數爲事件執行時調用的函數名稱。如是方法中沒有任何參數，則表示移除所有已綁定的事件。

⑥$(selector).one(event,[data],fun) one()方法能夠綁定元素任何有效的事件，但這種方法綁定的事件只會觸發一次。參數event爲事件名稱，data爲觸發事件時攜帶的數據，fun爲觸發該事件時執行的函數。

⑦$(selector).trigger(event) trigger()方法能夠直接手動觸發元素指定的事件，這些事件能夠是元素自帶事件，也能夠是自定義的事件

⑧focus和blur focus事件在元素獲取焦點時觸發，如點擊文本框時，觸發該事件；而blur事件則在元素丟失焦點時觸發，如點擊除文本框的任何元素，都會觸發該事件。

⑨change 當一個元素的值發生變化時，將會觸發change事件，例如在選擇下拉列表框中的選項時，就會觸change事件。

⑩$(selector).live(event,[data],fun) 與bind()方法相同，live()方法與能夠綁定元素的可執行事件，除此相同功能以外，live()方法還能夠綁定動態元素，即便用代碼添加的元素事件

 

6、動畫特效

一、show()和hide()方法用於顯示或隱藏頁面中的元素

$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 參數speed設置隱藏或顯示時的速度值，可爲「slow」、「fast」或毫秒數值，可選項參數callback爲隱藏或顯示動做執行完成後調用的函數名。

二、$(selector).toggle(speed,[callback]) 其中speed參數爲動畫效果時的速度值，能夠爲數字，單位爲毫秒，也但是「fast」、「slow」字符，可選項參數callback爲方法執行成功後回調的函數名稱。

三、使用slideUp()和slideDown()方法在頁面中滑動元素，前者用於向上滑動元素，後者用於向下滑動元素

$(selector).slideUp(speed,[callback]) $(selector).slideDown(speed,[callback])

其中speed參數爲滑動時的速度，單位是毫秒，可選項參數callback爲滑動成功後執行的回調函數名。要注意的是：slideDown()僅適用於被隱藏的元素；slideup()則相反。

4、使用slideToggle()方法能夠切換slideUp()和slideDown()，即調用該方法時，若是元素已向上滑動，則元素自動向下滑動，反之，則元素自動向上滑動

$(selector).slideToggle(speed,[callback])

5、fadeIn()和fadeOut()方法能夠實現元素的淡入淡出效果，前者淡入隱藏的元素，後者能夠淡出可見的元素，

$(selector).fadeIn(speed,[callback])

$(selector).fadeOut(speed,[callback])

6、fadeTo()方法，能夠將所選擇元素的不透明度以淡入淡出的效果調整爲指定的值

$(selector).fadeTo(speed,opacity,[callback])

7、調用animate()方法能夠建立自定義動畫效果

$(selector).animate({params},speed,[callback]) 其中，params參數爲製做動畫效果的CSS屬性名與值

八、stop()方法的功能是在動畫完成以前，中止當前正在執行的動畫效果，這些效果包括滑動、淡入淡出和自定義的動畫

$(selector).stop([clearQueue],[goToEnd])

兩個可選項參數clearQueue和goToEnd都是布爾類型值，前者表示是否中止正在執行的動畫，後者表示是否完成正在執行的動畫

九、delay()方法的功能是設置一個延時值來推遲動畫效果的執行

$(selector).delay(duration)

其中參數duration爲延時值，它的單位是毫秒，當超過延時值時，動畫繼續執行。

 

7、Ajax應用

一、load()方法經過Ajax請求加載服務器中的數據，並把返回的數據放置到指定的元素中

load(url,[data],[callback])

參數url爲加載服務器地址，可選項data參數爲請求時發送的數據，callback參數爲數據請求成功後，執行的回調函數。

二、getJSON()方法能夠經過Ajax異步請求的方式，獲取服務器中的數組，並對獲取的數據進行解析，顯示在頁面中

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

3、getScript()方法異步請求並執行服務器中的JavaScript格式的文件

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

4、get()方法時，採用GET方式向服務器請求數據，並經過方法中回調函數的參數返回請求的數據。

$.get(url,[callback])

五、get()方法相比，post()方法多用於以POST方式向服務器發送數據，服務器接收到數據以後，進行處理，並將處理結果返回頁面

$.post(url,[data],[callback])

六、serialize()方法能夠將表單中有name屬性的元素值進行序列化，生成標準URL編碼文本字符串，直接可用於ajax請求

$(selector).serialize()

7、ajax()方法是最底層、功能最強大的請求服務器數據的方法，它不只能夠獲取服務器返回的數據，還能向服務器發送請求並傳遞數值

jQuery.ajax([settings])或$.ajax([settings])

其中參數settings爲發送ajax請求時的配置對象，在該對象中，url表示服務器請求的路徑，data爲請求時傳遞的數據，dataType爲服務器返回的數據類型，success爲請求成功的執行的回調函數，type爲發送數據請求的方式，默認爲get。

八、ajaxSetup()方法能夠設置Ajax請求的一些全局性選項值，設置完成後，後面的Ajax請求將不須要再添加這些選項值

jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可選項options參數爲一個對象，經過該對象設置Ajax請求時的全局選項值。

九、ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數，ajaxStop()方法用於在Ajax請求完成後觸發函數

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())