对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>