最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

本系列文章將帶您進(jìn)入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗(yàn)和解決方案, 即使你會(huì)使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.我們經(jīng)常要使用腳本處理各種業(yè)務(wù)邏輯, 最常見(jiàn)的就是數(shù)組和對(duì)象的操作. jQuery工具函數(shù)為我們操作對(duì)象和數(shù)組提供了便利條件。大部分人僅僅使用jQuery的選擇器選擇對(duì)象, 或者實(shí)現(xiàn)頁(yè)面動(dòng)畫效果. 在處理業(yè)務(wù)邏輯時(shí)常常自己編寫很多算法. 本文提醒各位jQuery也能提高我們操作對(duì)象和數(shù)組的效率. 并且可以將一些常用算法擴(kuò)充到j(luò)Query工具函數(shù)中, 實(shí)現(xiàn)腳本函數(shù)的復(fù)用.

推薦專題：jQuery從入門到精通

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

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

 
 
 
 
  
  
  
  
$.trim("  text   "); 
 
 
 

在原始javascript中并沒(méi)有提供同時(shí)去除前后空格的trim函數(shù). 所以這一類常用的工具函數(shù)統(tǒng)稱為 "Utilities" 函數(shù).對(duì)應(yīng)jQuery官方文檔:

http://docs.jquery.com/Utilities

"$"其實(shí)是"window"對(duì)象的屬性, 所以下面幾句話是等價(jià)的:

二. 工具函數(shù)分類

工具函數(shù)主要分為下面幾類:

◆ 瀏覽器及特性檢測(cè)

◆ 數(shù)組和對(duì)象操作

◆ 測(cè)試操作

◆ 字符串操作

◆ Url操作

區(qū)別于前幾章的講解方式, 本文不在列舉函數(shù)列表. 大家在應(yīng)用中, 比如遇到想操作一個(gè)字符串, 可以首先從在"API文檔/Utilities/字符串操作"中查找是否已經(jīng)提供了快捷的工具函數(shù). 如果沒(méi)有再考慮自己開(kāi)發(fā).

下面使用實(shí)例具體的每個(gè)分類下常用的工具函數(shù).

三.瀏覽器及特性檢測(cè)

jQuery的優(yōu)秀就在于其跨瀏覽器的特性, 通常我們不用再針對(duì)不同瀏覽器書(shū)寫不同的代碼. 但是如果是jQuery開(kāi)發(fā)人員或者插件開(kāi)發(fā)人員就要自行處理瀏覽器差異, 以便為用戶提供跨瀏覽器的特性.

jQuery提供了下列屬性用于獲取瀏覽器特性:

在1.3版本中已經(jīng)廢除了三個(gè)屬性, 這里不再講解. 讓我們將注意力放在 jQuery.support 函數(shù)上.

jQuery.support

返回值: Object

說(shuō)明:

jQuery 1.3 新增。一組用于展示不同瀏覽器各自特性和bug的屬性集合。

jQuery提供了一系列屬性，你也可以自由增加你自己的屬性。其中許多屬性是很低級(jí)的，所以很難說(shuō)他們能否在日新月異的發(fā)展中一直保持有效，但這這些主要用于插件和內(nèi)核開(kāi)發(fā)者。

所有這些支持的屬性值都通過(guò)特性檢測(cè)來(lái)實(shí)現(xiàn)，而不是用任何瀏覽器檢測(cè)。以下有一些非常棒的資源用于解釋這些特性檢測(cè)是如何工作的：

http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting

http://yura.thinkweb2.com/cft/

http://www.jibbering.com/faq/faq_notes/not_browser_detect.html

jQuery.support主要包括以下測(cè)試：

boxModel:如果這個(gè)頁(yè)面和瀏覽器是以W3C CSS盒式模型來(lái)渲染的，則等于true。通常在IE 6和IE 7的怪癖模式中這個(gè)值是false。在document準(zhǔn)備就緒前，這個(gè)值是null。

cssFloat: 如果用cssFloat來(lái)訪問(wèn)CSS的float的值，則返回true。目前在IE中會(huì)返回false,他用styleFloat代替。

hrefNormalized:如果瀏覽器從getAttribute("href")返回的是原封不動(dòng)的結(jié)果，則返回true。在IE中會(huì)返回false，因?yàn)樗腢RLs已經(jīng)常規(guī)化了。

htmlSerialize:如果瀏覽器通過(guò)innerHTML插入鏈接元素的時(shí)候會(huì)序列化這些鏈接，則返回true，目前IE中返回false。

leadingWhitespace:如果在使用innerHTML的時(shí)候?yàn)g覽器會(huì)保持前導(dǎo)空白字符，則返回true，目前在IE 6-8中返回false。

noCloneEvent:如果瀏覽器在克隆元素的時(shí)候不會(huì)連同事件處理函數(shù)一起復(fù)制，則返回true，目前在IE中返回false。

