JQuery 高级
1. 动画
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]])
<!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" ) ;
}
function showFn ( ) {
$ ( "#showDiv" ) . fadeIn ( "slow" ) ;
}
function toggleFn ( ) {
$ ( "#showDiv" ) . fadeToggle ( "slow" ) ;
}
</ 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. 遍历
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 容器对象)
<!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 ( li of citys) {
alert ( $ ( li) . html ( ) ) ;
}
} ) ;
</ script>
</ head>
< body>
< ul id = " city" >
< li> 北京</ li>
< li> 上海</ li>
< li> 天津</ li>
< li> 重庆</ li>
</ ul>
</ body>
</ html>
3. 事件绑定
1. jquery标准的绑定方式
* jq对象.事件方法(回调函数);
* 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
* 表单对象.submit();//让表单提交
<!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 ( ) {
alert ( "我要获得焦点了..." )
} ) ;
</ script>
</ head>
< body>
< input id = " name" type = " text" value = " 绑定点击事件" >
</ body>
</ html>
2. on绑定事件/off解除绑定
* jq对象.on("事件名称",回调函数)
* jq对象.off("事件名称")
* 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
<!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 ( ) ;
} ) ;
} ) ;
</ script>
</ head>
< body>
< input id = " btn" type = " button" value = " 使用on绑定点击事件" >
< input id = " btn2" type = " button" value = " 使用off解绑点击事件" >
</ body>
</ html>
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>
< 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" , "pink" ) ;
} ) ;
} ) ;
</ 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>
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 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" ,
] ;
var startId;
var index;
$ ( function ( ) {
$ ( "#startID" ) . prop ( "disabled" , false ) ;
$ ( "#stopID" ) . prop ( "disabled" , true ) ;
$ ( "#startID" ) . click ( function ( ) {
startId = setInterval ( function ( ) {
$ ( "#startID" ) . prop ( "disabled" , true ) ;
$ ( "#stopID" ) . prop ( "disabled" , false ) ;
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" >
< input
id = " stopID"
type = " button"
value = " 点击停止"
style =" width : 150px; height : 150px; font-size : 22px" >
</ body>
</ html>
5. 插件:增强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
<!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 ( 4 , 3 ) ;
var min = $. min ( 1 , 2 ) ;
alert ( min) ;
</ script>
</ head>
< body>
</ body>
</ html>