隐藏/出现+data自定义属性

最新推荐文章于 2021-07-02 09:21:42 发布

小陈子丶

最新推荐文章于 2021-07-02 09:21:42 发布

阅读量229

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44754886/article/details/115965101

版权

1、隐藏/出现

<style>
	div{
		width: 200px;
		height: 200px;			
	}
</style>

<div id="div1" style="background-color: red;"></div>
<div id="div2" style="background-color: chartreuse;"></div>
<input type="button" id="btn1" value="隐藏" />
<input type="button" id="btn2" value="出现" />

<script>
	$(document).ready(function(){
		$('#btn1').on('click',function(){
			// 隐藏
			//$('#div1').hide();
			$('#div1').fadeOut(2000);
		});
		$('#btn2').on('click',function(){
			//$('#div1').show();
			$('#div1').fadeTo(2000,1);
		});
	});
</script>

结果：

在这里插入图片描述

2、data自定义属性

<table>
	<tr id="tr1" data-id = "1" data-name="张三">
		<td>张三</td>
		<td>23岁</td>
		<td><a>删除</a></td>
	</tr>
</table>	

<script>
	$(document).ready(function(){
	var tr1 = $('#tr1');
	console.log(tr1);
	var id = tr1.data('id');
	console.log(id);
	var name = tr1.data('name');
	onsole.log(name);
</script>