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+Ajax实现用户名重名实时检测
Jun 01 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jquery实现上传图片功能
Jun 29 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报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
完善的jquery处理机制
2016/02/21 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python爬取音频下载的示例代码
2020/10/19 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
几个Shell Script面试题
2012/08/31 面试题
生日宴会主持词
2014/03/20 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server