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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery操作css样式
May 15 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 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
77A一级收信机修理记
2021/03/02 无线电
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Vue header组件开发详解
2018/01/26 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
python动态进度条的实现代码
2019/07/03 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
Python3.9新特性详解
2020/10/10 Python
基层干部十八大感言
2014/01/19 职场文书
青年志愿者活动总结
2014/04/26 职场文书
党委班子剖析材料
2014/08/21 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
安全员岗位职责范本
2015/04/11 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技