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データテーブルの基本操作:テーブル構造の操作、フィールド操作例の分析

推薦する

JavaScriptのイベントループの仕組みの分析

目次序文: 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...

js でオブジェクトとオブジェクト メソッドを作成するいくつかの方法の詳細な説明

この記事は、JS レッドブックの第 8 章に記載されているオブジェクトに関する 2 番目の記事です。...

SQL の左結合と右結合の原理と例の分析

テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...

JSはGMTとUTCのタイムゾーンを完全に理解しています

目次序文1. GMT GMTとはGMTの歴史2. UTC UTCとはUTC は次の 2 つの部分で構...

フォームから Vue ElementUI を使用してログイン効果を実装する例

目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...

Linux コマンド クエリ アプレットでの WePY クラウド開発の実践

みなさんこんにちは。今日は Linux コマンド クエリ アプレットでの WePY クラウド開発の実...

CSS3 で z-index が効かない問題の解決方法

最近、CSS3 と js の組み合わせを作成したのですが、z-index が有効にならないケースが多...

mysql5.7.20 のインストールと設定方法のグラフィック チュートリアル (mac)

MySQL 5.7.20のインストールと設定方法のグラフィックチュートリアルをあなたと共有します1...

MySQL 5.7 のインストールと設定の詳細な手順

1. MySQLをダウンロードする1. MySQLの公式ウェブサイトにログインし、64ビットシステム...

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...

vue.config.js からプロジェクト最適化までの vue2.x 構成

目次序文vue.config.js 構成オプションパッケージサイズを縮小するためのパッケージの最適化...

2018 年にリリースされる Apache Spark 2.4 の新機能は何ですか?

この記事は、2018 年 9 月 19 日に Adob​​e Systems Inc で開催された ...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

Nginx 構成 80 ポート アクセス 8080 とプロジェクト名アドレス メソッド分析

Tomcatはプロジェクトにアクセスします。通常はIP + ポート + プロジェクト名です。 Ngi...

CentOS 7 はネットワークカードを変更した後、インターネットにアクセスできません

不明なドメイン名 www.baidu.com を Ping するホストのIPアドレスを変更する右クリ...