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解析获取JSON数据
Apr 08 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery 动画与停止动画效果实例详解
May 19 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中替换换行符的几种方法小结
2012/10/15 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
jQuery读取XML文件的方法示例
2017/02/03 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
python九九乘法表的实例
2017/09/26 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
django项目搭建与Session使用详解
2018/10/10 Python
深入浅析Python中的迭代器
2019/06/04 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
采购员岗位职责
2015/02/03 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
Nginx内网单机反向代理的实现
2021/11/07 Servers