objectAll:如果在某個(gè)元素對(duì)象上執(zhí)行g(shù)etElementsByTagName("*")會(huì)返回所有子孫元素，則為true，目前在IE 7中為false。

opacity:如果瀏覽器能適當(dāng)解釋透明度樣式屬性，則返回true，目前在IE中返回false，因?yàn)樗胊lpha濾鏡代替。

scriptEval:使用 appendChild/createTextNode 方法插入腳本代碼時(shí)，瀏覽器是否執(zhí)行腳本，目前在IE中返回false，IE使用 .text 方法插入腳本代碼以執(zhí)行。

style: 如果getAttribute("style")返回元素的行內(nèi)樣式，則為true。目前IE中為false，因?yàn)樗胏ssText代替。

tbody: 如果瀏覽器允許table元素不包含tbody元素，則返回true。目前在IE中會(huì)返回false，他會(huì)自動(dòng)插入缺失的tbody。

講解:

針對(duì)上面眾多的瀏覽器特性屬性, 本文只講解兩個(gè)特性.

1.盒式模型 boxModel

下圖是W3C標(biāo)準(zhǔn)中的盒式模型圖:

假設(shè)如下元素:

 
 
 
 
  
  
  
  
  
  
  
  
  
.boxModel  
  
  
  
  
{  
  
  
  
  
    width:200px;  
  
  
  
  
    height:50px;  
  
  
  
  
    padding:10px;  
  
  
  
  
    border:solid 5px #FF0000;  
  
  
  
  
    background-color:#acacac;  
  
  
  
  
}  
  
  
  
  
  
  
  
  
  
 
 
 
 

顯示效果如圖:

[[32231]]

在CSS中設(shè)定元素寬度為200px, 下面以此元素為例講解盒式模式.

W3C 盒式模型:

元素的寬度和高度為盒式模型圖中的Context部分, 不包括padding, border和margin部分.

目前除了IE所有的瀏覽器都僅支持W3C盒式模型. 在W3C盒式模型中, 示例中包含紅框在內(nèi)的區(qū)域內(nèi)容寬度為200+2*10+2*5=230px, 高度為50+2*10+2*5=80px.

IE 盒式模型:

設(shè)置的寬度包括padding,border. 實(shí)際內(nèi)容寬度content Width = width - padding – border

在IE5.5及更早的版本中, 使用了此模型. 在更高的IE版本上如果由于某些原因讓瀏覽器運(yùn)行在怪異模式下則也會(huì)使用此盒式模式.所以需要在頁(yè)面上聲明正確的DOCTYPE. 有關(guān)DOCTYPE請(qǐng)參考此文:

http://www.cnblogs.com/zhangziqiu/archive/2009/01/15/doctype.html

下面是兩種盒式模式的對(duì)比:

我們可以使用 jQuery.support.boxModel 屬性來(lái)獲取瀏覽器是否使用了W3C盒式模型. true表示使用W3C boxModel.

2.浮動(dòng)樣式

通過(guò)javascript腳本設(shè)置元素的float樣式時(shí), IE和FireFox存在不同, IE使用style.styleFloat, FireFox使用style.cssFloat:

 
 
 
 
  
  
  
  
div.style.styleFloat = "left"; //IE  
  
  
  
  
div.stlye.cssFloat = "left"; //FF 
 
 
 

jQuery.support.cssFloat 屬性返回true則表示可以使用cssFloat來(lái)設(shè)置float樣式. IE中返回false;

注意, 我們可以通過(guò)CSS()方法設(shè)置float樣式, jQuery內(nèi)部會(huì)自動(dòng)幫我們判斷是使用styleFloat還是cssFloat:

 
 
 
 
  
  
  
  
$("#divResult").css("float","left"); //兼容IE和FF 
 
 
 

#p#

四. 數(shù)組和對(duì)象操作

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

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

1.迭代

jQuery.each( object, callback )

返回值:Object

說(shuō)明:

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

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

講解:

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

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

對(duì)于數(shù)組我們可以使用 jQuery.each( object, callback ) 來(lái)遍歷, 這等同于使用for循環(huán).

注意傳入的***個(gè)參數(shù)可以是數(shù)組或者對(duì)象.如果數(shù)組,則遍歷數(shù)組中的每一個(gè)對(duì)象. ***個(gè)參數(shù)表示索引,第二個(gè)參數(shù)表示值, this表示當(dāng)前遍歷的元素, 可以通過(guò)返回false終止迭代, 比如下面的示例遍歷到第二個(gè)元素后會(huì)終止:

 
 
 
 
  
  
  
  
