JQuery
高级
动画
三种方式显示和隐藏元素
默认显示和隐藏方式
show(spedd,easing,fnu);显示
hide(spedd,easing,fun);隐藏
toggle(spedd,easing,fun);切换
滑动显示和隐藏方式
slideDown([speed],[easing],[fn]);滑动显示
slideUp([speed,[easing],[fn]]);隐藏显示
slideToggle([speed],[easing],[fn]);切换显示
淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn]);淡出显示
fadeOut([speed],[easing],[fn]);淡入隐藏
fadeToggle([speed,[easing],[fn]]);切换显示
上述的九个方法的参数都是相同的
speed:动画速度,三个预定义的值("slow","normal", "fast")或者用毫秒数值表示动画(如:1000)【就是第一个参数可以传入预定值或毫秒值】
easing:用来指定切换效果,默认是:`swing`,可用参数`linear`,`swing`动画执行时效果是慢快慢,`linear`匀速
fn:在动画完成执行的函数,只执行一次
上述的第二个参数和第三个参数可以省略
案例:
滑动显示隐藏,淡入淡出显示隐藏和默认的使用一样
<script>
// 隐藏
function hideFn() {
$("#showDiv").hide("slow","swing",function () {// 这三个参数,后面两个可以省略,第一个可以传入毫秒值
alert("隐藏");
});
}
// 显示
function showFn() {
$("#showDiv").show(5000,"swing");// swing是默认值
}
// 切换
function toggleFn() {
$("#showDiv").toggle(3000);//表示显示变隐藏,隐藏变显示
}
</script>
遍历
Javascript
方式遍历
for(初始化值;循环结束;步长)
$(function () {
// Javascript方式
var $citys = $("#city>li");
for (let i = 0; i < $citys.length; i++) {
// 当是上海时,跳转循环
if ("上海"==element.innerHTML){
break;
}
// 当是上海时,跳转本次循环
if ("上海"==element.innerHTML){
continue;
}
var innerHTML = $citys[i].innerHTML;
alert(i+":"+innerHTML);
}
});
Jquery
方式遍历
方式一:each
方式一:
Jquery对象.each(function (){});
语法:
Jquery对象.each(function (){});
或
jquery对象.each(function(index,element){});
index:就是元素在集合中的索引
element:就是集合中的每一个元素
this:集合中的每一个元素对象
回调函数返回值:由于`each`不能使用`break`和`continue`来跳转循环和跳转本次循环,只能使用`return false或true`的方式跳转循环和跳转本次循环
true:如果当前function返回false,则结束循环`(break)`
false:如果当前function返回true,则结束本次循环,继续下次循环`(continue)`
由于each
不能使用break
和continue
来跳转循环和跳转本次循环,只能使用return false或true
的方式跳转循环和跳转本次循环,但是在Javascript中可以使用break
和continue
方式
// Jquery方式中的each方法
//获取city中的li对象,
var $city = $("#city>li");
$city.each(function () {
// 获取的this就是每个li,注意是这样获取的this是一个Javascript对象
alert(this.innerHTML);
// 将其转成Jquery对象
alert($(this).html());
});
//由于上述的方式中,不能获取到索引,在回调函数传入索引和元素
$("#city>li").each(function (index,element) {
// 获取到的是一个Javascript对象
alert(index+" : "+element.innerHTML);
// 将其转成Jquery对象
alert(index+" : "+$(element).html());
});
// 由于each方式不能使用`break`和`continue`跳转循环和跳转本次循环
$("#city>li").each(function (index,element) {
// 当是上海时,跳转循环
if ("上海"==element.innerHTML){
return false;
}
// 当是上海时,跳转本次循环
if ("上海"==element.innerHTML){
return true;
}
alert(index+" : "+element.innerHTML);
})
方式二:$.each(object,function(){})
// 方式二:`$.each(object,function(){})`,使用和方式相似
$.each($("#city>li"),function () {
alert(this.innerHTML);
});
方式三:for(类型 of 集合){}
// 方式三:for(类型 of 集合):和增强for一样,一定在Jquery在3.0后才能使用
for(li of $("#city>li")){
alert(li.innerHTML);
}
遍历案例:
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// Javascript方式
var $citys = $("#city>li");
for (let i = 0; i < $citys.length; i++) {
var innerHTML = $citys[i].innerHTML;
alert(i+":"+innerHTML);
}
// Jquery方式中的each方法
// 获取city中的li对象,
var $city = $("#city>li");
$city.each(function () {
// 获取的this就是每个li,注意是这样获取的this是一个Javascript对象
alert(this.innerHTML);
// 将其转成Jquery对象
alert($(this).html());
});
//由于上述的方式中,不能获取到索引,在回调函数传入索引和元素
$("#city>li").each(function (index,element) {
// 获取到的是一个Javascript对象
alert(index+" : "+element.innerHTML);
// 将其转成Jquery对象
alert(index+" : "+$(element).html());
});
// 由于each方式不能使用`break`和`continue`跳转循环和跳转本次循环
$("#city>li").each(function (index,element) {
// 当是上海时,跳转循环
if ("上海"==element.innerHTML){
return false;
}
// 当是上海时,跳转本次循环
if ("上海"==element.innerHTML){
return true;
}
alert(index+" : "+element.innerHTML);
})
// 方式二:`$.each(object,function(){})`,使用和方式相似
$.each($("#city>li"),function () {
alert(this.innerHTML);
});
// 方式三:for(类型 of 集合):和增强for一样,一定在Jquery在3.0后才能使用
for(li of $("#city>li")){
alert(li.innerHTML);
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
事件绑定
Jquery
标准绑定方式
<script type="text/javascript">
$(function () {
$("#name").click(function () {
alert("绑定事件");
});
// Jquery中支持绑定多个事件
$("#name").mouseover(function () {
alert("鼠标来了")
})
$("#name").mouseout(function () {
alert("鼠标去了")
})
})
</script>
on
绑定事件/off
解除绑定事件
绑定事件
// 使用`on`绑定事件
$("#btn").on("click",function () {
alert("我被点了");
});
解除绑定事件
$("#btn").off("click");//传入解除事件名称
注意是:当不传入事件名称时,默认将组件上的所有事件都解除
案例:
<script type="text/javascript">
$(function () {
// 使用`on`绑定事件
$("#btn").on("click",function () {
alert("我被点了");
});
// 使用off解除事件
$("#btn2").click(function () {
$("#btn").off("click");//传入解除事件名称
});
})
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
事件切换toggle
Jquery对象.toggle(fun1,fun2,...)
当单击Jquery
对象时对应的组件后,会执行fun1
,第二次点击会执行fun2
…
注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-migrate-1.0.0.js"></script>
<script type="text/javascript">
// 由于使用Jquery是3.0版本的,在切换中不支持toggle了,注意是一定要引入插件才行
$(function () {
$("#btn").toggle(function () {
$("#myDiv").css("backgroundColor","green");
},function () {
$("#myDiv").css("backgroundColor","red");
});
})
</script>
</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色,再次点击红色
</div>
</body>
</html>
插件:增强JQuery
的功能
方式一:$.fn.extend({方法})
增强通过Jquery
获取的对象功能 $("#id")
【增强的是对象,就是标签增加,需要获取标签对象】
案例:
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.fn.extend({
check:function () {
// 选中
this.prop("checked",true);
},
uncheck:function () {
// 选没中
this.prop("checked",false);
}
});
$(function () {
$("#btn-check").click(function () {
$("input[type=checkbox]").check();
});
$("#btn-uncheck").click(function () {
$("input[type=checkbox]").uncheck();
});
})
</script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
</body>
</html>
方式二:$.extend({方法})
增强Jquery
对象自身功能:$
就是全局功能,直接$
调用
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//对全局方法扩展2个方法,扩展min方法:求2个值的最小值;扩展max方法:求2个值最大值
$.extend({
max:function (a,b) {
return a>=b?a:b;
},
min:function (a,b) {
return a<=b?a:b;
}
});
var max = $.max(4,3);
alert(max);
var min = $.min(4,5);
alert(min);
</script>