JQuery Input赋值

简介

在网页开发中，经常需要通过JavaScript来操作网页元素以实现各种功能。其中，通过JQuery来操作input输入框是一种常见的需求之一。本文将详解如何使用JQuery给input赋值，并提供一些实例代码和运行结果来帮助读者更好地理解。

JQuery选择器

在开始讨论如何给input赋值之前，先简要介绍一下JQuery选择器。JQuery选择器是一种通过使用CSS选择器语法来选取HTML元素的方法。可以通过元素的id、class、属性、类型等来选择元素。

常用的JQuery选择器如下：

$("#id")：通过元素的id选择元素。
$(".class")：通过元素的class选择元素。
$("element")：通过元素类型选择元素。
$("[attribute=value]")：通过元素的属性选择元素。

给input赋值

给input元素赋值，可以通过JQuery的val()方法实现。这个方法可以用来获取或者设置input、select以及textarea元素的值。

具体的用法如下：

// 获取input元素的值
var value =  $("input").val(); // 设置input元素的值$ ("input").val("new value");

上述代码中的$("input")表示选择页面中的所有input元素。如果需要选择特定的input元素，可以使用更具体的JQuery选择器来进行选择。

下面是一个简单示例，通过点击按钮给一个input元素赋值：

<!DOCTYPE html>
<html>
<head>
    <title>Input赋值示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
         $(document).ready(function(){ // 给input赋值$ ("#btnSetInputValue").click(function(){
                $("#myInput").val("Hello World!");
            });
        });
    </script>
</head>
<body>
    <input id="myInput" type="text">
    <button id="btnSetInputValue">点击赋值</button>
</body>
</html>

在上述示例中，当点击”点击赋值”按钮时，input元素的值会被设置为”Hello World!”。

可以根据实际需求修改上述代码中的input元素的id和按钮的id，以适应不同的情况。

复杂示例

下面是一个稍微复杂一些的示例，通过选择不同的选项给多个input元素赋不同的值。

<!DOCTYPE html>
<html>
<head>
    <title>Input赋值示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
         $(document).ready(function(){ // 给input赋值$ ("#mySelect").change(function(){
                var selectedValue =  $(this).val(); if(selectedValue === "option1"){$ ("#input1").val("选项1被选中");
                     $("#input2").val("");$ ("#input3").val("");
                }
                else if(selectedValue === "option2"){
                     $("#input1").val("");$ ("#input2").val("选项2被选中");
                     $("#input3").val(""); } else if(selectedValue === "option3"){$ ("#input1").val("");
                     $("#input2").val("");$ ("#input3").val("选项3被选中");
                }
                else{
                     $("#input1").val("");$ ("#input2").val("");
                    $("#input3").val("");
                }
            });
        });
    </script>
</head>
<body>
    <select id="mySelect">
        <option value="default">请选择选项</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
    </select>
    <br>
    <input id="input1" type="text" readonly>
    <input id="input2" type="text" readonly>
    <input id="input3" type="text" readonly>
</body>
</html>

在上述示例中，通过选择下拉框中的不同选项，会分别给三个input元素(#input1、#input2、#input3)赋不同的值。

可以根据实际需求修改上述代码中的选项和input元素，以适应不同的情况。