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 相关文章推荐
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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&&mysql)四
2006/10/09 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
python字符串连接方式汇总
2014/08/21 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
银行学习十八大感想
2014/01/11 职场文书
商场中秋节广播稿
2014/01/17 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
推广活动策划方案
2014/08/23 职场文书
三方股份合作协议书
2014/10/13 职场文书
科级干部培训心得体会
2016/01/06 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
基于Python实现射击小游戏的制作
2022/04/06 Python
Vue.Draggable实现交换位置
2022/04/07 Vue.js
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL