源碼:
<!DOCTYPE html>
<html >
<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/jquery-3.2.1.min.js"></script>
</head>
<body>
<table >
<tr>
<td><input type="checkbox" value="1"></td>
<td>豹女</td>
<td>300</td>
</tr>
<tr>
<td><input type="checkbox" value="2"></td>
<td>龍女</td>
<td>300</td>
</tr>
<tr>
<td><input type="checkbox" value="3"></td>
<td>提摩</td>
<td>320</td>
</tr>
<tr>
<td><input type="checkbox" value="4"></td>
<td>琴女</td>
<td>350</td>
</tr>
</table>
<input type="button" value="點選選擇第幾個使用eq選擇器" id="eqBtn">
<input type="button" value="點選選擇第1個使用first選擇器" id="firstBtn">
<input type="button" value="點選選擇最後一個使用first選擇器" id="lastBtn">
<input type="button" value="全選" id="allBtn">
<input type="button" value="點選檢視,已經選中的" id="checkedBtn">
<input type="button" value="點選檢視,沒有選中的" id="nocheckedBtn">
<input type="button" value="反選" id="overBtn">
<input type="button" value="反選更新版" id="overBtn1">
<script>
$(function() {
//jquery使用 過濾選擇器 達到 奇偶數變色
//同時也學了 jquery操作css
$('table tr:even').css('background-color','pink');
$('table tr:odd').css('background-color','blue');
$('#eqBtn').click(function() {
var timo=$('table tr:eq(3)');
//console.log(timo);
//練習:如何找到 <td>提摩</td>
//var timo=$('table tr:eq(2) td:eq(1) ').text();
console.log(timo);
})
//拿取 第一個
$("#firstBtn").click(function() {
var first=$('table tr:first').html();
console.log(first);
})
//拿取 最後一個
$("#lastBtn").click(function() {
var last=$('table tr:last').text();
console.log(last);
})
//全選 -----用來批量删除
$('#allBtn').click(function() {
//思路:找出所有 cheackbox 的td,周遊 ,讓其選中 即可
// $('table tr td>input')
$.each($('table tr td>input'),function(index, value) {
// console.log(index);
// console.log(value);
console.log( $(this).val()) //周遊取值
$(this).prop('checked',true); //全選
})
})
//點選檢視 已經選中的
$('#checkedBtn').click(function() {
//使用 過濾選擇器 可以選中:
//$('table tr td>input:checked')
//周遊 取值
$.each($('table tr td>input:checked'), function(index, value) {
console.log($(this).val());
})
})
//點選檢視 沒有選中的
$('#nocheckedBtn').click(function() {
console.log($('table tr td>input:not(:checked)').val());
})
//反選
$('#overBtn').click(function() {
//思路:周遊每個 input ,如果是 選中,則給予 未選中
//反過來,如果是 未選中,則給予 選中
$.each($('table tr td>input'), function(index, value) {
var istrue=$(this).prop('checked');
console.log(istrue);
if(istrue){
//如果 istrue 等于 true 代表被選中了
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
})
//更新版
$('#overBtn1').click(function() {
$.each($('table tr td>input'), function(index, value) {
$(this).prop('checked',!($(this).prop('checked')));
})
})
})
</script>
</body>
</html>
效果圖: