js与jquery获取input输入框中的值实例讲解

 更新时间:2020年02月27日 15:01:30   作者:tomingto  
在本篇文章里小编给大家整理了关于js与jquery获取input输入框中的值实例讲解,需要的朋友们可以学习参考下。

如何用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中的 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输入框中的值的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript实现将网页加入收藏夹功能

    JavaScript实现将网页加入收藏夹功能

    浏览器出于安全和隐私的考虑,限制了用代码将网页加入浏览器的收藏夹,本文主要介绍了如何使用通过一些间接的方法实现这一功能,有需要的可以参考下
    2024-10-10
  • JavaScript实现视频转GIF的示例代码

    JavaScript实现视频转GIF的示例代码

    这篇文章主要介绍了JavaScript实现视频转GIF,本文一共会按照以下三步去实现一个视频转 GIF 功能,解封装视频,从视频文件中获取视频帧,解码视频帧,获取帧图像信息,拼装帧图像信息,生成 GIF,需要的朋友可以参考下
    2024-03-03
  • JavaScript实现div的鼠标拖拽效果

    JavaScript实现div的鼠标拖拽效果

    这篇文章主要为大家详细介绍了JavaScript实现div的鼠标拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • JavaScript实现简单音乐播放器

    JavaScript实现简单音乐播放器

    这篇文章主要为大家详细介绍了JavaScript实现简单音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • javascript 中按属性值查找数组中的对象多种方法

    javascript 中按属性值查找数组中的对象多种方法

    JavaScript 数组可以保存混合类型的不同值,例如字符串、空值或布尔值,并且不需要数组的大小来指定它在哪里自动增长和动态,这篇文章主要介绍了javascript 中按属性值查找数组中的对象多种方法,需要的朋友可以参考下
    2023-06-06
  • javascript 内存模型实例详解

    javascript 内存模型实例详解

    这篇文章主要介绍了javascript 内存模型,结合实例形式详细分析了javascript 内存模型相关概念、原理、操作技巧与注意事项,需要的朋友可以参考下
    2020-04-04
  • JS+Canvas绘制动态时钟效果

    JS+Canvas绘制动态时钟效果

    这篇文章主要为大家详细介绍了JS+Canvas绘制动态时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 微信小程序拖拽排序列表的示例代码

    微信小程序拖拽排序列表的示例代码

    这篇文章主要介绍了微信小程序拖拽排序列表的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • JS前向后瞻正则表达式定义与用法示例

    JS前向后瞻正则表达式定义与用法示例

    这篇文章主要介绍了JS前向后瞻正则表达式定义与用法,分析了前向后瞻正则表达式的具体定义、功能及具体使用技巧,需要的朋友可以参考下
    2016-12-12
  • js实现页面跳转的几种方法小结

    js实现页面跳转的几种方法小结

    下面小编就为大家带来一篇js实现页面跳转的几种方法小结。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05

最新评论