JQuery高级
1.动画效果
三个参数
speed:执行速度
slow
fast
毫秒值,自定义执行时间
easing:切换效果
swing:慢-快-慢(默认)
linear:匀速切换
fn:动画完成时执行的函数
三种方式
1.默认显示和隐藏方式
show():显示
hide():隐藏
toggle():隐藏和显示切换
2.滑动显示和隐藏方式
slideDown():显示
slideUp():隐藏
slideToggle():切换
注意:在使用滑动显示的效果时,需要给实现动画的标签设置宽度!!!
3.淡入淡出显示和隐藏方式
fadeIn():显示
fadeOut():隐藏
fadeToggle():切换
***2.遍历
this的关键字
this和JQuery对象没有任何关系,this通常情况下代表是js的对象
1.js的遍历
foe(初始化值;循环结束条件;步长)
2.JQuery遍历方式
**1.jq对象.each(callback)
callback:回调函数
语法:jq对象.each(function(i,n){
代码
return true/false;
})
i:当前所引
n:当前索引所对应的js对象
return true:相当于continue-->跳过本次循环
return false:相当于break-->结束循环
**2.$.each(object,[callback])-->全局遍历方式
语法:$.each(jq对象/js数组对象,function(i,n))
$:JQuery的全局对象,可以比作Java中的类名调用静态方法
i:当前所引
n:当前索引所对应的js对象
return true:相当于continue-->跳过本次循环
return false:相当于break-->结束循环
3.for...of(很少用,JQuery 3.0以上版本)
3.事件绑定
事件冒泡:事件穿透
1.JQuery标准的绑定方式
jq对象.事件方法(回调函数)
如:1.$("#name").click(function(){})
2.$("#name").mouseover(function){})
*js常用事件,jq绑定时去掉on即可
onclick
onload
onfocus
onblur
onsubmit 默认return true(默认提交) 如果要控制不自动提交,return false
onchange
onkeydown
onkeyup
2.on绑定事件/off解除绑定
jq对象.on("事件名称",回调函数)
jq对象.off("事件名称")
off内传递参数,解除指定事件
不传参数,删除组件内所有事件
3.事件切换:toggle
jq对象.toggle(fn1,fn2...)
使用高版本时,需要引入插件,放在jquery的js文件的下面:
jquery-migrate-1.0.0.js
4.案例
案例1 广告显示和隐藏
使用定时器
案例2 抽奖
5.插件:增强JQuery功能
实现方式
1.JQuery.fn.extend(object)
增强通过JQuery获取的对象的功能
2.JQuery.extend(object)
增强JQuery对象自身的功能
|
|
收藏
淘帖
踩
