封装jquery,封装工艺流程

jquery数组封装使用方法分享(jquery数组遍历)

$.each(array,

创新互联专注于企业成都全网营销推广、网站重做改版、集贤网站定制设计、自适应品牌网站建设、html5、商城网站制作、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为集贤等各大城市提供网站开发制作服务。

[callback])

遍历

不同于例遍

jQuery

对象的

$.each()

方法，此方法可用于例遍任何对象(不仅仅是数组哦~).

回调函数拥有两个参数：第一个为对象的成员或数组的索引，

第二个为对应变量或内容.

如果需要退出

each

循环可使回调函数返回

false，

其它返回值将被忽略.

each遍历，相信都不陌生，在平常的事件处理中，是for循环的变体，但比for循环强大.在数组中，它可以轻松的攻取数组索引及对应的值.例:

使用方法如下：

复制代码

代码如下:

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);

//

如果想退出循环

//

return

false;

});

再来个测试程序：

[/code]

var

fruit

=

['苹果','香蕉','橙子','哈密瓜','芒果'];

//用原生getElementsByTagName获取h2元素的对象集合

var

h2obj=document.getElementsByTagName('h2');

//$.each()遍历数组

$('input#js_each').click(function(){

$.each(fruit,function(key,val){

//回调函数有两个参数,第一个是元素索引,第二个为当前值

alert('fruit数组中，索引：'+key+'对应的值为：'+val);

});

});

[/code]

相对于原生的for..in,each更强壮一点.

for..in也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取;

$.grep(array,

callback,

[invert])过滤

使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大):

待过滤数组和过滤函数.

过滤函数必须返回

true

以保留元素或

false

以删除元素.

另外,过滤函数还可以是可设置为一个字条串(个人不推荐,欲了解自行查阅);

复制代码

代码如下:

v[code]ar

temp

=

[];

temp

=

$.grep(arr,

function(val,

key)

{

if(val.indexOf('c')

!=

-1)

return

true;

//

如果[invert]参数不给或为false,

$.grep只收集回调函数返回true的数组元素

//

反之[invert]参数为true,

$.grep收集回调函数返回false的数组元素

},

false);

console.dir(temp);

再来个测试程序：

复制代码

代码如下:

//$.grep()过滤数组

$('input#js_grep').click(function(){

$.grep(fruit,function(val,key){

//过滤函数有两个参数,第一个为当前元素,第二个为元素索引

if(val=='芒果'){

alert('数组值为

芒果

的下标是:

'+key);

}

});

var

_moziGt1=$.grep(fruit,function(val,key){

return

key1;

});

alert('fruit数组中索引值大于1的元素为:

'+_moziGt1);

var

_moziLt1=$.grep(fruit,function(val,key){

return

key1;

},true);

//此处传入了第三个可靠参数,对过滤函数中的返回值取反

alert('fruit数组中索引值小于等于1的元素为:

'+_moziLt1);

});

$.map(array,[callback])按给定条件转换数组

作为参数的转换函数会为每个数组元素调用,

而且会给这个转换函数传递一个表示被转换的元素作为参数.

转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,

并扩展至原始数组中.这个是个很强大的方法,但并不常用.

它可以根据特定条件,更新数组元素值,或根据原值扩展一个新的副本元素.

复制代码

代码如下:

//1.6之前的版本只支持数组

temp

=

$.map(arr,

function(val,

key)

{

//返回null,返回的数组长度减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);

再来个测试程序：

复制代码

代码如下:

//$.map()按给定条件转换数组

$('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){

//为数组元素扩展一个新元素

return

[val,(val+'[扩展]')];

});

alert('在每个元素后面加\'[新加]\'字符后的数组为:

'+

_mapArrA);

alert('只给元素

苹果

添加字符后的数组为:

'+

_mapArrB);

alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为

'+_mapArrC);

});

$.inArray(val,array)判断值是否存在于数组中

确定第一个参数在数组中的位置,

从0开始计数(如果没有找到则返回

-1

).记得indexOf()方法了吗?

indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0的值,若未找到则返回-1.现在,

知道怎么用了吧.

有了它,

判断某个值是否存在于数组中,就变得轻而易举了.

复制代码

代码如下:

//返回元素在数组中的位置,0为起始位置,返回-1则未找到该元素

console.log($.inArray('javascript',

arr));

测试程序：

[code]

//$.inArray判断值是否在数组中,不存在返回-1,存在则返回对应索引值

$('input#js_inarray').click(function(){

var

_exist=$.inArray('芒果',fruit);

var

_inexistence=$.inArray('榴莲',fruit)

if(_exist=0){

alert('芒果

存在于数组fruit中,其在数组中索引值是:

'+_exist);

}

if(_inexistence

0){

alert('榴莲

不存在于数组fruit中!,返回值为:

'+_inexistence+'!');

}

});

如何封装jquery插件

前言

如今做web开发，jquery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个独立的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下面就是一个简单扩展Jquery对象的demo：

//sample:扩展jquery对象的方法，bold()用于加粗字体。

(function ($) {

$.fn.extend({                "bold": function () {                    ///summary

/// 加粗字体

////summary

return this.css({ fontWeight: "bold" });

}

});

})(jQuery);

调用方式：

这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。

一、jquery的插件机制

为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有一个重载。

jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：

//扩展jQuery对象本身        jQuery.extend({            "minValue": function (a, b) {                ///summary

/// 比较两个值，返回最小值

////summary

return a b ? a : b;

},            "maxValue": function (a, b) {                ///summary

/// 比较两个值，返回最大值

////summary

return a b ? a : b;

}

});        //调用

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])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。

