jQuery中不为人知的的几个要领

转来进修一下 jQuery中不为人知的的几个要领

jQuery近些年来依旧是web开辟中最受欢迎的类库,虽然人人褒贬不一,然则依旧不失为一款最盛行的Javascript,在本日这篇文章中,我们将引见几个jQuery的相干要领,不管你是入门级极客或许骨灰级极客,可以都邑疏忽这些要领的运用。愿望人人会以为有协助!

在事宜中return false

可以人人在编写事宜相干代码的时刻,有时刻会运用return false语句,代码以下:

$("a").click(function() {
   $(".gbtags").toggle();
   return false;
}

以上代码中,我们点击a元素,假如不return false,会触发对应a元素的链接,致使页面的地点变化。

而jQuery有规范的要领来协助你完成相似上面的功用,代码以下:

if ( ret !== undefined ) {
   if ( (event.result = ret) === false ) {
      event.preventDefault();
      event.stopPropagation();
   }
}

那末这两个完成体式格局有什么差别呢? 我们可以看看jQuery的源代码,以下:

if ( ret !== undefined ) {
   if ( (event.result = ret) === false ) {
      event.preventDefault();
      event.stopPropagation();
   }
}

人人看邃晓了吗?最简朴明白,以下:

return false;

即是

event.preventDefault();
event.stopPropagation();

在事宜处置惩罚中,假如你直接返回false,那末将会同时阻挠元素缺省行动而且停止元素事宜的Bubbling,即事宜同时阻挠当前元素父层元素,即:event.stopPropagation(); 所完成效果。

$.type来完成范例推断

或许人人都已习惯了运用javascript的当地要领:typeof 来推断范例,然则在jQuery中供应了一个更好的要领协助你推断范例,那就是$.type。

那末终究有什么区别呢? 我们先看看这个gbdebug:

http://www.gbtags.com/gb/debug/3361dbff-41c0-465d-81e3-1ef6cbb275e1.htm

运转以上代码,能看到以下输出效果:

// 返回object
result(typeof null);

// 返回object
result(typeof [0, 1, 2]);

// 返回object
result(typeof new Number(3));

// 返回null
result($.type(null));

// 返回array
result($.type([0, 1, 2]));

// 返回number
result($.type(new Number(3)));

人人看出来什么区别了吗? 运用$.type可以返回更正确的对象范例,而typeof则返回object,所以假如你运用jQuery来编码的时刻,运用$.type 将越发轻易。

运用attr()来完成removeAttr()的功用

可以人人习惯了运用attr()来增加元素属性,而运用removeAttr() 来删除元素属性。

然则实在运用attr()也能实行删除的效果,为何呢?请看看以下jQuery源代码:

attr: function( elem, name, value ) {
    ...
    if ( value !== undefined ) {

        if ( value === null ) {
            jQuery.removeAttr( elem, name );
    ...
}

从上面jQuery的源代码中可以看出来,假如你设置value为null的话,实在它就可以完成removeAttr的要领功用。

http://www.gbtags.com/gb/debug/269c89e1-b22f-40f9-8d26-8d995e999d29.htm

因而,我们可以以下体式格局来运转推断是不是删除属性:

$('a').attr('title', condition ? value : null);

不然你须要运用以下:

condition ? $('a').attr('title', value) : $('a').removeAttr('title');

是不是是轻微简朴一些?

$.makeArray来建立数组

有些时刻我们须要将相似数组的数据结构转化成为一个实在的数组,然后挪用相干数组要领,比方reverse,代码以下:

// 返回 NodeList
var elems = document.getElementsByTagName( "li" );
// 转化为Array
var arr = jQuery.makeArray( elems );
// 挪用数组要领反向排序
arr.reverse();
$( arr ).appendTo( document.body );

相干gbdebug:

http://www.gbtags.com/gb/debug/75d28491-aa13-4868-aa95-10b079337b82.htm

是不是是异常简朴?假如不运用$.makeArray,那末你须要本身处置惩罚Javascript来完成相似的功用,会异常贫苦

总结

以上就是几个人人可以在jQuery开辟中轻易疏忽的几个有用要领,或许你也有本身的一些不错的要领,请人人不吝分享!

    原文作者:BenCHou
    原文地址: https://segmentfault.com/a/1190000002564809
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