$.each(array,
創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、集賢網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為集賢等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
[callback])
遍歷
不同于例遍
jQuery
對(duì)象的
$.each()
方法，此方法可用于例遍任何對(duì)象(不僅僅是數(shù)組哦~).
回調(diào)函數(shù)擁有兩個(gè)參數(shù)：第一個(gè)為對(duì)象的成員或數(shù)組的索引，
第二個(gè)為對(duì)應(yīng)變量或內(nèi)容.
如果需要退出
each
循環(huán)可使回調(diào)函數(shù)返回
false，
其它返回值將被忽略.
each遍歷，相信都不陌生，在平常的事件處理中，是for循環(huán)的變體，但比for循環(huán)強(qiáng)大.在數(shù)組中，它可以輕松的攻取數(shù)組索引及對(duì)應(yīng)的值.例:
使用方法如下：
復(fù)制代碼
代碼如下:
var
arr
=
['javascript',
'php',
'java',
'c++',
'c#',
'perl',
'vb',
'html',
'css',
'objective-c'];
$.each(arr,
function(key,
val)
{
//
firebug
console
console.log('index
in
arr:'
+
key
+
",
corresponding
value:"
+
val);
//
如果想退出循環(huán)
//
return
false;
});
再來個(gè)測試程序：
[/code]
var
fruit
=
['蘋果','香蕉','橙子','哈密瓜','芒果'];
//用原生getElementsByTagName獲取h2元素的對(duì)象集合
var
h2obj=document.getElementsByTagName('h2');
//$.each()遍歷數(shù)組
$('input#js_each').click(function(){
$.each(fruit,function(key,val){
//回調(diào)函數(shù)有兩個(gè)參數(shù),第一個(gè)是元素索引,第二個(gè)為當(dāng)前值
alert('fruit數(shù)組中，索引：'+key+'對(duì)應(yīng)的值為：'+val);
});
});
[/code]
相對(duì)于原生的for..in,each更強(qiáng)壯一點(diǎn).
for..in也可以遍歷數(shù)組,并返回對(duì)應(yīng)索引,但值是需要通過arrName[key]來獲取;
$.grep(array,
callback,
[invert])過濾
使用過濾函數(shù)過濾數(shù)組元素.此函數(shù)至少傳遞兩個(gè)參數(shù)(第三個(gè)參數(shù)為true或false,對(duì)過濾函數(shù)返回值取反,個(gè)人覺得用處不大):
待過濾數(shù)組和過濾函數(shù).
過濾函數(shù)必須返回
true
以保留元素或
false
以刪除元素.
另外,過濾函數(shù)還可以是可設(shè)置為一個(gè)字條串(個(gè)人不推薦,欲了解自行查閱);
復(fù)制代碼
代碼如下:
v[code]ar
temp
=
[];
temp
=
$.grep(arr,
function(val,
key)
{
if(val.indexOf('c')
!=
-1)
return
true;
//
如果[invert]參數(shù)不給或?yàn)閒alse,
$.grep只收集回調(diào)函數(shù)返回true的數(shù)組元素
//
反之[invert]參數(shù)為true,
$.grep收集回調(diào)函數(shù)返回false的數(shù)組元素
},
false);
console.dir(temp);
再來個(gè)測試程序：
復(fù)制代碼
代碼如下:
//$.grep()過濾數(shù)組
$('input#js_grep').click(function(){
$.grep(fruit,function(val,key){
//過濾函數(shù)有兩個(gè)參數(shù),第一個(gè)為當(dāng)前元素,第二個(gè)為元素索引
if(val=='芒果'){
alert('數(shù)組值為
芒果
的下標(biāo)是:
'+key);
}
});
var
_moziGt1=$.grep(fruit,function(val,key){
return
key1;
});
alert('fruit數(shù)組中索引值大于1的元素為:
'+_moziGt1);
var
_moziLt1=$.grep(fruit,function(val,key){
return
key1;
},true);
//此處傳入了第三個(gè)可靠參數(shù),對(duì)過濾函數(shù)中的返回值取反
alert('fruit數(shù)組中索引值小于等于1的元素為:
'+_moziLt1);
});
$.map(array,[callback])按給定條件轉(zhuǎn)換數(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ù)組中.這個(gè)是個(gè)很強(qiáng)大的方法,但并不常用.
它可以根據(jù)特定條件,更新數(shù)組元素值,或根據(jù)原值擴(kuò)展一個(gè)新的副本元素.
復(fù)制代碼
代碼如下:
//1.6之前的版本只支持?jǐn)?shù)組
temp
=
$.map(arr,
function(val,
key)
{
//返回null,返回的數(shù)組長度減1
if(val
===
'vb')
return
null;
return
val;
});
console.dir(temp);
//1.6開始支持json格式的object
var
obj
=
{key1:
'val1',
key2:
'val2',
key3:
'val3'};
temp
=
$.map(obj,
function(val,
key)
{
return
val;
});
console.dir(temp);
再來個(gè)測試程序：
復(fù)制代碼
代碼如下:
//$.map()按給定條件轉(zhuǎn)換數(shù)組
$('input#js_map').click(function(){
var
_mapArrA=$.map(fruit,function(val){
return
val+'[新加]';
});
var
_mapArrB=$.map(fruit,function(val){
return
val=='蘋果'
?
'[只給蘋果加]'+val
:
val;
});
var
_mapArrC=$.map(fruit,function(val){
//為數(shù)組元素?cái)U(kuò)展一個(gè)新元素
return
[val,(val+'[擴(kuò)展]')];
});
alert('在每個(gè)元素后面加\'[新加]\'字符后的數(shù)組為:
'+
_mapArrA);
alert('只給元素
蘋果
添加字符后的數(shù)組為:
'+
_mapArrB);
alert('為原數(shù)組中每個(gè)元素,擴(kuò)展一個(gè)添加字符\'[新加]\'的元素,返回的數(shù)組為
'+_mapArrC);
});
$.inArray(val,array)判斷值是否存在于數(shù)組中
確定第一個(gè)參數(shù)在數(shù)組中的位置,
從0開始計(jì)數(shù)(如果沒有找到則返回
-1
).記得indexOf()方法了嗎?
indexOf()返回字符串的首次出現(xiàn)位置,而$.inArray()返回的是傳入?yún)?shù)在數(shù)組中的位置,同樣的,如果找到的,返回的是一個(gè)大于或等于0的值,若未找到則返回-1.現(xiàn)在,
知道怎么用了吧.
有了它,
判斷某個(gè)值是否存在于數(shù)組中,就變得輕而易舉了.
復(fù)制代碼
代碼如下:
//返回元素在數(shù)組中的位置,0為起始位置,返回-1則未找到該元素
console.log($.inArray('javascript',
arr));
測試程序：
[code]
//$.inArray判斷值是否在數(shù)組中,不存在返回-1,存在則返回對(duì)應(yīng)索引值
$('input#js_inarray').click(function(){
var
_exist=$.inArray('芒果',fruit);
var
_inexistence=$.inArray('榴蓮',fruit)
if(_exist=0){
alert('芒果
存在于數(shù)組fruit中,其在數(shù)組中索引值是:
'+_exist);
}
if(_inexistence
0){
alert('榴蓮
不存在于數(shù)組fruit中!,返回值為:
'+_inexistence+'!');
}
});
前言
如今做web開發(fā)，jquery 幾乎是必不可少的，就連vs神器在2010版本開始將Jquery 及ui 內(nèi)置web項(xiàng)目里了。至于使用jquery好處這里就不再贅述了，用過的都知道。今天我們來討論下jquery的插件機(jī)制，jquery有著成千上萬的第三方插件，有時(shí)我們寫好了一個(gè)獨(dú)立的功能，也想將其與jquery結(jié)合起來，可以用jquery鏈?zhǔn)秸{(diào)用，這就要擴(kuò)展jquery，寫成插件形式了，如下面就是一個(gè)簡單擴(kuò)展Jquery對(duì)象的demo：
//sample:擴(kuò)展jquery對(duì)象的方法，bold()用于加粗字體。
(function ($) {
$.fn.extend({ ? ? ? ? ? ? ? ?"bold": function () { ? ? ? ? ? ? ? ? ? ?///summary
/// 加粗字體
////summary
return this.css({ fontWeight: "bold" });
}
});
})(jQuery);
調(diào)用方式：
這是一個(gè)非常簡單的擴(kuò)展。接下來我們一步步來解析上面的代碼。
一、jquery的插件機(jī)制
為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend() 方法有一個(gè)重載。
jQuery.extend(object) ,一個(gè)參數(shù)的用于擴(kuò)展jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的 ajax方法都是用jQuery.ajax()這樣調(diào)用的，有點(diǎn)像 “類名.方法名” 靜態(tài)方法的調(diào)用方式。下面我們也來寫個(gè)jQuery.extend(object)的例子：
//擴(kuò)展jQuery對(duì)象本身 ? ? ? ?jQuery.extend({ ? ? ? ? ? ?"minValue": function (a, b) { ? ? ? ? ? ? ? ?///summary
/// 比較兩個(gè)值，返回最小值
////summary
return a b ? a : b;
}, ? ? ? ? ? ?"maxValue": function (a, b) { ? ? ? ? ? ? ? ?///summary
/// 比較兩個(gè)值，返回最大值
////summary
return a b ? a : b;
}
}); ? ? ? ?//調(diào)用
var i = 100; j = 101; ? ? ? ?var min_v = $.minValue(i, j); // min_v 等于 100
var max_v = $.maxValue(i, j); // max_v 等于 101
重載版本：jQuery.extend([deep], target, object1,?[objectN])
用一個(gè)或多個(gè)其他對(duì)象來擴(kuò)展一個(gè)對(duì)象，返回被擴(kuò)展的對(duì)象。
如果不指定target，則給jQuery命名空間本身進(jìn)行擴(kuò)展。這有助于插件作者為jQuery增加新方法。
如果第一個(gè)參數(shù)設(shè)置為true，則jQuery返回一個(gè)深層次的副本，遞歸地復(fù)制找到的任何對(duì)象。否則的話，副本會(huì)與原對(duì)象共享結(jié)構(gòu)。
未定義的屬性將不會(huì)被復(fù)制，然而從對(duì)象的原型繼承的屬性將會(huì)被復(fù)制。
參數(shù)
deep:?????? 可選。如果設(shè)為true，則遞歸合并。
target:?????待修改對(duì)象。
object1:?? 待合并到第一個(gè)對(duì)象的對(duì)象。
objectN:?? 可選。待合并到第一個(gè)對(duì)象的對(duì)象。
示例1：
合并 settings 和 options，修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };?
var options = { validate: true, name: "bar" };?
jQuery.extend(settings, options);
結(jié)果：
settings == { validate: true, limit: 5, name: "bar" }
示例2：
合并 defaults 和 options, 不修改 defaults。
var empty = {};?
var defaults = { validate: false, limit: 5, name: "foo" };?
var options = { validate: true, name: "bar" };?
var settings = jQuery.extend(empty, defaults, options);
結(jié)果：
settings == { validate: true, limit: 5, name: "bar" }?
empty == { validate: true, limit: 5, name: "bar" }
這個(gè)重載的方法，我們一般用來在編寫插件時(shí)用自定義插件參數(shù)去覆蓋插件的默認(rèn)參數(shù)。
jQuery.fn.extend(object)擴(kuò)展 jQuery 元素集來提供新的方法（通常用來制作插件）。
首先我們來看fn 是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {.....};
};
原來 jQuery.fn = jQuery.prototype，也就是jQuery對(duì)象的原型。那jQuery.fn.extend()方法就是擴(kuò)展jQuery對(duì)象的原型方法。我們知道擴(kuò)展原型上的方法，就相當(dāng)于為對(duì)象添加”成員方法“，類的”成員方法“要類的對(duì)象才能調(diào)用，所以使用jQuery.fn.extend(object)擴(kuò)展的方法，?jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區(qū)分開來。
二、自執(zhí)行的匿名函數(shù)/閉包
1. 什么是自執(zhí)行的匿名函數(shù)?
它是指形如這樣的函數(shù): (function {// code})();
2. 疑問 為什么(function {// code})();可以被執(zhí)行, 而function {// code}();卻會(huì)報(bào)錯(cuò)?
3. 分析
(1). 首先, 要清楚兩者的區(qū)別: ??? (function {// code})是表達(dá)式, function {// code}是函數(shù)聲明.
(2). 其次, js"預(yù)編譯"的特點(diǎn): ??? js在"預(yù)編譯"階段, 會(huì)解釋函數(shù)聲明, 但卻會(huì)忽略表式.
(3). 當(dāng)js執(zhí)行到function() {//code}();時(shí), 由于function() {//code}在"預(yù)編譯"階段已經(jīng)被解釋過, js會(huì)跳過function(){//code}, 試圖去執(zhí)行();, 故會(huì)報(bào)錯(cuò);
當(dāng)js執(zhí)行到(function {// code})();時(shí), 由于(function {// code})是表達(dá)式, js會(huì)去對(duì)它求解得到返回值, 由于返回值是一 個(gè)函數(shù), 故而遇到();時(shí), 便會(huì)被執(zhí)行.
另外， 函數(shù)轉(zhuǎn)換為表達(dá)式的方法并不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……
例如：
bootstrap 框架中的插件寫法：
!function($){
//do something;
}(jQuery);
和
(function($){
//do something;
})(jQuery); 是一回事。
匿名函數(shù)最大的用途是創(chuàng)建閉包（這是JavaScript語言的特性之一），并且還可以構(gòu)建命名空間，以減少全局變量的使用。
例如：
var a=1;
(function()(){
var a=100;
})();
alert(a); //彈出 1
更多 閉包和匿名函數(shù) 可查看?Javascript的匿名函數(shù)與自執(zhí)行?這篇文章。
三、一步一步封裝JQuery插件
接下來我們一起來寫個(gè)高亮的jqury插件
1.定一個(gè)閉包區(qū)域，防止插件"污染"
//閉包限定命名空間(function ($) {
})(window.jQuery);
2.jQuery.fn.extend(object)擴(kuò)展jquery 方法，制作插件
//閉包限定命名空間(function ($) {
$.fn.extend({ ? ? ? ?"highLight":function(options){ ? ? ? ? ? ?//do something ? ? ? ?}
});
})(window.jQuery);
3.給插件默認(rèn)參數(shù)，實(shí)現(xiàn) 插件的功能
//閉包限定命名空間(function ($) {
$.fn.extend({ ? ? ? ?"highLight": function (options) { ? ? ? ? ? ?var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認(rèn)參數(shù)
this.each(function () { ?//這里的this 就是 jQuery對(duì)象
//遍歷所有的要高亮的dom,當(dāng)調(diào)用 highLight()插件的是一個(gè)集合的時(shí)候。
var $this = $(this); //獲取當(dāng)前dom 的 jQuery對(duì)象，這里的this是當(dāng)前循環(huán)的dom
//根據(jù)參數(shù)來設(shè)置 dom的樣式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
});
}
}); ? ?//默認(rèn)參數(shù)
var defaluts = {
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);
到這一步，高亮插件基本功能已經(jīng)具備了。調(diào)用代碼如下：
$(function () {
$("p").highLight(); //調(diào)用自定義 高亮插件});
這里只能 直接調(diào)用，不能鏈?zhǔn)秸{(diào)用。我們知道jQuey是可以鏈?zhǔn)秸{(diào)用的，就是可以在一個(gè)jQuery對(duì)象上調(diào)用多個(gè)方法，如：
$('#id').css({marginTop:'100px'}).addAttr("title","測試“);?
但是我們上面的插件，就不能這樣鏈?zhǔn)秸{(diào)用了。比如：$("p").highLight().css({marginTop:'100px'}); //將會(huì)報(bào)找不到css方法，原因在與我的自定義插件在完成功能后，沒有將 jQuery對(duì)象給返回出來。接下來，return jQuery對(duì)象，讓我們的插件也支持鏈?zhǔn)秸{(diào)用。（其實(shí)很簡單，就是執(zhí)行完我們插件代碼的時(shí)候?qū)Query對(duì)像return 出來，和上面的代碼沒啥區(qū)別）
就如某些視頻網(wǎng)站上的彈幕功能一樣，只不過國內(nèi)大多數(shù)視頻網(wǎng)站是用flash實(shí)現(xiàn)的，而本插件通過jQuery。
就如絕大多數(shù)視頻網(wǎng)站的彈幕功能，私也實(shí)現(xiàn)了彩色彈幕，頂端彈幕及底端彈幕，也可以即時(shí)操控彈幕透明度。當(dāng)然也可以在彈幕運(yùn)行的過程中暫停和繼續(xù)。
首先定義一個(gè)名字，如：mywidget-userlist，然后在需要的地方使用，如：
input id="dd" class="mywidget-userlist" /input
在全局加載的公用腳本里，添加如下代碼：
$("input.mywidget-userlist").live("click", function(evt){
alert("此處具體實(shí)現(xiàn)你要的效果，放你的大段代碼。");
});
這樣，以后你就不用重復(fù)那些代碼了，而是只要在需要使用的input上加個(gè)class就能實(shí)現(xiàn)這樣的效果了。
基于jquery封裝的一個(gè)js分頁代碼：
(function ($) {
var PageFunc = function PageFunc() { }
$.PageFunc = function (Total, PageSize, curPageNum, FunUrl) {
if (PageSize == "" || PageSize == null || PageSize == undefined) {
PageSize = 10;
}
if (curPageNum == "" || curPageNum == null || curPageNum == undefined) {
curPageNum = 1;
}
//計(jì)算總頁數(shù)
Total = parseInt(Total); //總記錄數(shù)
PageSize = parseInt(PageSize); //每頁顯示數(shù)
curPageNum = parseInt(curPageNum); //當(dāng)前頁
//總頁數(shù)
var AllPage = Math.floor(Total / PageSize);
if (Total % PageSize != 0) {
AllPage++;
}
var navHtml = "";
if (curPageNum = 0)
curPageNum = 1;
if (AllPage 1) {
if (curPageNum != 1) {
//處理首頁連接
navHtml += "spana href=\"javascript:" + FunUrl + "('1')\" |/a/span ";
}
if (curPageNum 1) {
//處理上一頁的連接
navHtml += "spana href=\"javascript:" + FunUrl + "('" + (curPageNum - 1) + "')\" /a/span ";
}
else {
navHtml += "span class=\"disabled\"/span ";
}
var currint = 5;
for (var i = 0; i = 10; i++) {
//一共最多顯示10個(gè)頁碼，前面5個(gè)，后面5個(gè)
if ((curPageNum + i - currint) = 1 (curPageNum + i - currint) = AllPage)
if (currint == i) {
//當(dāng)前頁處理
navHtml += "span lass=\"current\"[" + curPageNum + "]/span ";
}
else {
//一般頁處理
var n = curPageNum + i - currint;
navHtml += "a href=\"javascript:" + FunUrl + "('" + (parseInt(n)) + "')\"" + n + "/a ";
}
}
if (curPageNum AllPage) {
//處理下一頁的鏈接
navHtml += "spana href=\"javascript:" + FunUrl + "('" + (parseInt(curPageNum) + 1) + "')\"/a/span ";
}
else {
navHtml += "span class=\"disabled\"/span ";
}
if (curPageNum != AllPage) {
navHtml += "spana href=\"javascript:" + FunUrl + "('" + AllPage + "')\" |/a/span ";
}
}
navHtml += "span[" + curPageNum + "/" + AllPage + "]/span ";
return navHtml;
};
})(jQuery);
下邊是調(diào)用方法：
function QueryList(curpage) {
if (curpage == "" || curpage == null || curpage == undefined) {
curpage = 1;
}
var pagesize = 10;
var Countys = $("#Countys").val(); //縣
var enddate = $("#enddate").val(); //結(jié)束時(shí)間
var begindate = $("#begindate").val(); //開始時(shí)間
$.ajax({
url: "",
type: "POST",
data: { "Countys": Countys, "enddate": enddate, "begindate": begindate, "curpage": curpage, "pagesize": pagesize },
dataType: "json",
error: function (xhr, status, errMsg) { window.location.href = "/CommonError/index/" + errMsg.code + "?txt=" + errMsg.msg; },
success: function (mydata) {
var str = "";
$.each(mydata.Tdata, function (i, item) {
str += "tr"
str += "td" + $.FormatDateTime(item.ControlBeginTime, false) + "/td";
str += "td" + $.FormatDateTime(item.ControlEndTime, false) + "/td";
str += "td" + item.Name + "/td";
str += "td" + item.PlateNumber + "/td";
str += "td" + item.ControlDept + "/td";
if (item.IsAll == "0") {
str += "td全縣布控/td";
}
else {
str += "td按卡口點(diǎn)布控/td";
}
str += "td" + item.IsAll == "0" ? "全縣布控" : "按卡口點(diǎn)布控" + "/td";
str += "td修改/td";
str += "td刪除/td";
str += "td詳細(xì)/td";
str + "/tr";
});
$("#srh_rslt tbody").html(str);
$(".pagination").html($.PageFunc(mydata.total, pagesize, curpage, "QueryList"));
}
});
}
重慶分公司
重慶分公司
