JS得到div ,button标签内的value值

最新推荐文章于 2019-09-26 10:23:43 发布
最新推荐文章于 2019-09-26 10:23:43 发布
阅读量1w 收藏 7
点赞数 1
分类专栏： 前端 jQuery 原创
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43210530/article/details/89230894
版权
原创 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
前端
3 篇文章 0 订阅
订阅专栏
jQuery
2 篇文章 0 订阅
订阅专栏

JS得到div ,button标签内的value值

一：静态div

第一种：单独div

<div id="test" value="yes" > </div>

通过JS直接得到div的value属性是得不到的,输出为undefined 这是因为div没有value属性 所以这样是得不到的

要用t1.getAttribute("value");

第二种：多个div

举例：这里用button举例。区别在于$("button")是获取到button标签。

$("div")或者设置div标签的唯一id即可获取div

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!--循环输出了许多p，点那个获取到点击的那个的value 然后ajax发送出去这个value ？？怎么弄 -->
	<div id="1">
		<button value="20">点我获取Value</button>
		<button value="21">点我获取Value</button>
		<button value="22">点我获取Value</button>
		<button value="23">点我获取Value</button>
	</div>

</body>
<script
	src="${pageContext.request.contextPath}/lib/jquery/jquery-1.11.1.js"
	type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function() {
			var bId = this.value;
			console.log(bId);
			$.ajax({
				
			});
		})
		
	})
	/*ajax请求，显得到当前点击的button的id和value（课程ID）  */
</script>
</html>

二：js遍历的button

无需关注ajax，这里的思路是将要获取的的标签添加onclick（）事件，并将value传入。通过点击事件获取到当前循环遍历出的标签内的值。

<button id="replybtns" onclick="replyUser('+resp[i].fromUserId+')"  type="button" class="btn btn-default right" value="'+resp[i].fromUserId+'">回复</button>'
$(function() {
				var courseId = "${courseId}";
				console.log(courseId);
				$.ajax({
					url:"${pageContext.request.contextPath}/discuss/getFrontReplyDiscuss.action",
					data:{"courseId" : courseId},
					dataTyoe:"json",
					success:function(resp){
						console.log(resp);
						var str = '';
						for(var i=0;i<resp.length;i++){
						    str +=
						    '<div class="dis-content"> '+
						    	'<span class="name-desp" id="userName">'+resp[i].fromUser+'</span>'+
						    	'<span class="label label-default">回复</span>'+
						    	'<span class="name-desp" id="userName">'+resp[i].byReplyUser+'</span>'+
						    	'<span class="tie-time" id="pubTime">'+resp[i].publishTime+'</span>'+
						    	'<div>'+
						    		'<div class="panel panel-default">'+
						    			'<div class="panel-body" id="outline" value="'+resp[i].fromUserId+'"  >'+
						    				resp[i].content
						    			+'</div>'+
						    		'</div>'+
						    		' <button id="replybtns" onclick="replyUser('+resp[i].fromUserId+')"  type="button" class="btn btn-default right" value="'+resp[i].fromUserId+'">回复</button>'+
						    	'</div>'+
						    '</div>'+
						    '<span class="blank20"></span>'				
						}
						$("#rdiscuss").html(str);
					}
				}); 
			});

获取方法：

                function replyUser(id){
				    var bId1 = id;
				    console.log(bId1+"我爱你");
				    $.ajax({
					    //发送请求
				    });
                }

 

