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 10 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 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 MVC框架路由学习笔记
2016/03/02 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
原生js开发的日历插件
2017/02/04 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python中元类用法实例
2014/10/10 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python处理PDF与CDF实例
2020/02/26 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
安全生产检查通报
2014/01/29 职场文书
文科生自我鉴定
2014/02/15 职场文书
投资意向书范本
2014/04/01 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
走群众路线学习笔记
2014/11/06 职场文书
护士求职自荐信范文
2015/03/04 职场文书
运动会班级前导词
2015/07/20 职场文书
同乡会致辞
2015/07/30 职场文书
教师素质教育心得体会
2016/01/19 职场文书
四年级数学教学反思
2016/02/16 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL