ホームページ > 記事 > ウェブフロントエンド > jqueryとzeptoは同じですか?
jquery と zepto は異なります。どちらも JavaScript ライブラリですが、次のような違いがあります: 1. Dom 操作で ID を追加すると、jquery は有効になりませんが、Zepto は有効になります。2. jquery はロード イベントの処理関数を実行しませんが、zepto は実行します。ロードイベントの処理関数。
このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。
jquery と zepto は異なります
##jquery:
zepto:
Zepto は、最新のスマートフォン ブラウザ向けに特別にリリースされた軽量 JavaScript ライブラリです。ファイル サイズはわずか約 10K で、最新の高度なブラウザと互換性があります。主にモバイル開発に使用されるブラウザで、jQuery に似た API を備えています。 zepto公式サイトにもあるように、jQueryが使えるならzeptoも使います。同じ点:
Zepto はもともとモバイル用に開発されたライブラリであり、jQuery と同様の API を備えているため、jQuery の軽量な代替手段です。ただし、ファイルサイズは小さくなります。 Zepto の最大の利点は、ファイル サイズがわずか 8k 以上であることです。現在完全に機能するライブラリの中で最も小さいです。大きくはありませんが、Zepto が提供するツールはニーズを満たすのに十分ですプログラム開発の様子。 jQuery で一般的に使用される API とメソッドのほとんどは Zepto で利用できますが、Zepto には jQuery にはないものもあります。 また、Zepto の API のほとんどは jQuery に対応しているため、非常に使いやすく、jQuery に慣れていれば簡単に Zepto を使いこなすことができます。 jQuery では同じ方法で多くのメソッドを再利用でき、ドキュメントを見なくてもメソッドを文字列化してより簡潔なコードを取得することもできます。相違点:
1. IE ブラウザのサポート
モバイル プログラムの場合、Zepto にはいくつかの機能があります。タッチ スクリーン インタラクションに使用できる基本的なタッチ イベント (タップ イベント、スワイプ イベント)。Zepto は IE ブラウザをサポートしていません。これは、Zepto 開発者の Thomas Funks がクロスブラウザの問題について混乱しているからではありませんが、慎重な末に行われた決定ですjQuery チームがバージョン 2.0 で古いバージョンの IE (6 7 8) をサポートしなくなったのと同様に、ファイル サイズを減らすことも考慮されています。 Zepto は jQuery 構文を使用するため、ドキュメントでは IE のフォールバック ライブラリとして jQuery を使用することを推奨しています。そうすれば、プログラムは IE で引き続き実行でき、他のブラウザでも Zepto のファイル サイズの利点を享受できます。ただし、2 つの API には完全な互換性がないため、この方法を使用する場合は注意し、十分な調査を行ってください。2. Dom 操作の違い: id の追加時に jQuery は有効になりませんが、Zepto は有効になります。
jQuery オペレーションの ul の ID は追加されません。(function($) { $(function() { var $list = $('<ul><li>jQuery 插入</li></ul>', { id: 'insert-by-jquery' }); $list.appendTo($('body')); });})(window.jQuery); Zepto 可以在 ul 上添加 id。 Zepto(function($) { var $list = $('<ul><li>Zepto 插入</li></ul>', { id: 'insert-by-zepto' }); $list.appendTo($('body')); });
3. イベント トリガーの違い:
jquery を使用する場合、ロード イベントのハンドラー関数は実行されません。(function($) { $(function() { $script = $('<script />', { src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js', id: 'ui-jquery' }); $script.appendTo($('body')); $script.on('load', function() { console.log('jQ script loaded'); }); });})(window.jQuery);ロードzepto を使用するとイベントが発生します 処理関数は
Zepto(function($) { $script = $('<script />', { src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js', id: 'ui-zepto' }); $script.appendTo($('body')); $script.on('load', function() { console.log('zepto script loaded'); });});
4 を実行します。 width() と height() の違い:
Zepto はボックス モデル ( box-sizing)、.width () を使用すると割り当てられた幅が返され、.css('width') を使用して境界線などを追加した結果が返されます。jQuery はボックス モデルを無視し、常にボックスの幅/高さを返します。コンテンツ領域 (パディングとボーダーを除く)。5. offset() の違い:
Zepto は {top, left, width, height} を返しますが、jQuery は {width, height} を返します。6. Zepto は非表示要素の幅と高さを取得できませんが、jQuery は取得できます。
7. Zepto はプロトタイプの extend メソッドを定義していませんが、jQuery は定義しています。
8. Zepto の各メソッドは配列のみを走査でき、JSON オブジェクトは走査できません。
推奨される関連ビデオ チュートリアル:以上がjqueryとzeptoは同じですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。