JQuery onclick()事件

最新推荐文章于 2023-08-01 14:27:18 发布

LisenW

最新推荐文章于 2023-08-01 14:27:18 发布

阅读量3.3w

点赞数 2

分类专栏： JQuery JS 文章标签： HTML JQuery js

本文链接：https://blog.csdn.net/qq_35030003/article/details/82149303

版权

JQuery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
	function showName(obj){
		var thisObj = $(obj) //js对象转jquery对象
		var span = thisObj.parent().prev().prev().prev().children('span');
		span.toggle();
		var p = thisObj.parent().prev().prev().prev().children('p');
		p.toggle();
		// console.log(td);
	}
</script>
<body style="width:100% margin:0 auto">
	<table border="1" style="margin:0 auto">
		<tr>
			<th width="100">姓名</th>
			<th width="100">性别</th>
			<th width="100">年龄</th>
			<th width="150">操作</th>
		</tr>
		<tr>
			<td><span style="display:none">隐身</span><p>Lisen</p></td>
			<td>男</td>
			<td>18</td>
			<td><a href="javascript:;" onclick="showName(this)">隐藏/显示姓名</a></td>
		</tr>
		<tr>
			<td><span style="display:none">隐身</span><p>Joker</p></td>
			<td>男</td>
			<td>18</td>
			<td><a href="javascript:;" onclick="showName(this)">隐藏/显示姓名</a></td>
		</tr>
		<tr>
			<td><span style="display:none">隐身</span><p>Mike</p></td>
			<td>男</td>
			<td>18</td>
			<td><a href="javascript:;" onclick="showName(this)">隐藏/显示姓名</a></td>
		</tr>
	</table>
	
</body>
</html>

onclick(this)，传值this可以通过console.log()打印，可以看到打印的结果是a标签本身，可以得到a标签本身的属性，如果想通过this传值得到其他标签，则需要将js对象，转化为jquery对象

var thisObj = $(obj) //js对象转jquery对象，这句是必要的

否则不能得到父节点的相关内容，当然，如果只要得到当前标签的内容和属性，就不需要上面的代码

运行效果：