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 相关文章推荐
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery常用选择器详解
Jul 17 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery实现雪花飘落效果
Aug 02 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
php中如何执行linux命令详解
2018/11/06 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
python绘制漏斗图步骤详解
2019/03/04 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
remote接口和home接口主要作用
2013/05/15 面试题
管理学院毕业生自荐信范文
2014/03/10 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
2015年学校德育工作总结
2015/04/22 职场文书