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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
angularJS深拷贝详解
Mar 23 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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实现文件下载功能的几个代码分享
2014/05/10 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
JavaScript简介
2015/02/15 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
幸福中国演讲稿
2014/09/12 职场文书
医德医风自我评价2015
2015/03/03 职场文书
母亲去世追悼词
2015/06/23 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS