1. jQueryの紹介jQuery とは何ですか? また、何をするのですか?
さまざまなセレクタの使用特性: 基本的なセレクターは5つあります: リレーショナルセレクタには4つの種類があります: 基本的なフィルターセレクターは8つあります: コンテンツフィルタセレクターは4つあります: 表示フィルタセレクターには2種類あります: 属性セレクターは 8 つあります: サブ要素フィルタセレクタ(4種類) フォーム属性フィルターセレクター(4種類) フォームセレクター(11種類) 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); 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ファイルをアップロードするための HTML フォームの「参照」ボタンを変更する方法
>>: シンプルなCSSアニメーションのtransition属性の詳しい説明
方法1: グローバル general_log を 'OFF' に設定します。 テーブ...
この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...
シャドウスタイルにおけるフラッターとCSSの対応UIによって指定されたCSSスタイル 幅: 75px...
サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...
日常業務では、次のようなレイアウトに遭遇することがあります。親要素のフレーム (ブラウザのサイズに応...
パフォーマンスは本当に重要ですか?パフォーマンスは重要であり、誰もがそれを知っています。なぜ私たちは...
目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...
序文多くの場合、仮想マシンを使用します。たとえば、一部のテストは検出されません。何かを壊すことを心配...
この例の Web カラー ピッカー機能は、ページ効果を実現するために CSS3 を使用します。つまり...
基礎リレーショナル データベースでは、各データ テーブルはファイルに相当し、異なるストレージ エンジ...
CentOS 7.3のインストール手順を図解しました。具体的な内容は次のとおりです。この記事では、v...
1. Logrotateツールの紹介Logrotate はログファイル管理ツールです。Linux に...
MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...
この記事の例では、動的な時計を実装するためのJS + CSSの具体的なコードを参考までに共有していま...
チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...