学习目标:
学会如何使用jQuery的动画效果 学会如何进行遍历和事件绑定 熟练应用jQuery进行相关复杂操作
学习内容:
一、jQuery高级
1、动画:三种方式显示和隐藏元素
默认显示和隐藏元素
show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed,[easing],[fn]]) 滚动显示和隐藏元素
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:在动画完成时执行的函数,每个元素执行一次
2、遍历
js遍历方式
jq遍历方式
jq对象.each(callback) $.each(object,[callback]) for…of jQuery3.0之后提供的版本
3、事件绑定
jQuery标准的绑定方式
jq对象.事件方法(回调函数); 如果调用事件方法,不传递回调函数,则触发浏览器默认行为
on绑定事件/off解绑事件
jq对象.on(事件,回调函数); jq对象.off(事件); 如果不传递事件名称,则解绑所有的事件 事件切换:toggle
jq对象.toggle(fn1,fn2…); 多次点击依次执行传递的函数
4、案例
广告显示和隐藏
需求
当页面加载完成后,3秒后,自动显示广告 广告显示5秒后,自动消失 分析
使用定时器来完成 setTimeOut()执行一次的定时器 jQuery的显示和隐藏的动画效果其实就是控制display属性 使用show/hide相关方法完成广告的显示 抽象
5、插件:增强jQuery功能
实现方式
$.fn.extend(object);
增强通过jQuery获取对象的功能 $("#id") $.extend(object);
学习产出:
1、 动画
<!DOCTYPE html>
< html>
< head>
< meta charset = " UTF-8" >
< title> Insert title here</ title>
< script type = " text/javascript" src = " ../js/jquery-3.3.1.min.js" > </ script>
< script>
function hideFn ( ) {
$ ( "#showDiv" ) . fadeOut ( "slow" , "swing" ) ;
}
function showFn ( ) {
$ ( "#showDiv" ) . fadeIn ( "slow" , "swing" ) ;
}
function toggleFn ( ) {
$ ( "#showDiv" ) . fadeToggle ( "slow" , "swing" ) ;
}
</ script>
</ head>
< body>
< input type = " button" value = " 点击按钮隐藏div" onclick = " hideFn()" >
< input type = " button" value = " 点击按钮显示div" onclick = " showFn()" >
< input type = " button" value = " 点击按钮切换div显示和隐藏" onclick = " toggleFn()" >
< div id = " showDiv" style =" width : 300px; height : 300px; background : pink" >
div显示和隐藏
</ div>
</ body>
</ html>
2、遍历
<!DOCTYPE html>
< html>
< 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 ( ) {
var citys = $ ( "#city li" ) ;
for ( var i = 0 ; i < citys. length; i++ ) {
alert ( i+ ":" + citys[ i] . innerHTML) ;
}
citys. each ( function ( index, element) {
if ( "上海" == $ ( this ) . html ( ) ) {
return false ;
}
alert ( index+ ":" + $ ( element) . html ( ) ) ;
} ) ;
$. each ( citys, function ( ) {
alert ( $ ( this ) . html ( ) ) ;
} ) ;
for ( li of citys) {
alert ( $ ( li) . html ( ) ) ;
}
} ) ;
</ script>
</ head>
< body>
< ul id = " city" >
< li> 北京</ li>
< li> 上海</ li>
< li> 天津</ li>
< li> 重庆</ li>
</ ul>
</ body>
</ html>
3、 事件绑定与解绑
<!DOCTYPE html>
< html>
< 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 ( ) {
$ ( "#name" ) . focus ( ) ;
} )
</ script>
</ head>
< body>
< input id = " name" type = " text" value = " 绑定点击事件" >
</ body>
</ html>
<!DOCTYPE html>
< html>
< 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 ( ) {
$ ( "#btn" ) . on ( "click" , function ( ) {
alert ( "我被点击了!" ) ;
} ) ;
$ ( "#btn2" ) . click ( function ( ) {
$ ( "#btn" ) . off ( "click" ) ;
} ) ;
} ) ;
</ script>
</ head>
< body>
< input id = " btn" type = " button" value = " 使用on绑定点击事件" >
< input id = " btn2" type = " button" value = " 使用off解绑点击事件" >
</ body>
</ html>
<!DOCTYPE html>
< html>
< head>
< meta charset = " UTF-8" >
< title> </ title>
< 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" type = " text/javascript" charset = " utf-8" > </ script>
< script type = " text/javascript" >
$ ( function ( ) {
$ ( "#btn" ) . toggle ( function ( ) {
$ ( "#myDiv" ) . css ( "backgroundColor" , "green" ) ;
} , function ( ) {
$ ( "#myDiv" ) . css ( "backgroundColor" , "yellow" ) ;
} )
} )
</ script>
</ head>
< body>
< input id = " btn" type = " button" value = " 事件切换" >
< div id = " myDiv" style =" width : 300px; height : 300px; background : pink" >
点击按钮变成绿色,再次点击黄色
</ div>
</ body>
</ html>
4、案例1:广告显示和隐藏
<!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>
5、案例2:抽奖
<!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 img = [ "../img/man00.jpg" ,
"../img/man01.jpg" ,
"../img/man02.jpg" ,
"../img/man03.jpg" ,
"../img/man04.jpg" ,
"../img/man05.jpg" ,
"../img/man06.jpg" ] ;
$ ( function ( ) {
$ ( "#startID" ) . prop ( "disabled" , false ) ;
$ ( "#stopID" ) . prop ( "disabled" , true ) ;
var startId;
var index;
$ ( "#startID" ) . click ( function ( ) {
$ ( "#startID" ) . prop ( "disabled" , true ) ;
$ ( "#stopID" ) . prop ( "disabled" , false ) ;
startId = setInterval ( function ( ) {
index = Math. floor ( Math. random ( ) * 7 ) ;
$ ( "#img1ID" ) . prop ( "src" , img[ index] )
} , 20 ) ;
} ) ;
$ ( "#stopID" ) . click ( function ( ) {
$ ( "#startID" ) . prop ( "disabled" , false ) ;
$ ( "#stopID" ) . prop ( "disabled" , true ) ;
clearInterval ( startId) ;
$ ( "#img2ID" ) . prop ( "src" , img[ 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()" >
< script language = ' javascript' type = ' text/javascript' >
var imgs = [
"../img/man00.jpg" ,
"../img/man01.jpg" ,
"../img/man02.jpg" ,
"../img/man03.jpg" ,
"../img/man04.jpg" ,
"../img/man05.jpg" ,
"../img/man06.jpg"
] ;
</ script>
</ body>
</ html>
6、01-jQuery对象进行方法扩展
<!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>
7、02-jQuery全局进行方法扩展
<!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" >
$. 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 , 8 ) ;
alert ( min) ;
</ script>
</ head>
< body>
</ body>
</ html>