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实现定时刷新功能代码
May 09 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 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
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
数理公式,也可以这么唯美
2021/03/10 无线电
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
Python 文件处理注意事项总结
2017/04/10 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
详解python数据结构和算法
2019/04/18 Python
简单了解python数组的基本操作
2019/11/26 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
晚宴邀请函范文
2014/01/15 职场文书
大学学风建设方案
2014/05/04 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
外出培训学习心得体会
2016/01/18 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