jQuery 3.0 有哪些新增特性

1 移除旧的IE工作区

新的最终版最主要的目标是更加快速，更加时尚，因此，那些支持早于IE9版本的相关技术与工作区都被移除了。这意味着如果你想要或者需要支持IE6-8，你必须用回112版本，因为甚至是2X版本都无法完整支持早于IE9的浏览器。

注意：在jQuery 3中还弃用了一些其它的功能。截止到2016年6月，升级指南还没有提供一个对于弃用功能的分组整理。因此，你如果想要了解弃用功能，可以通过ctrl+f键来进行搜索。

2 jQuery 30运行在Strict Mode下

大多数支持jQuery 3的浏览器都支持strict mode，而在本次更新中对此进行了规定。

虽然jQuery 3是写在strict mode中的，但是你需要了解的是你的代码并不需要运行在strict mode中，因此如果你想要把以前的代码迁移到jQuery 3，你不需要对已存在的jQuery代码进行重写。Strict和non-strict mode的JavaScript代码可以和谐共存。

这里有一些例外：某些版本的ASPNET，因为strict mode的缘故，无法与jQuery 3兼容，

3 引进forof循环

jQuery 3支持forof语句，这是由ECMAScript 6中新引进的一种for循环语句。这提供了对Arrays，Maps和Sets这样的可迭代对象一种更直接的遍历方法。

在jQuery中，forof循环可以取代以前的$each()语法，并且更容易通过jQuery的元素集合进行循环。

注意：forof只能在支持ECMAScript 6的环境下或者使用Babel这样的JavaScript编译器下工作。

4 动画方面采用新的API

jQuery 3使用requestAnimationFrame() API来执行动画，使动画运行得更加顺畅、快速。新的API只用于支持它的浏览器，对于那些更老的浏览器（如IE9）jQuery使用先前的API来作为显示动画的后备方案。

5 对包含特殊含义的字符串提供转义的新方法

新的jQueryescapeSelector()提供了对在CSS中存在特殊含义的字符串或字符进行转义的方法，该方法可使这些字符串或字符能够继续用于jQuery选择器中，而无需对那些无法进行正确理解的JavaScript解释器进行转义。

这个示例可以让你更好的了解这个全新的方法：

举个例子，页面中某个ID为“abcdef”的元素由于选择器将其解析为ID为“abc”且包含一个名为“def”的类的对象，而无法被$( "#abcdef" )选定。但是它可以由 $( "#" + $escapeSelector( "abcdef" ) )来进行选定。

我无法确定发生中情况的频率，但是假如你碰到过这种类似的情况，这无疑给了你一个解决该问题的简单方法。

6 类 *** 作方法支持SVG

不幸的是，jQuery 3现在还无法完整的支持SVG，但是对于 *** 作CSS类名称的jQuery方法，如addClass()和hasClass()现在可以将SVG文档作为目标。这意味着你可以修改（添加、删除、切换）或者查找SVG（可缩放矢量图形）下的jQuery类，然后使用CSS的类样式。

7 延迟对象现在与JS Promises兼容

JavaScript Promises，用于异步计算的对象，现在在ECMAScript 6中已经被标准化；它们的运行状况和特性的详细说明参见Promises/A+标准。

在jQuery 3中，延迟对象已经与新的Promises/A+标准相兼容，延迟对象已经成为让创建回调队列成为可能的可链对象(chainable objects)。

新的特性改变了异步回调函数执行过程，Promises允许开发者编写在逻辑上与同步代码更接近的异步代码。

8 jQuerywhen()对于多种参数的不同解读

$when()提供了执行回调函数的一种方法，它成为了jQuery 15之后的一部分。这个方法非常灵活，它适用于零参数，也适用于一个或者多个作为参数的对象。

jQuery 3改变了当包含$then()方法时对$when()中参数的解读方法，你可以对$when()进行额外的参数回调。

在jQuery 3中，如果你在$when()中的then()方法内增加一个输入参数，该参数将会被解释成一个可与Promise兼容的"thenable"。

这意味着 $when方法能够接收更加宽广的输入范围，比如原生的ES6 Promises和Bluebird Promises，这也使得编写更复杂的异步回调成为了可能。

9 新的显示/隐藏逻辑

为了增加响应式设计的兼容性，与元素显示和隐藏的代码在jQuery 3中进行了更新。

从现在开始，show()、hide()和toggle()方法将会以内联样式为重点取代以前的计算样式，这种方式能够更尊重样式列表的改变。

新的代码尽可能的尊重样式列表中所呈现的数值，这意味着CSS规则可根据事件（如设备重新定位和窗口尺寸调整）进行动态改变。

这个说明文件申明了最重要的结果就是：

“作为结果，断开连接的元素除非指定了内联display: none，否则将不再认定为是隐藏的。因此，在jQuery 30中，toggle()不再对断开连接元素与已连接元素进行区分。”

如果你想要更好的了解关于全新的显示/隐藏逻辑，这个Github discussion会对你有帮助。jQuery开发者还发布了Google文档表来展示在不同用例下新规则的运转。

10 对于防止XSS攻击的额外保护

