资讯专栏INFORMATION COLUMN

jQuery中鲜为人知的的几个方法

DDreach / 1520人阅读

摘要:转来学习一下中鲜为人知的的几个方法近些年来仍旧是开发中最受欢迎的类库,虽然大家褒贬不一,但是仍旧不失为一款最流行的,在今天这篇文章中,我们将介绍几个的相关方法,无论你是入门级极客或者骨灰级极客,可能都会忽略这些方法的使用。

转来学习一下 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开发中容易忽略的几个实用方法,或者你也有自己的一些不错的方法,请大家不吝分享!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85541.html

相关文章

  • 由一个“bug”到鲜为人知jQuery.cssHooks

    摘要:干想了半天,认为可能还是本身的写法问题。对象提供了一种通过定义函数来获取或设置特定值的方法。简单来说,给我们暴露了一个钩子,我们可以自己定义方法比如,来实现针对某个属性的特定行为。 写在最前 本次分享一下在一次jQuery赋值样式失效的结果中来分析背后原因的过程。在翻jQuery源码的过程中,感觉真是还不能说自己只是会用jQuery,我好像连会用都达不到(逃 欢迎关注我的博客,不定期更...

    ernest.wang 评论0 收藏0
  • 由一个“bug”到鲜为人知jQuery.cssHooks

    摘要:干想了半天,认为可能还是本身的写法问题。对象提供了一种通过定义函数来获取或设置特定值的方法。简单来说,给我们暴露了一个钩子,我们可以自己定义方法比如,来实现针对某个属性的特定行为。 写在最前 本次分享一下在一次jQuery赋值样式失效的结果中来分析背后原因的过程。在翻jQuery源码的过程中,感觉真是还不能说自己只是会用jQuery,我好像连会用都达不到(逃 欢迎关注我的博客,不定期更...

    malakashi 评论0 收藏0
  • Tools - 收藏集 - 掘金

    摘要:个高级多线程面试题及回答后端掘金在任何面试当中多线程和并发方面的问题都是必不可少的一部分。默认为提供了年杭州面试经历掘金想换个环境试试觉得做的不是自己想要的。源码网站安居客项目架构演进掘金本文已授权微信公众号独家发布。 15 个高级 Java 多线程面试题及回答 - 后端 - 掘金在任何Java面试当中多线程和并发方面的问题都是必不可少的一部分。如果你想获得任何股票投资银行的前台资讯职...

    KitorinZero 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<