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 图片上一张下一张链接效果代码
Mar 12 Javascript
javascript getElementsByTagName
Jan 31 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 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二维数组合并及去重复的方法
2015/03/04 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
完善的jquery处理机制
2016/02/21 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
BootStrap表单时间选择器详解
2017/05/09 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
layui动态绑定事件的方法
2019/09/20 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python友情链接检查方法
2015/07/08 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
元旦获奖感言
2014/03/08 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
导游词之河北野三坡
2019/12/11 职场文书