jQuery 3增加一个额外的安全层用户用于防备跨站点脚本(XSS)攻击，它需要开发者指定$ajax()和$get()方法中的选项为dataType: "script"。

最近因为工作需要做了点HTML5可视化研究如下

为什么没有字体颜色作为一个设计师很不爽

第一次发文有写错的地方还请诸位高手多多包涵

设想，要在页面中生成大量的简单图形，比如10万个方块，并对它们进行拖拽 *** 作。

基本思路有三种方式，传统Div，Svg，与Canvas。

为了加拖拽，暂时没有用canvas。

因为canvas无法生成dom节点，不存在id这种属性，需要通过判断鼠标位置来获取元素再进行 *** 作。虽然写个isMouseinObj()的function也不是不行，但总觉得以后针对某对象单独处理会夜长梦多（主要还是懒）。。。不过从生成图形角度讲，canvas理论上是最快的。

因为贪生怕死担心Dom过多死机，准备先分区生成方块，于是：

一个简图，整体划分如下，设两个input框的值分别为m, n，每个蓝块包括n个绿块。点击每个蓝块可在下方生成n个绿块。

点击GenAll可一次性生成mn个绿块。点击Drag可对绿块进行拖拽。

模拟开始。

首先是用div模拟方块。因为比较熟悉写起来也简单。

Div的拖拽方式可以分成两种。

Jquery-ui的draggble还有很多其他参数，请参考api文档。

现在假定一种新情形：绿色方块只能拖拽到虚线框之内。

默认情况下，Html元素均不可拖拽，所以需要设置拖拽元素的draggable属性为true。同时，默认无法将元素放置到其他元素中，所以需要eventpreventDefault()设置允许放置。

本例中，为class为abox的绿方块添加draggable。

为class为wrap的虚线框添加preventDefault。

之后通过dataTransfer传输数据，实现box的移动。

由于Svg也是直接在Html中生成Dom节点，理论上Div所能实现的功能它都可以实现，并且绘图效果更佳。

然后生成Svg元素，并设置其属性。

循环生成Svg方块并添加拖拽属性。

但这种方式有个问题，就是——慢。当生成仅10000个方块时，效率便低的不可估量。

然而Svg无法应用Html5原生的Drag and Drop事件。

相比于引用插件，这样的效率提高了不少。

从结果上看，在数量少时，针对方块这种简单图形的简单 *** 作Div和Svg均可胜任。然而设置了总共生成100000个方块，发现单从生成的角度，Svg的渲染用时大约是Div的1/2（这里指Dom中直接绘制Svg而非通过js插件绘制Svg）。

加上拖拽功能后，用Html5原生拖放事件的Div，及用鼠标事件的Svg，明显快快快快于应用js插件拖放的效率。于是乎插件虽然强大但对于大量节点的处理实在过于缓慢。

于是在图形化上还是应用Svg更舒畅一些。

但有一个尚未解决的问题。

应用鼠标事件拖动Svg，当鼠标移动过快时，mousemove事件无法触发，导致移动效果不能实现。粗略查了下似乎可以添加透明背景层接收所有触发事件，不过还没有深入研究。

这篇就到此吧。等解决了mousemove的bug再更新后续。

(´・ω・`)

使用<img>标签将SVG 格式的字符串显示在HTML中。更好的做法是，符合标准的浏览器会接受内联base-64编码的SVG作为数据URI，如下案列：

是用这个标签创建的：

上面的 PD94bWwgdmVy是通过 svg字符串 base-64编码。

是一种基于XML的矢量图形格式，可以用于在Web页面中显示图形。SVG启动是指在Web页面加载时，浏览器会解析SVG文件并将其渲染出来，从而显示出SVG图形。与传统的位图图像（如JPEG、PNG等）不同，SVG图形是基于矢量的，可以无限缩放而不失真，因此在Web设计中得到了广泛应用。启动SVG可以通过在HTML代码中插入SVG标签或使用CSS样式表来实现。

svg 是『矢量图』，相比于『位图』，矢量图的特点是不会随着放大而失真，能做到这一点，主要是由于矢量图存储的内容是对『图形的描述』

svg 适合描述一些简单的图形

下面来画第一个图形

svg 可以当做普通的 HTML 标签放在页面中，svg 标签的作用有点像 canvas，充当绘制图形的画布。如果绘制的图形超出了画图，则会被截断。

svg 提供一些标签来表达常用的基本图形，如 <circle/> <rect/> <ellipse/> <line/> <polygon/> <polyline/> <path/> ，分别对应圆、矩形、椭圆、线段、多边形、多段线、路径。

表达图形的具体属性不作介绍，请自行查阅资料。

有些属性可以放在CSS中：

有些则只能写在标签里，如下：

path 是一个更强大的 API，可以画出上面几种基本图形，还可以画出表现力更强的曲线。上面的几个标签的优势是使用方便。

有一些东西没有提到，比如 transform 变换：包括旋转、平移、缩放等，你可以自行去了解。

上文中的示例： 链接

SVG教程 | MDN

SVG 教程 | 菜鸟教程

以上就是关于jQuery 3.0 有哪些新增特性全部的内容，包括:jQuery 3.0 有哪些新增特性、Div & Svg可视化探索笔记、使用<img>标签显示SVG等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！