jQueryの概要
jQueryは軽量のjavascriptライブラリであり、コアファイルはわずか数十kbであり、その中のメソッドと関数は基本的に現在の主流のブラウザと互換性があります。イベント、スタイル、アニメーションをサポートするだけでなく、DOM操作を大幅に簡素化し、チェーンプログラミングと暗黙的な反復を可能にします。また、サードパーティのプラグインを使用して迅速に開発できるプラグイン拡張機能の開発もサポートします。
JavaScriptライブラリの概念
javascriptライブラリは、多くの特定の関数とメソッドをカプセル化（事前定義）したJSファイルを参照します。開発者は、アニメーションのアニメーション化、非表示、表示、要素の取得などの機能要件に従ってネイティブjsコードをカプセル化し、このファイルに保存します。このようにして、これらのカプセル化された関数を必要に応じて迅速かつ効率的に使用できます。一般的なjavascriptライブラリには、jQueryプロトタイプYUI Dojo zeptoなどが含まれます。これらはすべてネイティブjavascriptをカプセル化し、javascriptによって内部的に実装されます。
jQueryの概念
jQueryは高速で簡潔なjavascriptライブラリであり、jはjavascriptを表し、Queryはクエリを意味します。これは主にjsのDOM操作をカプセル化し、内部の関数をすばやくクエリして使用できます。さらに、javascriptによってカプセル化されたjQueryの一般的に使用される関数コードには、イベント処理、アニメーションデザイン、およびAjaxインタラクションが含まれます。jQueryを学ぶことの本質は、カプセル化された関数とメソッドの文法規則を理解することです。
jQueryの基本的な使用法
ダウンロードしてインポート
ダウンロードjqueryの公式Webサイトにアクセスして、必要なバージョンをダウンロードできます。また、ここで使用方法を学ぶこともできます。javascriptファイルの圧縮バージョンをダウンロードした後、それを使用したいページにインポートし、開発にjQueryを使用します。
jQueryの入力関数
// 方式一:
$(function () {
... // 页面的DOM加载完成的入口
});
// 方式二:
$(document).ready(function () {
... // 页面的DOM加载完成的入口
});
- どちらの方法でも、DOM構造がレンダリングされた後に内部コードを実行できます（ネイティブjsのDOMContentLoadedイベントと同等）。すべての外部リソースが読み込まれるまで待つ必要はありません。jQueryはカプセル化を完了するのに役立ちます。
- ネイティブjsのloadイベントとは異なり、内部コードは、ページドキュメント、外部jsファイル、cssファイル、および画像が読み込まれた後に実行されます。
jQueryのトップレベルオブジェクト
$記号はjQueryの別名です。コードで$記号の代わりにjQueryを使用することもできます。$はjQueryの最上位オブジェクトであり、ネイティブjavascriptのウィンドウオブジェクトに相当します。$を使用して要素をjQueryオブジェクトにラップした後、jQueryのメソッドを呼び出すことができます。
jQueryオブジェクトとDOMオブジェクト
- ネイティブjsで提供されているAPIを使用して取得した要素オブジェクトはDOMオブジェクトです。
- jQueryメソッドを使用して取得した要素オブジェクトはjQueryオブジェクトです。
- jQueryオブジェクトは、基本的にDOMオブジェクトを$でラップすることによって生成されるオブジェクトであり、疑似配列の形式で格納されます。
特記事項：jQueryによって提供されるメソッドを使用できるのはjQueryオブジェクトのみであり、DOMオブジェクトはネイティブのjavascriptメソッドを使用します。
jQueryオブジェクトとDOMオブジェクト間の相互変換
ネイティブjsはjQueryよりも大きく（jQueryはjsを使用して内部的に実装されます）、jQueryのネイティブ属性とメソッドの一部はカプセル化されていません。したがって、jQueryメソッドによって取得されたいくつかのjQueryオブジェクトを使用し、ネイティブjsの属性とメソッドを使用する場合は、使用する前にjQueryオブジェクトをDOMオブジェクトに変換する必要があります。
// 1、DOM对象转换成为jQuery对象：$(DOM元素对象);
var search = $(".search"); // 类名为search的jQuery对象
var div = document.querySelector('div');
div = $(div); // 将div这个DOM对象转换为jQuery对象
// 2、jQuery对象转换为DOM对象的两种方式
// 因为是以伪数组的形式进行存储所以有
search = $(".search")[0] // 0（index）是索引号
// get 方法
search = $(".search").get(0) // 0（index）是索引号