js与jquery获取input输入框中的值实例讲解

如何用javascript获取input输入框中的值，js/jq通过name、id、class获取input输入框中的value 先准备一段 HTML &lt;input type="text" name"username" id="user" placeholder="用户名" class="uusr"&gt;<br> 一、jquery获取input文本框中的值 通过 name： $('input[name="username"]').val() 通过 id： $('#user').val() 通过 class： $('.uusr').val() 二、javascript获取input输入框中的 在网页开发中，JavaScript 和 jQuery 是两种常用的交互性技术，它们常常用于操作DOM元素，包括获取用户在input输入框中的输入值。本文将详细介绍如何使用这两种语言的不同方法来获取input输入框的值。 我们需要一个HTML的输入框元素作为示例： ```html <input type="text" name="username" id="user" placeholder="用户名" class="uusr"> ``` ### jQuery 获取input文本框中的值 jQuery 是一个轻量级的JavaScript库，它提供了一种更加简洁的方式来操作DOM。获取input输入框的值，jQuery提供了以下三种方式： 1. **通过name**： ```javascript $('input[name="username"]').val(); ``` 2. **通过id**： ```javascript $('#user').val(); ``` 3. **通过class**： ```javascript $('.uusr').val(); ``` 这些方法返回的是输入框的当前值，如果用户未输入任何内容，返回的就是空字符串。 ### JavaScript 获取input输入框中的值 原生JavaScript也有多种方法来获取input的值： 1. **通过name**： 需要注意的是，`getElementsByName`返回的是一个NodeList集合，因此我们需要指定索引来获取第一个元素的值。 ```javascript document.getElementsByName("username")[0].value; ``` 2. **通过id**： ```javascript document.getElementById("user").value; ``` 3. **通过class**： 类似于name，`getElementsByClassName`返回的是一个HTMLCollection，也需要指定索引。 ```javascript document.getElementsByClassName("uusr")[0].value; ``` ### jQuery 获取其他类型的input值 除了文本输入框，jQuery还可以方便地获取其他类型的input元素的值，例如： - **获取radio单选框的值**（假设所有radio的name属性相同）： ```javascript $("input[name=element_name]:checked").val(); ``` - **获取select下拉框的值**： ```javascript $('#element').val(); ``` ### 事件监听：`oninput` 与 `onpropertychange` 在JavaScript中，我们通常使用`oninput`事件来监听输入框内容的变化。然而，`oninput`事件在IE9及以下版本不被支持，需要使用IE特有的`onpropertychange`事件来替代。这两个事件会在用户输入或脚本更改内容时触发。例如： ```javascript if (isIE) { document.getElementById("input").onpropertychange = keys; } else { // 使用addEventListener注册事件 document.getElementById("input").addEventListener("input", keys, false); } ``` 这里`keys`是处理输入变化的函数。 总结来说，无论是JavaScript还是jQuery，都有多种方式来获取input输入框的值。选择哪种方法主要取决于项目的需求，例如，如果你的项目需要兼容旧版IE浏览器，那么使用原生JavaScript和`onpropertychange`事件可能更为合适；而如果追求简洁和跨浏览器兼容性，jQuery是一个很好的选择。在实际开发中，开发者可以根据项目的具体需求和性能考虑，灵活运用这些方法。