jquery1.9删除的browser,live,die,sub,toggle的替换方法

最新推荐文章于 2020-05-26 21:21:49 发布

今晚打酱油8

最新推荐文章于 2020-05-26 21:21:49 发布

阅读量1.5k

点赞数

分类专栏： Ajax JavaScript 前台页面制作

Ajax JavaScript 前台页面制作专栏收录该内容

73 篇文章 1 订阅

订阅专栏

一个实例中使用到toggle函数，但是调用的时候会把元素隐藏掉，经搜索终于找到了原因，需要的朋友可以参考下

最近编写一个实例的时候使用到toggle函数，但是调用的时候会把元素隐藏掉，之前使用过也只是多个事件轮流切换罢了。百思不得其解于是就在网上搜索查看jQuery API文档。终于发现了原因：
原来在jQuery 1.9版本之后，toggle()发生了变化，以下是官网的Notes:
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation methodnamed .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of argumentspassed.
在早期的版本，存在两个同名的toggle()，但是所执行的方法却是不一样的：
.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )
Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.
=====================================================
.toggle( [duration ] [, complete ] )
Description: Display or hide the matched elements.
而之后的版本把第一个toggle()函数给去掉了，导致用于调用切换功能时会把元素隐藏了。
========================
既然去掉了这个函数，但是实现需求还是要的。怎么来实现多个事件的轮流切换了？
可以通过click事件判断不同的情况来触发，或者通过设置一个变量计数点击次数来执行不同的函数。

复制代码代码如下:

 
 var num=0;  
  
 $('#button').click(function(e){  
  
 if(num++ %2 == 0){  
  
 //doSomething  
  
 }else{  
  
 //doOtherSomething  
  
 }  
  
 e.preventDefault(); //阻止元素的默认动作（如果存在）  
  
 });

--------------------------------------------------------

jQuery 1.9变化有几点，最重要的是标题所提到的browser,live,die,sub,toggle这几个，如果你在使用过程中遇到高级版本不行，而低版本却可以的时候，那你就要了解一下是不是版本升级带来的影响了。之前也转载过一篇“jQuery1.9升级和删除的API指南”的文章，文里面介绍了很多方面，其实很多我都没用过，这上面的几个，我也是熟悉过browser，live，toggle而已。

jQuery.browser()

官方推荐修改方式是通过条件判断来区分不同的浏览器

<!--[if lt IE 9]><script src="http://m.cnblogs.com/109793/jquery-1.9.0.js" rel="nofollow"/><![endif]-->
<!--[if gte IE 9]>
<script src="http://m.cnblogs.com/109793/jquery-2.0.0.js" rel="nofollow"/>
<![endif]-->

如果必须要继续使用jQuery.browser()可以添加“jquery-browser”插件，但我没有测试该插件。

对于你自己的项目功能检测的需求，我们强烈建议使用外部库，比如Modernizr的，而不是依赖于jQuery.support上的属性。（因为 jQuery 内部需要使用support这些方法来进行检测，所以它们会在每次加载页面时被执行，但是当 jQuery 的内部代码不再需要某些属性时，它们就会被移除。）

.live()

.live()方法在1.9中移除，@ZPS在邮件中已经告知过大家。对于.live()方法的移除，升级比较简单，仅仅是将“.live()”替换为“.on()”。

.die()

相对于“.live()”方法的移除，“.die()”方法也从1.9中移除，取而代之的是“.off()”方法。正如在1.9之前，很多人只关注过“.live()”方法，却不知道还有个“.die()”方法，或许还会有Coder不知道如何去掉.on()添加的事件，其实就是用“.off()” 进行删除添加的事件。

jQuery.sub()

.sub()方法可以创建一个新的jQuery副本而不影响原有的jQuery对象，我对该方法的理解是：其实.sub()方法就是增加或重写jQuery的方法或创建新plugin，有待讨论。

从上面升级指南上来看，.sub()方法并没有被removed，而是被moved到其他plugin，所以应该是还可以用的，只要引用相应的plugin。

官方给出的使用.sub()的两个特定情况：一是在不改变原有方法的前提下提供一种简单的重写jQuery方法的途径，二是帮助用户解决jQuery plugin封装和基本命名空间。

.toggle(function, function, … )

下面这个jQuery插件能够还原1.8的toggle的功能，如果你需要，可以直接把下面这段代码拷贝到你的jQuery里面，然后跟平时一样使用toggle的功能即可。

//toggle plugin from caibaojian.com
$.fn.toggler = function( fn, fn2 ) {
    var args = arguments,guid = fn.guid || $.guid++,i=0,
    toggler = function( event ) {
      var lastToggle = ( $._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
      $._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
      event.preventDefault();
      return args[ lastToggle ].apply( this, arguments ) || false;
    };
    toggler.guid = guid;
    while ( i < args.length ) {
      args[ i++ ].guid = guid;
    }
    return this.click( toggler );
  };

其实toggle这个去掉主要是考虑到会混淆，而且jquery里面已经可以实现了，这个是多余出来的。

我们可以这样子修改

$('#example').click(function(){$("#exampleBox").toggle();})
改为
$('#example').click(function(){
    if($("#exampleBox").is(":visible")){
        $("#exampleBox").hide();
        do stuff
    }else{
        $("#exampleBox").show();
        do stuff
    }
})
$("#example").hover(function(){$("#exampleBox").toggle(); })
改为
$("#example").hover(function(){
$("#exampleBox").show();
},function(){
$("#exampleBox").hide();
});
岂不是更加清晰明了

或者你也可以使用toggleClass来通过添加类来显示与隐藏。