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>
5. 插件:增强JQuery的功能
1. 实现方式:
1. $.fn.extend(object)
* 增强通过Jquery获取的对象的功能 $("#id")
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" >
$. 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>
< ! 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>