jQuery 1.3.3 新功能[译]

作者:cloudream 来源:随想飞翔 时间:2009-06-04 12:23:00 

增强的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()

1.3.3中,hover绑定事件可仅传递一个函数,将默认用做mouseenter/mouseleave公用的函数。

旧代码:


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

新代码:


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

live冒泡事件支持预设参数

// 预设参数
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()

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

旧代码:

$("img").index( $("img.selected") );

新代码

$("img").index( ".selected" );

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

旧代码:


var $this = $(".selected");

$this.parent().children().index( $this );

新代码:

$(".selected").parent().index();

自行指定this对象

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

具体用法请参看原文

标签:JavaScript,库,jquery,功能
0
投稿

猜你喜欢

  • 什么是XSLT,什么是XPath

    2008-01-21 13:12:00
  • oracle 删除重复数据

    2009-07-23 14:46:00
  • Dreamweaver2004 中文乱码解决方案

    2007-01-31 10:20:00
  • IE6,IE7中定位相关的怪异问题

    2009-12-08 12:49:00
  • 快速让MySQL数据库服务器支持远程连接

    2010-01-16 13:06:00
  • 如何提升JavaScript的运行速度(DOM篇)

    2010-05-17 13:32:00
  • 技巧/诀窍:在ASP.NET中重写URL

    2007-09-23 12:21:00
  • 如何在MySQL数据库中使用XML数据

    2009-12-29 10:48:00
  • 在JAVASCRIPT中LEFT,RIGHT,MID函数的等价函数

    2009-07-21 12:37:00
  • 爱你就要说出来,来表白吧

    2008-11-23 16:23:00
  • IBatis.net连接MySql 问题与故障的解决方案

    2011-06-02 09:38:00
  • 小型分页的设计

    2011-08-18 18:32:26
  • ASP可显示和隐藏的树型菜单

    2007-10-01 14:40:00
  • [原创][分享]数字格式化转换

    2011-07-04 12:20:15
  • 电商网站的购买按钮

    2011-07-04 12:18:59
  • Dreamweaver MX弹出窗口全攻略

    2010-09-05 21:14:00
  • 个性类文字制作ps教程

    2008-07-17 12:45:00
  • 和“登录”有关的事儿

    2009-07-10 17:37:00
  • Javascript"篱式"条件判断(翻译)

    2008-08-01 12:21:00
  • sql函数:去掉html代码

    2008-04-07 12:44:00
  • asp之家 网络编程 m.aspxhome.com