abstract：对JQuery的几种选择器进行了练习，并尝试通过JavaScript中的变量获取更改jQuery的CSS样式，但中间的链接失败了，然后改成通过简单的获取jquery的状态输出alert弹窗！<!DOCTYPE html><html ><head> <meta charset=utf-8" /> <title>jquery练习&l
对JQuery的几种选择器进行了练习，并尝试通过JavaScript中的变量获取更改jQuery的CSS样式，但中间的链接失败了，然后改成通过简单的获取jquery的状态输出alert弹窗！
<!DOCTYPE html>
<html >
<head>
<meta charset=utf-8" />
<title>jquery练习</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
table{width:360px;height:40px;line-height:40px;text-align:center;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('tr:odd').css('background','#D3D3D3')
$('td:contains(A+)').css('color','limegreen')
$('td:contains(D)').css('color','red')
$(function(){
$("input[type=checkbox]").change(function() {
alert("你选了："+$(this).val())
});
});
})
</script>
<table border="1" cellspacing="0">
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>文综</td>
<td>理综</td>
</tr>
<tr>
<td id="name1">张三</td>
<td>A+</td>
<td>A</td>
<td>A</td>
<td>B+</td>
<td>A+</td>
</tr>
<tr>
<td id="name2">李四</td>
<td>A</td>
<td>A+</td>
<td>B+</td>
<td>A+</td>
<td>C+</td>
</tr>
<tr>
<td id="name3">王五</td>
<td>B+</td>
<td>B</td>
<td>D</td>
<td>A</td>
<td>C</td>
</tr>
<tr>
<td id="name4">赵六</td>
<td>A</td>
<td>C+</td>
<td>A+</td>
<td>A</td>
<td>D</td>
</tr>
</table>
<form>
<label><input type="checkbox" value="张三" name="" />张三</label>
<label><input type="checkbox" value="李四" name="" />李四</label>
<label><input type="checkbox" value="王五" name="" />王五</label>
<label><input type="checkbox" value="赵六" name="" />赵六</label>
</form>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-01-01 19:50:32
Teacher's summary：jQuery中的选择器, 功能极期强大, 可以选中页面中的任何一个元素, 页面中的元素, 可以有多种选择方法, 尽可能选择最简单的一种,可读性放第一位