jQuery 3.0 の変更点と it_jquery の使用方法
jQuery, by far the most popular JavaScript library in the world, has always been a magic weapon for us web developers. Since its initial release in 2006 until now, many web developers have introduced this excellent library into their projects to make development work easier.
After 3 months, the jQuery team finally released the 3.0 Alpha version. There are two versions jQuery compat 3.0 and jQuery 3.0.
•jQuery compat 3.0 corresponds to the previous 1.x, is compatible with more browsers, and supports IE up to version 8.0
•jQuery 3.0 corresponds to the previous 2.x, pay attention to newer browsers, and supports IE up to version 9.0
In addition, 3.0 also adds support for Yandex browser, a browser from Russia.
1. Simplified show/hide
The previous show/hide is fully compatible, such as show, no matter the display of the element is written in style, it can be displayed in the stylesheet. It's different in 3.0. The display:none written in the stylesheet is still hidden after calling show. 3.0 It is recommended to use class method to show and hide, or completely use hide to hide first (without using css code), and then call show.
<style>
input {
display: none;
}
</style>
<input id="txt" type="text" value=""/>
<script>
$('#txt').show(); // 仍然隐藏的状态
</script>2. The data method is compatible with data-name-11 writing
<input id="txt" type="text" value="" data-name-11="aa"/>
<script>
// 3.0 版本 输出 {"name-11": aa}， 之前版本输出 {}
$('#txt').data()
</script> The essence of this problem is the implementation difference of the $.camelCase method
// 3.0 输出 "name-11", 3.0 之前版本输出 "name11"
$.camelCase('data-name-11') 3. deferred is compatible with Promise/A+
3.0 can finally confidently declare its support for Promise/A, which has been criticized as a castrated version before.
4. The $.ajax object has deleted the success | error | complete method
This is because of the promotion of the Promise/A specification, people are using Promise more and more, and there is no need to exist several methods on Derferred before
•derferred.done -> jqXHR.success
•derferred.fail -> jqXHR.error
•derrerred.always -> jqXHR.complete
// 以下方法在 3.0 后没有了 $.ajax().success $.ajax().error $.ajax().complete
5. The return value of width/height, css(width) / css(height) is always decimal
Some browsers previously returned floating point numbers under special circumstances.
6. Removed the shortcut function of registration event load | unload | error
•The name of load has the same name as ajax load, which is ambiguous.
•unload If load is removed, unload will have no meaning.
•error is registered using window.onerror and is not a standard event handler, so it is recommended to remove
The above content summarizes the changes of jquery3.0. The following mainly introduces the updated content and usage of jquery3.0.
Show and hide
The main change is how the function will work. And there are good reasons to do so. In earlier implementations, the hide() function sets the css attribute to "display:none", and the show() function clears this attribute. But doing so is a bit confusing. Let’s look at a few examples:
1. If when the show() function tries to set a node to "display:block" and the "display:inline" attribute is implemented in another stylesheet, this will start to break the code.
2. When we deal with responsive web design (RWD) for media, we may use "display" or "visibility" to change the visibility of nodes. This may affect the "show()" and "hide()" functions.
In addition to these, there were many other issues that the JQuery team had to fix. This resulted in complex implementation and performance issues, so they migrated to a simpler model.
Going forward, if you set "display:none" and use "show()", "slideDown()", "fadeIn()" or similar methods to display nodes, it will not work. A better approach is to use "addClass()" and "removeClass()" to control the display. Or you can call "hide()" on the element when "ready()" is called.
A quick example:
<!DOCTYPE HTML><html>
<head>
<style>
.invisible{
display: none;
}
.visible{
background-color: deepskyblue;
display:block;
}
</style>
<script src="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 id="div1">Can you see this?</div>
<button id="toggle">Click me</button>
</body> </html>
.data() Key 的命名规则
jQuery 团队改变了 .data() 函数的实现来更符合 HTML5 数据集规范。如果 data-* 属性中的 key 包含了数字，该数字将不再参与转换。思考下面的例子：
使用 jQuery 2.1.4：
控制台窗口不显示对象。
使用 jQuery 3.0.0：
由于现在数字不会参与转换为骆驼拼写法，key 被转换成了 foo-42-name。因此，我们得到了控制台中的输出。这个 fiddle 的网址是 http://jsfiddle.net/nWCKt/25/ 。你可以更改 jQuery 的版本来观察变化。
同样，如果我们想要不带任何参数地使用 data() 显示所有的数据，如果 data-* 属性的 key 名在连字符（-）后面接了一个数字，则参数的数量也将会在两个 jQuery 版本中改变，就像上面的例子一样。
width() 与 height() 函数返回小数值
一些浏览 器会将宽度和高度返回为亚像素值。现在无论浏览器是否支持， jQuery 的 .width()、.height()、.css("width") 都可以返回小数值了。对于为了使用 亚像素精度来 设计网页的用户来说，这可能 会是一个好消息。
.load()、.unload()、及 .error() 函数被移除
这些方法早先已经不赞成使用了，现在则已经从 jQuery 3.0.0 alpha 版中被移除。推荐的方法是使用 .on() 函数来处理这些事件。简短示例：
HTML：
<img src="space-needle.png" alt="Space Needle" id="spacen">
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
所有现代的浏览器都已经支持了 requestAnimationFrame（参见： http://caniuse.com/#search=requestAnimationFrame ）了。由于其被普遍支持，jQuery 将会使用此 API 来执行动画。其优势包括更流畅的动画及更少的 CPU 占用（因此，可以在手机上节约电量）。
增强 .unwrap() 函数
.unwrap() 函数可以让你在 DOM 中删除指定元素的父元素，早先不能接收参数。如果有人想给 unwrap 设定一个条件，这可能是个问题。
在 jQuery 3.0.0 alpha 中，.unwrap() 可以接收 jQuery 选择器做为参数来处理这个问题。
jQuery.Deferred 升级为 Promises/A+ 兼容
Promiseis是一个异步操作的最终结果——它是一个对象，承诺在未来交付结果。 和promise接口的最主要方式是then方法， 它注册了回调函数。现在，在JavaScript中使用Promise来完成异步工作变得日益流行。Promises/A+是一个兼容JavaScript promises的开放标准。 (想要更多的信息，可以查看链接: https://promisesaplus.com/ )
从jQuery的参考文档中，Deferred对象是一个由jQuery.Deferred()方法创建的可链接实用对象。它可以注册多个回调函数放入回调函数队列中、调度这个队列、更新任何同步或异步方法的成功和失败状态。在jquery 3.0.0中，jQuery.Deferred对象升级成与Promises/A+和ES2015 Promises兼容。 这就是.then()方法的主要变更。
更好地处理错误情况
这个版本的 jQuery 能更好地处理错误 —— 错误请求过去一直是被忽略的，直到现在的版本才会抛出错误。
举例来说：考虑到 offset，要获取当前第一个元素的坐标，相对于文档来说，就要匹配集合中的元素。如果你正试图在 jQuery 的早期版本找到抵消的窗口（window），你会得到{top: 0, left: 0}这样的结果，而不是抛出一个错误，这是因为抵消窗口（window）是无意义的。而在 3.0 alpha 版本中，它就会抛出一个错误。
另外一个例子：$("#") 现在会抛出一个错误，而不是返回一个长度为 0 的集合。
对自定义选择器（如 :visible ) 进行了加速
当 :visible 之类的选择器在一个文档内多次使用时，性能得到了很大的提升。其内部是通过缓存来实现的 —— 第一次用过这个选择器后，以后返回结果都是一样的。但是其后的每一次调用返回结果都很快，因为缓存起作用了。来自 jQuery 的 Timmy Willison 在 报告 中指出使用缓存后 :visible 选择器的性能提升了 17 倍。
这些都是一些主要的更新。整个列表在他们的官方博客： http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/ .
在哪里下载最新版本
有两个版本：
jQuery 3.0，其支持了现代浏览器： https://code.jquery.com/jquery-3.0.0-alpha1.js
jQuery Compat 3.0，其包含了对 IE8 的支持： https://code.jquery.com/jquery-compat-3.0.0-alpha1.js
也可以从 npm 中获取：
npm install jquery@3.0.0-alpha1 npm install jquery-compat@3.0.0-alpha1
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
10 jQueryの楽しみとゲームプラグイン
Mar 08, 2025 am 12:42 AM
10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
jQuery Parallaxチュートリアル - アニメーションヘッダーの背景
Mar 08, 2025 am 12:39 AM
このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください
ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？
Mar 18, 2025 pm 03:14 PM
この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。
Matter.jsを始めましょう：はじめに
Mar 08, 2025 am 12:53 AM
Matter.jsは、JavaScriptで書かれた2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。 Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、
jqueryとajaxを使用した自動更新Divコンテンツ
Mar 08, 2025 am 12:58 AM
この記事では、JQueryとAjaxを使用して5秒ごとにDivのコンテンツを自動的に更新する方法を示しています。 この例は、RSSフィードからの最新のブログ投稿と、最後の更新タイムスタンプを取得して表示します。 読み込み画像はオプションです