如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。

未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

参数

deep:       可选。如果设为true，则递归合并。

target:     待修改对象。

object1:   待合并到第一个对象的对象。

objectN:   可选。待合并到第一个对象的对象。

示例1：

合并 settings 和 options，修改并返回 settings。

var settings = { validate: false, limit: 5, name: "foo" }; 

var options = { validate: true, name: "bar" }; 

jQuery.extend(settings, options);

结果：

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);

结果：

settings == { validate: true, limit: 5, name: "bar" } 

empty == { validate: true, limit: 5, name: "bar" }

这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。

jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

首先我们来看fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {.....};

};

原来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法， jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。

二、自执行的匿名函数/闭包

1. 什么是自执行的匿名函数?

它是指形如这样的函数: (function {// code})();

2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?

3. 分析

(1). 首先, 要清楚两者的区别:     (function {// code})是表达式, function {// code}是函数声明.

(2). 其次, js"预编译"的特点:     js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.

(3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;

当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……

例如：

bootstrap 框架中的插件写法：

!function($){

//do something;

}(jQuery);

和

(function($){

//do something;

})(jQuery); 是一回事。

匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。

例如：

var a=1;

(function()(){

var a=100;

})();

alert(a); //弹出 1

更多 闭包和匿名函数 可查看 Javascript的匿名函数与自执行 这篇文章。

三、一步一步封装JQuery插件

接下来我们一起来写个高亮的jqury插件

1.定一个闭包区域，防止插件"污染"

//闭包限定命名空间(function ($) {

})(window.jQuery);

2.jQuery.fn.extend(object)扩展jquery 方法，制作插件

//闭包限定命名空间(function ($) {

$.fn.extend({        "highLight":function(options){            //do something        }

});

})(window.jQuery);

3.给插件默认参数，实现 插件的功能

//闭包限定命名空间(function ($) {

$.fn.extend({        "highLight": function (options) {            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数

this.each(function () {  //这里的this 就是 jQuery对象

//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。

var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom

//根据参数来设置 dom的样式

$this.css({

backgroundColor: opts.background,

color: opts.foreground

});

});

}

});    //默认参数

var defaluts = {

foreground: 'red',

background: 'yellow'

};

})(window.jQuery);

到这一步，高亮插件基本功能已经具备了。调用代码如下：

$(function () {

$("p").highLight(); //调用自定义 高亮插件});

这里只能 直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：

$('#id').css({marginTop:'100px'}).addAttr("title","测试“); 

但是我们上面的插件，就不能这样链式调用了。比如：$("p").highLight().css({marginTop:'100px'}); //将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return 出来，和上面的代码没啥区别）

如何封装jquery里面的方法怎么使用

就如某些视频网站上的弹幕功能一样，只不过国内大多数视频网站是用flash实现的，而本插件通过jQuery。

就如绝大多数视频网站的弹幕功能，私也实现了彩色弹幕，顶端弹幕及底端弹幕，也可以即时操控弹幕透明度。当然也可以在弹幕运行的过程中暂停和继续。

jquery easyui 控件是如何封装的，请简单示例代码方法

首先定义一个名字，如：mywidget-userlist，然后在需要的地方使用，如：

input id="dd" class="mywidget-userlist" /input

在全局加载的公用脚本里，添加如下代码：

$("input.mywidget-userlist").live("click", function(evt){

alert("此处具体实现你要的效果，放你的大段代码。");

});

这样，以后你就不用重复那些代码了，而是只要在需要使用的input上加个class就能实现这样的效果了。

怎么把下面的jquery封装到一个JS文件中，用的时候可以调用

基于jquery封装的一个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;

}

//计算总页数

Total = parseInt(Total); //总记录数

PageSize = parseInt(PageSize); //每页显示数

curPageNum = parseInt(curPageNum); //当前页

//总页数

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个页码，前面5个，后面5个

if ((curPageNum + i - currint) = 1 (curPageNum + i - currint) = AllPage)

if (currint == i) {

//当前页处理

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);

下边是调用方法：

function QueryList(curpage) {

if (curpage == "" || curpage == null || curpage == undefined) {

curpage = 1;

}

var pagesize = 10;

var Countys = $("#Countys").val(); //县

var enddate = $("#enddate").val(); //结束时间

var begindate = $("#begindate").val(); //开始时间

$.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按卡口点布控/td";

}

str += "td" + item.IsAll == "0" ? "全县布控" : "按卡口点布控" + "/td";

str += "td修改/td";

str += "td删除/td";

str += "td详细/td";

str + "/tr";

});

$("#srh_rslt tbody").html(str);

$(".pagination").html($.PageFunc(mydata.total, pagesize, curpage, "QueryList"));

}

});

}