jQuery中大家不太了解的几个方法

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开发中容易忽略的几个实用方法，或者你也有自己的一些不错的方法，请大家不吝分享！

赞 (0)

相关推荐

  • jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)

    复制代码 代码如下: <head> <title></title> <style type="text/css"> #img1 { width:400px; height:500px; } </style> <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type=

  • 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗

    <div id='test' >fdsfsdf123</div> 如 $('#test1').fadeIn(1000) test 中的英文字符在动画效果结束前会加粗 解决方法: 为test层设上背景颜色

  • jQuery实现复选框成对选择及对应取消的方法

    本文实例讲述了jQuery实现复选框成对选择及对应取消的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • jQuery动画效果-fadeIn fadeOut淡入浅出示例代码

    复制代码 代码如下: <html> <head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding:5px; c

  • jquery实现翻动fadeIn显示的方法

    本文实例讲述了jquery实现翻动fadeIn显示的方法.分享给大家供大家参考.具体实现方法如下: $(function() { //翻动显示 $("#zuixin div:not(:first)").css("display","none"); var B=$("#zuixin div:last"); var C=$("#zuixin div:first"); setInterval(function()

  • js模拟jquery的slide和fadeIn和fadeOut功能

    就想了想 jquery是怎么实现的呢,无奈,哥能力差,还不到研究jquery源码的时候.那好吧,自己做个很简陋的版本,呵呵!好像还行,等哥的能力上去了再来优化下 三栏布局 #main1{ margin:20px auto; width:200px; background-color:#6c9; overflow:hidden; } var Animate = { obj : null, itime : 0, flag : 1, maxHeight : 0, _$ : function(id){

  • jquery 图片Silhouette Fadeins渐显效果

    jquery 图片Silhouette Fadeins渐显效果

    我的乐队有几个朋友刚刚经历了一场小型的成员阵容的变化.他们需要更换其主页上的照片.我想这可能是有趣的事情出现了少许的互动. 这可能有不少方法可以做到这个效果,这一个刚刚进入我的头突然出现,我随它而去了.这个想法是有一个作为背景图像的轮廓,然后,在该组所有完全相同的大小与每个乐队成员的4个图像.这些图像默认隐藏.然后,有4个绝对定位的区域上面所在的区域,这是过渡区作用.在jQuery的,我们用他们悬停事件,渐渐显示相应的图像. HTML 正如我所说,只是一个div里面有四个图像和过渡区域.所有具有

  • jQuery实现数秒后自动提交form的方法

    本文实例讲述了jqury实现数秒后自动提交form的方法.分享给大家供大家参考.具体如下: 很多下载网站都设置了此代码,下载按钮数秒,数完后,可以点击提交 制作很简单: 1. js部分代码如下: <script language='javascript'> <!-- $(document).ready(function(){ // #formDownload ajaxForm $('#formDownload').ajaxForm({ target:'#formDownloadWindo

  • jQuery中大家不太了解的几个方法

    jQuery近些年来仍旧是web开发中最受欢迎的类库,虽然大家褒贬不一,但是仍旧不失为一款最流行的Javascript, 在事件中return false 可能大家在编写事件相关代码的时候,有时候会使用return false语句,代码如下: 复制代码 代码如下: $("a").click(function() {    $(".gbtags").toggle();    return false; } 以上代码中,我们点击a元素,如果不return false,会

  • jQuery中DOM树操作之复制元素的方法

    jQuery中DOM树操作之复制元素的方法

    本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会.毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会

  • asp.net 数据绑定 使用eval 时候报 字符文本中的字符太多 问题的解决方法

    在使用datalist 数据绑定时: 复制代码 代码如下: <asp:TextBox ID="txtOutPlace" runat="server" Text ="<%#Eval('调出单位存放地点')%>" Width="130px"></asp:TextBox> 运行报"字符文本中的字符太多"的错误,这时是因为Eval必须是字符串(""引起来)不能

  • jquery中选择块并改变属性值的方法

    jquery改变class属性的值 复制代码 代码如下: $("#top_sta").removeClass().addClass("top_tab no_current"); 1.先找到块所在的div.p的位置 2.移除原来的class属性,remove("***")表示移除class中的***,remove()表示移除class中的所有值. 注意:remove("")表示移除空字符,也就是不对class做任何处理. 3.a

  • jQuery中append、insertBefore、after与insertAfter方法注意事项

    这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时复制一份相同的副本到目标位置. 由此,若目标只匹配一个元素时,使用前述方法后源将被删除. B.appendTo(A) A.prepend(B) B.prependTo(A

  • jquery中eq和get的区别与使用方法

    举个例子: <p style="color:yellow">绯雨</p>使用eq来获得第一个p标签的color值: $("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css使用get来获得第一个p标签的color值: $("p").get(0).style.color //因为get(num)返回的是个html对象,所以要使用传统的HTML

  • Jquery中LigerUi的弹出编辑框(实现方法)

    一.载入 复制代码 代码如下: <link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />    <script src="../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></scr

  • jquery中trigger()无法触发hover事件的解决方法

    今天做一个项目,遇到了一个问题,是以前没有遇到过的,就此记上一笔. 1.trigger方法解释 官方是这么解释的: 复制代码 代码如下: Description: Execute all handlers and behaviors attached to the matched elements for the given event type. 用法: .trigger( eventType [, extraParameters] ) 其中eventType包含javascript内置的事件

  • window.location.href中url中数据量太大时的解决方法

    先说一下今天遇到的问题 一个导出excel的处理,在按钮按下后需要传很大一个数据到后台,刚开始的做法如下: 复制代码 代码如下: var actionUrlSetData = "****Action!exportDatas.action"+ "?now=" + new Date().getTime();window.location.href= actionUrl + "&" + data; 上面的data就是一个很长的字符串. 这样在火

  • Jquery中Ajax 缓存带来的影响的解决方法

    使用jquery里load方法或者ajax调用页面的时候会存在cache的问题,清除cache的方法: 调用$.ajaxSetup ({cache:false}) 方法即可. 复制代码 代码如下: <script type="text/javascript"> $.ajaxSetup({ cache: false }); </script>

随机推荐