$.each(["a", "b", "c"], function(i, n)  
  
  
  
  
{  
  
  
  
  
    alert("Item #" + i + ": " + n);//可以獲取到i值  
  
  
  
  
    if (i >= 1)  
  
  
  
  
    {  
  
  
  
  
        return false;  
  
  
  
  
    }  
  
  
  
  
});  
  
  
  
  
 
  
  
  
  
 
  
  
  
  
$("#iterateArray").click(function(event)  
  
  
  
  
{  
  
  
  
  
var array = $.each(["a", "b", "c"], function(i, n)  
  
  
  
  
{  
  
  
  
  
    alert("Item #" + i + ": " + n ); //***個(gè)參數(shù)i表示索引, this表示當(dāng)前遍歷的對(duì)象  
  
  
  
  
    if (i >= 1)  
  
  
  
  
    {  
  
  
  
  
        return false;  
  
  
  
  
    }  
  
  
  
  
});  
  
  
  
  
});  
  
  
  
  
 
 
 
 

如果傳遞的是對(duì)象, 則遍歷對(duì)象的每一個(gè)屬性, 即使函數(shù)返回false也依然會(huì)遍歷完所有的屬性, ***個(gè)參數(shù)表示屬性key(屬性名稱,是obejct類型),第二個(gè)參數(shù)表示值,,this表示當(dāng)前屬性的值:

 
 
 
 
  
  
  
  
$("#iterateObject").click(function(event)  
  
  
  
  
{  
  
  
  
  
    $.each({ name: "ziqiu.zhang", sex: "male", status: "single" }, function(i, n)  
  
  
  
  
    {  
  
  
  
  
        alert("Item #" + i.toString() + ": " + n ); //***個(gè)參數(shù)i表示屬性的key(object), this表示屬性值  
  
  
  
  
        if (i >= 1)  
  
  
  
  
        {  
  
  
  
  
            return false;  
  
  
  
  
        }  
  
  
  
  
    });  
  
  
  
  
}); 
 
 
 

each將是我們最常使用的函數(shù), 特別注意each雖然迭代每一個(gè)元素或?qū)傩? 但是在迭代函數(shù)中并不會(huì)改變當(dāng)前元素的值, 也就是無(wú)法改變返回后的對(duì)象.如果需要改變數(shù)組中的每一個(gè)元素并且將結(jié)果返回, 因使用jQuery.map( array, callback )函數(shù).

2.篩選

jQuery.grep( array, callback, [invert] )

返回值: Array

說(shuō)明:

使用過(guò)濾函數(shù)過(guò)濾數(shù)組元素。

此函數(shù)至少傳遞兩個(gè)參數(shù)：待過(guò)濾數(shù)組和過(guò)濾函數(shù)。過(guò)濾函數(shù)必須返回 true 以保留元素或 false 以刪除元素。

講解:

默認(rèn)invert為false, 即過(guò)濾函數(shù)返回true為保留元素. 如果設(shè)置invert為true, 則過(guò)濾函數(shù)返回true為刪除元素.

下面的示例演示如何過(guò)濾數(shù)組中索引小于 0 的元素:

 
 
 
 
  
  
  
  
$.grep( [0,1,2], function(n,i){  
  
  
  
  
  return n > 0;  
  
  
  
  
}); 
 
 
 

返回的結(jié)果是[1,2]

3.轉(zhuǎn)換

jQuery.map( array, callback )

返回值:Array

說(shuō)明:

將一個(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è)例子:

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

4.合并

合并對(duì)象是我們常常編寫的功能, 通常使用臃腫的for循環(huán)來(lái)進(jìn)行.jQuery為我們提供了很多功能的合并函數(shù):

講解:

上面的函數(shù)看著有些混亂. 看看我們以后會(huì)常用的.

首先是jQuery.merge( first, second ), 將兩個(gè)數(shù)組合并. 下面這個(gè)示例說(shuō)明如何使用此函數(shù):

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
  
 
  
  
  
  
      
  
  
  
  
 
  
  
  
  
      
  
  
  
  
        $(function()  
  
  
  
  
        {  
  
  
  
  
            $("#go").click(function(event)  
  
  
  
  
            {  
  
  
  
  
                $("#divResult").html("");  
  
  
  
  
                var first = [1, 3, 5];  
  
  
  
  
                $("#divResult").append("first:[" + first.join(",") + "]").append("
");  
  
  
  
  
                var second = [2, 4, 6];  
  
  
  
  
                $("#divResult").append("second:[" + second.join(",") + "]").append("
");  
  
  
  
  
                var result = $.merge(first, second);  
  
  
  
  
                $("#divResult").append("result:[" + result.join(",") + "]").append("
");  
  
  
  
  
                $("#divResult").append("first after merged:[" + first.join(",") + "]
");  
  
  
  
  
                $("#divResult").append("second after merged:[" + second.join(",") + "]
");  
  
  
  
  
 
  
  
  
  
            });  
  
  
  
  
        });         
  
  
  
  
             
  
  
  
  
      
  
  
  
  
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
  
        合并數(shù)組