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 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 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
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
为什么要有struct关键字
2012/05/08 面试题
电子信息工程专业推荐信
2014/02/14 职场文书
公司年会主持词
2014/03/22 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
邀请书格式范文
2015/02/02 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
2016小学新学期寄语
2015/12/04 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python