[jQueryの紹介・（1）]フレームワークが普及した今、なぜjQueryを学ぶ必要があるのですか？

angle.js、vue.js、react.jsなどのフレームワークが普及している現在、開発者はDOMを自分で操作する必要がなくなっているため、jQueryは徐々に時代遅れになっていることを認めなければなりません。
しかし、jQueryの開発アイデアは依然として非常に古典的であり、今ではフロントエンドテクノロジーの基盤として存在しています。

記事ディレクトリ

1.jQueryを理解する

1.1はじめに

jQueryはjqと省略されます。Queryはクエリを意味します。jQueryは、その名前が示すように、JavaScriptページコントロールのクエリと制御をより便利にするライブラリです。

多くの人がjQueryをJavaScriptフレームワークとして位置付けていますが、これは厳密ではありません。フレームワークはソリューションのホイールであり、jQueryの本質はjsファイルです。これは、ネイティブjsを凝縮して最適化した後にさらにカプセル化されるスーパーセット（ライブラリ）です。
ここに写真の説明を挿入
jQuery設計の目的は、「より少ないコードでより多くのことを行う」ことです。JavaScript一般的に使用される機能コードをカプセル化し、シンプルなJavaScriptデザインモードを提供し、HTMLドキュメント操作、イベント処理、アニメーションデザイン、およびAjax相互作用を最適化します。

1.2多くの利点

jQueryは、その優れた設計アイデアとシンプルで実用的な構文で長年にわたって人気があり、それでも多くの利点があります。

JavaScript言語
を拡張する一方で、コードの記述を大幅に簡素化します。jQueryは、要素の反復や配列処理など、基本的なJavaScript構造を拡張します。もう1つのポイントは、jsイベント処理の機能強化です。jQuery
はさまざまなページイベントを提供します。これにより、プログラマーがHTMLにイベント処理コードを追加しすぎるのを防ぐことができます。最も重要なのは、そのイベントハンドラーがさまざまなブラウザーを排除することです。互換性の問題！
ドキュメント要素をすばやく取得する;
jQueryの選択メカニズムはCSSセレクターに基づいて構築されており、DOMドキュメント内の要素をすばやくクエリする機能を提供し、JavaScriptでページ要素を取得する方法を大幅に強化します。
美しいページの動的効果を提供します
。jQueryには一連の組み込みアニメーション効果があり、非常に美しいWebページを開発できます。多くのWebサイトでは、フェードインやフェードアウトなどの動的効果や要素の削除など、jQueryの組み込み効果を使用しています。

1.3欠点

サードパーティのjQueryファイルを導入する必要があり、jQueryのバージョン間で使用法の競合があります。
DOMノードに大きく依存し、完全なDOM操作を行い、保守が困難です。
サイズが肥大化し、多くの機能が実用的ではありません。

1.4インポート方法

オンラインリソースの紹介：
私はCDNサービスを使用することを好み、リンクが添付されています：bootCDN-jQueryアドレス
もちろん、すべての人のjquery-3.5.1最小バージョンのリンクを抽出し、それをコピーしてHTMLドキュメントのheadタグに配置します。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

ここに写真の説明を挿入

ローカルファイルのインポート：
ネットワークが適切でない場合は、jQueryライブラリファイルをローカルにダウンロードすることもできます。
[リンクのコピー]ボタンをクリックし、ブラウザでアドレスを開き、すべてを選択してコードをコピーし、ローカルの空のjsファイルに貼り付けてからsrcインポートします。

<script src='文件路径'></script>
// 例如：
<script src="./jquery-3.5.1.min.js"></script>

❀少し拡大❀

jquery.jsそしてjquery.min.js、違いは何ですか？いつどちらを使うの？

2つのファイルリンクを別々に開きました。jquery.js通常バージョンが左側にjquery.min.js、圧縮バージョンが右側にあります。製品バージョンのファイルコードが読みやすいことがはっきりとわかります。ソースコードを調べたい人は、ダウンロードして確認できます。
右側に圧縮バージョンがあります。このバージョンは、実際の開発でインポートする必要があるものです。比較的言えば、圧縮バージョンはサイズが小さく、ロードが高速です。
ここに写真の説明を挿入

1.5エントリー機能

