(注：此内容题目为搬运学校前端应用课程发布的实验，答案为本人辅以ai而写，若有不对或侵权问题请及时与作者联系)
另：已更新对应题目Vue版本答案，后续可能会更新之前学习前端应用时做过的全套小练习。
1.使用jquery实现如下界面效果：
提示：
- 奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500
- 选中行时，设置单选框选中状态
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
table{
border-collapse: collapse;
width: 450px;
margin:35px auto 0px;
}
tr{
text-align: center;
line-height: 25px;
}
td,th{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
<tr>
<td><input type="radio"></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td><input type="radio"></td>
<td>李四</td>
<td>女</td>
<td>四川绵阳</td>
</tr>
<tr>
<td><input type="radio"></td>
<td>王五</td>
<td>男</td>
<td>四川南充</td>
</tr>
<tr>
<td><input type="radio"></td>
<td>赵六</td>
<td>男</td>
<td>四川自贡</td>
</tr>
<tr>
<td><input type="radio"></td>
<td>陈勇</td>
<td>男</td>
<td>四川德阳</td>
</tr>
<tr>
<td><input type="radio"></td>
<td>罗梅</td>
<td>女</td>
<td>四川宜宾</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const trs = $('tr')
trs.click(function(){
$(this).css('background-color','#FF6500')
$(this).find('input[type="radio"]').prop('checked',true)
})
trs.each(function(index){
if(index%2!=0){
$(this).css("background-color","#FFF38F")
}else{
$(this).css("background-color","#FFFFEE")
}
});
</script>
</body>
</html>
2.使用jquery实现内容过滤，效果如下图所示：
提示：
- Jquery中提供了filter方法进行过滤，如$("选择器").filter(内容过滤器)
- 搜索过程中可先隐藏hide所有数据行，满足条件的行进行显示show（）
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
span{
margin-left: 35%;
}
table{
border-collapse: collapse;
width: 450px;
margin:30px auto 0px;
}
tr{
text-align: center;
line-height: 25px;
}
td,th{
border: 1px solid black;
}
</style>
</head>
<body>
<span>查询: </span><input type="text" class="txt">
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>四川绵阳</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>四川南充</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>四川自贡</td>
</tr>
<tr>
<td>陈勇</td>
<td>男</td>
<td>四川德阳</td>
</tr>
<tr>
<td>罗梅</td>
<td>女</td>
<td>四川宜宾</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const trs = $('tr')
trs.each(function(index){
if(index%2!=0){
$(this).css("background-color","#FFF38F")
}else{
$(this).css("background-color","#FFFFEE")
}
});
$('.txt').on('input',function(){
const val = $(this).val()
trs.hide()
$(trs[0]).show()
trs.filter(function(){
return $(this).text().includes(val)
}).show()
})
</script>
</body>
</html>
3.使用 JQuery实现级联选择框，界面实现效果参考如下图。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select class="pro">
<option>请选择</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<select class="city">
<option>请选择</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const pro = $('.pro')
const city = $('.city')
const citys = {
"河北省": ["石家庄", "邯郸", "唐山", "张家口", "廊坊"],
"辽宁省": ["沈阳", "大连", "鞍山", "抚顺", "本溪"],
"山东省": ["济南", "青岛", "烟台", "潍坊", "淄博"]}
pro.change(function(){
const name = $(this).val()
// 一定要加在添加前面，不然不起作用
city.empty()
city.append('<option>请选择</option>')
// 给每一个省份添加城市
// 注意遍历数组和对象的区别
citys[name].forEach(function(ci){
const str = '<option>'+ci+'</option>'
city.append(str)
})
})
</script>
</body>
</html>
4.使用Jquery实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
text-align: center;
margin-bottom: 15px;
}
.input{
border: 1px solid blue;
text-align: center;
margin: 30px 48% 0px;
}
hr{
margin-top: 25px;
}
table{
border-collapse: collapse;
width: 300px;
margin:35px auto 0px;
}
tr{
text-align: center;
line-height: 25px;
}
td,th{
border: 1px solid black;
}
</style>
</head>
<body>
<div>添加新员工</div>
<div>
<span>name:</span><input type="text" class="name">
<span>email:</span><input type="text" class="email">
<span>salary:</span><input type="text" class="salary">
</div>
<input type="submit" value="Submit" class="input">
<hr>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="#">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="#">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@bob.com</td>
<td>10000</td>
<td><a href="#">Delete</a></td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
const name = $('.name')
const email = $('.email')
const salary = $('.salary')
const tb = $('table')
$('.input').click(function(){
// 在事件中获取值才有效,前面获得的只有空值
// 且只有.val()可用--获取jquery表单元素值，.value--获取dom对象值
str = '<tr><td>'+name.val()+'</td><td>'+email.val()+'</td><td>'+salary.val()+'</td><td><a href="#">Delete</a></td></tr>'
tb.append(str)
name.val("")
email.val("")
salary.val("")
})
// 固定写法！！！
$(document).on('click', 'a', function(){
$(this).parents('tr').remove();
})
})
</script>
</body>
</html>
