<!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/jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1">
<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="点击选择第最后个使用last选择器" 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', 'pink');
$('table tr:odd').css('background', 'orange');
$("#eqBtn").click(function () {
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 () {
//思路:找出所有CheckBox的td,遍历,让其选中即可
// console.log($('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(index);
// console.log(value);
console.log($(this).val()); //遍历取值
})
});
//点击查看没有选中的
$("#nocheckedBtn").click(function () {
console.log($("table tr td>input:not(:checked)"));
});
//反选
$("#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>