jQuery タグセレクターの適用例の詳細な説明

jQuery タグセレクターの適用例の詳細な説明

この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

1. divコンテンツを均一に設定する

タグセレクターを使用してすべての div 要素を選択できます。

<!DOCTYPE html>
<html>
<ヘッド>
   <タイトル></タイトル>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 <スクリプト>
  関数 setdiv()
  {
   $("div").html('コンテンツを均一に設定します。');
  }
 </スクリプト>
</head>
<本文>
   <h1></h1>
 <div id="div1" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <div id="div2" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <div id="div3" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <div id="div4" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <div id="div5" style="border:1px solid #0F0;width:150px;height:50px;"></div>
  <p></p>
 <button onclick="setdiv()">コンテンツの設定</button>
</本文>
</html> 

2. jQueryはフォームのすべてのデータを取得します

serialize() メソッド、
var data = $("form").serialize();

フォームの内容を文字列にシリアル化します。

<!DOCTYPE html>
<html>
<ヘッド>
   <title>フォーム</title>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 <スクリプト>
  関数 getform()
  {
   var data = $("form").serialize();
   alert('フォームデータ:' + データ);
  }
 </スクリプト>
</head>
<本文>
   <h1>登録フォーム</h1>
   <フォームアクション="" メソッド="get">
      <p>
         <label>ユーザー名:</label>
         <input type="text" name="ユーザー" />
      </p>
      <p>
         <label>パスワード:</label>
         <input type="password" name="パスワード" />
      </p>
      <p>
         <label>性別:</label>
         <input type="radio" name="gender" value="0" /> 男性<input type="radio" name="gender" value="1" /> 女性</p>
      <p>
         <label>大好き&nbsp;&nbsp;&nbsp;良い:</label>
         <input type="checkbox" name="like" value="0"> Pythonを学ぶ<input type="checkbox" name="like" value="1">
         <input type="checkbox" name="like" value="2"> 水泳</p>
      <p>
         <label>自己紹介:</label>
         <textarea name='紹介'></textarea>
      </p>
      <p>
         <label>原産地:</label>
         <名前を選択="サイト">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">河南省</option>
            <option value="3">河北省</option>
            <option value="4">山東省</option>
         </選択>
      </p>
      <p>
         <input type="submit" name="" value="送信1">
         <input type="reset" name="" value="リセット 1">
      </p>
   </フォーム>
 <button onclick="getform()">フォームを取得</button>
</本文>
</html> 

$("form") もタグセレクターです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQueryセレクタの使い方の紹介
  • JQueryセレクターの詳細な説明
  • jQueryは時間セレクタを実装する
  • jQueryセレクターの基本的な使用例
  • JQueryのよく使われるセレクター関数と使用例の分析
  • jQueryフォームセレクターの使用方法の詳細な説明
  • jQuery 属性セレクタの使用例の分析
  • jQueryセレクター属性フィルターセレクターの詳細な説明
  • jQueryセレクタフォーム要素セレクタの詳細な説明
  • JQueryセレクターの使用方法の詳細な説明

<<:  docker を使用して Windows 10 Home バージョンで Laravel 開発環境を構築する方法の詳細なチュートリアル

>>:  MySQLデータテーブルの基本操作:テーブル構造の操作、フィールド操作例の分析

推薦する

MySQLデータベースに他のIPアドレスからアクセスできない問題の解決策

序文先ほどのプロジェクトを参考にすると、環境は整いました。プロジェクトの準備と検証の段階で、問題が発...

HTML チュートリアル: よく使われる HTML タグのコレクション (4)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...

HTML は、Web ページの作成者が学習して習得しなければならないものです。

HTML を学ぶメリットは何ですか? 1: ウェブサイトやブログのウェブ構造を簡単に変更できます。...

HTML テーブルタグチュートリアル (13): 内部境界スタイル属性ルール

RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...

sql_mode を変更する際の MySQL エラーの解決方法

目次ERR 1067による殺人事件2番目の問題の原因はsql_modeです3. sql_modeを設...

JavaScript の基本: ループと配列

目次ループ - for forループの基本的な使い方ループを終了するネストされたループ配列配列とは何...

HTMLはマーキーを使用してテキストを左右にスクロールします

コードをコピーコードは次のとおりです。 <本文> //マーキーの助けを借りて<MA...

CSS を使用してマウスをホバーすることで他のタグのスタイルを変更するサンプルコード

序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...

Vueコンポーネント通信のさまざまな方法の詳細な説明

目次1. 父から息子へ2. 息子から父へ3. 親子関係のないコンポーネントの値の転送4. ヴュークス...

Linux に MySQL をインストールする方法 (yum とソース コードのコンパイル)

Linux に MySQL をインストールするには、yum インストールとソース コード コンパイ...

Vue.jsで実装されたカレンダープラグインの使い方を詳しく説明します

本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグインさて、もう無駄...

Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル

目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...

Vue データ内のプロパティをランダムに変更すると、ビューは更新されますか?

インタビュアー: Vue のソースコードを読んだことはありますか?応募者:あります。インタビュアー:...

Bootstrap5 ブレークポイントとコンテナの具体的な使用法

目次1. Bootstrap5 ブレークポイント1.1 モバイルファースト1.2 ブートストラップブ...

HTML テーブルの行間隔を変更する方法の例

HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...