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>