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简介_动力节点Java学院整理
Jul 04 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery实现简单评论功能
Aug 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP重载基础知识回顾
2020/09/10 PHP
二级域名转向类
2006/11/09 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
JavaScript字符串对象
2017/01/14 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
详解python的数字类型变量与其方法
2016/11/20 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python中数据库like模糊查询方式
2020/03/02 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
为什么说python适合写爬虫
2020/06/11 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
食堂员工工作职责
2013/12/18 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
体操比赛口号
2014/06/10 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python