jQuery 3.0 的更新内容及使用方法

jQuery,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web 开发者的神器。自从它在 2006 年发布最初版本直到如今,已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松。

显示和隐藏

主要的改变是函数将如何工作的。而且有很好的理由这样做。在早些实现上,hide() 函数设置 css 属性为“display:none”,show() 函数是清除这个属性。但是这样做有些混乱。让我们看看几个例子:

1. 如果当 show() 函数尝试设置一个节点为“display:block”而在另外一个样式表里实现了“display:inline”属性,这将开始破坏代码。

2. 当我们为媒质处理响应式网页设计时(RWD),我们也许会用“display”或者“visibility”改变节点的可见性。这可能会影响“show()”和“hide()”函数。

除了这些,还有很多 JQuery 团队不得不去修复的其它问题。这导致了复杂的实现和性能问题,因此他们迁移到一个简单的模型。

今后,如果你设置“display:none”和使用“show()”,“slideDown()”,“fadeIn()”或者类似的方法去显示节点,它不会有效。更好的方法是使用“addClass()”和“removeClass()”控制显示。或者可以在“ready()”调用的时候在元素上调用“hide()”。

迅速举个例子:

<!DOCTYPE HTML><html>
    <head>
    <style>
        .invisible{
            display: none;
        }
        .visible{
            background-color: deepskyblue;
            display:block;
        }
    </style>
    <script src="https://www.linuxidc.com/jquery-3.0.0-alpha1.js"></script>
    <script>
        $(document).ready(function(){
            $("#div1").addClass("invisible");
            $("#toggle").click(function(){
                $("#div1").removeClass("visible");
                $("#div1").addClass("invisible");
            });
        });
    </script>
    <title>Control Visibility</title>
    </head>
    <body>
        <p>Hello!</p>
        <div>Can you see this?</div>
        <button>Click me</button>
    </body>  </html>

Control visibility

Control visibility

.data() Key 的命名规则

jQuery 团队改变了 .data() 函数的实现来更符合 HTML5 数据集规范。如果 data-* 属性中的 key 包含了数字,该数字将不再参与转换。思考下面的例子:

使用 jQuery 2.1.4:

data attribute in jQuery 2.1.4

控制台窗口不显示对象。

使用 jQuery 3.0.0:

data attribute in jQuery 3.0.0

由于现在数字不会参与转换为骆驼拼写法,key 被转换成了 foo-42-name。因此,我们得到了控制台中的输出。这个 fiddle 的网址是 。你可以更改 jQuery 的版本来观察变化。

同样,如果我们想要不带任何参数地使用 data() 显示所有的数据,如果 data-* 属性的 key 名在连字符(-)后面接了一个数字,则参数的数量也将会在两个 jQuery 版本中改变,就像上面的例子一样。

width() 与 height() 函数返回小数值

一些浏览器会将宽度和高度返回为亚像素值。现在无论浏览器是否支持,jQuery 的 .width()、.height()、.css("width") 都可以返回小数值了。对于为了使用亚像素精度来设计网页的用户来说,这可能会是一个好消息。

.load()、.unload()、及 .error() 函数被移除

这些方法早先已经不赞成使用了,现在则已经从 jQuery 3.0.0 alpha 版中被移除。推荐的方法是使用 .on() 函数来处理这些事件。简短示例:

HTML:

<img src="https://www.linuxidc.com/space-needle.png" alt="Space Needle">

JavaScript:

早先的实现方式(现已不可用)

$( "#spacen" ).load(function() {
  // Handler implementation
});

推荐的实现方式:

$( "#spacen" ).on( "load", function() {
  // Handler implementation
});

jQuery 对象现在可遍历了

现在已经可以遍历 jQuery 对象了,使用 ES2015 的 for-of。所以,你可以像这样使用:

for ( node of $( "<div id=spacen>" ) ) {
    console.log( node.id ); // Returns ‘spacen’
}

(源码在

jQuery 动画现在在后端使用了 requestAnimationFrame API

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/144de422bb96677c32d62d1b8656a449.html