存档

文章标签 ‘jQuery 1.3.3’

jQuery学习笔记7——jQuery 1.3.3 新功能预览

2009年11月12日 IT北瓜 没有评论

      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代替