day44
今日内容
JQuery高级
动画 遍历 事件绑定 案例 插件
JQuery高级
动画
1. 三种方式显示和隐藏元素
1. 默认显示和隐藏方式
1. show([speed,[easing],[fn]])
1. 参数:
1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)
2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
* swing:动画执行时效果是 先慢,中间快,最后又慢
* linear:动画执行时速度是匀速的
3. fn:在动画完成时执行的函数,每个元素执行一次。
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])
3. 淡入淡出显示和隐藏方式
1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])
<script>
//隐藏div
function hideFn() {
/*
$("#showDiv").hide("slow","swing",function () {
alert("隐藏了……");
});
*/
//默认方式
// $("#showDiv").hide("fast","swing");
//滑动方式
//$("#showDiv").slideUp("slow");
//淡入淡出方式
$("#showDiv").fadeOut("slow");
};
//显示div
function showFn() {
/*
$("#showDiv").show("slow","swing",function () {
alert("显示了……");
});
*/
//默认方式
// $("#showDiv").show("fast","swing");
//滑动方式
//$("#showDiv").slideDown("slow");
//淡入淡出方式
$("#showDiv").fadeIn("slow");
};
//隐藏div
function toggleFn() {
//默认方式
//$("#showDiv").toggle("slow");
//滑动方式
//$("#showDiv").slideToggle("slow");
//淡入淡出方式
$("#showDiv").fadeToggle("slow");
};
</script>
遍历
1. js的遍历方式
* for(初始化值;循环结束条件;步长)
2. jq的遍历方式
1. jq对象.each(callback)
1. 语法:
jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element:就是集合中的每一个元素对象
* this:集合中的每一个元素对象
2. 回调函数返回值:
* true:如果当前function返回为false,则结束循环(break)。
* false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
2. $.each(object, [callback])
3. for..of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)
<script type="text/javascript">
$(function () {
//1.获取所有的ul下的li
var citys = $("#city li");
//js的遍历方式
/*
//2.遍历li
for (var i = 0; i < citys.length; i++){
//火球内容
alert(i + ":" + citys[i].innerHTML);
};
*/
//jq的遍历方式
/*
//1.jq对象.each(callback)
citys.each(function (index, element) {
//3.1 获取li对象 第一种方式this
//alert(this.innerHTML);
//3.2 获取li对象 第一种方式 在回调函数中定义参数 index(索引) element(元素对象)
//alert(index + ":" +element.innerHTML);
//判断如果是上海,则结束循环
if("上海" == $(element).html()){
//如果当前function返回为false,则结束循环(break).
//如果返回为true,则结束本次循环,继续下次循环(continue)
return true;
}
alert(index + ":" + $(element).html());
});
*/
/*
//2.$.each(object, [callback])
$.each(citys,function () {
alert($(this).html());
});
*/
//3.for..of: jquery 3.0 版本之后提供的方式
for (li of citys){
alert($(li).html());
}
});
</script>
事件绑定
1. jquery标准的绑定方式
* jq对象.事件方法(回调函数);
* 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
* 表单对象.submit();//让表单提交
2. on绑定事件/off解除绑定
* jq对象.on("事件名称",回调函数)
* jq对象.off("事件名称")
* 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
3. 事件切换:toggle
* jq对象.toggle(fn1,fn2...)
* 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....
* 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
案例
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" >
< title> 广告的自动显示与隐藏</ title>
< style>
#content { width : 100%; height : 500px; background : #999}
</ style>
< script type = " text/javascript" src = " ../js/jquery-3.3.1.min.js" > </ script>
< script>
$ ( function ( ) {
setTimeout ( adShow, 3000 ) ;
setTimeout ( adHide, 8000 ) ;
} ) ;
function adShow ( ) {
$ ( "#ad" ) . show ( "slow" ) ;
}
function adHide ( ) {
$ ( "#ad" ) . hide ( "slow" ) ;
}
</ script>
</ head>
< body>
< div>
< div id = " ad" style = " display : none; " >
< img style = " width : 100%" src = " ../img/adv.jpg" />
</ div>
< div id = " content" >
正文部分
</ div>
</ div>
</ body>
</ html>
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" >
< title> jquery案例之抽奖</ title>
< script type = " text/javascript" src = " ../js/jquery-3.3.1.min.js" > </ script>
< script>
var imgs = [ "../img/man00.jpg" ,
"../img/man01.jpg" ,
"../img/man02.jpg" ,
"../img/man03.jpg" ,
"../img/man04.jpg" ,
"../img/man05.jpg" ,
"../img/man06.jpg"
] ;
var startId;
var index;
$ ( function ( ) {
$ ( "#startID" ) . prop ( "disabled" , false ) ;
$ ( "#stopID" ) . prop ( "disabled" , true ) ;
$ ( "#startID" ) . click ( function ( ) {
$ ( "#startID" ) . prop ( "disabled" , true ) ;
$ ( "#stopID" ) . prop ( "disabled" , false ) ;
startId = setInterval ( function ( ) {
index = Math. floor ( Math. random ( ) * 7 ) ;
$ ( "#img1ID" ) . prop ( "src" , imgs[ index] ) ;
} , 20 ) ;
} ) ;
$ ( "#stopID" ) . click ( function ( ) {
$ ( "#startID" ) . prop ( "disabled" , false ) ;
$ ( "#stopID" ) . prop ( "disabled" , true ) ;
clearInterval ( startId)
$ ( "#img2ID" ) . prop ( "src" , imgs[ index] ) . hide ( ) ;
$ ( "#img2ID" ) . show ( 1000 ) ;
} )
} )
</ script>
</ head>
< body>
< div style = " border-style : dotted; width : 160px; height : 100px" >
< img id = " img1ID" src = " ../img/man00.jpg" style = " width : 160px; height : 100px" />
</ div>
< div
style = " border-style : double; width : 800px; height : 500px; position : absolute; left : 500px; top : 10px" >
< img id = " img2ID" src = " ../img/man00.jpg" width = " 800px" height = " 500px" />
</ div>
< input
id = " startID"
type = " button"
value = " 点击开始"
style = " width : 150px; height : 150px; font-size : 22px"
onclick = " imgStart()" >
< input
id = " stopID"
type = " button"
value = " 点击停止"
style = " width : 150px; height : 150px; font-size : 22px"
onclick = " imgStop()" >
</ body>
</ html>
插件:增强JQuery的功能
1.实现方式:
1. $.fn.extend(object)
* 增强通过Jquery获取的对象的功能 $("#id")
<! DOCTYPE html >
< html>
< head>
< meta charset = " UTF-8" >
< title> 01-jQuery对象进行方法扩展</ title>
< 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>
2. $.extend(object)
* 增强JQeury对象自身的功能 $或者jQuery
< script type = " text/javascript" >
$. extend ( {
max : function ( a, b ) {
return a >= b ? a : b;
} ,
min : function ( a, b ) {
return a <= b ? a : b;
}
} ) ;
var max = $. max ( 2 , 3 ) ;
alert ( max) ;
var min = $. min ( 1 , 2 ) ;
alert ( min) ;
</ script>