今日内容:
1. JQuery
1. 动画
2. 遍历
3. 事件绑定
4. 案例
5. 插件
JQuery 高级
1. 动画
1. 三种方式显示和隐藏元素
1. 默认显示和隐藏方式
1. show([speed,[easing],[fn]])
1.speed:动画的速度,三个预定义('slow','normal','fast'),或表示动画时长毫秒值
2.easing:切换效果,默认值'swing',可选参数'linear'
*swing 先慢,再快,最后慢
3.fn,function,回调函数,在动画执行完之后调用一次
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]])
2. 遍历
1.js for(初始化值;结束循环条件;步长)
2.jq
1.jq对象.each(function(索引,元素){})
this 表示每个元素对象
回调函数返回值: function返回false 结束循环(break)
function返回true 结束本次循环,继续下次循环(continue)
2.$.each(function)
3.for(元素 of 容器对象) 3.0版本以后使用
3. 事件绑定
1.jq的标准事件绑定方式
jq对象.事件方法(回调函数)
当回调函数为空的时候,会触发浏览器默认行为
focus() submit()提交表单
2.on绑定事件/off解除绑定
jq对象.on('事件名称', 回调函数)
jq对象.off('事件名称') 当不写参数的时候,解除所有事件
3.事件切换
jq对象.toggle(fn1, fn2,.....) 依次执行(可循环)参数函数
从1.9版本之后,jq不在支持toggle 所以要用migrate(迁移)插件回复此功能
4. 插件:增强JQuery的功能
1.实现方式:
1. $.fn.extend(对象)
增强jq对象的功能 $('#id').新功能();
2. $.extend(对象)
$.新功能();