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 06 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery-App输入框实现实时搜索
Nov 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视频拍照上传头像功能实现代码分享
2015/10/08 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
详解Python import方法引入模块的实例
2017/08/02 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
学校感恩教育活动总结
2014/07/07 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
违纪检讨书范文
2015/01/27 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
zabbix配置nginx监控的实现
2022/05/25 Servers