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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
angular多语言配置详解
May 16 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 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/10/08 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
移动端横屏的JS代码(beta)
2016/05/16 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python字典遍历操作实例小结
2019/03/05 Python
django Admin文档生成器使用详解
2019/07/22 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python TCP包注入方式
2020/05/05 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
shell程序中如何注释
2012/02/17 面试题
《雷雨》教学反思
2014/02/20 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
整改落实自查报告
2014/11/05 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
GO中sync包自由控制并发示例详解
2022/08/05 Golang