html：jQuery 添加class的值以及事件响应
一、测试环境
菜鸟教程（https://www.runoob.com）：https://www.runoob.com/try/try.php?filename=tryjquery_hide_p
二、测试内容：将下面代码，复制到测试环境的左侧的源码框，点击“点击运行”；然后在用鼠标左键“点击”表格，可以查看效果。
1、jquery添加“类”
<!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>
2、jquery 处理“动态添加元素的事件响应”
2.1、相关资料：
2.2、代码部分
// test.css
main
{
margin: 1rem 0;
padding:1rem 0;
/* background-image:url('../img/bg2.jpg'); */
background-color: #8bd5d6;
font-family: "arial black";
font-size: 2rem;
color: white;
}
bg
{
margin: 1rem 0;
padding: 1rem 0;
display: block;
/* background-image: url(../img/bg1.jpg); */
background-color: rgba(196, 214, 139, 0.5);
color: slategray;
}
bg div
{
display: block;
}
ul
{
list-style-type: none;
}
ul li
{
background-color: beige;
color: gray;
margin: 0.5rem 0;
padding: 0.5rem 0;
display: inline;
}
form
{
background-color: #F5F5DC;
}
.font-01rem
{
font-size: 0.1rem;
}
.font-02rem
{
font-size: 0.2rem;
}
.font-05rem
{
font-size: 0.5rem;
}
.font-1rem
{
font-size: 1rem;
}
.font-2rem
{
font-size: 2rem;
}
.font-3rem
{
font-size: 3rem;
}
.font-4rem
{
font-size: 4rem;
}
.tbbgf
{
background-color: papayawhip;
}
.tbbgb
{
background-color: #8bd5d6;
}
.active
{
background-image: url(../img/bg2.jpg);
}
.bgred
{
color: white;
font-size: 1.2rem;
text-align: center;
width: 30px;
height: 30px;
background: url(../img/bg_red.png) no-repeat;
background-size: 30px 30px;
background-position: center center;
}
.bgblue
{
color: white;
font-size: 1.2rem;
text-align: center;
width: 30px;
height: 30px;
background: url(../img/bg_blue.png) no-repeat;
background-size: 30px 30px;
background-position: center center;
}
tr .bgred, tr .bgblue
{
padding: 1px 3px;
margin: 0;
}
table
{
background-color: cornsilk;
margin: 0px;
padding: 0px;
}
.ajaxcs
{
color:red;
font-size: 18px;
}
td.date
{
width: 200%;
}
td .doselect
{
}
.bgr
{
/*bgr = background-color: red: ;*/
}
.bgb
{
/*bgr = background-color: blue: ;*/
}
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/test.css"/>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<script src="js/jquery-3.6.0-min.js"></script>
<title></title>
</head>
<body>
<bg>
<div class="font-01rem"> Hello China</div>
<div class="font-02rem"> Hello China</div>
<div class="font-05rem"> Hello China</div>
<div class="font-1rem"> Hello China</div>
<div class="font-2rem"> Hello China</div>
<div class="font-3rem"> Hello China</div>
<div class="font-4rem"> Hello China</div>
<div> Hello China</div>
</bg>
<div>
<bg>
<h1> <span class="fa fa-bar-chart"></span> Houdini 19</h1>
</bg>
<bg>
<h1> Autodesk 3D max</h1>
</bg>
</div>
<div>
<ul>
<li>level 1</li>
<li>level 2</li>
<li>level 3</li>
<li>level 4</li>
<li>level 5</li>
</ul>
<form>
<label>name</label>
<input type="text" /> <br/>
<label>password</label>
<input type="text" /> <br/>
</form>
<table border="1" cellspacing="0" cellpadding="" collapse="0">
<tr class="active">
<th>Header</th>
<th>Author</th>
<th>Tel</th>
</tr>
<tr class="tbbgf">
<td>Data</td>
<td>Mark</td>
<td>18794843773</td>
</tr>
</table>
</div>
<table id="tb1" width="100%" border="1" cellspacing="0" cellpadding="" collapse="0">
<tr>
<td class="date">2020-06-20</td>
<td class="bgred">01</td>
<td class="bgred">02</td>
<td class="bgred">03</td>
<td class="bgred">04</td>
<td class="bgred">05</td>
<td class="bgred">06</td>
<td class="bgred">07</td>
<td class="bgred">08</td>
<td class="bgred">09</td>
<td class="bgred">10</td>
<td class="bgred">11</td>
<td class="bgred">12</td>
<td class="bgred">13</td>
<td class="bgred">14</td>
<td class="bgred">15</td>
<td class="bgred">16</td>
<td class="bgred">17</td>
<td class="bgred">18</td>
<td class="bgred">19</td>
<td class="bgred">20</td>
<td class="bgred">21</td>
<td class="bgred">22</td>
<td class="bgred">23</td>
<td class="bgred">24</td>
<td class="bgred">25</td>
<td class="bgred">26</td>
<td class="bgred">27</td>
<td class="bgred">28</td>
<td class="bgred">29</td>
<td class="bgred">30</td>
<td class="bgred">31</td>
<td class="bgred">32</td>
<td class="bgred">33</td>
<td class="bgblue">01</td>
<td class="bgblue">02</td>
<td class="bgblue">03</td>
<td class="bgblue">04</td>
<td class="bgblue">05</td>
<td class="bgblue">06</td>
<td class="bgblue">07</td>
<td class="bgblue">08</td>
<td class="bgblue">09</td>
<td class="bgblue">10</td>
<td class="bgblue">11</td>
<td class="bgblue">12</td>
<td class="bgblue">13</td>
<td class="bgblue">14</td>
<td class="bgblue">15</td>
<td class="bgblue">16</td>
</tr>
<tr>
<td class="date">2020-06-20</td>
<td class="bgred">01</td>
<td class="bgred">02</td>
<td class="bgred">03</td>
<td class="bgred">04</td>
<td class="bgred">05</td>
<td class="bgred">06</td>
<td class="bgred">07</td>
<td class="bgred">08</td>
<td class="bgred">09</td>
<td class="bgred">10</td>
<td class="bgred">11</td>
<td class="bgred">12</td>
<td class="bgred">13</td>
<td class="bgred">14</td>
<td class="bgred">15</td>
<td class="bgred">16</td>
<td class="bgred">17</td>
<td class="bgred">18</td>
<td class="bgred">19</td>
<td class="bgred">20</td>
<td class="bgred">21</td>
<td class="bgred">22</td>
<td class="bgred">23</td>
<td class="bgred">24</td>
<td class="bgred">25</td>
<td class="bgred">26</td>
<td class="bgred">27</td>
<td class="bgred">28</td>
<td class="bgred">29</td>
<td class="bgred">30</td>
<td class="bgred">31</td>
<td class="bgred">32</td>
<td class="bgred">33</td>
<td class="bgblue">01</td>
<td class="bgblue">02</td>
<td class="bgblue">03</td>
<td class="bgblue">04</td>
<td class="bgblue">05</td>
<td class="bgblue">06</td>
<td class="bgblue">07</td>
<td class="bgblue">08</td>
<td class="bgblue">09</td>
<td class="bgblue">10</td>
<td class="bgblue">11</td>
<td class="bgblue">12</td>
<td class="bgblue">13</td>
<td class="bgblue">14</td>
<td class="bgblue">15</td>
<td class="bgblue">16</td>
</tr>
<tr>
<td class="date">2020-06-20</td>
<td class="bgred">01</td>
<td class="bgred">02</td>
<td class="bgred">03</td>
<td class="bgred">04</td>
<td class="bgred">05</td>
<td class="bgred">06</td>
<td class="bgred">07</td>
<td class="bgred">08</td>
<td class="bgred">09</td>
<td class="bgred">10</td>
<td class="bgred">11</td>
<td class="bgred">12</td>
<td class="bgred">13</td>
<td class="bgred">14</td>
<td class="bgred">15</td>
<td class="bgred">16</td>
<td class="bgred">17</td>
<td class="bgred">18</td>
<td class="bgred">19</td>
<td class="bgred">20</td>
<td class="bgred">21</td>
<td class="bgred">22</td>
<td class="bgred">23</td>
<td class="bgred">24</td>
<td class="bgred">25</td>
<td class="bgred">26</td>
<td class="bgred">27</td>
<td class="bgred">28</td>
<td class="bgred">29</td>
<td class="bgred">30</td>
<td class="bgred">31</td>
<td class="bgred">32</td>
<td class="bgred">33</td>
<td class="bgblue">01</td>
<td class="bgblue">02</td>
<td class="bgblue">03</td>
<td class="bgblue">04</td>
<td class="bgblue">05</td>
<td class="bgblue">06</td>
<td class="bgblue">07</td>
<td class="bgblue">08</td>
<td class="bgblue">09</td>
<td class="bgblue">10</td>
<td class="bgblue">11</td>
<td class="bgblue">12</td>
<td class="bgblue">13</td>
<td class="bgblue">14</td>
<td class="bgblue">15</td>
<td class="bgblue">16</td>
</tr>
<tr id="last_add">
<td class="date">2020-06-20</td>
<td class="bgred">01</td>
<td class=""></td>
<td class=""></td>
<td class="bgred">04</td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class="bgred">10</td>
<td class=""></td>
<td class=""></td>
<td class="bgred">13</td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class="bgred">22</td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class="bgred">31</td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class="bgblue">05</td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
<td class=""></td>
</tr>
<tr class="doselect">
<td class="date"><button class="addbtn">add-item</button><button class="delbtn">del-item</button></td>
<td class="bgr">01</td>
<td class="bgr">02</td>
<td class="bgr">03</td>
<td class="bgr">04</td>
<td class="bgr">05</td>
<td class="bgr">06</td>
<td class="bgr">07</td>
<td class="bgr">09</td>
<td class="bgr">10</td>
<td class="bgr">11</td>
<td class="bgr">12</td>
<td class="bgr">13</td>
<td class="bgr">14</td>
<td class="bgr">15</td>
<td class="bgr">16</td>
<td class="bgr">17</td>
<td class="bgr">18</td>
<td class="bgr">19</td>
<td class="bgr">20</td>
<td class="bgr">21</td>
<td class="bgr">22</td>
<td class="bgr">23</td>
<td class="bgr">24</td>
<td class="bgr">25</td>
<td class="bgr">26</td>
<td class="bgr">27</td>
<td class="bgr">28</td>
<td class="bgr">29</td>
<td class="bgr">30</td>
<td class="bgr">31</td>
<td class="bgr">32</td>
<td class="bgr">33</td>
<td class="bgb">01</td>
<td class="bgb">02</td>
<td class="bgb">03</td>
<td class="bgb">04</td>
<td class="bgb">05</td>
<td class="bgb">06</td>
<td class="bgb">07</td>
<td class="bgb">08</td>
<td class="bgb">09</td>
<td class="bgb">10</td>
<td class="bgb">11</td>
<td class="bgb">12</td>
<td class="bgb">13</td>
<td class="bgb">14</td>
<td class="bgb">15</td>
<td class="bgb">16</td>
</tr>
</table>
<div style="margin: 2rem 0; padding: 2rem 0; border: 1pt double blue;">
<button id="bt1">ajax</button>
<p class="ajaxcs" id="ajaxid"></p>
</div>
<div style="margin: 2rem 0; padding: 2rem 0; border: 1pt double blue;">
<button id="bt2">add - items</button>
<button id="bt3">add - table - items</button>
<button id="bt4">remove - table - items</button>
<div>ITEM：<span id="pi"></span></div>
</div>
</body>
<script>
$(document).ready(function(){
$("#bt1").click(function(){
$("#ajaxid").load("text/book.txt");
});
});
var v2 = '<h1 class="ajaxcontent">hello, add-item</h1>';
$(document).ready(function(){
$("#bt2").click(function(){
$("#pi").append(v2);
});
// 动态添加元素，绑定事件
$("div").on("click", ".ajaxcontent", function(){
$(this).remove();
});
});
var v3 = '<tr class="add doselect">\
<td class="date">号码预选</td>\
<td class="bgr">01</td>\
<td class="bgr">02</td>\
<td class="bgr">03</td>\
<td class="bgr">04</td>\
<td class="bgr">05</td>\
<td class="bgr">06</td>\
<td class="bgr">07</td>\
<td class="bgr">08</td>\
<td class="bgr">09</td>\
<td class="bgr">10</td>\
<td class="bgr">11</td>\
<td class="bgr">12</td>\
<td class="bgr">13</td>\
<td class="bgr">14</td>\
<td class="bgr">15</td>\
<td class="bgr">16</td>\
<td class="bgr">17</td>\
<td class="bgr">18</td>\
<td class="bgr">19</td>\
<td class="bgr">20</td>\
<td class="bgr">21</td>\
<td class="bgr">22</td>\
<td class="bgr">23</td>\
<td class="bgr">24</td>\
<td class="bgr">25</td>\
<td class="bgr">26</td>\
<td class="bgr">27</td>\
<td class="bgr">28</td>\
<td class="bgr">29</td>\
<td class="bgr">30</td>\
<td class="bgr">31</td>\
<td class="bgr">32</td>\
<td class="bgr">33</td>\
<td class="bgb">01</td>\
<td class="bgb">02</td>\
<td class="bgb">03</td>\
<td class="bgb">04</td>\
<td class="bgb">05</td>\
<td class="bgb">06</td>\
<td class="bgb">07</td>\
<td class="bgb">08</td>\
<td class="bgb">09</td>\
<td class="bgb">10</td>\
<td class="bgb">11</td>\
<td class="bgb">12</td>\
<td class="bgb">13</td>\
<td class="bgb">14</td>\
<td class="bgb">15</td>\
<td class="bgb">16</td>\
</tr>';
$(document).ready(function(){
$(".addbtn").click(function(){
$("#tb1").append(v3);
});
$(".delbtn").click(function(){
$(".add").remove();
});
// 为预选号码添加背景：前区
$("td .bgr").click(function(){
$(this).toggleClass("bgred");
});
// 为预选号码添加背景：前区
$("td .bgb").click(function(){
$(this).toggleClass("bgblue");
});
// 动态添加元素的事件响应： 前区；bgr=background-color:red
$("table").on("click", ".bgr", function(){
$(this).toggleClass("bgred");
});
// 动态添加元素的事件响应： 后区；bgb=background-color:blue
$("table").on("click", ".bgb", function(){
$(this).toggleClass("bgblue");
});
});
</script>
</html>
本文由 lnlidawei 原创、整理、转载，本文来自于【博客园】； 整理和转载的文章的版权归属于【原创作者】； 转载或引用时请【保留文章的来源信息】：https://www.cnblogs.com/lnlidawei/p/16369484.html
