この記事では、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() メソッド、 フォームの内容を文字列にシリアル化します。 <!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>大好き 良い:</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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: docker を使用して Windows 10 Home バージョンで Laravel 開発環境を構築する方法の詳細なチュートリアル
>>: MySQLデータテーブルの基本操作:テーブル構造の操作、フィールド操作例の分析
序文先ほどのプロジェクトを参考にすると、環境は整いました。プロジェクトの準備と検証の段階で、問題が発...
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
HTML を学ぶメリットは何ですか? 1: ウェブサイトやブログのウェブ構造を簡単に変更できます。...
RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...
目次ERR 1067による殺人事件2番目の問題の原因はsql_modeです3. sql_modeを設...
目次ループ - for forループの基本的な使い方ループを終了するネストされたループ配列配列とは何...
コードをコピーコードは次のとおりです。 <本文> //マーキーの助けを借りて<MA...
序文:私の知る限り、現在 CSS で制御できるのは、タグをホバーしたときにそのタグの下の兄弟タグとサ...
目次1. 父から息子へ2. 息子から父へ3. 親子関係のないコンポーネントの値の転送4. ヴュークス...
Linux に MySQL をインストールするには、yum インストールとソース コード コンパイ...
本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグインさて、もう無駄...
目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...
インタビュアー: Vue のソースコードを読んだことはありますか?応募者:あります。インタビュアー:...
目次1. Bootstrap5 ブレークポイント1.1 モバイルファースト1.2 ブートストラップブ...
HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...