实验目的及要求：
- 握Jquery页面初始化方法
- 掌握Jquery的选择器的基本使用
- 掌握Jquery对DOM 的基本操作
实验内容：
1.使用jquery实现如下界面效果：
提示：
- 奇数行背景色：#FF6500；偶数行背景色：#FFFFEE;选中行：#FF6500
- 选中行时，设置单选框选中状态
- 运行截图
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/jquary.js"></script> <script> $(document).ready(function () { $("tr:odd").css("background", "#FFF38F"); $("tr:even").css("background", "#FFFFEE"); $(".T1>td").css("background", "#FFFFFF"); $("table").click(function () { var f_tr = event.srcElement.parentElement; var f_row = f_tr.rowIndex; $("tr:eq(" + f_row + ")").css("background", "#FF6500"); shift = shift + 1; } ) }) </script> <style> td { border: #000 solid 1px; text-align: center; padding-right: 20px; padding-left: 20px; } table { border-collapse: collapse; } .T1 td { font-weight: bold; } </style> </head> <body> <table> <tr class="T1"> <td id="hidden"></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> <tr> <td><input type="radio"></td> <td>罗梅</td> <td>女</td> <td>四川宜宾</td> </tr> </table> </body> </html>
！
2.使用jquery实现内容过滤，效果如下图所示：
提示：
- Jquery中提供了filter方法进行过滤，如$("选择器").filter(内容过滤器)
- 搜索过程中可先隐藏hide所有数据行，满足条件的行进行显示show（）
- 运行截图
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/jquary.js"></script> <script> $(document).ready(function () { $("tr:odd").css("background", "#FFF38F"); $("tr:even").css("background", "#FFFFEE"); $("tr:eq(0)").css("background", "#FFFFFF"); $("input").on("input",function() { var text=$("input").val(); $(".class").parent().hide(); $(".class").filter(":contains("+text+")").parent().show(); }); }); </script> <style> table { border-collapse: collapse; margin: 20px 0px; } td { border: #000 solid 1px; text-align: center; padding-left: 20px; padding-right: 20px; } #ftd{ font-weight: bold; } input{ border: #000 solid 3px; } </style> </head> <body> <b>查询:</b><input type="text"> <table> <tr id="ftd"> <td>姓名</td> <td>性别</td> <td>暂住地</td> </tr> <tr> <td class="class">张三</td> <td>男</td> <td>四川成都</td> </tr> <tr> <td class="class">李四</td> <td>女</td> <td>四川绵阳</td> </tr> <tr> <td class="class">王五</td> <td>男</td> <td>四川南充</td> </tr> <tr> <td class="class">陈六</td> <td>男</td> <td>四川自贡</td> </tr> <tr> <td class="class">陈勇</td> <td>男</td> <td>四川德阳</td> </tr> <tr> <td class="class">罗梅</td> <td>女</td> <td>四川宜宾</td> </tr> <tr> <td class="class">Rain</td> <td>女</td> <td>四川宜宾</td> </tr> <tr> <td class="class">MAXMAN</td> <td>女</td> <td>四川宜宾</td> </tr> <tr> <td class="class">王六</td> <td>男</td> <td>湖南长沙</td> </tr> </table> </body> </html>
3.使用 JQuery 实现级联选择框，界面实现效果参考如下图。
运行截图
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquary.js"></script>
</head>
<body>
<select id="province">
<option value="0">请选择</option>
<option value="1">河北省</option>
<option value="2">辽宁省</option>
<option value="3">山东省</option>
</select>
<select id="cities">
</select>
<script>
var cities=[
["请选择"],
["请选择","石家庄","邯郸","唐山","张家口","廊坊"],
["请选择","沈阳市","大连市","鞍山市","抚顺市","本溪市"],
["请选择","济南市","青岛市","淄博市","枣庄市","东营市"]
];
$("#province").change(function(){
$("#cities").empty();//清空上一项
var index=$("#province").val();
for( var i=0;i<cities[index].length;i++){
var newoption="<option>"+cities[index][i]+"</option>";
$("#cities").append(newoption);
}
});
</script>
</body>
</html>
4.使用Jquery实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。
运行截图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquary.js"></script>
<script>
$(document).ready(function(){
$("#mit").click(function(){
console.log(1);
var name=$("#name").val();
var email=$("#email").val();
var salary=$("#salary").val();
$("#table").append("<tr>"+
"<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td>"+"<span> Delete </span>"+"</td>"+
+"</tr>");
$("span").click(function(){
$(this).parent().parent().remove();
});
});
});
</script>
<style>
#div1 {
text-align: center;
margin: 20px;
}
#div2 {
text-align: center;
margin: 20px auto;
}
#tr1{
border: #bab6aa solid 2px;
}
span{
text-decoration:underline blue;
color: blue;
}
table {
border-collapse: collapse;
margin: 20px auto;
}
td {
border: #bab6aa solid 2px;
}
</style>
</head>
<body>
<div id="div1">
<font>添加新员工</font>
</div>
name:<input id="name" type="text">
email:<input id="email" type="text">
salary:<input id="salary" type="text"></br>
<div id="div2">
<input id="mit" type="button" value="Submit">
</div>
<table id="table">
<tr #id="tr1">
<td>Name</td>
<td>Email</td>
<td>salary</td>
<td></td>
</tr>
</table>
</body>
</html>
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
