前端(四)-jQuery
1、jQuery的基本用法
1.1 jQuery引入
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
1.2 第一个jQuery测试
<script src="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="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="img/img01.jpg" alt="" width="600px" height="300px">
</p>
<input type="button" value="显示" id="showImg">
<input type="button" value="隐藏" id="hideImg">
<p>
<img src="img/img02.jpg" alt="" width="600px" height="300px">
</p>
<input type="button" value="淡入" id="dadeIn">
<input type="button" value="淡出" id="dadeOut">
<p>
<img src="img/img03.jpg" alt="" width="600px" height="300px">
</p>
<input type="button" value="延伸" id="slidedownImg">
<input type="button" value="收缩" id="slideupImg">
</body>
<script src="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="img/ban1.jpg" width="700" height="401" /></li>
<li><img src="img/ban2.jpg" width="700" height="401" /></li>
<li><img src="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="lib/jquery/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="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>前端(四)-jQuery的更多相关文章
- 第四篇：web之前端之jquery
前端之jquery 前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...
- 【前端】:jQuery下
前言: 接上一篇博客: [前端]:jQuery上 一.jQuery属性操作 ① attr(设置或返回自定义属性值) input.select.textarea框中的内容, 可以通过attr来获取,但是 ...
- 第五章、前端之JQuery
目录 第五章.前端之JQuery 一.选择器 二.基本筛选器 三.样式操作 四.位置操作 五.文本操作 六.属性操作 七.文档处理 八.事件 九.动画效果 十.补充 第五章.前端之JQuery 一.选 ...
- 前端07 /jQuery初识
前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
- 前端之jquery
前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
- 【转】jQuery之前端国际化jQuery.i18n.properties
jQuery之前端国际化jQuery.i18n.properties 基于jQuery.i18n.properties 实现前端页面的资源国际化 jquery-i18n-properties
- 前端：jQuery笔记
前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...
- 前端基础——jQuery
一 jQuery 1 简介 jQuery是一个“写得更少,但做得更多”的轻量级JavaScript库.jQuery极大地简化了JavaScript编程. 它是轻量级的js库(压缩后只有21k) ,这是 ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- 前端技术Jquery与Ajax使用总结
前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但 ...
随机推荐
- 如何看待：以色列在真主党订购的5000台寻呼机中放了TNT
日常生活等关键物品的生产必须要有国内完全掌握,美国.日本.以色列等国惯用的这种暗杀方法.如果不能在本国国内做到自主可控的产品生产,那么无疑是把自己的脑袋交给敌人来保护,随时都有丢命的可能. 同时,这也 ...
- 接口测试中Groovy引擎的接入实现！
接口测试中Groovy可以作为上下游接口参数化传递的前置脚本和后置脚本使用,无缝衔接Java语法,groovy的引入对于动态参数化的设置方便很多. 其中核心部分就是接入groovy的引擎,下面介绍gr ...
- .NET 8.0 通用管理平台，支持模块化、WinForms 和 WPF
前言 领导要求做一个小项目,要求独立运行,用以最少的依赖,此时不想集成到主项目中,但是又想用HzyAdmin中如此好用的自动注入,还有操作简单的仓储模式,话不多说,直接开干. HzyAdmin 是一个 ...
- 基于YOLO实现滑块验证码破解
申明:本案例中的思路和技术仅用于学习交流.请勿用于非法行为. 一.训练模型 详细训练步骤和导出模型参考 滑块验证码识别模型训练 二.模型试用 通过YoloDotNet运行模型,计算出滑块缺口位置后用R ...
- ARC121D 1 or 2
ARC121D 1 or 2 诈骗题. 思路 吃一个糖的操作可以看做是和一个 \(a_i\) 为 0 的糖一起吃. 可以枚举有多少个糖单独吃来确定要增加多少个 0. 问题变为每次吃两颗糖. 根据人类直 ...
- 如何在原生鸿蒙中进行RN的断点调试
方式一 chrome devtools的方式 第一步:metro的方式加载bundle 先设置好原生这边的代码,然后记得打开RN服务器. 注意这个enableDebugger的值一定要设置为true ...
- kettle 使用 CARTE 执行
在执行KETTLE 任务的时候,可以使用本地执行,或者使用carte server执行. 1.启动carte server .\Carte.bat localhost 8080 2.配置子服务器 这里 ...
- CSS3 过渡和动画
1.CSS过渡 含义:在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将这个元素瞬间渲染成新属性值的样式.例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到10 ...
- 服务迁移之《tomcat性能优化》
删除无用的connector,因为一般的tomcat前面都会挂有nginx服务 增加connnector使用的线程池的数量 删除没有用的listener host优化项:autoDeploy设置为fa ...
- Node开发规范v1.0
一.空格与格式 (一)缩进 采用2个空格缩进,而不是tab缩进. 空格在编辑器中与字符是等宽的,而tab可能因编辑器的设置不同.2个空格会让代码看起来更紧凑.明快. 变量声明 永远用var声明变量,不 ...