四虎精品视频-四虎精品成人免费网站-四虎黄色网-四虎国产视频-国产免费91-国产蜜臀97一区二区三区

從零開始學習jQuery (九) jQuery工具函數

系列文章導航:

從零開始學習jQuery (一) 開天辟地入門篇

從零開始學習jQuery (二) 萬能的選擇器

從零開始學習jQuery (三) 管理jQuery包裝集

從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開始學習jQuery (五) 事件與事件對象

從零開始學習jQuery (六) AJAX快餐

從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

從零開始學習jQuery (九) jQuery工具函數

從零開始學習jQuery (十) jQueryUI常用功能實戰

從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件


一.摘要

本系列文章將帶您進入jQuery的精彩世界,其中有很多作者具體的使用經驗和解決方案,即使你會使用jQuery也能在閱讀中發現些許秘籍。

我們經常要使用腳本處理各種業務邏輯, 最常見的就是數組和對象的操作, jQuery工具函數為我們操作對象和數組提供了便利條件。

二.前言

大部分人僅僅使用jQuery的選擇器選擇對象,或者實現頁面動畫效果,在處理業務邏輯時常常自己編寫很多算法, 本文提醒各位jQuery也能提高我們操作對象和數組的效率, 并且可以將一些常用算法擴充到jQuery工具函數中,實現腳本函數的復用。

三.什么是工具函數

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

 

Code
$.trim(" text ");

系列文章導航:

從零開始學習jQuery (一) 開天辟地入門篇

從零開始學習jQuery (二) 萬能的選擇器

從零開始學習jQuery (三) 管理jQuery包裝集

從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開始學習jQuery (五) 事件與事件對象

從零開始學習jQuery (六) AJAX快餐

從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

從零開始學習jQuery (九) jQuery工具函數

從零開始學習jQuery (十) jQueryUI常用功能實戰

從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件


六.數組和對象操作

實現UI我們常常操作DOM對象或者jQuery包裝集, 但是實現算法或者業務邏輯時往往操作的是數組和對象.

下面講解最常用的數組和對象相關的工具函數.

1.迭代

jQuery.each( object, callback )

返回值:Object

說明:

通用例遍方法,可用于例遍對象和數組。

不同于例遍 jQuery 對象的 $().each() 方法,此方法可用于例遍任何對象。回調函數擁有兩個參數:第一個為對象的成員或數組的索引,第二個為對應變量或內容。如果需要退出 each 循環可使回調函數返回 false,其它返回值將被忽略。

講解:

 

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

 

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

系列文章導航:

從零開始學習jQuery (一) 開天辟地入門篇

從零開始學習jQuery (二) 萬能的選擇器

從零開始學習jQuery (三) 管理jQuery包裝集

從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開始學習jQuery (五) 事件與事件對象

從零開始學習jQuery (六) AJAX快餐

從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

從零開始學習jQuery (九) jQuery工具函數

從零開始學習jQuery (十) jQueryUI常用功能實戰

從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件


3.轉換

jQuery.map( array, callback )

返回值:Array

說明:

將一個數組中的元素轉換到另一個數組中。

作為參數的轉換函數會為每個數組元素調用,而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數。轉換函數可以返回轉換后的值、null(刪除數組中的項目)或一個包含值的數組,并擴展至原始數組中。

講解:

1.3.2版本中此函數和each函數已經幾乎相同(以前稍有不同),  現在唯一的區別就是回調函數可以改變當前元素.返回null則刪除當前元素.

下面是幾個例子:

 

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(", "));

系列文章導航:

從零開始學習jQuery (一) 開天辟地入門篇

從零開始學習jQuery (二) 萬能的選擇器

從零開始學習jQuery (三) 管理jQuery包裝集

從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開始學習jQuery (五) 事件與事件對象

從零開始學習jQuery (六) AJAX快餐

從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

從零開始學習jQuery (九) jQuery工具函數

從零開始學習jQuery (十) jQueryUI常用功能實戰

從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件


5. jQuery.extend

     在開發插件的時候最常用此函數函數來處理options.

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

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

系列文章導航:

從零開始學習jQuery (一) 開天辟地入門篇

從零開始學習jQuery (二) 萬能的選擇器

從零開始學習jQuery (三) 管理jQuery包裝集

從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式

從零開始學習jQuery (五) 事件與事件對象

從零開始學習jQuery (六) AJAX快餐

從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!

從零開始學習jQuery (九) jQuery工具函數

從零開始學習jQuery (十) jQueryUI常用功能實戰

從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件


七.測試工具函數

測試工具函數主要用于判斷對象是否是某一種類型, 返回的都是Boolean值:

jQuery.isArray( obj )

jQuery.isFunction( obj )

同時別忘記了Javascript中自帶的isNaN和isFinite:

Code
var test = "123";
alert(isNaN(test));
alert(isFinite(test));

it知識庫從零開始學習jQuery (九) jQuery工具函數,轉載需保留來源!

鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。

主站蜘蛛池模板: 生死相随| 亚纱美| 抖音网站入口| 招聘女服务员2| 大地资源中文字幕第3页| 美少女战士男主角叫什么| 黑暗女监日本电影完整版叫什么| 我和我的祖国钢琴谱完整版| 男同视频在线| 繁星诗集161首大全| 八月照相馆| 寻梦环游记英文名| 夜魔3| 减肥可以吃桃子吗?| 欧美gv网站| 高达w| 美女自拍偷拍| 男骑女| 炊事班的故事演员表| 真的爱你最标准谐音歌词| 李天方| 洛兵| 湖北影视| 娟子演的所有电视剧| 滑胎最凶的食物孕早期| 罪恋电影| 青春没有遗憾才完美辩论资料| 黄网站在线免费| footjob videos| 保镖1983| 啊啊操| 洞房奇谭电影免费版在线观看| 北京卫视今日电视剧| 正义回廊 电影| 生死相随| 请赐我一双翅膀在线观看| 媚狐传| 冒险王2| 伸舌头接吻脱裤子| 心动电影| 《愉悦与苦痛》电影|