jQuery は高速で簡潔な JavaScript フレームワークで、2006 年に John Resig によって作成されたオープンソースプロジェクトです。JavaScript で一般的に使用される関数コードをカプセル化し、シンプルな JavaScript 設計パターンを提供し、HTML ドキュメント操作、イベント処理、アニメーション設計、および Ajax インタラクションを最適化します。その設計目的は「Write Less, Do More」であり、コードの記述を減らし、より多くのことを実行することを推奨しています。

jQuery についてさらに詳しく知りたい場合は、次のリンクにアクセスしてください。

jQuery公式サイト

jQuery中国語ネットワーク

jQuery チュートリアル

jQuery API ドキュメント

よく使われる

インポート方法

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

共通計算式

 公式：$(selector).action()

1.2 クイックスタート

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="#" id="test">点我</a>
<script>
    $('#test').click(function (){
        alert('hello,jquery');
    })
</script>
</body>
</html>

セレクタ

すべての CSS セレクターのサポートに加えて、

イベント

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #divMouse{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divMouse">
    在这里点击鼠标试试
</div>
<script>
    $(function (){
        $('#divMouse').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
        })
    });
</script>
</body>
</html>

ドム

1.3 機能概要

jQueryライブラリには以下の関数が含まれています

HTML/DOM操作

CSSの操作

HTMLイベント関数

JavaScript の効果とアニメーション

アヤックス

公共事業

2. JQuery の概要

2.1 ドキュメントレディ機能

ドキュメントがロードされる前に jQuery コードを実行することによって引き起こされる潜在的なエラーを回避するには、すべての jQuery 関数をドキュメント準備完了 (ドキュメント準備完了) 関数で記述する必要があります。たとえば、現在の HTML ページはまだロードされていないため、特定の HTML 要素タグはまだクエリされていない可能性があります。

2.2 名前の競合

jQuery は通常、ドル記号 $ を短縮表現として使用しますが、複数の JavaScript 関数ライブラリを同時に使用する HTML ドキュメントでは、jQuery が同じく $ 記号を使用する他の関数 (Prototype など) と競合する可能性があるため、jQuery は noConfict を使用します。 () メソッドをカスタマイズして、競合する可能性のある $ 記号式を他の名前に置き換えます。。

2.3 JQueryセレクター

基本セレクター

属性セレクター

フォームセレクター

階層セレクター

jQuery CSS セレクター

ベースセレクター

高度

属性セレクター

高度

フォームセレクター

コード例

レベルセレクター

CSSセレクター

2.4 JQueryフィルター

基本フィルター

子フィルター

コンテンツフィルター

可視性フィルター

基本フィルター

:最初和:最後

:first および :last は、要素セット内の最初または最後の要素を選択するために使用されるメソッドです

:偶数と:奇数

:even および :odd は、要素セット内の偶数または奇数のインデックス付き要素を選択するために使用される JQuery フィルターです。

:eq()、:gt()、および:It()

:eq()、:gt()、および :lt() は、要素セット内の特定のインデックスまたはインデックス範囲にある要素を選択するために使用される JQuery フィルターです。

：いいえ（）

：ヘッダ

子要素フィルター

:first-child
:first-child フィルタは、ページ上の各親要素の最初の子要素をフィルタリングするために使用されます。

:last-child
:last-child フィルタは、ページ上の各親要素の最後の子要素をフィルタリングするために使用されます。

:nth-child
:nth-child() フィルターは、ページ上の各親要素の n 番目の子要素をフィルターするために使用され、シリアル番号は 1 から始まります。

:only-child
:only-child フィルターは、親要素内に 1 つだけを持つすべての子要素をフィルターするために使用されます。

コンテンツフィルター

:contains( )
:contains() フィルターは、指定されたテキストコンテンツを含むすべての要素をフィルターで除外するために使用されます。

:contains() フィルターのフィルターテキストでは大文字と小文字が区別されます。

:empty
:empty フィルターは、子ノード (子要素とテキスト) を含まない要素を選択するために使用されます。

:parent
:parent フィルターは、子ノード (子要素とテキスト) を含む要素を選択するために使用され、その構文構造は次のとおりです。

:has
:has() フィルターは、指定されたセレクターを含む要素を選択するために使用されます。

可視性フィルター

:hidden
:hidden フィルタは、すべての非表示要素をフィルタリングするために使用されます。

:visible
:visible フィルターは、すべての可視要素を除外するために使用されます。

3. JQuery イベントと特殊効果

3.1 JQueryイベント

ドキュメント/ウィンドウイベント

キーボードイベント

マウスイベント

フォームイベント

ドキュメント/ウィンドウイベント

キーボードイベント

マウスイベント

フォームイベント

このイベントのセレクターは先頭のフォーム要素のみにすることができ、現在は任意の HTML 要素に適用できます。要素以外の位置をマウスでクリックするか、キーボードの Tab キーを押すと、要素のフォーカスが失われることがあります。

jQueryイベントのバインドとバインド解除

jQuery では、HTML 要素のイベントリスナーは、特定のメソッドを通じてバインドまたはバインド解除できます。この章では、指定した HTML 要素に対してイベントをバインドし、イベントを解放し、一時イベントを追加する方法を紹介します。

jQueryイベントバインディング

jQueryイベントの解除

jQueryの一時イベント

HTML 要素のイベント監視は、特定のメソッドによってバインドまたはバインド解除することもできます。jQuery1.7 以降のバージョンでは、以前のすべてのイベントバインドおよびバインド解除メソッドを on() および off() メソッドを使用して置き換えることをお勧めします。

要素が複数のイベントをリッスンする必要がある場合、on() メソッドを使用して、後で動的に追加される要素 (ページの初期化時には存在しません) を登録できます。また、そのイベントリスナーは on で登録する必要があります。

3.2 特殊効果

jQueryの非表示と表示

jQueryのフェードインとフェードアウト

jQuery-スワイプ

jQueryアニメーション

jQueryメソッドチェーン

jQueryの停止アニメーション

jQueryの非表示と表示

jQuery は、カスタム変更効果の持続時間など、要素の非表示と表示を制御できます。Hide() メソッドは指定された要素を非表示にするために使用され、show() メソッドは指定された要素を表示するために使用されます。

jQuery toggle() メソッドは、要素の非表示と表示を切り替えるために使用されます。このメソッドは、非表示の要素を表示したり、表示されている要素を非表示にしたりするために、 Hide() および show() メソッドの代わりに単独で使用できます。

jQueryのフェードインとフェードアウト

jQuery-スワイプ

jQuery slideDown()

jQuery slideUp()

jQuery slideToggle()

jQueryアニメーション

要素の基本プロパティを変更する

要素の位置を変更する

アニメーションキュー

アニメーションを停止します

要素の位置を変更する

3.3 jQueryメソッドリンク

jQuery を使用すると、同じ要素に対して複数の jQuery コマンドを連続的に実行できます。この手法は jQuery メソッドチェーン (チェーン) と呼ばれます。同じ要素に対して、順番に実行する必要がある複数のアクションがある場合、新しい要素を追加するだけで済みます。アクションから前のアクションに移動し、メソッドチェーンを形成し、毎回同じ要素を選択するために検索を繰り返す必要はありません。