`

jQuery 1.3.3 新功能

阅读更多

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

分享到:
评论

相关推荐

    jquery-easyui-1.3.3

    总结来说,jQuery EasyUI 1.3.3 是一款强大且易于使用的前端框架,它的组件丰富、功能全面,为Web开发提供了极大的便利。无论是新手还是经验丰富的开发者,都能从中受益,快速构建出功能强大、界面美观的Web应用。

    jQuery easyui1.3.3最新的离线API

    总结来说,jQuery EasyUI 1.3.3离线API是开发者掌握和运用EasyUI组件的必备工具,它详尽地涵盖了EasyUI的所有组件和功能,有助于提升开发效率和代码质量。通过深入理解和熟练运用这些API,开发者可以构建出高效、...

    jquery-easyui-1.3.3源码 未压缩

    《jQuery EasyUI 1.3.3 源码解析与学习指南》 jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的组件和工具,使得开发者能够快速构建功能丰富的用户界面。在这个未压缩的版本中,我们可以深入研究其...

    jquery-easyui-1.3.3v1

    这个“jquery-easyui-1.3.3v1”压缩包包含了该框架的1.3.3版本,这是一个重要的更新,主要体现在对一些已知问题的修复以及新特性的添加。 1. **jQuery EasyUI 的核心概念**: - **jQuery**: jQuery 是一个快速、...

    jQuery+LigerUI+V1.3.3_jquery_

    《jQuery + LigerUI V1.3.3:构建高效美观Web UI的利器》 在Web开发领域,jQuery和LigerUI是两个重要的工具,它们为开发者提供了强大的功能和便捷的用户体验。本篇文章将深入探讨jQuery和LigerUI V1.3.3,以及如何...

    jQuery LigerUI V1.3.3

    jQuery LigerUI V1.3.3是一款基于jQuery的前端用户界面库,它为开发者提供了丰富的组件和功能,便于快速构建交互式、响应式的Web应用。这个版本是V1.3.3,意味着它可能包含了之前的版本修复的错误、新增的功能和性能...

    ace-admin-1.3.3最新版

    此外,Ace Admin 1.3.3还包含了一些高级特性,如数据表格(DataTables)插件,它可以实现排序、搜索和分页功能,使得数据展示和管理更为便捷。还有图表库,如Chart.js或Flot,用于创建交互式图表,帮助管理员直观地...

    最新easyUi1.3.3版官方API中文版

    EasyUI 1.3.3是一个重要的更新版本,相比于早期版本,它可能包含了新的功能、性能优化以及对旧有功能的改进。开发者在升级到这个版本时,应关注其更新日志,了解新特性以充分利用其优势。 3. API中文版的重要性 ...

    jquery-easyui-1.3

    通过阅读它可以得知1.3版本相对于前一版本做了哪些优化和修复,以便更好地利用新功能。 `readme.txt`通常包含安装指南、快速入门教程等基本信息,对于初次接触EasyUI的开发者来说,是快速上手的好帮手。 `plugins`...

    ace Admin v1.3.3.rar

    总的来说,"ace Admin v1.3.3.rar"是一个强大且灵活的后台管理模板,结合Bootstrap 3.0.0的强大功能,为开发者提供了一个快速开发后台界面的良好起点。无论你是新手还是经验丰富的开发者,都能从中受益,节省时间和...

    jquery editable plugin--点击编辑文字插件

    1. **引入依赖**:首先需要在页面中引入jQuery库和jQuery Editable Plugin的JS文件,例如`jquery.editable-1.3.3.js`。 2. **初始化元素**:使用jQuery选择器选择需要变为可编辑的元素,并调用`.editable()`方法...

    bootstrap ace1.3.3

    Bootstrap Ace 1.3.3是2015年的最新版本,它集成了Ace Admin后台管理模板,提供了丰富的组件和样式,使得开发者能够快速搭建功能齐全且美观的管理界面。 Bootstrap是一个广泛使用的开源前端框架,由Twitter开发并...

    jquery-easyui示例框架源码

    6. `jquery-easyui-1.3.3` 和 `jquery-easyui-1.3.4`:这两个文件夹分别包含了EasyUI的1.3.3和1.3.4两个版本,可以通过对比分析这两个版本,学习EasyUI的版本差异和更新内容。 7. `common` 文件夹:通常包含一些...

    jQuery easyui1.3.6

    jQuery EasyUI 的核心特点在于它的组件化设计,它包含了一系列预定义的 CSS 样式和 JavaScript 插件,如数据网格(datagrid)、对话框(dialog)、菜单(menu)、表单控件、树形视图(tree)、tabs 选项卡等,这些...

    使用jQuery动画精灵变得容易-JavaScript开发

    1.3.3添加了自动播放功能:false可以防止从头开始播放动画。1.3.2调用$(“。scott”)。animateSprite('play','walkLeft')将从第一帧重新开始播放动画。 1.3.1固定循环:错误的未能删除计时器。 1.3.0添加了对...

    jquery基础教程高清版PDF.part5.rar

     1.3.3 编写jQuery代码   1.4 小结  第2章 选择符——取得你想要的一切   2.1 DOM   2.2 工厂函数$()   2.3 CSS选择符   2.4 XPath选择符   2.5 自定义选择符   2.6 DOM遍历方法   2.7...

    easyui-1.3.3

    easyui是一个基于jquery的集成了各种用户界面的插件。 使用easyui你不需要写太多javascript代码,一般情况下你只需要使用一些html标记来定义用户接口。 easyui非常简单,但是功能非常强大。 这个最新版本

    AceAdmin1.3.2_中英双语完整版(2015-5-21_update

    而且,由于其基于Bootstrap和jQuery,开发者可以充分利用这两个库的强大功能,如Bootstrap的栅格系统和jQuery的便捷DOM操作。 总的来说,AceAdmin 1.3.2_中英双语完整版是一个功能强大且易用的后台管理框架,适合...

Global site tag (gtag.js) - Google Analytics