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高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 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连接Oracle数据库
2006/10/09 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
php给数组赋值的实例方法
2019/09/26 PHP
js的event详解。
2006/09/06 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
浅谈python数据类型及类型转换
2017/12/18 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
打架检讨书50字
2014/01/11 职场文书
法制宣传月活动总结
2014/04/29 职场文书
死亡赔偿协议书
2015/01/28 职场文书
初中政治教师教学反思
2016/02/23 职场文书
pytorch 如何使用float64训练
2021/05/24 Python