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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php实现文章评论系统
2019/02/18 PHP
jquery 选择器部分整理
2009/10/28 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
ORACLE十问
2015/04/20 面试题
会计专业自荐信
2013/12/02 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
家长评语大全
2014/01/22 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
升学宴学生答谢词
2015/01/05 职场文书
优化Mysql查询的示例
2022/04/26 MySQL