转载:jQuery 1.3.3 新功能

本文深入解析jQuery的增强功能,包括toggleClass方法的改进,简化hover事件处理,live事件支持预设参数,更好地支持window和document对象,index方法的增强,及bind方法中this对象的自定义。这些更新提升了jQuery的灵活性和易用性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

增强的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代替。

具体用法请参看原文

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2009/08/11/1543422.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值