jQuery学习笔记7——jQuery 1.3.3 新功能预览
2009年11月12日
没有评论
1、增强的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"/>
2、简化的hover()
1.3.3中,hover绑定事件可仅传递一个函数,将默认用做mouseenter/mouseleave公用的函数
//旧代码: $('li').hover(function() { $(this).addClass('test'); }, function() { $(this).removeClass('test'); }); //新代码: $('li').hover(function() { $(this).toggleClass('test'); });
3、live冒泡事件支持预设参数
// 预设参数 var eventConfig = { selectedClass: "selected" }; $("li").live("click", eventConfig, function( event ) { // 绑定函数的参数event的data属性即为传递的预设参数 var selectedClass = event.data.selectedClass; });
4、更好的支持其它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);
5、增强的index()
两个变化,第一个,支持传递selector作为参数
//旧代码: $("img").index($("img.selected")); //新代码 $("img").index(".selected");
第二个,无参数传递,直接查找在同级元素中的位置
//旧代码: var $this = $(".selected"); $this.parent().children().index($this); //新代码: $(".selected").index();
6、自行指定this对象
在1.3.3中,可以在bind/live绑定事件时,自行指定this参数代表的对象。这个用法需求不多,而且可用event.target,event.currentTarget代替