jqueryは従属コントロールを追加します

フロントエンド開発では、多くの場合、さまざまなコントロールをページに追加する必要があります。フロントエンド開発テクノロジにおいて、jQuery は最も広く使用されている js ライブラリの 1 つであり、使いやすさ、柔軟性、スケーラビリティなどの多くの利点があります。この記事では主にjQueryを使って配下コントロールを追加する方法を紹介します。

1. ドロップダウン ボックスを追加する

jQuery では、select タグを使用してドロップダウン リスト ボックスを簡単に作成できます。 jQuery の append メソッドを使用して、選択にオプションを追加できます。

たとえば、次のコードは、ループを通じて select という ID を持つオプション要素をドロップダウン リスト ボックスに追加します。

<select id="select">
</select>

<script>
  for (var i = 1; i <= 10; i++) {
    $('#select').append('<option value="' + i + '">选项 ' + i + '</option>');
  }
</script>

上記のコードは、選択するオプションを 10 個追加します。各オプションの値と表示内容はそれぞれ 1 ～ 10 の範囲になります。

2. チェックボックスを追加する

チェックボックス タグを使用すると、jQuery でチェックボックスを簡単に作成できます。 jQuery の append メソッドを使用して、input[type=checkbox] 要素をチェックボックス コンテナに追加できます。

たとえば、次のコードは、ループを通じて checkbox-container という ID を持つコンテナにチェックボックス要素を追加します。

<div id="checkbox-container">
</div>

<script>
  for (var i = 1; i <= 5; i++) {
    $('#checkbox-container').append('<input type="checkbox" id="checkbox' + i + '">');
    $('#checkbox-container').append('<label for="checkbox' + i + '">选项' + i + '</label>');
    $('#checkbox-container').append('<br>');
  }
</script>

上記のコードはコンテナに 5 つのチェックボックスを追加します。各チェックボックスには対応するラベルと改行文字があります。

3. ラジオ ボタンを追加する

radio タグを使用すると、jQuery でラジオ ボタンを簡単に作成できます。 jQuery の append メソッドを使用して、input[type=radio] 要素をラジオ ボタン コンテナに追加できます。

たとえば、次のコードは、ループを通じて radio-container の ID を持つコンテナに radio 要素を追加します。

<div id="radio-container">
</div>

<script>
  for (var i = 1; i <= 5; i++) {
    $('#radio-container').append('<input type="radio" name="radio" id="radio' + i + '">');
    $('#radio-container').append('<label for="radio' + i + '">选项' + i + '</label>');
    $('#radio-container').append('<br>');
  }
</script>

上記のコードは、コンテナに 5 つのラジオ ボタン ボックスを追加します。各ラジオ ボタン ボックスには、対応するラベルと改行があります。ラジオボタンボックスの場合、それらが同じグループに属しているかどうかをシステムが判断できるように、名前属性を同じ値に設定する必要があることに注意してください。

4. 入力ボックスを追加する

input タグを使用すると、jQuery でさまざまな入力ボックスを簡単に作成できます。 jQuery の append メソッドを使用して、入力要素を入力ボックス コンテナーに追加できます。

たとえば、次のコードは、ループを通じて input-container という ID を持つコンテナに input[type=text] 要素と textarea 要素を追加します。

<div id="input-container">
</div>

<script>
  $('#input-container').append('<input type="text" id="input1">');
  $('#input-container').append('<br>');
  $('#input-container').append('<textarea id="input2"></textarea>');
  $('#input-container').append('<br>');
</script>

上記のコードは、テキスト入力ボックスとテキスト フィールド入力ボックスをコンテナに追加します。

概要

上記は、jQuery を使用して下位コントロールを追加する方法の簡単な紹介です。この記事の内容を学ぶことで、jQuery を使用してページの機能を拡張する方法を簡単にマスターできます。ただし、これは jQuery アプリケーションの氷山の一角にすぎず、探索して使用できる豊富なコンテンツがまだたくさんあります。

以上がjqueryは従属コントロールを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。