jQuery の属性とスタイル (3)

jQueryには.val()メソッドがあり、主にinput、select、textareaなどのフォーム要素の値を処理するために使用されます。

val()メソッド

val()にはパラメータがありません、一致した要素セットの最初の要素の現在値を取得します

val(value)、一致した要素セットの各要素の値を設定します

val (関数)、設定値を返すために使用される関数

注:

選択要素が .val() によって処理され、選択されていない場合は null が返されます

val() メソッドは主に設定に使用されます。 Value フォームのフィールド

val メソッドの使用方法の具体的な例を見てみましょう

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <select id="see">
        <option>php 中文网</option>
        <option>php.cn</option>
        <option>小猪 CMS</option>
    </select>

    <p></p>
    
    <script type="text/javascript">
         $("p").text($('#see').val());
    </script>
</body>
</html>

input の値を変更する方法を見てみましょう

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <input type="text" value="php 中文网" id="ipt">
    
    <script type="text/javascript">
        $("#ipt").val("php.cn");
    </script>
</body>
</html>

html ()、text()、および val() 違いの概要:

.html()、.text()、および .val() はすべて、選択された要素のコンテンツを読み取るために使用されます。 .html() のみが使用されます。要素の HTML コンテンツ (HTML タグを含む) を読み取るには、text() を使用して、子孫要素を含む要素のプレーンテキストコンテンツを読み取ります。また、val() は、フォームの「値」値を読み取るために使用します。要素。 html() メソッドと text() メソッドは form 要素では使用できません。また、val() は form 要素でのみ使用できます。また、html() メソッドが複数の要素で使用される場合は、最初の要素のみが読み取られます。 val() メソッドは .html() と同じです。複数の要素に適用された場合、最初のフォーム要素の "value" 値のみを読み取ることができますが、.text() はそれらとは異なります。 ) 複数の要素に適用すると、選択したすべての要素のテキストコンテンツが読み取られます。

html(htmlString)、text(textString)、および val(value) はすべて、選択された要素のコンテンツを置換するために使用されます。これら 3 つのメソッドが複数の要素で同時に使用される場合、選択されたすべての要素のコンテンツが置換されます。要素。

html()、text()、および val() はすべて、コールバック関数の戻り値を使用して、複数の要素のコンテンツを動的に変更できます。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <select id="see"> <option>php 中文网</option> <option>php.cn</option> <option>小猪 CMS</option> </select> <p></p> <script type="text/javascript"> $("p").text($('#see').val()); </script> </body> </html>

提出するリセットコード

自動運転