• 转载:jQuery 1.3.3 新功能


    增强的toggleClass() [via: jQuery Edge: Enhanced .toggleClass() ]

    1. toggleClass也可以和addClass一样,用空格分隔多个class名称了。

    .toggleClass(“a b”) == .toggleClass(“a”).toggleClass(“b”)

    2. 无参数时,自动删除、恢复全部class,也可以传递一个布尔值,true为恢复class,false为删除class。

    3. 也可以第一个参数为class名,第二个参数为布尔值,具体用法如下。

    // 原始代码
    // <div class=”a b c”></div>

    // 删除、恢复全部class
    $(‘div’).toggleClass();        // <div class=”" />
    $(‘div’).toggleClass();        // <div class=”a b c” />
    $(‘div’).toggleClass( false ); // <div class=”" />
    $(‘div’).toggleClass( true );  // <div class=”a b c” />

    // 删除、恢复多个 class
    $(‘div’).toggleClass( “a b” );          // <div class=”c” />
    $(‘div’).toggleClass( “a c” );          // <div class=”a” />
    $(‘div’).toggleClass( “a b c”, false ); // <div class=”" />
    $(‘div’).toggleClass( “a b c”, true );  // <div class=”a b c” />

    简化的hover() [via: jQuery Edge: Simplified .hover()]

    旧代码:

    $(‘li’).hover(function() {
    $(this).addClass(‘test’);
    }, function() {
    $(this).removeClass(‘test’);
    });

    新代码:

    $(‘li’).hover(function() {
    $(this).toggleClass(‘test’);
    });

    live冒泡事件支持预设参数 [via: jQuery Edge: Live Events now with Data ]

    // 预设参数
    var eventConfig = {
    selectedClass: “selected”
    };

    $(“li”).live(“click”, eventConfig, function( event ) {
    // 绑定函数的参数event的data属性即为传递的预设参数
    var selectedClass = event.data.selectedClass;
    });

    更好的支持其它windows、document对象
    通过.contents()获得其它框架的document对象。

    var iframeDoc = $(‘iframe’).contents().get(0);

    这样就可以获取其height/width/CSS属性或绑定事件。

    // 获得框架宽度
    $(iframeDoc).width();

    // 获得框架高度
    $(iframeDoc).height();

    // 绑定事件
    $(iframeDoc).bind(‘click’, function( event ) {
    // do something
    });

    // 获得CSS属性值
    $(‘div’, iframeDoc).css(‘backgroundColor’);

    注意,如果要处理框架内部网页元素,请使用此插件(配合jQuery 1.3.3/+),和以下语法:

    $(‘iframe’).win().bind(‘load’, fn);
    $(‘iframe’).doc().find(‘a’).click(fn);

    增强的index() [via: jQuery Edge: Versatile .index() ]

    两个变化,第一个,支持传递selector作为参数。

    旧代码:

    $(“img”).index( $(“img.selected”) );

    新代码

    $(“img”).index( “.selected” );

    第二个,无参数传递,直接查找在同级元素中的位置。

    旧代码:

    var $this = $(“.selected”);
    $this.parent().children().index( $this );

    新代码:

    $(“.selected”).parent().index();

    自行指定this对象 [via: jQuery Edge: Bind with a Different “this” ]

    在1.3.3中,可以在bind/live绑定事件时,自行指定this参数代表的对象。这个用法需求不多,而且可用event.target,event.currentTarget代替。

    具体用法请参看原文

  • 相关阅读:
    学习BoolanC++笔记_03(C++面向对象高级编程(上)第三周)
    学习Lua笔记_02(第二章 类型与值)
    学习Lua笔记_01(第一章 开始)
    学习Lua笔记_00(预备)
    学习BoolanC++笔记_02(C++面向对象高级编程(上)第二周)
    web基础(上篇)
    使用Hexo搭建自己的博客网站
    JDK17安装
    安装并配置nodejs
    Linux 常用命令
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/1543422.html
Copyright © 2020-2023  润新知