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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery实现可以计算进制转换的计算器
Oct 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脚本的10个技巧(7)
2006/10/09 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
理解JavaScript中的事件
2006/09/23 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
详解Python字典小结
2018/10/20 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python sort、sort_index方法代码实例
2019/03/28 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
python访问hdfs的操作
2020/06/06 Python
python如何删除列为空的行
2020/07/17 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
期末自我鉴定
2014/02/02 职场文书
企业出纳岗位职责
2014/03/12 职场文书
找规律教学反思
2016/02/23 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android