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


Posted in jQuery onFebruary 27, 2020

如何用javascript获取input输入框中的值,js/jq通过name、id、class获取input输入框中的value

先准备一段 HTML

<input type="text" name"username" id="user" placeholder="用户名" class="uusr"><br>

一、jquery获取input文本框中的值

通过 name:

$('input[name="username"]').val()

通过 id:

$('#user').val()

通过 class:

$('.uusr').val()

二、javascript获取input输入框中的值

通过 name

document.getElementsByName("username")[0].value

通过 id

document.getElementById("user").value

通过 class

document.getElementsByClassName("uusr")[0].value

ps:下面看下jQuery获取各种input输入框的值

1.获取一组radio单选框的值(name属性为一组的radio的name属性)

$("input[name=element_name]:checked").val

2.获取select下拉框的值

$('#element').val()

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

内容扩展:

JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:

修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。

修改了 input:text 或者 textarea 元素的值,value 属性发生变化。

修改了 select 元素的选中项,selectedIndex 属性发生变化。

if(isIE) 
{ 
 document.getElementById("input").onpropertychange = keys(); 
} 
else //需要用addEventListener来注册事件 
{ 
 document.getElementById("input").addEventListener("input", keys, false);
}

以上就是js与jquery获取input输入框中的值实例讲解的详细内容,更多关于js与jquery获取input输入框中的值的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jquery实现直播视频弹幕效果
Feb 25 #jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
jquery向后台提交数组的代码分析
Feb 20 #jQuery
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
You might like
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
实用函数4
2007/11/08 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
详解PHP PDO简单教程
2019/05/28 PHP
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python的即时标记项目练习笔记
2014/09/18 Python
python生成密码字典的方法
2018/07/06 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
奖学金自我鉴定范文
2013/10/03 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
python flask框架快速入门
2021/05/14 Python
解析redis hash应用场景和常用命令
2021/08/04 Redis
Promise静态四兄弟实现示例详解
2022/07/07 Javascript