ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

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

标签: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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有