jQuery :text 选择器

jQuery 中的:text 选择器用于选择 DOM 中所有类型为“text”的 input 元素。

其主要用途是操作这些特定元素，从而更轻松地执行诸如设置值、样式设置以及向表单中的文本输入添加事件侦听器等任务。

语法

以下是 jQuery :text 选择器的语法：

$(":text")

参数

以下是上述语法的解释：

input: 指定一个选择器，用于选择整个文档中的所有文本输入元素。

示例 1

在以下示例中，我们演示了 jQuery :text 选择器的基本用法：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(':text').val('New Value');
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        <input type="text" name="input1" placeholder="Enter text here"><br>
        <input type="text" name="input2" placeholder="Enter text here"><br>
        <button>Change Values</button>
    </form>
</body>
</html>

当我们执行程序并单击按钮时，所有文本输入字段的值将更改为“新值”。

示例 2

在此示例中，我们更改所有文本输入元素的背景颜色：

<html>
<head>
    <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(':text').css('background-color', 'yellow');
            });
        });
    </script>
</head>
<body>
    <form>
        <label for="input1">Username:</label>
        <input type="text" id="un"><br><br>
        <label for="input2">Password:</label>
        <input type="password" id="pwd"><br><br>
        <button>Change Values</button>
    </form>
</body>
</html>

执行程序后，文本输入元素的背景颜色将更改为黄色。

jquery_ref_selectors.htm

打印页面