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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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
用户的详细注册和判断
2006/10/09 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Python的动态重新封装的教程
2015/04/11 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
安全生产责任书
2014/03/12 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
安全标语口号
2014/06/09 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
公司奖励通知
2015/04/21 职场文书
创业计划书之熟食店
2019/10/16 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript