位置: 编程技术 - 正文

jQuery 3 中的新增功能汇总介绍(jquery添加属性的方法)

编辑:rootadmin

推荐整理分享jQuery 3 中的新增功能汇总介绍(jquery添加属性的方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery 增加class,jquery增加div,jquery增加属性值,jquery新增元素,jquery新增属性,jquery新增元素,jquery新增元素,jquery 添加,内容如对您有帮助,希望把文章链接给更多的朋友!

从jQuery 震撼整个 Web ,至今已有十年了,我们有很好的理由一直坚持使用维护它。jQuery为用户提供了 DOM 进行操作,执行 Ajax 请求,创建动画等等,极为友好的接口。此外,与 DOM API 不同的是,jQuery 采用了 复合模式(composite pattern)。 正因为如此,你可以在一个jQuery集合上调用jQuery方法,而不用担心集合包含的元素数量(零,一个或多个)。

在未来的几周内,随着 jQuery 3 的发布,jQuery 会到达一个重要的里程碑。jQuery 3 修复了很多 bug,增加了新的方法,弃用并移除了一些功能,并改变了一些功能的行为。在这篇文章中,我重点讲解jQuery 3所带来的一些最大的变化。

新特性(New Features)

在下面的章节中,我将讨论jQuery 3中新增的重要特性。

for…of 循环

jQuery 3 将提供for...of循环语句,可以用来遍历一个jQuery集合所有的 DOM 元素。这种新的迭代器ECMAScript (又名的ECMAScript6)规范的一部分。它能实现对可遍历对象(包括 Array、Map、Set 等)的循环。

当使用这个新的迭代方法时,您每次接收的值不是一个jQuery集合,而是一个DOM元素。当你对一个jQuery集合执行操作时,这个新的迭代方法可以少许改善你的代码。

为了理解这个迭代方法是如何工作的,假设你想给页面中每个input元素分配一个 ID。在 jQuery 3 之前,你可以这样写:

而在 jQuery 3 中,你可以这样写:

$.get() 和 $.post()的新签名

jQuery 3 为 $.get() 和 $.post() 工具函数增加了新签名,为的是使得它们和 $.ajax() 的接口风格保持一致。新签名是这样的:

$.get([settings]) $.post([settings])

settings 是一个可以具有许多属性的对象。这是对象和 提供给$.ajax() 的对象 是相同的。更多详细的介绍,详细介绍,请参考 $.ajax()页面。传递给$.get() 和 $.post() 的对象,跟传递给 $.ajax() 的对象相比,唯一的区别是前者 method 属性总是会被忽略。其原因是,$.get() 和 $.post() 都有一个预设的HTTP方法来执行Ajax请求( $.get() 用 GET,而 $.post() 用 POST)。一般说来,你不要用 $.get()尝试发送 POST 请求。

考虑下面这段代码:

尽管设置了method属性,该语句还是不能发送 POST 请求,而只能发送 GET 请求。

采用 requestAnimationFrame() 来实现动画

所有现代浏览器,包括Internet Explorer及以上版本,都支持 requestAnimationFrame。jQuery 3 将会在内部采用这个 API 来实现动画,以便达到更流畅、更省CPU资源的动画效果。

unwrap()

jQuery 3 为 unwrap() 方法增加了一个可选的选择器参数。这个方法的新签名为:

有了这一变化,你就可以传入包含一个选择器表达式的字符串,在父元素内进行匹配。如果存在匹配,匹配的子元素将被解包;否则,不进行任何操作。

被变更的特性

jQuery 3 还修改了一些特性的行为。

:visible 和 :hidden

jQuery 3修改了 :visible 与 :hidden 过滤器的含义。只要元素具有任何布局盒,包括那些宽度和/或高度为0的情况,则元素被认为是:visible。比如说,br 元素和没有内容的内联元素进可以通过 :visible 过滤器进行选择。

所以,假如页面有如下标记:

然后执行下面的语句:

在 jQuery 1.x 和 2.x 中,你得到的结果会是 0;但在 jQuery 3 中,你会得到 2。

data()

另一个重要变化是跟 data() 方法的行为有关。调整主要是为了让该方法符合 Dataset API 规范。jQuery 3 将所有属性的键都改为驼峰式大小写形式。要理解这个变化,先看下面这个例子。

如果你使用 jQuery 3 之前的版本,你可以写如下代码:

您将在控制台上获得如下结果:

{my-property: "hello"}

而在jQuery 3 中,你会获得如下结果:

jQuery 3 中的新增功能汇总介绍(jquery添加属性的方法)

{myProperty: "hello"}

请注意,在 jQuery 3 中,属性名已经变成了驼峰形式,没有横杠(连字符);而在以前的版本中,属性名会保持全小写,并原样保留横杠(连字符)。

Deferred 对象

jQuery 3改变了Deferred 对象的行为,Promise 对象的前身,改善与 Promise/A+ 提案的兼容性。这个对象及其历史非常有意思,你可以读读官方文档,或者看看我的书 《jQuery 实战,第 3 版》,这本书也涵盖了 jQuery 3。

在 jQuery 1.x 和 2.x 中,传入 Deferred 中的回调函数中如果出现未捕获异常,会导致程序停止执行。而原生的 Promise 对象并非如此,它会抛出异常,并不断向上冒泡,直至到达 window.onerror(通常)。如果你没有定义一个函数来处理这个错误事件的话(通常我们都不会这么做),则会显示异常消息,程序终止执行。

jQuery 3 会遵循原生的 Promise 对象的模式。因此,抛出的异常将被视为一个失败状态(rejection),从而执行失败回调。完成之后,整个进程就继续执行,后续的成功回调将被执行。

为了让你更好地理解这个差异,让我们来看一个小例子。考虑下面的代码:

在 jQuery 1.x 和 2.x 中,只执行第一个函数(抛出错误的函数)会被执行到。此外,由于我们没有为 window.onerror 定义任何事件处理函数,所以控制台将输出消息:“Uncaught Error: An error”,而且程序的执行将中止。

而在 jQuery 3 中,行为则完全不同的。你将在控制台中看到 “Failure 1” 和 “Success 2” 两条消息。异常将会被第一个失败回调处理,一旦被处理,则继续执行下面的成功函数。

SVG 文档

没有哪一个 jQuery 版本,包括 jQuery 3,正式支持 SVG 文档。不过事实上有很多方法是可以正常工作的,另外一些方法,比如操作类名的方法,已经在 jQuery 3 中进行了更新,因此也适用。因此,在未来的版本中,你应该可以放心使用诸如 addClass() 和 hasClass() 这样的方法来操作 SVG 文档了。

已废弃、已移除的方法和属性

除了前面说的改进,jQuery 也移除、废弃了一些特性。

废弃bind(),unbind(),delegate()和undelegate()

jQuery 以前引入的 on() 方法提供了统一的访问接口,取代 bind()、delegate() 以及 live() 方法。与此同时,jQuery 用 off() 方法来取代 unbind()、undelegated() 及 die() 方法。bind()、delegate()、unbind() 和 undelegate() 今后不建议使用,但是并没有采取进一步的行动。

jQuery 3 已经废弃这些方法,并计划在未来的版本(可能是 jQuery 4)中移除它们,要坚持在项目中使用 on() 和 off() 方法,这样你就不用担心未来版本的变更了。

移除 load(), unload() 和 error()方法

jQuery 3 彻底抛弃了已经废弃的 load()、unload() 和 error() 方法。这些方法在很早以前(从 jQuery 1.8 开始)就已经被标记为废弃了,但仍一直存在。如果你正在使用的插件仍然依赖这些方法,那么升级到 jQuery 3 的时候,代码就会出错。因此,在升级过程中要注意。

移除 context, support 和 selector

jQuery 3 彻底抛弃了已经废弃的 context、support 和 selector 属性。如前所述,如果项目中仍然使用着这些属性,或者某个插件仍在依赖这些属性,那么更新到 jQuery 3 时,代码就会出错。

Bugs 修复

jQuery 3 修复了以前版本中的一些重大 Bug。在下面的章节中,我将着重介绍其中两处,因为这两处会对你的编码产生重大影响

width() 和 height()的返回值不再四舍五入

jQuery 3 修复了 width()、height() 和其它相关方法中的一个 bug。这些方法的返回值将不再四舍五入取整到像素了,因为,这使得在某些情况下很难,对元素进行定位。

要理解这个问题,让我们假设你有一个具有像素的宽度的容器元素,这个元素有宽度均为三分之一(即 .%)的3个子元素:

在 jQuery 3 以前的版本中,如果你尝试通过以下代码来获取子元素的宽度……

……那么你得到结果将是 。原因在于 jQuery 会将 . 这个值四舍五入取整。而在 jQuery 3 中,这个 Bug 已经得到修复,你的结果会更精确(比如会得到浮点数)。

wrapAll()

jQuery的新版本中还修复 wrapAll() 方法的一个bug,这个bug会在传递一个函数给 wrapAll() 方法时发生。在 jQuery 3 以前的版本中,当一个函数被传给 wrapAll() 方法时,它会把 jQuery 集合中的每个元素单独包裹起来。换句话说,这种行为和把一个函数传给 wrap() 时的行为是完全一样的。

除了修复这个问题,因为这种函数在 jQuery 3 中只会被调用一次,所以jQuery 集合元素的索引不可能被传入。最后,该函数上下文(this)将指向 jQuery 集合中的第一个元素。

下载 jQuery 3

您可以从jQuery CDN获取文件,或者直接访问链接:

已死,认为在现代网页开发中已经没有一席之地了。然而,jQuery 的开发仍在继续,客观的统计数据(在排名前一百万名的网站中占有率高达 .5%)驳斥这些说法。

在本文中,我已经带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了,这个版本是可能对你现有的项目产生太大的影响,因为没有引入太多许多重大更改。尽管如此,仍然需要注意一些因素,比如 Deferred 对象的改进。就像更新第三方依赖所经常要面的那样,对项目一定要做一个复查,从而防止意外行为或功能崩溃的情况出现。

Jquery 自定义事件实现发布/订阅的简单实例 Jquery自定义事件实现发布/订阅的简单实例//用户点击logoff按钮时,广播一个自定义事件,给任何需要保存状态的感兴趣的观察者,然后导航到logoff页面$(

浅谈jquery的map()和each()方法 1.map()方法//找到所有的标题元素,映射它们的ID,并转化为数组后排序$(':header').map(function(){returnthis.id}).toArray().sort();2.each()方法$('div').each(function(){if($(this)

基于jquery插件编写countdown计时器 废话不多说,直接上代码:先展示一下插件调用方式:1.需要先加载countdown插件对应的css文件,也就几行代码而已,可以不用引入,自己手写一样啦headme

标签: jquery添加属性的方法

本文链接地址:https://www.jiuchutong.com/biancheng/386666.html 转载请保留说明!

上一篇:喜大普奔!jQuery发布 3.0 最终版(喜大普奔含义)

下一篇:Jquery 自定义事件实现发布/订阅的简单实例(jquery有自定义选择器吗)

  • 固定资产清理过程涉及的报表
  • 小规模纳税人怎么变成一般纳税人
  • 企业所得税的纳税义务人不包括下列哪类企业
  • 发票可不可以盖财务专用章
  • 新成立的公司残保金如何申报
  • 在电子税务里怎么查以前年度亏损数据
  • 美容行业如何做活动
  • 咨询服务费的印花税率
  • 为什么有的发票税率是3%,有的是1%
  • 医药零售行业 利润构成
  • 利率与股价的计算方法
  • 土地股权转让需交什么税
  • 应税服务零税率是什么
  • 小规模企业发票跨月可以作废吗?
  • 预付水电费后应怎么做账
  • 公司注销房产如何转给个人
  • 企业将现金借给员工
  • 升级后的百旺开票系统如何操作
  • 建筑业3%人工费可以开专票吗?
  • 现金抵扣到底要不要缴纳增值税?
  • 分公司非独立核算是什么意思
  • 无票收入如何抵税
  • 车提折旧会计分录
  • 公司哪些发票可以做成本或者费用
  • 处置股权后相应债权坏账损失怎么处理?
  • win10 20h2更新后闪屏
  • 年折旧率怎么计算折旧几年
  • 收到非税收入一般缴款书开发票吗
  • mac怎么把通知栏固定
  • win10文件夹状态已共享怎样取消
  • rundll32.exe进程很多
  • 业务招待费的会计科目
  • 笔记本电脑保养与维护
  • 利用php计算1+2+3+...+100
  • 员工冲借款应该怎么做账
  • PHP:move_uploaded_file()的用法_Filesystem函数
  • 业务招待费税务筹划
  • 进口增值税采集
  • 未分配利润转增股本要交税吗怎么交
  • php代码用什么工具
  • 基训包括哪些
  • chatb
  • react错误处理
  • 上下联的方法
  • stat 命令
  • 工业企业成本核算的一般程序
  • 本期进项税额明细表为什么数据一直出不来
  • Python可变数据类型和不可变数据类型
  • 民办非企业保险优惠政策
  • 收到银行承兑汇票计入什么科目
  • 金税四期的基本理念
  • 车辆保险费用查询
  • 股东权益包括什么科目
  • 集团公司股份
  • 工地零电零水布置图
  • 建筑业属于货物经营吗
  • 金税盘不申报会不会罚款
  • 租赁财产的残值处理
  • 外购入库暂估补差单
  • 会计信息不采集可以考初级吗
  • 完全成本法作业成本法变动成本法对企业的影响
  • 企业所得税必须预缴吗
  • 工业企业应付会计工作内容
  • centos怎么样
  • windows任务管理器调用的方法
  • win8.1安装过程
  • shell获取文件内容给变量
  • 百度关键词设置
  • jquery prompt
  • android长按app快捷功能
  • python多线程例子
  • Node.js+ES6+dropload.js实现移动端下拉加载实例
  • jquery获取点击元素的id
  • 封装好的中药能带上飞机吗
  • javascript的基础类型有哪些
  • 用于赞助的消费品需要缴纳消费税吗
  • 税务清单模板
  • 中建七局企业精神是什么
  • 耕地占用税是土地增值税扣除项目吗
  • 粮食部门是不是国家机关
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设