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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
layui导出所有数据的例子
Sep 10 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 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扩展函数
2006/10/09 PHP
PHP安全性漫谈
2012/06/28 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
xss文件页面内容读取(解决)
2010/11/28 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python流程控制 if else实现解析
2019/09/02 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
Python try except else使用详解
2021/01/12 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
交通事故调解协议书
2014/04/16 职场文书
社区春季防火方案
2014/06/02 职场文书
低碳环保口号
2014/06/12 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
村官个人总结范文
2015/03/03 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android