jQuery基本API小結(下)---工具函數-基本插件

1、工具函數

一、獲取瀏覽器的名稱與版本信息

在jQuery中，經過$.browser對象能夠獲取瀏覽器的名稱和版本信息，如$.browser.chrome爲true，表示當前爲Chrome瀏覽器，$.browser.mozilla爲true，表示當前爲火狐瀏覽器，還能夠經過$.browser.version方式獲取瀏覽器版本信息。

二、檢測瀏覽器是否屬於W3C盒子模型

       瀏覽器的盒子模型分爲兩類，一類爲標準的w3c盒子模型，另外一類爲IE盒子模型，二者區別爲在Width和Height這兩個屬性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型則包含，而在jQuery 中，能夠經過$.support.boxModel對象返回的值，檢測瀏覽器是否屬於標準的w3c盒子模型。

三、檢測對象是否爲空

在jQuery中，能夠調用名爲$.isEmptyObject的工具函數，檢測一個對象的內容是否爲空，若是爲空，則該函數返回true，不然，返回false值

$.isEmptyObject(obj);

4、檢測對象是否爲原始對象

調用名爲$.isPlainObject的工具函數，能檢測對象是否爲經過{}或new Object()關鍵字建立的原始對象，若是是，返回true，不然，返回false值

$.isPlainObject (obj);

5、檢測兩個節點的包含關係

    調用名爲$.contains的工具函數，能檢測在一個DOM節點中是否包含另一個DOM節點，若是包含，返回true，不然，返回false值

$.contains (container, contained);

參數container表示一個DOM對象節點元素，用於包含其餘節點的容器，contained是另外一個DOM對象節點元素，用於被其餘容器所包含。

六、字符串操做函數

       調用名爲$.trim的工具函數，能刪除字符串中左右兩邊的空格符，但該函數不能刪除字符串中間的空格

$.trim (str);

參數str表示須要刪除左右兩邊空格符的字符串。

七、URL操做函數

       調用名爲$. param的工具函數，能使對象或數組按照key/value格式進行序列化編碼，該編碼後的值經常使用於向服務端發送URL請求

$. param (obj);

參數obj表示須要進行序列化的對象，該對象也能夠是一個數組，整個函數返回一個通過序列化編碼後的字符串。

八、使用$.extend()擴展工具函數

       調用名爲$. extend的工具函數，能夠對原有的工具函數進行擴展，自定義類級別的jQuery插件

       $. extend ({options});

參數options表示自定義插件的函數內容。

九、使用$.extend()擴展Object對象

除使用$.extend擴展工具函數外，還能夠擴展原有的Object對象，在擴展對象時，兩個對象將進行合併，當存在相同屬性名時，後者將覆蓋前者

$. extend (obj1,obj2,…objN);

參數obj1至objN表示須要合併的各個原有對象。

2、基本插件

一、表單驗證插件——validate

(jquery.validate.js、jquery.validate.messages_cn.js)

該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還容許自定義驗證規則，插件調用方法以下：

$(form).validate({options})

其中form參數表示表單元素名稱，options參數表示調用方法時的配置對象，全部的驗證規則和異常信息顯示的位置都在該對象中進行設置。

二、表單插件-----form

經過表單form插件，調用ajaxForm()方法，實現ajax方式向服務器提交表單數據，並經過方法中的options對象獲取服務器返回數據

$(form). ajaxForm ({options});ajaxSubmit()

其中form參數表示表單元素名稱；options是一個配置對象，用於在發送ajax請求過程，設置發送時的數據和參數

三、圖片燈箱插件——lightBox

       該插件能夠用圓角的方式展現選擇中的圖片，使用按鈕查看上下張圖片，在加載圖片時自帶進度條，還能以自動播放的方式瀏覽圖片

       $(linkimage).lightBox({options})

其中linkimage參數爲包含圖片的<a>元素名稱，options爲插件方法的配置對象。

4、圖片放大鏡插件——jqzoom

在調用jqzoom圖片放大鏡插件時，須要準備一大一小兩張同樣的圖片，在頁面中顯示小圖片，當鼠標在小圖片中移動時，調用該插件的jqzoom()方法，顯示與小圖片相同的大圖片區域，從而實現放大鏡的效果

$(linkimage).jqzoom({options})

其中linkimage參數爲包含圖片的<a>元素名稱，options爲插件方法的配置對象。

五、cookie插件——cookie

       使用cookie插件後，能夠很方便地經過cookie對象保存、讀取、刪除用戶的信息，還能經過cookie插件保存用戶的瀏覽記錄

保存：$.cookie(key，value)；讀取：$.cookie(key)，刪除：$.cookie(key，null)

其中參數key爲保存cookie對象的名稱，value爲名稱對應的cookie值。

六、搜索插件——autocomplete

