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 相关文章推荐
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue实现树形菜单效果
Mar 19 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
深入理解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 !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
json 定义
2008/06/10 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
小程序中手机号识别的示例
2020/12/14 Javascript
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
介绍一下except的用法和作用
2015/01/22 面试题
党员教师一句话承诺
2014/05/30 职场文书
销售顾问工作计划书
2014/08/15 职场文书
国家助学金受助感言
2015/08/01 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
Python绘画好看的星空图
2022/03/17 Python