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编写textarea输入字数限制代码
Mar 23 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
php文件包含的几种方式总结
2019/09/19 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
js有序数组的连接问题
2013/10/01 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vuejs简单验证码功能完整示例
2019/01/08 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
详解Python中的各种函数的使用
2015/05/24 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
在python shell中运行python文件的实现
2019/12/21 Python
python数据预处理方式 :数据降维
2020/02/24 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
防汛工作情况汇报
2014/10/28 职场文书
2015新学期家长寄语
2015/02/26 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
php双向队列实例讲解
2021/11/17 PHP