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中parentNode,childNodes,children的应用详解
Dec 17 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
vuex的module模块用法示例
Nov 12 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
微信小程序中weui用法解析
Oct 21 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
基于mysql的论坛(4)
2006/10/09 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
php生成随机数的三种方法
2014/09/10 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
对python读取CT医学图像的实例详解
2019/01/24 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
人事任命书格式
2014/06/05 职场文书
市场营销工作计划书
2014/09/15 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
java如何实现socket连接方法封装
2021/09/25 Java/Android
MySQL数据库完全卸载的方法
2022/03/03 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