html-技术测试：jQuery 添加class的值以及事件响应
html：jQuery 添加class的值以及事件响应
一、测试环境
菜鸟教程（https://www.runoob.com）：https://www.runoob.com/try/try.php?filename=tryjquery_hide_p
二、测试内容：将下面代码，复制到测试环境的左侧的源码框，点击“点击运行”；然后在用鼠标左键“点击”表格，可以查看效果。
1、jquery添加“类”
菜鸟教程(runoob.com)
需要被隐藏的文字!
表格部分
Date11111111
1
2
3
4
5
2022-06-13
1
2022-06-13
1
2
3
4
5
点击按钮，隐藏的文本
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
Hello China
Hello China
Hello China
Hello China
Hello China
Hello China
Hello China
Hello China
Houdini 19
Autodesk 3D max
- level 1
- level 2
- level 3
- level 4
- level 5
Header
Author
Tel
Data
Mark
18794843773
2020-06-20
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
2020-06-20
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
2020-06-20
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
2020-06-20
01
04
10
13
22
31
05
01
02
03
04
05
06
07
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
ITEM：