<a href="/" title="Ubuntu系統(tǒng)_Ubuntu軟件下載_Ubuntu電腦知識(shí)_Ubuntu服務(wù)器_中文網(wǎng)">

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

一.摘要

本系列文章將帶您進(jìn)入jQuery的精彩世界，其中有很多作者具體的使用經(jīng)驗(yàn)和解決方案，即使你會(huì)使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍。

我們經(jīng)常要使用腳本處理各種業(yè)務(wù)邏輯，最常見的就是數(shù)組和對象的操作， jQuery工具函數(shù)為我們操作對象和數(shù)組提供了便利條件。

二.前言

大部分人僅僅使用jQuery的選擇器選擇對象，或者實(shí)現(xiàn)頁面動(dòng)畫效果，在處理業(yè)務(wù)邏輯時(shí)常常自己編寫很多算法，本文提醒各位jQuery也能提高我們操作對象和數(shù)組的效率，并且可以將一些常用算法擴(kuò)充到j(luò)Query工具函數(shù)中，實(shí)現(xiàn)腳本函數(shù)的復(fù)用。

三.什么是工具函數(shù)

工具函數(shù)是指在jQuery對象(即變量"$")上定義的函數(shù)，這些函數(shù)都是工具類函數(shù)。比如C#中最常用的trim()函數(shù)：

Code
$.trim("  text   ");

系列文章導(dǎo)航：

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

六.數(shù)組和對象操作

實(shí)現(xiàn)UI我們常常操作DOM對象或者jQuery包裝集, 但是實(shí)現(xiàn)算法或者業(yè)務(wù)邏輯時(shí)往往操作的是數(shù)組和對象.

下面講解最常用的數(shù)組和對象相關(guān)的工具函數(shù).

1.迭代

jQuery.each( object, callback )

返回值:Object

說明:

通用例遍方法，可用于例遍對象和數(shù)組。

不同于例遍 jQuery 對象的 $().each() 方法，此方法可用于例遍任何對象。回調(diào)函數(shù)擁有兩個(gè)參數(shù)：第一個(gè)為對象的成員或數(shù)組的索引，第二個(gè)為對應(yīng)變量或內(nèi)容。如果需要退出 each 循環(huán)可使回調(diào)函數(shù)返回 false，其它返回值將被忽略。

講解:

對于jQuery包裝集我們可以使用each(callback)方法迭代包裝集中的每一個(gè)元素. callback是一個(gè)會(huì)函數(shù), 接受一個(gè)參數(shù)表示當(dāng)前訪問對象的索引。

Code
$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });

系列文章導(dǎo)航：

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

3.轉(zhuǎn)換

jQuery.map( array, callback )

返回值:Array

說明:

將一個(gè)數(shù)組中的元素轉(zhuǎn)換到另一個(gè)數(shù)組中。

作為參數(shù)的轉(zhuǎn)換函數(shù)會(huì)為每個(gè)數(shù)組元素調(diào)用，而且會(huì)給這個(gè)轉(zhuǎn)換函數(shù)傳遞一個(gè)表示被轉(zhuǎn)換的元素作為參數(shù)。轉(zhuǎn)換函數(shù)可以返回轉(zhuǎn)換后的值、null（刪除數(shù)組中的項(xiàng)目）或一個(gè)包含值的數(shù)組，并擴(kuò)展至原始數(shù)組中。

講解:

1.3.2版本中此函數(shù)和each函數(shù)已經(jīng)幾乎相同(以前稍有不同), 現(xiàn)在唯一的區(qū)別就是回調(diào)函數(shù)可以改變當(dāng)前元素.返回null則刪除當(dāng)前元素.

下面是幾個(gè)例子:

Code
var arr = [ "a", "b", "c", "d", "e" ]
    $("div").text(arr.join(", "));

    arr = jQuery.map(arr, function(n, i){
      return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));

    arr = jQuery.map(arr, function (a) { return a + a; });
    $("span").text(arr.join(", "));

系列文章導(dǎo)航：

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!

從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件

5. jQuery.extend

在開發(fā)插件的時(shí)候最常用此函數(shù)函數(shù)來處理options.

下面是fancybox插件獲取options的代碼:

Code
settings = $.extend({}, $.fn.fancybox.defaults, settings);

系列文章導(dǎo)航：

從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!