jQuery中鲜为人知的的几个方法
转来学习一下 jQuery中鲜为人知的的几个方法
jQuery近些年来仍旧是web开发中最受欢迎的类库,虽然大家褒贬不一,但是仍旧不失为一款最流行的Javascript,在今天这篇文章中,我们将介绍几个jQuery的相关方法,无论你是入门级极客或者骨灰级极客,可能都会忽略这些方法的使用。希望大家会觉得有帮助!
在事件中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 );
http://www.gbtags.com/gb/debug/75d28491-aa13-4868-aa95-10b079337b82.htm
是不是非常简单?如果不使用$.makeArray,那么你需要自己处理Javascript来实现类似的功能,会非常麻烦
总结
jQuery中鲜为人知的的几个方法相关推荐
- jquery getjson php,jquery中调用php json函数的方法分享
PHP 5.2版本之后,默认增加了一组针对数据进行JSON互转的函数: json_encode :数据到JSON json_decode :JSON到PHP变量的转换 本文用一个实例讨论一下PHP 的 ...
- 在jQuery中删除事件处理程序的最佳方法?
我有一个input type="image" . 这就像Microsoft Excel中的单元格注释一样. 如果有人在与该input-image配对的文本框中input-image ...
- JQuery中serialize()、serializeArray()和param()方法
2019独角兽企业重金招聘Python工程师标准>>> 与JQuery中其他方法一样,serialize()方法也是作用于一个JQuery对象,它能够将DOM元素内容序列化为字符串, ...
- jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
- JQuery中serialize()、serializeArray()和param()方法示例介绍
在项目中做form表单提交的时候,如果参数比较少,可以通过jquery一个个取得,但是当 form表参数很多的情况下,还是一一取得的话无疑是加大了工作量,那我们需要咱们获取到表单的所有参数呢,幸好,j ...
- js和jquery中创建标签添加属性的方法
js方式创建标签及添加属性 <script> var tr = document.getElementById('tr_id1') //根据id属性获取tr标签 var t ...
- jQuery中的slideToggle( )方法和toggleClass( )方法的使用示例
① slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 示例:通过使用滑动效果,在显示和隐 ...
- jquery 遍历java对象_jquery中object对象循环遍历的方法
一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以.其实呢,对象同样可以循环遍历的啊.不用转换也可以循环!说明你对js或者jquery的某些操作不是很 ...
- 原生JS中的三大家族(offset/scroll/client)与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...
最新文章
- 第5章 批量主机扫描 nmap、ncat
- 【NOIP2017】逛公园【最短路DAG】【dp】【拓扑排序】
- 五、pink老师的学习笔记——CSS精灵技术(sprite)
- telegr怎么连接不上_无线网密码正确但是手机连接不上wifi?
- power bulider 9.0 如何将sql语句查询的值返回给变量_SQL—你应该知道的子查询
- 虚拟化--051 vsphere linux搭建NTP服务器搭建
- mysql一键部署_一键部署----mysql5.6--jue
- c语言局域网聊天项目,局域网聊天的程序(C++版)
- 点餐系统数据库设计--SQL Server
- 炫龙dcpro黑苹果_毁灭者DC W650DC装黑苹果心得
- c语言编译是繁体字,cconv实现简体/繁体转换
- 学习随笔——2.仿苹果官网效果,滚动缩放图片
- web网页设计期末课程大作业——电影介绍5页HTML+CSS制作
- 经典影视剧《大宋提刑官》——老剧重看,再添心得
- Unity性能优化之编辑器检查——贴图
- vue 动态添加click_vue,在模块中动态添加dom节点,并监听
- Nginx下的Rewrite
- 未来感爆棚 TikTok爆款“彩妆喷刷套装”获2000万播放
- cassandra读写数据
- 关于Paxos 幽灵复现问题的看法 1
热门文章
- 无限路由 DI-624+A 详细介绍
- 微软宣布 Win10 设备数突破8亿,距离10亿还远吗?
- 【redis】c/c++操作redis(对于hiredis的封装)
- 可伸缩系统的设计模式(译)
- FileMaker中的腳本觸發器學習筆記
- 绿色版mysql使用方法
- MySQL中更改表操作
- SQL Server 2005系列教学(6) 多表操作及子查询
- Apache2.4.x下proxy_module、proxy_fcgi_module结合PHP-FPM解决内存不足问题
- ios开发趋势_2020年将成为iOS应用开发的主要趋势