HTMLドキュメント全体がロードされた後にjsコードをロードする必要があるため、次の4つの実装方法があります。

jQueryでの従来の記述：$(document).ready()

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
    
      
            // js代码块
        };
    </script>
</head>
</html>

上記の方法は、次のように省略できます。$()

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
    
    
            // js代码块
        });
    </script>
</head>
<body>
    // html代码块
</body>
</html>

ネイティブjsの入力機能を使用することもできます。window.onload()

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        window.onload = function(){
    
    
            // js代码块
        };
    </script>
</head>
<body>
    // html代码块
</body>
</html>

ボディタグの終わり

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./jquery-3.5.1.min.js"></script>
</head>
<body>
    // html代码块
    <script>
        // js代码块
    </script>
</body>
</html>

❀少し拡大❀

ネイティブjsのエントリ機能window.onload()：jQueryにカプセル化された$(document).ready()ものとの違いは何ですか：？

	window.onload（）	$（document）.ready（）
実行のタイミング	実行する前に、Webページ内のすべてのコンテンツ（写真を含む）がロードされるのを待つ必要があります	Webページ全体のdomツリーは、描画が完了した後に実行され、dom要素に関連付けられたリソースがロードされない場合があります。
定義時間	一度だけ定義できます。複数の定義は前の定義を上書きします	複数回定義できます
ショートフォーム	番号	$（）

ここから、jQueryはネイティブjsのアップグレードバージョンであり、jsコードの記述が大幅に簡素化されていることもわかります。

1.6 jQuery Editionhello world

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
    
    
            console.log("hello world");
        });
    </script>
</head>
</html>

2.jQuery関数

jQueryライブラリは、jQueryと呼ばれる関数のみを提供します。$( )この関数は、jQueryオブジェクトとjQuery関数の呼び出しを容易にするために、関数とそのプロトタイプに多数のメソッドを定義します。jQuery関数は、次の4つのパラメーターを受け入れることができます。

2.1DOMオブジェクト

jQuery関数は、DOMオブジェクトをjQueryオブジェクトにカプセル化し、それを返します。

<div id='app'>hello jQuery!</div>

$(function(){
    
    
    console.log($(document.querySelector('#app')));
})

ここに写真の説明を挿入

2.2HTMLコードスニペット

jQuery関数は、受信テキストに基づいてHTML要素を作成し、それらをjQueryオブジェクトにカプセル化して返します。といった：

$("<div class='one'>one<div>");

2.3匿名機能

前述のエントリ関数は、ドキュメント構造がロードされると、jQuery関数が匿名関数を呼び出します。

$(function(){
    
    

});

2.4セレクター

jQuery関数は、セレクターを介して対応するDOMを取得し、これらのDOMオブジェクトをjQueryオブジェクトにカプセル化して返します。次の章のjQueryオブジェクトの例を参照してください。

詳細なjQueryセレクターの紹介は後で更新されます。

3.jQueryオブジェクト

<div id='app'>hello jQuery!</div>

$(function(){
    
    
    console.log($('#app'));
})

ここに写真の説明を挿入
jQueryオブジェクトは配列のようなオブジェクトであり、その要素はDOMオブジェクト（要素要素）です。jQuery関数とプロトタイプインスタンスメソッドを呼び出すことができます。

3.1jQueryオブジェクトのDOMオブジェクトへの変換

3.1.1 $（セレクター）[インデックス]

jQueryオブジェクトは配列のようなオブジェクトであるため、最初の要素を直接取得してから、jQueryオブジェクトをDOMオブジェクトに変換できます。今でも例を見てください：

<div id='app'>hello jQuery!</div>

$(function(){
    
    
    console.log($('#app'));
    console.log($('#app')[0]);
    // 对比于js原生dom操作
    console.log(document.querySelector('#app'));
    console.log($('#app')[0] === document.querySelector('#app'));
})

ここに写真の説明を挿入

3.1.2 $（selector）.get（index）

jQueryのgetメソッドを使用することもできます。これは、直接ブラケット選択と同じ効果があります。

<div id='app'>hello jQuery!</div>

$(function(){
    
    
    console.log($('#app'));
    console.log($('#app').get(0));
})

ここに写真の説明を挿入