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と外部リンクの基本的な応用方法

目次埋め込みJavaScriptと外部リンクの基本的な応用JavaScript の記述方法には、イン...

MySQL インデックスの原理と最適化の詳細な説明

序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...

jQueryは居住地を選択するためのドロップダウンボックスを実装します

居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...

VueとFlask間の通信の実装

axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...

フロントエンド プロジェクトのデフォルトのスクロール バー スタイルを変更する (概要)

スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを...

Windows で IP アドレスを指定してサーバーへのリモート アクセスを設定する方法

当社には、外部ネットワークからの干渉を受けることが多いサーバーが多数あります。侵入者はポート 338...

...

モバイルインターネット時代: レスポンシブウェブデザインが一般的なトレンドに

今はモバイルインターネットが急速に発展している時代です。スマートフォンやタブレットはますます普及し、...

CentOS に MySQL をインストールしてリモート アクセスを設定する方法

1. MySQLリポジトリソースをダウンロードする$ wget http://repo.mysql....

HTMLを使用して、IPを制限する投票ウェブサイトの不正行為スキームを実装する

これは、IP アドレスが制限されている投票 Web サイトの不正行為の手口です。この方法は、投票 W...

MySQLテーブルを削除する方法

MySQL でテーブルを削除するのは非常に簡単ですが、削除コマンドを実行するとすべてのデータが消えて...

HTML の表の行と列を結合する問題の解決策の詳細な説明

私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...

Kubernetes コントローラーとラベルの簡単な分析

目次01 k8sの一般的なコントローラーRCコントローラーデプロイメント コントローラーステートフル...

HTMLノードの追加と削除の簡単な例

<br />HTMLノードの追加と削除の簡単な例<input type="...

docker公式mysqlイメージのカスタム構成の詳細な説明

インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...