首页在jQuery中页面添加一个ID属性为testlput的文本输入框和一个按钮，实现单机按钮获取在文本输入框中输入的值

在jQuery中页面添加一个ID属性为testlput的文本输入框和一个按钮，实现单机按钮获取在文本输入框中输入的值

时间: 2024-09-10 19:02:53 浏览: 54

在jQuery中，你可以通过HTML创建一个ID为"testInput"的文本输入框和一个ID为"submitBtn"的按钮，然后编写JavaScript/jQuery代码来实现单击按钮获取输入框的值。以下是简单的步骤：首先，在HTML中添加元素： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input type="text" id="testInput" placeholder="请输入内容"> <button id="submitBtn">获取输入</button> <script src="your-jquery-script.js"></script> </body> </html> ``` 然后，在`your-jquery-script.js`文件中，编写点击事件处理程序： ```javascript $(document).ready(function() { // 获取id为submitBtn的按钮 $('#submitBtn').click(function() { // 获取id为testInput的文本框的值 var inputVal = $('#testInput').val(); // 打印或做其他操作，如显示在DOM中或其他API请求 console.log("输入的值是: " + inputVal); }); }); ``` 在这个例子中，当用户点击"获取输入"按钮时，会触发`click`事件，该事件中的函数会读取文本框的当前值，并将其打印到控制台。

阅读全文