四虎精品视频-四虎精品成人免费网站-四虎黄色网-四虎国产视频-国产免费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卡4卡乱码| 夫妻的情妇| 难兄难弟 电影| 下海 电视剧|