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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
js和jquery中获取非行间样式
May 05 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
基于PyTorch中view的用法说明
2021/03/03 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
编程用JAVA解析XML的方式
2013/07/07 面试题
大学生演讲稿
2014/04/25 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
保送生自荐信
2015/03/06 职场文书
《刷子李》教学反思
2016/02/20 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP