jQuery 学习笔记(三)
ready 函数 : 当前dom加载完就执行
$(document).ready(function(){})
与 window.onLoad = function( ){ }的执行时间不同:
ready 还是dom加载完就执行
window.onLoad 不仅需要dom加载完还需要所有外联引入的资源加载完
on函数 绑定事件:
$('').on('click',function(){ console.log(this)}) 返回的this是原生类型的dom
$('li').click(function({ console.log(this) })) click函数 点击返回this也是原生类型
全局this与局部this的处理:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var obj = {
bindEvent : function(){
var self = this;
$('ul').on('click','li',function(){
console.log('213');
self.chanageCss(this);
})
},
chanageCss: function(dom){
$(dom).css('backgroundColor','red')
}
}
obj.bindEvent();
</script>在触发点击事件后还想用 obj的changeCss 函数
但是因为on 函数内部 this指向事件源对象,
所以bindEvent的作用域类可以在绑定前将 this 存起来 方便之后调用
效果:
off 函数 注意 off() 不传参数是移除所有绑定事件 ,传的参数越多,移除事件越准确
trigger 函数 在js中 主动触发事件:
示例: 三秒后主动触发 第一个li的点击事件
var obj = {
bindEvent : function(){
var self = this;
$('ul').on('click','li',function(){
console.log('213');
self.chanageCss(this);
})
},
chanageCss: function(dom){
$(dom).css('backgroundColor','red')
}
}
obj.bindEvent();
setTimeout(() => {
$('ul li').eq(0).trigger('click');
}, 3000);三秒后结果:
on 函数 还可以自定义 事件 如下:
tset 是随便写的事件类型:
展示结果:
在自定义类型想在触发时传参 必须添加 e 来接受事件源对象,
第二个参数才用来传参,如果不写e,将会把事件源对象传到data上
hover 函数 鼠标覆盖事件: hover 函数 的参数是两个 函数,第一个函数代表进入,第二个代表离开
效果:初始为绿色,进入为粉色, 离开还原绿色
toggle() 函数 切换状态 如果当前状态是隐藏,就显示, 如果是显示就隐藏
$('li').toggle();
toggle( ) 函数可以 添加一个参数 true/false
添加true 则全部显示,
false 全隐藏
dblclick 事件 双击事件
$('li').on('dblclick',function(){ console.log('double') }
鼠标和键盘事件:
keydown : 按键落下触发 判断键盘事件最好写在window上
$(window).on('keydown',function(e){alert(e.ketCode)})
keypress :按键松开
keyup :按键弹起
mousedown
mouseenter
mouseleave
mousemove
mouseout
mouseover
mouseup
scroll
事件源对象 属性:
e.target 会返回触发事件的dom ,原生dom格式
e.pageX 和e.pageY 触发事件的文档坐标
e.preventDefault 阻止默认事件
e.stopPropagation 阻止事件冒泡
e.type 事件类型 返回 'click' ,'keydown' 等等
show () 函数 与 hide() 函数 与 toggle() 函数
show() ;添加参数 speed 可以让隐藏显得更加平滑
hide() 函数:添加参数 speed 可以让隐藏显得更加平滑
toggle () 函数
向 Toggle 事件绑定两个或更多函数
当指定元素被点击时，在两个或多个函数之间轮流切换。
如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。
$(selector).toggle(function1(),function2(),functionN(),...)
切换 Hide() 和 Show()
检查每个元素是否可见。
如果元素已隐藏，则运行 show()。如果元素可见，则元素 hide()。这样就可以创造切换效果。
$(selector).toggle(speed,callback)
滑动类型的隐藏和展示:
slideDown 下落类型的显示
slideUp 收起类型的隐藏
slideToggle :通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素：
$(".btn1").click(function(){
$("p").slideToggle();
});
$(selector).slideToggle(speed,callback)
淡入淡出类型的隐藏和展示:
fadeOut() 使用淡出效果来隐藏一个 <p> 元素：
$(".btn1").click(function(){
$("p").fadeOut();
});
fadeIn() 淡入的显示
$(".btn2").click(function(){
$("p").fadeIn();
});
fadeToggle( ) 点击切换淡入淡出
$("#div3").fadeToggle(3000);
自定义动画:
有两种语法模式:
语法一:
$(selector).animate(styles,speed,easing,callback)
style 写成对象形式 {height:"300px"}
语法二:
$(selector).animate(styles,options)
style 和options 都写成对象形式
stop（） 函数 终止当前现在执行的动画
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},2000);
$("#box").animate({height:100},2000);
});
$("#stop").click(function(){
$("#box").stop();
});
});
</script>
</head>
<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>delay（） 动画延时
$(document).ready(function(){
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(800).fadeIn();
$("#div4").delay(2000).fadeIn();
$("#div5").delay(4000).fadeIn();
});
});上一篇： java 抽象类与接口的区别总结
下一篇： zTree实现页面数据筛选