html-技术测试：jQuery 添加class的值

2022-06-13 07:31:07 阅读：197 来源： 互联网

标签：jQuery function runoob click html ready td 添加 class

html：jQuery 添加class的值

一、测试环境

　　菜鸟教程（https://www.runoob.com）：https://www.runoob.com/try/try.php?filename=tryjquery_hide_p

二、测试内容：将下面代码，复制到测试环境的左侧的源码框，点击“点击运行”；然后在用鼠标左键“点击”表格，可以查看效果。

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
	th,td
	{
		background 
		height:40px;
		width: 40px;
		font-size: 2rem;
		text-align:center;
	}

	.blue
	{
		background-color:blue;
	}
</style>
</head>
<body>

<h1 onclick="this.innerHTML='---文字被隐藏---'">需要被隐藏的文字!</h1>
	

<!-- 测试时，使用的表格-->
<table border="1" cellspacing="0">
	<tr>
		<th colspan="6">表格部分</th>
	</tr>
	<tr>
		<th>Date11111111</th>
		<th>1</th>
		<th>2</th>
		<th>3</th>
		<th>4</th>
		<th>5</th>
	</tr>
	<tr>
		<td class="dc">2022-06-13</td>
		<td onclick="this.innerHTML='1'">1</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
		<tr>
		<td class="dc">2022-06-13</td>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
	
</table>
	
<!-- 技术测试：jQuery 操作Html元素-->
<div>
	<button>按钮</button>
	<p id="bk">点击按钮，隐藏的文本</p>
</div>
	
	

<script>
	// 隐藏<p id="bk"></p>的文本
$(document).ready(function(){
  $("button").click(function(){
	$("#bk").hide();
  });
});
	
	// “td”中添加文本内容
$(document).ready(function(){
  $("td").click(function(){
	// $(this).text(3);
  });
});
	// "td"中添加“class”值；添加和移除之间切换
$(document).ready(function(){
  $("td").click(function(){
	$(this).toggleClass("blue");
  });
});
	
</script>
</body>
</html>

标签：jQuery,function,runoob,click,html,ready,td,添加,class
来源： https://www.cnblogs.com/lnlidawei/p/16369484.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html-技术测试：jQuery 添加class的值