1、jQuery的基本用法
1.1 jQuery引入
<script src="https://www.cnblogs.com/xiaoqigui/p/js/jquery-3.4.1.min.js" type="text/javascript"></script>
1.2 第一个jQuery测试
<script src="https://www.cnblogs.com/xiaoqigui/p/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//jQuery的标准用法,只要记住：$就代表jQuery
$(document).ready(function(){
alert("今天是KH96班学习jQuery的第一天");
});
</script>
1.3 $(document).ready()与window.onload的区别
<script type="text/javascript">
function loadOne(){
alert("LoadOne");
}
function loadTwo(){
alert("loadTwo");
}
function loadThree(){
alert("loadThree");
}
//onload的用法，页面加载完成后，调用函数,只能执行一个，且是最后指定的那个，特点：必须要等待网页元素全部加载才执行
// window.onload = loadOne;
// window.onload = loadTwo; //只有后面这个才有效
//jQuery 的用法，页面结构加载完成后，调用函数，可以定义多个，互相不影响,且都可以执行
//三个都可以执行
$(document).ready(function(){
loadOne();
});
//简化1
$(document).ready(function(){
loadTwo();
});
//简化 2 我们常用这种简化方式
$(function(){
loadThree();
});
</script>
2、jQuery选择器
基本选择器的语法：$("选择器").action();
2.1 基本选择器
| 名称 | 语法 | 说明 |
|---|---|---|
| 标签选择器 | element | 选取指定标签名的元素 |
| 类选择器 | .class | 选取指定类名的元素 |
| ID选择器 | #id | 选取指定id名的元素 |
| 并集选择器 | selector1,selector2... | 选取多种元素(里面可以是标签名，类名，id名) |
| 全局选择器 | * | 选取所有元素 |
2.2 层次选择器
| 语法 | 说明 |
|---|---|
| ancestor desscendant | 后代选择器 A B |
| partn>child | 子选择器 A>B |
| prev+next | 相邻选择器 A+B |
| prev~siblings | 同辈选择器 A~B |
2.3 属性选择器
$("标签[属性]")
| 语法 | 说明 |
|---|---|
| [attribute] | 包含某属性 |
| [attribute=value] | 指定属性等于指定值 |
| [attribute^=value] | 指定属性以指定值开头 |
| [attribute$=value] | 指定属性以指定值结尾 |
| [attribute*=value] | 指定属性值包含指定参数值 |
2.4 过滤选择器
标签名:过滤选择器；
作用：过滤指定标签；
| 语法 | 说明 |
|---|---|
| :first | 选取第一个元素 |
| :last | 选取最后一个元素 |
| :not(selector) | 选取除selector选择了的元素之外的元素 |
| :even | 选取索引是偶数的元素(index从0开始) |
| :odd | 选取索引是奇数的元素(index从0开始) |
| 语法 | 说明 |
|---|---|
| :eq(index) | 选取索引等于index的元素 |
| :gt(index) | 选取索引大于index的元素 |
| :lt(index) | 选取索引小于index的元素 |
| :header | 选取所有标题元素（h1~h6） 注意 :header之前要有空格 |
| :docus | 选取当前获取焦点的元素 |
| :animated | 选取所有动画 |
可见性选择器
| 语法 | 说明 |
|---|---|
| :visible | 选取所有可见的元素 hidden()方法 隐藏 |
| :hidden | 选取所有隐藏的元素 show()方法 显示 |
2.5 jQuery选择器注意事项
选择器的书写规范很严格，多一个或少一个空格，都会影响选择器的效果；
2.6 $("选择器").css()
| 方法 | 说明 |
|---|---|
| $("选择器").css("属性名称","属性值") | 对单个css属性赋值 |
| $("选择器").css({"属性名称"："属性值"，"属性名称"："属性值"}) | 对多个css属性赋值 |
2.7 $(this).find("标签名")
$(this)就是将这个dom对象转换成jquery对象，就可以对这个对象进行操作；
可以查找当前元素下的子元素；
html
//当鼠标访问指定的li时，指定的li下的p标签显示，鼠标移除后，对应的p消失
<ol>
<li><span>3</span>三八线<p>加入看单</p></li>
<li><span>4</span>吉详天宝<p>加入看单</p></li>
<li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
<li><span>6</span>仙剑云之凡<p>加入看单</p></li>
<li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
<li><span>8</span>琅琊榜<p>加入看单</p></li>
<li><span>9</span>那年青春我们正好<p>加入看单</p></li>
<li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
</ol>
javascript
$("#play ol li").mouseover(function(){
$(this).find("p").css({"display":"block"});
});
$("#play ol li").mouseleave(function(){
$(this).find("p").css({"display":"none"}); //查找到当前元素的子元素
});
//还可以是使用:hidden 和 :visible 可见选择器
$("#play ol li").mouseover(function(){
$(this).find("p:hidden").show();
});
$("#play ol li").mouseleave(function(){
$(this).find("p:visible").hide();
});
$(this)表示当前元素，它还可以点出很多方法，需要的时候可以加个点看看有哪些；
常用方法
| 方法 | 说明 |
|---|---|
| $(this).find("标签名") | 当前标签下的指定标签 |
| $(this).index() | 当前标签的下标 |
3、jQuery基本操作
3.1 样式操作
| 方法(已声明好的外部样式类名，多个使用空格分割) | 说明 |
|---|---|
| addClass("样式类名") | 添加样式 |
| removeClass("样式类名") | 移除样式 |
| toggleClass("样式类名") | 切换样式(就是添加和移除结合)可以与hover事件结合 |
| hasClass("样式类名") | 判断是否包含指定样式 |
3.2 内容操作 html() text()
| 方法名 | 说明 |
|---|---|
| html(context) | 给指定元素添加网页内容(会编译标签) js->innerHTML |
| html() | 获取指定元素的网页内容 |
| text(context) | 给指定元素添加网页内容(不会编译标签)js->innerText |
| text() | 获取指定元素的网页内容 |
3.3属性值操作 val()
| 方法 | 说明 |
|---|---|
| val() | 获取value属性的属性值 |
| val(参数值) | 设置value属性的属性值 |
3.3.1获取单选框的值
$('input:radio[name="IsAvail"]:checked').val()
3.4 节点操作
3.4.1 创造节点
$()用于获取或创建节点
| 方法 | 说明 |
|---|---|
| $(element) | 把DOM节点转化成jQuery节点 |
| $(selector) | 通过选择器获取节点 |
| $(html) | 使用HTML字符创建jQuery节点 |
3.4.2 插入节点
1 元素内部插入子节点
| 方法 | 说明 |
|---|---|
| $(A).append(B) | 将B节点追加到A节点的子节点中 |
| $(A).appendTo(B) | 将A节点追加到B节点的子节点中 |
| $(A).prepend(B) | 将B节点追加到A节点的子节点中 |
| $(A).prependTo(B) | 将A节点追加到B节点的子节点中 |
注意：jq中已经创建好的同一节点，多次执行插入，只会执行一次
var $node2 = $("<li>上海新增本土54例</li>");
$node2.appendTo($("ul")); //执行
//jq中已经创建好的同一节点，多次执行插入，只会执行一次
$node2.appendTo($("ul")); //不执行
//只用每次创建新的节点，才会多次执行
$("<li>罗永浩：那火烤中学高有问题</li>").prependTo($("ul"));//执行
$("<li>罗永浩：那火烤中学高有问题</li>").prependTo($("ul"));//执行
2 元素外部插入同辈节点
| 方法 | 说明 |
|---|---|
| $(A).after(B) | 将B节点追加到A节点之后 |
| $(A).insterAfter(B) | 将A节点追加到B节点之后 |
| $(A).before(B) | 将B节点追加到A节点之前 |
| $(A).insertBefore(B) | 将A节点追加到B节点之前 |
3.4.3 删除节点
| 方法 | 说明 |
|---|---|
| remove() | 删除当前整个节点 |
| empty() | 清空节点内容，节点还存在 |
| detach() | 删除整个节点，保留元素的绑定事件和附加的数据 |
3.4.4 替换节点
| 方法 | 说明 |
|---|---|
| $(A)replaceWith(B) | B节点替换A节点 |
| $(A).replaceAll(B) | A节点替换B节点 |
3.4.5 复制节点
| 方法 | 说明 |
|---|---|
| clone(true) | 复制节点及节点上的事件 |
| clone(false) | 复制节点但不复制节点上的事件 |
3.5属性操作
| 方法 | 说明 |
|---|---|
| $("元素标签").attr("属性名"） | 获取指定属性的属性值 |
| $("元素标签").attr("属性名","属性值") | 设置指定属性的属性值 |
| $("元素标签").attr({"属性名":"属性值","属性名":"属性值"}) | 设置多个指定属性的属性值 |
| removeAttr("属性名") | 删除指定属性 |
3.6 节点遍历
3.6.1 遍历子元素
| 方法 | 说明 |
|---|---|
| children() | 获取元素的所有子元素 |
| $(selector).children([expr]); | 获取子元素的中的指定元素 |
3.6.2 遍历同辈元素
| 方法 | 说明 |
|---|---|
| next() | 获取当前元素后的第一个同辈元素 |
| prev() | 获取当前元素前的第一个同辈元素 |
| slibings() | 获取当前元素的所有同辈元素 |
3.6.3 遍历前辈元素
| 方法 | 说明 |
|---|---|
| parent() | 获取当前元素的父级元素 |
| parents() | 获取当前元素的所有祖先元素 |
3.6.4 each() 遍历
例子
//遍历所有的li元素
//隐式迭代:自动遍历集合中的所有元素
$("li").each(function(index,elm){
alert(index);
alert($(elm).html());
});
$("li").each(function(){
//注意:elm时dom元素对象,不可以直接使用jQuery方法,必须是转化为jQuery节点
alert($(this).html()); //$(this)转换为jQuery节点
});
3.6.5 end()
结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态；
//end():结束当前的最后一次筛选,恢复到初始状态
$(".gameList li").first().css("background-color","orange").end().last().css({"background-color":"pink"}); //可以选取到第一个li和最后一个li
//先选取第一个li，然后end()清除.first()的过滤，回到$(".gameList li")，在选取last()
//相当于两条语句：
/*
$(".gameList li").first().css("background-color","orange");
$(".gameList li").last().css({"background-color":"pink"});
*/
4、jQuery事件与特效
4.1 基础事件
4.1.1 鼠标事件
| 事件名称 | 说明 |
|---|---|
| mouseover() | 鼠标移入事件 |
| mouseout() | 鼠标移出事件 |
| mouseenter() | 鼠标移入事件 |
| mouseleaver() | 鼠标移出事件 |
| hover() | 鼠标移入和移出事件 |
| click() | 鼠标点击事件 |
| dblclick() | 鼠标双击事件 |
| focus() | 获取焦点事件 |
| blur() | 失去焦点事件 |
鼠标事件方法的区别
| 方法 | 相同点 | 不同点 |
|---|---|---|
| mouseover() | 鼠标进入被选元素时会触发 | 鼠标在其被选元素的子元素上来回进入时，触发 |
| mouseenter() | 鼠标进入被选元素时会触发 | 鼠标在其被选元素的子元素上来回进入时，不触发 |
| mouseout() | 鼠标离开被选元素是会触发 | 鼠标在其被选元素的子元素上来回离开时，触发 |
| mouseleaver() | 鼠标离开被选元素是会触发 | 鼠标在其被选元素的子元素上来回进入时，不触发 |
4.1.2 键盘事件
| 方法 | 说明 |
|---|---|
| keydown() | 键盘按下事件 |
| keyup() | 键盘弹起事件 |
| keypress | 产生可打印的字符事件 |
键盘按下灵活应用
//键盘按下事件，判断是否是enter键，并手动提交表单
$(document).keydown(function(even){
if(even.keyCode == 13){
if(confirm("确定要提交登录请求吗？")){
alert("登录请求可以提交");
//jQuery中手动提交表单
$("form").submit();
}else{
alert("登录请求取消")
}
}
});
4.1.3 浏览器事件(了解)
4.1.4 window事件(了解)
4.1.5 表单事件(了解)
4.2 绑定事件和移出事件
4.2.1 绑定事件
| 方法 | 说明 |
|---|---|
| bind() | 绑定事件 |
4.2.1.1 绑定单个事件
bind(事件类型名，事件处理函数)；
//对指定元素绑定mouseover事件
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
//对指定元素绑定mouseout事件
$(".on").bind("mouseout",function(){
$(".topDown").hide();
});
4.2.1.2 绑定多个事件
bind({事件名称：事件处理函数，事件处理名称：事件处理函数。。。})
//对指定元素，绑定mouseover和mouseout事件
$(".on").bind({
"mouseover":function(){
$(".topDown").show();
},
"mouseout":function(){
$(".topDown").hide();
}
});
4.2.2 移除事件
| 方法 | 说明 |
|---|---|
| unbind(); | 解除指定元素绑定的所有事件 |
| unbind(事件名); | 解除指定元素绑定的指定事件 |
4.3 复合事件
4.3.1 hover
| 方法 | 说明 |
|---|---|
| hover() | 相当于mouseover和mouseout的集合，并支持切换 |
//复合事件：hover,相当于mouseover和mouseout的集合，并支持切换
$(".on").hover(function(){
$(".topDown").show();
},function(){
$(".topDown").hide();
});
4.3.2 toggle 1.9版本之后，移除了toggle()复合事件方法
| 方法 | 说明 |
|---|---|
| toggle(函数。。。) | 连续点击会切换函数 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>连续点击，了解</title>
</head>
<body>
<input type="button" value="切换颜色">
</body>
<script src="https://www.cnblogs.com/xiaoqigui/p/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//连续点击：toggle(function1,function2...),随着鼠标的点击自动切换函数
$("input[type=button]").toggle(
function(){
$("body").css("background-color","#f00");
},
function(){
$("body").css("background-color","#0f0");
},
function(){
$("body").css("background-color","#00f");
}
)
});
</script>
</html>
4.3.3 toggle(),toggle(函数),toggleClass()区别
| 方法 | 说明 |
|---|---|
| toggle() | 相当于show()和hidden() |
| toggle(函数) | 复合事件 随着鼠标的点击自动切换函数 |
| toggleClass(类名) | 相当于addClas("类名")，removeClass() |
4.4 jQuery 动画效果
4.4.1 控制元素的显示及隐藏
| 方法 | 说明 |
|---|---|
| show() | 立刻显示 |
| show(毫秒数) | 慢慢显示 |
| show(毫秒数,函数) | 在动画效果结束后执行函数 |
| hide() | 立刻隐藏 |
| hide(毫秒数) | 慢慢隐藏 |
| hide(毫秒数,函数) | 在动画效果结束后执行函数 |
toggle() 方法等于这两个方法
| 方法 | 说明 |
|---|---|
| toggle() | 立即显示和隐藏 |
| toggle(毫秒数) | 慢慢显示和隐藏 |
| toggle(毫秒数，函数) | 在动画效果结束后执行函数 |
参数：可以为任意毫秒数或，slow,normal,fast;
4.4.2 改变元素的透明度(淡入淡出)
| 方法 | 说明 |
|---|---|
| fadeIn() | 立即淡入 |
| fadeIn(毫秒数) | 淡入 |
| fadeln(毫秒数，函数) | 在动画效果结束后执行函数 |
| fadeOut() | 立即淡出 |
| fadeOut(毫秒数) | 淡出 |
| fadeOut(毫秒数，函数) | 在动画效果结束后执行函数 |
参数：可以为任意毫秒数或，slow,normal,fast;
4.4.3 改变元素高度(收缩)
| 方法 | 说明 |
|---|---|
| slideDown() | 立即延伸 |
| slideDown(毫秒数) | 慢慢延伸 |
| slideDown(毫秒数，函数) | 在动画效果结束后执行函数 |
| slideUp() | 立即收缩 |
| slideUp(毫秒数) | 慢慢收缩 |
| slideUp(毫秒数，函数) | 在动画效果结束后执行函数 |
参数：可以为任意毫秒数或，slow,normal,fast;
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画-显示，隐藏，淡入淡出，收索，拉伸</title>
</head>
<body>
<p>
<img src="https://www.cnblogs.com/xiaoqigui/p/img/img01.jpg" alt="" width="600px" height="300px">
</p>
<input type="button" value="显示" id="showImg">
<input type="button" value="隐藏" id="hideImg">
<p>
<img src="https://www.cnblogs.com/xiaoqigui/p/img/img02.jpg" alt="" width="600px" height="300px">
</p>
<input type="button" value="淡入" id="dadeIn">
<input type="button" value="淡出" id="dadeOut">
<p>
<img src="https://www.cnblogs.com/xiaoqigui/p/img/img03.jpg" alt="" width="600px" height="300px">
</p>
<input type="button" value="延伸" id="slidedownImg">
<input type="button" value="收缩" id="slideupImg">
</body>
<script src="https://www.cnblogs.com/xiaoqigui/p/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//显示和隐藏：可以不带，带一个，带两个参数
//第一个参数是执行显示或隐藏的速度或者隐藏的时长，单位是毫秒,如果为0，立刻执行
//也可以是：slow,normal,fast，
//第二个参数是执行显示或者隐藏效果完成后，需要执行的操作函数
$("#showImg").click(function(){
// $("img:eq(0)").show();//立刻显示
$("img:eq(0)").show(5000);//慢慢显示，整个过程1秒，默认是从左上角显示
});
$("#hideImg").click(function(){
// $("img:eq(0)").hide();//立刻显示
$("img:eq(0)").hide(5000);
});
//淡入和淡出的动画效果，通过改变元素的透明度，实现淡入和淡出，带参数的效果和上面一样
$("#dadeIn").click(function(){
// $("img:eq(1)").fadeIn();//立刻淡入
$("img:eq(1)").fadeIn(5000);//淡入
});
$("#dadeOut").click(function(){
// $("img:eq(1)").fadeOut();//立刻淡出
$("img:eq(1)").fadeOut(5000);//淡出
});
//通过改变元素的高度
$("#slidedownImg").click(function(){
// $("img:eq(2)").slideDown();//立刻延伸
$("img:eq(2)").slideDown(5000);//延伸
});
$("#slideupImg").click(function(){
// $("img:eq(2)").slideUp();//立刻收缩
$("img:eq(2)").slideUp(5000);//收缩
});
})
</script>
</html>
4.4.4 自定义动画(了解)
5、项目中常用的知识点
5.1 自定义表单验证 required
自定义表单的input标签必须添加required属性，否则就不会触发；
//自定义用户名校验提示语，对浏览器默认提示语，进行统一修改
$("input[type=submit]").click(function(){
var userName = document.getElementById("userName");
if(userName.validity.valueMissing){
userName.setCustomValidity("用户名不能为空")
}else if(userName.validity.patternMismatch){
//正则校验提示
userName.setCustomValidity("用户名不符合规则校验")
}else{
userName.setCustomValidity("");
}
});
5.2 return false 的理解和用法
当表单提交事件，接收到false的返回值不会再提交表单内容，可以实现去除表单的默认提交处理(让from的action失败)，包括超链接；
$("form").submit(function(){
// alert("监听表单提交事件");
//提示是否确认登录请求
if(!confirm("确认要进行登录吗？")){
//当表单提交事件，接收到false的返回值不会在提交表单内容，可以实现去除表单的默认提交处理(让from的action失败)，包括超链接
return false;
}
});
5.3 stop(true,true)
stop(true,true)停止匹配当前正在执行的动画效果，解决快速移入移出导致的延迟效果;
//二级导航栏的下拉特效
$(".wel_rhelp").bind({
"mouseenter":function(){
//stop(true,true) 停止匹配当前正在执行的动画效果，解决快速移入移出导致的延迟效果
$(".wel_rhelp_ul").stop(true,true).slideDown(1000);
},
"mouseleave":function(){
$(".wel_rhelp_ul").stop(true,true).slideUp(1000);
}
});
5.4 轮播图
html
<!--焦点图-->
<div class="banner">
<div class="top_slide_wrap">
<ul class="slide_box ">
<li class="active"><img src="https://www.cnblogs.com/xiaoqigui/p/img/ban1.jpg" width="700" height="401" /></li>
<li><img src="https://www.cnblogs.com/xiaoqigui/p/img/ban2.jpg" width="700" height="401" /></li>
<li><img src="https://www.cnblogs.com/xiaoqigui/p/img/ban3.jpg" width="700" height="401" /></li>
</ul>
<ul class="num">
<li class="active">
<a href="#">1</a>
</li>
<li class="">
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
</ul>
<div class="op_btns">
<div class="op_btns_1 clear">
<a href="#" class="op_btn op_prev"></a>
<a href="#" class="op_btn op_next"></a>
</div>
</div>
</div>
</div>
javaScript
$(function(){
//调用轮播函数
playBanner();
});
//自定义轮播图播放函数
function playBanner(){
//初始化图片序号变量
var bannerIndex = 0;
//初始化标识，当鼠标移入到轮播图数字上，暂停轮播
var bannerFlog = false; //默认不暂停，当为true才暂停
//获取要轮播的图片对象集合
var $bannerImgs = $(".slide_box").children("li");
//获取要轮播的图片对应数字集合
var $bannerNums = $(".num").children("li");
//1.当鼠标移入轮播图移入到对应的数字上，显示对应的轮播图
$bannerNums.mouseover(function(){
//确定移入的是哪个数字
bannerIndex = $bannerNums.index($(this));
// alert(bannerIndex);
//让对应轮播图数字的图片进行淡入
$bannerImgs.eq(bannerIndex).fadeIn();
//所有当前轮播图数字外其他图片都要淡出
$bannerImgs.eq(bannerIndex).siblings().fadeOut();
//当前轮播图的数字要高亮 actice类是让数字高亮
$(this).addClass("active");
//所有当前轮播图数字外其他的数字都要取消高亮
$(this).siblings().removeClass("active");
//修改轮播图true,暂停
bannerFlog = true;
}).mouseout(function(){
//修改轮播标识为false,继续自动轮播
bannerFlog = false;
});
//开启自动轮播
setInterval(function(){
// 判断当前是不是鼠标在某个轮播图片的数字上，如果是，不可以切换图片，否则继续
if(bannerFlog){
return;
}
//默认从第一个图片开始轮播，轮播到最后一个图片，如果鼠标移入到某个图片，从当前的图片开始轮播
bannerIndex++;
//如果轮播图片序号大于轮播图片总数，代表轮播到最后，要从头开始
if(bannerIndex >= $bannerImgs.length){
bannerIndex = 0;
}
//切换轮播图片
$bannerImgs.eq(bannerIndex).stop(true,true).fadeIn().siblings().fadeOut();
//切换对应的轮播数字
$bannerNums.eq(bannerIndex).stop(true,true).addClass("active").siblings().removeClass("active");
},3000);
}
5.5 jQuery 判断checked的三种方法:
| 方法 | 说明 |
|---|---|
| .attr(‘checked’)； | 看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false |
| .prop(‘checked’)； | 16+:true/false |
| .is(‘:checked’)； | 所有版本:true/false//别忘记冒号哦 |
赋值
| 方法 | 说明 |
|---|---|
| .attr(“checked”,”checked”); | 赋值checked |
| .attr(“checked”,true); | 赋值true |
5.6 prop()方法的应用
prop() 方法设置或返回被选元素的属性和值
prop(参数1，参数2)：
- 参数1用于设置属性
- 参数2设置属性值
下面一个简单的案例来应用一下这个方法：
head部分
<script src="https://www.cnblogs.com/xiaoqigui/p/lib/jquery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://www.cnblogs.com/xiaoqigui/p/lib/bootstrap/css/bootstrap.css">
<style>
.wrap {
width: 500px;
height: 300px;
margin: 50px auto;
}
th {
text-align: center;
}
</style>
body部分
<div class="wrap">
<table class="table table-striped table-bordered table-hover text-center">
<thead>
<tr class="success">
<th><input type="checkbox" id="min_check"></th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody id="t_body">
<tr>
<td><input type="checkbox"></td>
<td>55</td>
<td>66</td>
<td>61</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>68</td>
<td>23</td>
<td>58</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>35</td>
<td>35</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>36</td>
<td>58</td>
<td>21</td>
</tr>
</tbody>
</table>
</div>
<script>
$(function(){
// 需求1：当点击全选按钮的时候，下面的四个按钮也被选中
$("#min_check").click(function(){
$("#t_body input:checkbox").prop("checked",$(this).prop("checked"));
});
//需求2：当下面按钮有一个没被选中，上面的全选按钮也取消选中状态
$("#t_body input:checkbox").click(function(){
if($("#t_body input:checkbox").length === $("#t_body input:checked").length){
$("#min_check").prop("checked",true);
}else {
$("#min_check").prop("checked",false);
}
});
});
</script>