weixin_43210530
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WIN10远程控制（局域网+外网）
大白天遇见女鬼
06-19 3万+
1.保证已经打开被连接电脑---远程访问---权限。 我的电脑--右键--属性--远程设置 2.选择允许连接（选择用户和高级没有特殊设置可以不动，被连接电脑当前登陆的账号就可以满足权限） 3.打开--控制面板 4.依次选择至当前位置，打开允许应用或功能通过防火墙 5.勾选远程桌面专用网络，公共网络允许连接，保存设置 6.win+R 输入 cmd 接着...
js获取单选按钮的值
woaipaiqiu的专栏
06-02 4610
用javascript获取单选按钮的值得几种方法
js(javascript)获取网页源码
05-22
远程网页源代码读取 /* 页面字体样式 */ body, td, input, textarea { font-family:Arial; font-size:12px; } //用于创建XMLHttpRequest对象 function createXmlHttp() { //根据window.XMLHttpRequest对象是否存在使用不同的创建方式 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式 } } //直接通过XMLHttpRequest对象获取远程网页源代码 function getSource() { var url = document.getElementById("url").value; //获取目标地址信息 //地址为空时提示用户输入 if (url == "") { alert("请输入网页地址。"); return; } document.getElementById("source").value = "正在加载……"; //提示正在加载 createXmlHttp(); //创建XMLHttpRequest对象 xmlHttp.onreadystatechange = writeSource; //设置回调函数 xmlHttp.open("GET", url, true); xmlHttp.send(null); } //www.mp4ku.com将远程网页源代码写入页面文字区域 function writeSource() { if (xmlHttp.readyState == 4) { document.getElementById("source").value = xmlHttp.responseText; } } 远程网页源代码读取 地址：
JS实现推箱子小游戏——源码
07-10
JS实现推箱子小游戏——源码 第一步布局 1.设置盒子元素 <body> <!-- 功能键 --> <div id="btn"> <input type="button" id="auto" value="自动行走"> <input type="button" id="prev" value="上一步"> <input type="button" id="nextLever" value="下一关"> <input type="button" id="lastLever" value="上一关"> </div> <!-- 游戏区域 --> <div id="warp"></div> </body> 2.给盒子设置相关的样式 <style> * { margin: 0; padding: 0; } ​ #warp { margin: 0px auto; background: url(img/block.jpg); position: relativ
纯js实现的积木(div层)拖动功能示例
12-07
本文实例讲述了纯js实现的积木(div层)拖动功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖动</title> <style type="text/css"> </style> </head> <body id="content"> <input type="button" value="获取积木" id="div3"/> </body> [removed] //生成积木 document.getElementById("div3").
js动态添加的DIV中的onclick事件简单实例
01-19
最简单的是这样： <input type=button onclick=alert(this.value) value=我是 button /> 动态添加onclick事件： <input type=button value=我是 button id=bu> [removed] var bObj=document.getElementById(bu); bObj.onclick= objclick; function objclick(){alert(this.value)}; [removed] 如果使用匿名
Vue传值--三种常用传值
weixin_33923148的博客
07-23 467
总结 先写个总结，方便自己复习。嘿嘿。 父组件传值给子组件，首先父组件发送的形式是用bind(用缩写:)绑定值到子组件身上。然后子组件用属性props接收。 子组件传值父组件，首先是子组件发送的形式是this.$emit(事件名,需要发送的值)，事件名：父组件on监听的方法，父组件第一件事就是监听子组件发送过来的事件名，@事件名=获取值...
告诉你JS中的div到底有没有value属性！
你若是天才，我便做疯子
12-11 759
function getDivValue(){ var t1=document.getElementById("test"); alert(t1.value); } &lt;div id="test" value="yes" &gt; &lt;/div&gt; &lt;!--对于以上的HTML代码 我们通过JS直接得到div的value属...
给div加value后如何获取
AKIRAZXX的博客
09-26 1134
1、div没有value值，但是在js内我们可以给他添加 方法一：可通过 var val = document.getElementById('id名').getAttribute('value')获取 方法二：点击事件可通过var val = $(this).attr("value"); 获取 ...
js 在多个按钮中获取点击按钮的id值
PerfectUrl的博客
05-10 4932
window.onload = function(){ var arr = document.getElementsByTagName('button'); for(var i = 0;i<arr.length;i++){ arr[i].onclick = function(){ alert(this.id);//this是关键点 } }
多个button中获取所点击button的值
热门推荐
malz_zh的博客
10-23 1万+
本人是在java中拼接的table表格，有多个点击按钮，需要获取每个点击按钮传递当前的ID，最初的程序如下： java代码： show_detail.append("&lt;tr&gt;"); show_detail.append("&lt;td style='white-space:nowrap;width:10%;text-align:center'&gt;"+tvordersbean.g...
原生JS简单实现ajax的方法示例
12-29
本文实例讲述了原生JS简单实现ajax的方法。分享给大家供大家参考，具体如下： HTML部分： <body> <input type=button value=Ajax提交 onclick=Ajax(); /> <div id=resText></div> </body> 这里有个input按钮，点击会触发click事件，click事件调用Ajax()方法。 JS部分： [removed] //通过这个函数来异步获取信息 function Ajax(){ var xmlHttpR
JS实现可针对算术表达式求值的计算器功能示例
12-29
本文实例讲述了JS实现可针对算术表达式求值的计算器功能。分享给大家供大家参考，具体如下： HTML部分： <div> <div id=in> <input name=in type=text class=clsin id=input value= readonly=readonly /> <input type=button name== value== onClick=exp_result()/> </div> <div id=num> <input type=button name=seven value=7
点击button获取text内容并改变样式的js实现
12-29
需求：点击button获得input框中选中的内容，让选中的内容变红， 实现：代码如下 <!DOCTYPE HTML> <html> <head>...div{ ...input type=text id=txt value= />...input type=button value=
无法在本地主机上发布Tomcat v8.0服务器的服务器配置。 多个上下文的路径为“/Java1812SpringMVC”。
大白天遇见女鬼
04-03 9073
无法在本地主机上发布Tomcat v8.0服务器的服务器配置。 多个上下文的路径为“/Java1812SpringMVC”。 报错原文： Could not publish server configuration for Tomcat v8.0 Server at localhost.Multiple Contexts have a path of "/Java1812SpringMVC". 遇...
### Cause: org.apache.ibatis.reflection.ReflectionException: There is no getter for property named '
大白天遇见女鬼
04-14 2714
### Cause: org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'list' in 'class com.situ.mybatis.entity.Department' 导致原因： 此类问题从根本上来说就是在xml映射文件中，实体类属性的名字与映射文件中p...
元素类型为 "association" 的内容必须匹配 "(constructor?,id*,result*,association*,collection*,discriminator?)"
大白天遇见女鬼
04-14 1838
一：元素类型为 "association" 的内容必须匹配 "(constructor?,id*,result*,association*,collection*,discriminator?)" 二：元素类型 "mapper" 必须由匹配的结束标记 "</mapper>" 终止。 初接触SSM的伙伴很有可能遇到这个问题。结合我的经验和百度。再整理整合一个解决这类的问题...
mybatis无法获取timestrap的时间，显示为null
大白天遇见女鬼
04-06 758
使用MyBatis框架，读取MySQL数据库，timestrap类型的字段值时，无法读出，打印实体类，会显示这个值为null。 解决这个问题是读了一位博主的文章，这里就阐述过程。直接上解决干货。 解决方法： 将数据库timestrap类型的字段名称中的“_”英文下划线去掉。完美解决 详细解释地址：https://blog.csdn.net/puhaiyang/article/details...
uniapp获取input的value值
最新发布
06-28
### 回答1： 您好！如果您想要获取 uni-app 中一个输入框（input）的 value 值，可以通过以下方式： 1. 在该输入框的标签中添加 v-model 属性，例如： ``` <template> <div> <input v-model="inputValue" /> </div> </template> <script> export default { data() { return { inputValue: '' } } } </script> ``` 在上面的代码中，我们在 input 标签上添加了 v-model="inputValue"，这表示我们绑定了一个名为 inputValue 的数据变量与这个输入框关联。当用户在输入框中输入文字时，这个数据变量会自动更新。 因此，要获取这个输入框的 value 值，只需访问这个数据变量的值，即 this.inputValue。 2. 如果您没有使用 v-model 属性，可以通过 ref 引用来获取输入框的值，例如： ``` <template> <div> <input ref="myInput" /> <button @click="getValue">获取值</button> </div> </template> <script> export default { methods: { getValue() { const value = this.$refs.myInput.value console.log(value) } } } </script> ``` 在上面的代码中，我们给这个输入框添加了一个 ref="myInput" 属性，这样我们就可以在 JavaScript 中通过 this.$refs.myInput 来引用这个输入框。然后，我们在一个按钮的点击事件中调用 getValue 方法来获取这个输入框的值。在 getValue 方法中，我们通过 this.$refs.myInput.value 来获取输入框的 value 值。 ### 回答2： uniapp是一个跨平台的框架，可以用来开发多种不同平台的应用程序。在uniapp中获取input的value值可以通过以下几种方式实现。 1.通过双向绑定获取value值 在vue中有一个双向绑定的概念，可以将data属性绑定到表单元素的value属性上，这样当表单元素的value发生改变时，data属性也会随之改变。在uniapp中也可以使用双向绑定来获取input的value值。例如，我们可以将data的属性绑定到input元素的value属性上，代码如下： ```html <template> <div> <input type="text" v-model="inputValue" /> <p>{{ inputValue }}</p> </div> </template> <script> export default { data() { return { inputValue: '', }; }, }; </script> ``` 在上面的代码中，我们通过v-model指令将inputValue属性绑定到input元素的value属性上，我们可以在template中通过插值形式或者其他方式来获取inputValue的值。 2.通过事件获取value值 通过事件监听input元素的value改变也可以实现获取input的value值。我们可以监听input元素的input事件或者change事件，在事件回调函数中获取input元素的value值。例如： ```html <template> <div> <input type="text" ref="inputElement" @input="handleInput" /> <p>{{ inputValue }}</p> </div> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { handleInput() { this.inputValue = this.$refs.inputElement.value; }, }, }; </script> ``` 在上面的代码中，我们监听了input元素的input事件，并在handleInput方法中将input元素的value值赋值给了inputValue属性。 3.通过refs获取value值 在uniapp中，我们可以通过refs获取到指定的元素实例，然后使用element.value来获取元素的value值。例如： ```html <template> <div> <input type="text" ref="inputElement" @input="handleInput" /> <p>{{ inputValue }}</p> </div> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { handleInput() { this.inputValue = this.$refs.inputElement.value; }, }, }; </script> ``` 在上面的代码中，我们在input元素上设置了ref属性为'inputElement'，然后在handleInput方法中使用this.$refs.inputElement获取到input元素的实例，最后使用element.value来获取元素的值。 ### 回答3： uniapp 是一款适用于多个平台的全端开发框架。当我们在使用uniapp开发时，经常需要获取input输入框中的value值。下面就来介绍一下uniapp获取input的value值的方法。 首先，在HTML中定义input输入框时可以通过v-model指令进行双向数据绑定。例如： ``` <input v-model="keyword" /> ``` 这样就可以将输入框中的值与Vue实例中的 keyword 数据进行绑定。当用户在输入框中输入内容时，keyword 的值也会相应地变化。 如果要获取输入框中的值，我们可以在方法中使用 this.keyword 来访问 keyword 数据，即为input输入框中的value值。 除了使用 v-model 以外，我们还可以通过 ref 属性来获取输入框的值。例如： ``` <input ref="input" /> ``` 我们可以在方法中使用 this.$refs.input.value 来获取输入框中的值。需要注意的是，使用 ref 属性获取元素的值需要在 mounted 钩子函数中才能获取到。 总之，不管是使用 v-model 还是 ref 属性，都可以轻松获取到 input 输入框中的值。在开发中，我们可以根据实际需要选择合适的方法进行获取。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值