摘要：對JQuery的幾種選擇器進行了練習(xí)，并嘗試通過JavaScript中的變量獲取更改jQuery的CSS樣式，但中間的鏈接失敗了，然后改成通過簡單的獲取jquery的狀態(tài)輸出alert彈窗！<!DOCTYPE html><html ><head> <meta charset=utf-8" /> <title>jquery練習(xí)&l
對JQuery的幾種選擇器進行了練習(xí)，并嘗試通過JavaScript中的變量獲取更改jQuery的CSS樣式，但中間的鏈接失敗了，然后改成通過簡單的獲取jquery的狀態(tài)輸出alert彈窗！
<!DOCTYPE html>
<html >
<head>
<meta charset=utf-8" />
<title>jquery練習(xí)</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>數(shù)學(xué)</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>
批改老師：天蓬老師批改時間：2019-01-01 19:50:32
老師總結(jié)：jQuery中的選擇器, 功能極期強大, 可以選中頁面中的任何一個元素, 頁面中的元素, 可以有多種選擇方法, 盡可能選擇最簡單的一種,可讀性放第一位