jQueryメソッド属性の詳細な説明

jQueryメソッド属性の詳細な説明

1. jQueryの紹介

jQuery とは何ですか? また、何をするのですか?

  • jQueryはDOM要素に対するJS操作を簡素化するために使用されます
  • jQueryはDOMメソッドを使用できず、DOMはjQueryメソッドを使用できません。

さまざまなセレクタの使用特性:

基本的なセレクターは5つあります: $(" .#*,空格");

リレーショナルセレクタには4つの種類があります: $(“空格>+~ ”)

基本的なフィルターセレクターは8つあります: $(" :first/:last/:even/:odd/eq(index)/:gt(index)/:lt(index)/:not(selector) ")

コンテンツフィルタセレクターは4つあります: $(" :contains(text)/:empty/:has(selector)/:parent ")

表示フィルタセレクターには2種類あります: $(" :hidden/:visible ")

属性セレクターは 8 つあります: ( " = = [ attribute ][ attribute = value ][ attribute ! = value ] [ attribute = value ][ attribute ("==[attribute][attribute=value] [attribute!=value][attribute^=value]、[attribute ("==[attribute][attribute=value] [attribute!=value] [attribute=value][attribute=value][attribute*=value][attributeFilter1][attrbuteFilter2]==")

サブ要素フィルタセレクタ(4種類) $( ":nth-child(index/even/odd) :first-child:last-child:only-child" )

フォーム属性フィルターセレクター(4種類) ${" :enabled/:disabled/:checked/:selected "}

フォームセレクター(11種類) $(" :input/:text/:password/:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden ")

2. jQueryセレクター

2.1 5つの基本セレクタ

    // 5 つの基本セレクタ $(".div"); // クラスセレクタ $("div"); // タグセレクタ $("#box"); // ID セレクタ $("*"); // ワイルドカードセレクタ $("div,p,img"); // マージセレクタ

2.2 4種類の関係セレクター

    //4 種類の関係セレクター $("div p"); //子孫セレクター $("div>p"); //子セレクター $("div+p"); //直接兄弟セレクター $("div~p"); //単純兄弟セレクター

2.3 8つの基本フィルターセレクター

// 8 つの基本的なフィルター セレクター $(":first");//最初の要素 $(":last");//最後の要素 $(":not(selector)");//セレクターを除外 $(":even");//偶数行を選択 $(":odd");//奇数行を選択 $(":eq(index)");//インデックスがインデックスに等しい要素 $(":gt(index)");//インデックスがインデックスより大きい要素 $(":lt(index)");//インデックスがインデックスより小さい要素

2.4 4種類のコンテンツフィルタセレクタ

        // 4 種類のコンテンツ フィルター セレクタ $(":contains(text)"); // 指定されたテキストを含む要素に一致します $(":empty"); // 子要素またはテキストを含まないすべての空要素に一致します $(":has(selector)"); // セレクタを含む要素に一致します $(":parent"); // 子要素またはテキストを持つ要素に一致します

2.5 2種類の可視性フィルタセレクタ

        // 2 種類の可視性フィルター セレクター $(":hidden"); // すべての非表示要素、または hidden タイプの要素に一致 $(":visible"); // すべての可視要素に一致

2.6 8種類の属性フィルタセレクタ

        // 8 種類の属性フィルター セレクタ $("[attribute]"); // 属性属性を持つ要素を一致させます $("[attribute=value]"); // 属性値が値と等しい要素を一致させます $("[attribute!=value]"); // 属性値が値と等しくない要素を一致させます $("[attribute^=value]"); // 特定の値で始まる属性値を持つ要素を一致させます $("[attribute$=value]"); // 特定の値で終わる属性値を持つ要素を一致させます $("[attribute*=value]"); // 特定の値を含む属性値を持つ要素を一致させます $("[attributeFilter1][attrbuteFilter2]"); // 複数の条件を同時に満たす必要がある場合に使用する複合属性フィルター セレクタ

2.7 サブ要素フィルタセレクタ(4種類)

        //サブ要素フィルタセレクタ(4種類)
            $(":nth-child(index/even/odd)") //各親要素の下のインデックス番目の子要素を選択します $(":first-child"); //各親要素の最初の子要素を選択します $(":last-child"); //各親要素の最後の子要素を選択します $(":only-child"); //要素が親要素の唯一の子要素である場合、一致します

2.8 フォーム属性フィルターセレクター(4種類)

        //フォーム属性フィルターセレクター(4種類)
            $(":enabled");//有効な要素をすべて選択$(":disabled");//無効な要素をすべて選択$(":checked");//選択された要素をすべて選択$(":selected");//選択された要素をすべて選択

2.9 フォームセレクター(11種類)

        // フォームセレクター(11種類)
            $(":input");//すべての input/textarrea/select/button 要素を選択$(":text");//すべての 1 行テキスト ボックスを選択$(":password");//すべてのパスワード ボックスを選択$(":radio");//すべてのラジオ ボタンを選択$(":checkbox");//すべてのチェック ボックスを選択$(":submit");//すべての送信ボタンを選択$(":image");//すべての画像ボタンを選択$(":reset");//すべてのリセット ボタンを選択$(":button");//すべてのボタンを選択$(":file");//すべてのアップロード フィールドを選択$(":hidden");//すべての非表示要素を選択

3. jQueryでのDOM操作

3.1 テキスト操作

        // テキスト操作 $("p").html(); // DOM の p.innerHtml と同等です。
        $("p").text();//DOM の p.innerText と同等です。

3.2 値操作

        // 値操作 $("input:eq(5)").val(); //DOM の input.value と同等です。
        $("input:eq(6)").val("aaa"); //属性値を設定する

3.3 属性操作

 		// 属性操作 $("#box").attr('name'); // 名前属性を取得します $("#box").attr('name',"aaa"); // 名前属性と値を追加します $("#box").removeAttr('name'); // 名前属性を削除します $("#box").prop('checked'); // 単一の属性を取得する場合は、prop を使用して false と true を取得します

3.4 クラス操作

    	// クラス操作 $("#box").attr("class","");// 取得と設定 $("#box").addClass("class","");// クラス名の追加 $("#box").removeClass("class","");// クラス名の削除 $("#box").removeClass();// すべてのクラス名を削除 $("#box").toggleClass("main");// メインクラス名を切り替える $("#box").hasClass("main");// 特定のクラス名があるか

3.5 スタイル操作

	//スタイル操作 $("#box").css("color"); //CSSスタイル値を読み取る $("#box").css({"propertyname":"value","propertyname":"value"}); //複数のスタイルを同時に設定する

4. ノード操作

4.1 ノードのトラバース

		 //ノードをトラバースします$("#box").children();//子ノードを取得します$("#box").children("div");//div 子ノードを取得します$("#box").prev();//すぐ上の兄弟を検索します$("#box").prevAll();//すぐ上のすべての兄弟を検索します$("#box").prevAll("div");//すぐ上のすべての div 兄弟を検索します$("#box").next();//すぐ下の兄弟を検索します$("#box").nextAll();//すぐ下のすべての兄弟を検索します$("#box").nextAll("div");//すぐ下のすべての div 兄弟を検索します$("#box").parent();//親ノードを検索します

4.2 フィルターノード

    //ノードをフィルタリング $("ul").find(".a");//検索 $("ul li").filter(".a");//フィルタリング

4.3 作成、挿入、削除

    // 作成、挿入、削除 var lis=$("<li title='aaa'>aaa</li>");//作成//内部的に追加 parent.append(lis);//親ボックスの末尾に追加 parent.prepend(lis);//親ボックスの先頭に追加//外部的に追加 box.after(lis);//ボックスの後に追加 box.before(lis);//ボックスの前に追加//DOM 要素を削除 $("ul").remove();//完全に削除、ul と li の両方を削除 $("ul").empty();//ul の内容をクリアするだけ、ul はまだ存在します $("li").remove(".one");//li 内の class="one" を削除

5. jQuery イベント

    // jQuery イベント // JS との違い // window.onload と $(document).ready()
            // 違い 1: 前者はページが完全に読み込まれた後に実行され、後者は DOM が読み込まれた後に実行されます。後者は前者よりも優先されます。 // 違い 2: 前者が複数回出現した場合、最後のものが前のものを上書きします。後者が複数回出現した場合、それらは結合されます。 // 違い 3: 省略形があるかどうか: window には省略形がありませんが、document には省略形があります。 // 省略形: $().ready(function(){...})
                // $(関数(){....})
        //イベントバインディング: $(selector).on(イベントタイプ、コールバック関数)
        $("ul li").on("click",function(){alert(1);});	
    // jQuery と Ajax
            // get メソッド $.get(url,data,success(response,status,xhr),dataType);
            // post メソッド $.post(url,data,success(data, textStatus, jqXHR),dataType);

画像-20211030195950325

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JS JQueryはdata-*属性値メソッドの分析を取得します
  • JQueryのスタイルと属性の設定方法の分析
  • jQuery イベントオブジェクトのプロパティとメソッドの詳細な説明
  • jQuery プロトタイプ プロパティとプロトタイプ メソッドの詳細な説明

<<:  ファイルをアップロードするための HTML フォームの「参照」ボタンを変更する方法

>>:  シンプルなCSSアニメーションのtransition属性の詳しい説明

推薦する

Mysql general_log をクリーンアップする方法の概要

方法1: グローバル general_log を 'OFF' に設定します。 テーブ...

MySQLの結合クエリ、ユニオンクエリ、サブクエリの原理と使用例の詳細な説明

この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...

Vue.js スタイルレイアウト Flutter ビジネス開発共通スキル

シャドウスタイルにおけるフラッターとCSSの対応UIによって指定されたCSSスタイル 幅: 75px...

Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解

サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...

CSSアダプティブレイアウトは、サブ要素項目の全体的な中央揃えと内部項目の左揃えを実現します。

日常業務では、次のようなレイアウトに遭遇することがあります。親要素のフレーム (ブラウザのサイズに応...

ウェブサイトを高速化する

パフォーマンスは本当に重要ですか?パフォーマンスは重要であり、誰もがそれを知っています。なぜ私たちは...

Web 開発 js 文字列連結プレースホルダーと conlose オブジェクト API の詳細な説明

目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...

Linux仮想マシンの静的IPアドレスを構成するための手順を完了します

序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...

CSS3 と JavaScript を使用して Web カラー ピッカーのサンプル コードを開発する

この例の Web カラー ピッカー機能は、ページ効果を実現するために CSS3 を使用します。つまり...

MySQLのストレージエンジンについてお話しましょう

基礎リレーショナル データベースでは、各データ テーブルはファイルに相当し、異なるストレージ エンジ...

VMWare に CentOS 7.3 をインストールするグラフィカル チュートリアル

CentOS 7.3のインストール手順を図解しました。具体的な内容は次のとおりです。この記事では、v...

Logrotate は 2 時間ごとに Catalina.out ログローテーションを実装します

1. Logrotateツールの紹介Logrotate はログファイル管理ツールです。Linux に...

mysqlサーバーは--skip-grant-tablesオプションで実行されています

MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...

ダイナミッククロックを実現するJS+CSS

この記事の例では、動的な時計を実装するためのJS + CSSの具体的なコードを参考までに共有していま...

MySQL シリーズ 8 MySQL サーバー変数

チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...