• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery 1.4 15个你应该知道的新特性(译)

jQuery 1.4 15个你应该知道的新特性(译)

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jQuery,新特性等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

首先现在你可以从这里下载最新的1.4的版本了: http://code.jquery.com/jquery-1.4.js

1. 传递属性给jQuery

1.4之前的版本中jQuery就通过"attr”方法支持了添加属性到元素集合中,"attr”方法不仅可以传递属性名和值,也可以传递包含有多个属性的对象集合。在1.4中,除了可以创建新的对象,现在它更能将属性对象作为参数传递给jQuery函数或对象自身。如你可以创建一个含有多个属性的链接元素,通过1.4代码如下:

你可能会注意到"text”属性并且猜测它是干吗的,因为a标签是没有"text”属性的。呵呵,当你传递某些属性时,jquery 1.4同样会检查并使用它自己的方法。因此上面的"text”属性可以让jQuery调用它的".text()”方法并将"进入Google!“作为它的唯一参数。

这里给出一个更好的例子:

"id”属性是作为一个普通属性被添加的。但"css”和"click”属性则对应特定的jQuery方法。上面的代码在1.4之前一种写法如下:

 

更多关于jQuery特性

2. 所有的东西都可以"until“了

1.4新增了三个对DOM操作的方法,他们分别是"nextUntil",  "prevUntil"  和  "parentsUntil"。 这些方法会按照某个顺序去遍历DOM对象直到满足指定的筛选条件。假设我们有一个水果列表:

如果你想选择所有在"Apple”和"Strawberry”之间的元素。代码可以这样写:

更多关于: prevUntil, nextUntil, parentsUntil

3. 绑定多个事件

与通过jquery链绑定多个方法到一起相比,现在你可以通过一次调用来绑定所有这些事件,如:

 

你也可以通过 ".one()"方法操作。

更多关于.bind(…)

4. Per-Property Easing

与给一个动画仅仅定义一个缓动效果相比,现在你可以给你想要添加动画效果的属性定义不同的缓动函数了。jQuery包含两个缓动函数,旋转(默认)和线性移动。如果你需要其他的效果的话,你需要去单独下载它们 !

要给每个属性指定一个缓动函数的话,你可以简单的通过属性数组来达到目的,在数组中,第一个值是你想要实现的效果值,第二个参数则是使用的缓动函数,如:

 

查看代码演示!

你也可以以键值对的形式在那些可选设置项中单独指定属性缓动函数:

 

原文作者注 - 小小谦虚一下,这个新特性是作者James Padolsey的主意!

更多关于per-property easing

5. 新的Live事件!

1.4添加了对"submit”,"change”,"focus”,和"blur”事件的委托支持。在jQuery中,我们可以使用".live()”方法去委托事件。这在你需要注册事件到大量元素中或新的元素需要不断的被添加(使用".live()”会比不断的重新绑定事件更高效)将会很有用。

但是,注意!如果你需要委托"focus”和"blur”事件的时候,你必须使用"focusin”和"focusout”事件名称!

 

6. 控制函数的上下文

jQuery 1.4提供了一个新的叫"proxy”的函数,它在jQuery命名空间下。该函数需要两个参数,不管是代码域还是方法名,或者是函数和其所处的代码域。t"this”关键字在JavaScrip中是相当难掌握的。有时候你可能期待它指的是你之前创建的某个对象,而不是一个你可能没想到的元素。

举例说明,假设我们有一个"app”对象,它有两个属性,一个是"clickHandler”方法, 另外一个则是一个config对象。

当我们调用如"app.clickHandler()"时,"clickHandler"会将"app”作为其上下文。这意味着在这里"this"关键字将允许其访问"app"。这在我们简单调用下面函数时没什么问题:

让我们试试将其作为事件绑定会有什么情况:

 

当我们点击一个链接的时候什么都不会发生,函数不会工作。这是因为jQuery(其他任何正常的事件模型同样如此)默认会把目标元素a设置成为事件的上下文。即"this”现在其实是指刚刚被点击过的元素a。但我们实际上并不想这样子的。我们期待"this”应该被设置为"app”.在jQuery 1.4中实现这个再简单不过了:

 

现在无论什么时候一个链接被点击到,"你好"的消息都会被触发了!

proxy函数会返回一个你的函数被"包装过"之后的对象,在该对象中,"this”被设置成任意你指定的对象。这在其他的情景下同样有用,如传递回调函数给其他的jQuery对象或者一些插件的时候。

更多关于jQuery.proxy

7. 在动画中添加停顿

现在你可以再你的动画队列中添加停顿效果了。事实上,任何队列中都可以添加该函数,但最常用的情况应该还是在使用"fx”队列的时候。这允许你在多个动作中间添加暂停而不需要通过回调函数去调用"setTimeout"。".delay()" 函数的第一个参数是你想停顿的毫秒数。

如果你想给其他不是默认的"fx”的队列也添加停顿的话,这时候,你需要将队列名作为第二个参数传递给".delay()"。

更多关于.delay(…)

8. 检查元素是否拥有某对象

通过".has()”方法,jQuery 1.4使得检查一个元素(或者集合)是不是有某对象变得相当简单。从程序角度看,它和jQuery的selector过滤器":has()”是一样的。该方法会返回在当前集合中所有包含有至少一个符合条件的元素数组。

 

上面方法会返回所有包含有UL元素的DIV元素数组。在这种情况下,你可能会更倾向于简单使用选择器的过滤器(":has()"), 但当你需要通过代码过滤一个数组的时候,该方法仍会很有用。

1.4同样在jQuery命名空间下添加了新的"contains"函数。这是一个低级的函数,它接受两个DOM节点作为参数。它会返回一个布尔值来表示后面一个元素是否在前面一个元素中存在。如:

 

更多关于: .has(…), jQuery.contains(…)

9. 去掉元素的包装

".warp()”已经在jQuery中有段日子了,现在跟它对应的".unwrap()”方法也被加进到1.4中了。这个方法刚好跟warp()方法相反。假设有下面的DOM结构:

我们可以用下面的函数去掉段落元素的外层:

 

最终的DOM结构如下:

view source print?
1 <p>Foo</p>

注意,这个方法处理比较简单,它会移掉任何元素的父节点。

更多关于 .unwrap(…)

10. detach() vs remove()

新的".detach()”方法允许你从DOM中移掉元素,这跟".remove()”很像。但与".remove()”有本质不同的是"detach()”不会将jQuery赋给该元素

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • jQuery前台数据获取实现代码
  • jquery日历插件e-calendar升级版
  • jQuery UI库中dialog对话框功能使用全解析
  • jquery 取子节点及当前节点属性值
  • 选择TreeView控件的树状数据节点的JS方法(jquery)
  • jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
  • jquery采用oop模式class类的使用示例
  • JQuery中attr属性和jQuery.data()学习笔记【必看】
  • MultiSelect左右选择控件的设计与实现介绍
  • 简洁Ajax函数处理(示例代码)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 利用js(jquery)操作Cookie的方法说明
    • jquery easyui滚动条部分设置介绍
    • JQuery动画与特效实例分析
    • jquery ui sortable拖拽后保存位置
    • jQuery回调函数的定义及用法实例
    • jQuery实现数字加减效果汇总
    • jQuery添加options点击事件并传值实例代码
    • jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
    • JQuery插件ajaxfileupload.js异步上传文件实例
    • jquery正则表达式验证(手机号、身份证号、中文名称)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有