搜索插件的功能是經過插件的autocomplete()方法與文本框相綁定，當文本框輸入字符時，綁定後的插件將返回與字符相近的字符串提示選擇

$(textbox).autocomplete(urlData,[options]);

其中，textbox參數爲文本框元素名稱，urlData爲插件返回的相近字符串數據，可選項參數options爲調用插件方法時的配置對象。

七、右鍵菜單插件——contextmenu

右鍵菜單插件能夠綁定頁面中的任意元素，綁定後，選中元素，點擊右鍵，便經過該插件彈出一個快捷菜單，點擊菜單各項名稱執行相應操做

$(selector).contextMenu(menuId,{options});

Selector參數爲綁定插件的元素，meunId爲快捷菜單元素，options爲配置對象。

8、自定義對象級插件——lifocuscolor插件

自定義的lifocuscolor插件能夠在<ul>元素中，鼠標在表項<li>元素移動時，自定義其獲取焦點時的背景色，即定義<li>元素選中時的背景色

$(Id).focusColor(color)

其中，參數Id表示<ul>元素的Id號，color表示<li>元素選中時的背景色。

九、自定義類級別插件—— twoaddresult

經過調用自定義插件twoaddresult中的不一樣方法，能夠實現對兩個數值進行相加和相減的運算

$.addNum(p1,p2) 和 $.subNum(p1,p2)

上述調用格式分別爲計算兩數值相加和相減的結果，p1和p2爲任意數值。

3、UI插件

一、拖曳插件——draggable

拖曳插件draggable的功能是拖動被綁定的元素，當這個jQuery UI插件與元素綁定後，能夠經過調用draggable()方法，實現各類拖曳元素的效果

$(selector). draggable({options})

options參數爲方法調用時的配置對象，根據該對象能夠設置各類拖曳效果，如「containment」屬性指定拖曳區域，「axis」屬性設置拖曳時的座標方向

二、放置插件——droppable

除使用draggable插件拖曳任意元素外，還能夠調用droppable UI插件將拖曳後的任意元素放置在指定區域中，相似購物車效果

$(selector).droppable({options})

selector參數爲接收拖曳元素，options爲方法的配置對象，在對象中，drop函數表示當被接收的拖曳元素徹底進入接收元素的容器時，觸發該函數的調用。

三、拖曳排序插件——sortable

拖曳排序插件的功能是將序列元素（例如<option>、<li>）按任意位置進行拖曳從而造成一個新的元素序列，實現拖曳排序的功能

$(selector).sortable({options});

selector參數爲進行拖曳排序的元素，options爲調用方法時的配置對象，

四、面板摺疊插件——accordion

面板摺疊插件能夠實現頁面中指定區域相似「手風琴」的摺疊效果，即點擊標題時展開內容，再點另外一標題時，關閉已展開的內容

$(selector).accordion({options});

其中，參數selector爲整個面板元素，options參數爲方法對應的配置對象。

五、選項卡插件——tabs

使用選項卡插件能夠將<ul>中的<li>選項定義爲選項標題，在標題中，再使用<a>元素的「href」屬性設置選項標題對應的內容

$(selector).tabs({options});

selector參數爲選項卡總體外圍元素，該元素包含選項卡標題與內容，options參數爲tabs()方法的配置對象，經過該對象還能以ajax方式加載選項卡的內容。

六、對話框插件——dialog

對話框插件能夠用動畫的效果彈出多種類型的對話框，實現JavaScript代碼中alert()和confirm()函數的功能

$(selector).dialog({options});

selector參數爲顯示彈出對話框的元素，一般爲<div>，options參數爲方法的配置對象，在對象中能夠設置對話框類型、「肯定」、「取消」按鈕執行的代碼等

七、菜單工具插件——menu

菜單工具插件能夠經過<ul>建立多級內聯或彈出式菜單，支持經過鍵盤方向鍵控制菜單滑動，容許爲菜單的各個選項添加圖標

$(selector).menu({options});

selector參數爲菜單列表中最外層<ul>元素，options爲menu()方法的配置對象

八、工具提示插件——tooltip

工具提示插件能夠定製元素的提示外觀，提示內容支持變量、Ajax遠程獲取，還能夠自定義提示內容顯示的位置

$(selector).tooltip({options});

其中selector爲須要顯示提示信息的元素，可選項參數options爲tooltip()方法的配置對象，在該對象中，能夠設置提示信息的彈出、隱藏時的效果和所在位置。

九、微調按鈕插件——spinner

微調按鈕插件不只能在文本框中直接輸入數值，還能夠經過點擊輸入框右側的上下按鈕修改輸入框的值，還支持鍵盤的上下方向鍵改變輸入值

$(selector).spinner({options});

selector參數爲文本輸入框元素，可選項options參數爲spinner()方法的配置對象，在該對象中，能夠設置輸入的最大、最小值，獲取改變值和設置對應事件