当前位置: 首页 > 编程笔记 >

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

夹谷茂
2023-03-14
本文向大家介绍jQuery中大家不太了解的几个方法,包括了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开发中容易忽略的几个实用方法,或者你也有自己的一些不错的方法,请大家不吝分享!

 类似资料:
  • 问题内容: 我正在用Java进行游戏,只是将所有与窗口相关的代码从基于java.awt重写为javax.swing。不久之后,我意识到事情变得有些复杂了,因此我做了一些研究,发现了如何绘制事物,如何设置JFrame的大小等。但是由于某种原因,我的JFrame的大小总是比我指定的尺寸超出10像素。在这种情况下,我希望它是640 x 640像素。 这是我的代码: 当我运行它时,即使我调用setPref

  • 解决方案是什么?只有4-5行代码隐藏并重新启动,然后完全成功运行,引导文件大小为149k。当我注释或删除4-5行代码时,它将无误运行!

  • 我想把arr2中的is_checked 属性值 复制给 arr1中的is_checked 想要的结果是: 以为是个双重循环,有点不知道怎么写

  • 我在使用java开发android应用程序方面有很好的经验。最近,我开始了解弗利特。所以,我试着根据官方教程创建一个简单的android应用程序。但令人惊讶的是,调试应用的大小是25MB,而发布apk的成本超过了7MB。与本地开发的Android应用相比,它确实更大。 有没有办法优化它?

  • 本文向大家介绍Springbean的几种注入方式都了解吗,包括了Springbean的几种注入方式都了解吗的使用技巧和注意事项,需要的朋友参考一下 Spring注入方式可以分为三类,xml注入、注解注入、BeanDefinition注入;用法上可以分为三种,但是底层实现代码都是统一BeanFactory,这三种也有联系xml注入和annotation注入都是依赖BeanDefinition扩展的接

  • 阿里-阿里妈妈-Java 1、mysql中myism和innodb的区别 myisam不支持事务,innodb支持事务 myisam只支持表锁,innodb支持表锁和行锁 myisam支持全文检索,innodb不支持全文检索 2、聚簇索引和非聚簇索引区别 聚簇索引:将数据存储与索引放到了一块,索引结构的叶子节点保存了行数据 非聚簇索引:将数据与索引分开存储,索引结构的叶子节点指向了数据对应的位置