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 相关文章推荐
javascript 事件绑定问题
Jan 01 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
DOM事件探秘篇
Feb 15 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
php输入流php://input使用浅析
2014/09/02 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
javascript动画浅析
2012/08/30 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python 爬虫的原理
2020/07/30 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
珍珠鸟教学反思
2014/02/01 职场文书
本科毕业生求职信
2014/06/15 职场文书
金融与证券专业求职信
2014/06/22 职场文书
中考学习决心书
2015/02/04 职场文书
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
「月刊Action」2022年5月号封面公开
2022/03/21 日漫