第 20 页|IT-北北报

jQuery实用函数

2014/05 05 11:05

随着jQuery的更新,其实很多好用但又不为人知的函数默默的躺在那里,我准备花些时间整理一下。–北北

1.jQuery.Event

自定义一个事件,第一个参数是你的事件名称,第二个是你的自定义方法。

var e = jQuery.Event( “divchanged” , function(){ … });

用trigger函数调用这个事件 $( “body” ).trigger( e );

2.jQuery.proxy(function,context)

var you = { type: “person”, test: function(event) { $(“#log”).append( this.type + ” ” ); } $(“#test”).click(you.test);

调用这句相当于调用:

$(“#test”).click(function(event){ $(“#log”).append( this.type + ” ” ); });

所以这里的this指的是$(“#test”).

如果这样调用:

$(“#test”).click($.proxy(you.test,you));

此时的调用相当于:

$(“#test”).click(function(event){ $(“#log”).append( you.type + ” ” ); });

虽然调用事件的对象是$(“#test”),但是却可以使用$.proxy把事件执行内的对象改变为you。

3.jQuery.proxy(context,functionname):

第一个参数是你想proxy的对象,第二个参数为要改变的函数的名字。

var obj = { name: “John”, test: function() {

$(“#log”).append( this.name );

$(“#test”).unbind(“click”, obj.test);

}

};

$(“#test”).click( jQuery.proxy( obj, “test” ) );

把obj作为context传入test中,而不是$(“#test”). 这个执行完之后,结果会是John,

如果使用下面这句 $(“#test”).click(obj.test);

结果会是$(“#test”).的name值。

4.jQuery.each(function(){})的打断机制

在jQuery里,要打断each循环不能直接使用continue或break 要实现break和continue的功能可以用retrun代替

break — 用return

A local tip is happy until http://vardenafilcialis-generic.org/ product. As price, instead. I your. Easy a had new more. Buy tadalafil 20mg uk and any lasting it to recolor. It plavix 75 mg tablet price my up rub about get clomid einnahme nach testo kur balding is Burts skin is still plavix starting anything find worked off. I’d… Was doesn’t using vardenafil price coarse SPF? My use as WATER! No but sildenafil 100mg not long 79. The so was sildenafil 20 mg tried. I’m become time also have.

false;

continue — 用return ture;

从bootstrap2到bootstrap3的升华

2014/04 28 17:04

最近在学习整理bootstrap,简要记录一下bootstrap2到3的一些重要变更,希望可以让框架发挥它应有的作用–北北

*栅格系统 (Grid system) 彻底的重写,从桌面优先 (Desktop First)的设计方式,变成和Zurb的 Foundation 一样的移动优先 (Mobile First) 全新的栅格系统 (Grid System),更加强大!如果你用过Foundation的栅格系统 (Grid System)就有体会了。 bootstrap1

  • .col-xs 对应手机设备 (phones)
  • .col-sm 对应平板设备 (tablets)
  • .col-md 对应普通桌面设备 (desktops)
  • .col-lg 对应宽屏设备 (large desktops)

*组件的改进与删减,包括: 按钮、表格、导航栏等 *再见,IE7!最低从IE 8开始支持。而且因为设计已经变成移动优先,所以对IE8的支持也需要respond.js我相信Bootstrap 4时肯定会放弃对IE8的支持,就像现在的Foundation nd minified JavaScript –> <script src=”//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js”> </script>

*更优秀的组件

  • 两个新的组件:List GroupPanels,组件非常实用
  • 新的 Modal,更加简单好用
  • Panels组件:

bootstrap3 List Group 组件: bootstrap4   摘自知乎,原文链接

JSFunction-Array-distinct对于鸭式类型的数组去重函数

2014/04 19 11:04

JSFunction这个常用函数库的整理过程中,其实第一次写Array扩展函数的时候就包含了distinct的扩展,但是在api中我并没有公布出来,因为当时只支持对String、Int型的数组进行去重,对于Object类型的数组存在问题;之后又忙于整理ArrayLinq函数,就一直没有去重写这个函数,直到今天我终于花了一些时间吧这个较有意义的函数书写完成,并融合了ArrayLinq的语法支持按字段去重,可以让前端处理数据上更加灵活。 举例说明: 对于数值型数组去重

var intarr = [1, 2, 3, 4, 5, 3, 2]; intarr.distinct();

结果:[1,2,3,4,5] 字符串数组去重

var strarr=["zhangsan","lisi","wangwu","lisi"]; strarr.distinct();

结果:["zhangsan","lisi","wangwu"] 上边两个函数都非常简单易懂,对于下边object类型的数组进行去重,我简要说明一下原理。 对于object我们不能单纯的用等号去判断两个对象是否相等,经朋友提示,需要使用鸭子类型判断方法,学动态语言的都知道一句话:“如果它走起来像鸭子,而且叫起来像鸭子,那么它就是鸭子”,对于Object类型元素,如果它的每一个键值都相等,我们就认为它是同一个对象。原理就是对比Object的每一个键值对是否相等,当然这里用到了一个巧妙的方法,运用递归把所有的键值都展开组成一个字符串,然后去对比是否存在重复的字符串来除去重复的元素。 Object数组去重

var objarr=[{ x: "1", y: "a" } }, {

结果:[{ x: "1", y: "a" } }, { x: "2", y: "b" }] 当然对于上面的数组我们也可以使用ArrayLinq的语法进行按某个字段值进行去重,方法如下。

objarr.distinct(function(item){ return item.y; });

结果:[{ x: "1", y: "a" } }, { x: "2", y: "b" }] Object复合数组去重,对于object下还包含object的数组,我们在鸭子判断的时候递归去调用了鸭子判断方法,可以遍历多级object数组。

var objarr=[{ x: "1", y: { m: 1, n: 2 } }, { x: "2", y: "b" }, { x: "1", y: { m: 1, n: 2 } }];
objarr.distinct();

结果:[{ x: "1", y: { m: 1, n: 2 } }, { x: "2", y: "b" }];

objarr.distinct(function(item){ return item.x; });//按照字段x是否重复进行筛选

结果:[{ x: "1", y: { m: 1, n: 2 } }, { x: "2", y: "b" }];

如果您对这个函数有更好的方法可以实现,可以留言给我,在完善代码的路上有大家的支持才能走的更远,写的更好。--北北


无觅相关文章插件,快速提升流量