jQuery中大家不太了解的几个方法


Posted in Javascript onMarch 04, 2015

jQuery近些年来仍旧是web开发中最受欢迎的类库,虽然大家褒贬不一,但是仍旧不失为一款最流行的Javascript,

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

Javascript 相关文章推荐
js停止输出代码
Jul 20 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 #Javascript
js计算德州扑克牌面值的方法
Mar 04 #Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 #Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 #Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 #Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 #Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 #Javascript
You might like
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python日期操作学习笔记
2008/10/07 Python
Python中的高级数据结构详解
2015/03/27 Python
浅析python协程相关概念
2018/01/20 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
元旦晚会邀请函
2014/01/27 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
感恩父母主题班会
2015/08/12 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android