1.事件
- DOM加载
- $(document).ready()与window.onload
1.前者jQuery方法在DOM完全就绪时就可以被调用；后者JavaScript方法在页面所有元素被完全加载到浏览器后才执行。
因此jQuery将网页解析为DOM树的速度比把页面中的所有关联文件加载完毕的速度要快很多
存在未加载完毕，已经解析为DOM树，图片的宽高属性不一定有效
2.前者可以多次执行，根据注册的顺序执行。后者之后执行一次，后者覆盖前者
3.前者可以简写为$(function(){})
- 事件绑定
- bind(type[data,],fn)
第一个参数为事件类型
第二个参数为可选，作为event.data属性值传递给事件对象的额外数据对象
第三个参数是用来绑定的处理函数$("#id").bind("mouseover”，function（）{})简写为$("#id").mouseover(function(){})
- 合成事件
- hover(enter,leave)模拟光标悬停
光标移动到元素上，触发enter函数，离开触发第二个函数leave - toggle(fn1,fn2….fn)模拟鼠标连续单击事件
第一次单击触发fn1,第二次单击触发fn2….直到最后一个。随后的每次单击都重复对着几个函数轮番调用 - toggle()切换元素可见状态
无变有，有变无
1 | $(function() { |
- 事件冒泡
多个元素响应同一个事件，执行该事件会从底向上依次执行
- 事件对象function（event）,event只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁
- 停止事件冒泡event.stopPropagation()
- 阻止默认行为event.preventDefault()
实例：当用户名输入为空时，阻止提交1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<head>
<script>
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val()
if(username == ""){
$("#msg").append("<p>文本内容不能为空</p>")
return false //event.preventDefault 阻止默认行为（表单提交）
}
})
})
</script>
</head>
<body>
<form action="test.html">
用户名：<input type="text" id="username"/>
<input type="submit" value="提交" id="sub" />
</form>
<div id="msg"></div>
</body> - 事件捕获
与冒泡相反的过程，并非所有的主流浏览器都支持事件捕获，jQuery不支持。
- 事件对象的属性
1.event.type
2.event.preventDefault()
3.event.stopPropagation()
4.event.target()获取到触发事件的元素
5.event.relatedTarget访问相关元素
6.event.pageX和event.pageY
7.event.which获取鼠标单击时的左（1），中（2），右键（3）；键盘按键；返回数字
8.event.metaKey为键盘事件中获取ctrl按键 - 移除事件
- unbind()
one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除$('#btn').one("click",function(){})
绑定多个时，只会在用户第一次单击时执行，之后毫无作用
- 模拟操作
- trigger()
$(#btn).trigger("click")当页面加载完毕后，就会立刻触发click
也可以简写为$(#btn).click()
触发自定义事件，传入一个参数自定义的事件名
- 其他
bind()的第一个参数可以写多个”mousemove mouseout“,为多个事件类型同时绑定
bind(“click.plugin”)绑定的多个事件类型用命名空间plugin规范起来,如果要删除事件，可以删除指定命名空间
对于相同事件名称，不同命名空间。trigger(“click!”)感叹号的作用是匹配所有不包含在命名中的click方法2.动画
- show()与hide()
hide()会在将display设为none之前，记住原先的display属性值，后面调用show()可以还原
参数可以为”fast“，”normal“，”slow“速度分别为200,400,600毫秒。也可以为数字，不带双引号，单位为毫秒 - fadeIn()与fadeOut()改变元素的不透明度
fadeOut()在一段时间内降低元素的不透明度（消失），fadeIn()相反 - slideUp()和slideDown()改变元素的高度
slideDown()由上至下延伸显示；slideUp()由下至上缩短隐藏自定义动画animate(params,speed,callback)
$(this).animate({left:"500px",height:"200px"},3000)右移500px，放大高度200px会一次同时执行$(this).animate({left:"500px"},3000).animate({height:"200px"},3000)先右移再变高，分开执行
注意：css()方法并不会加入到动画队列，而是立即执行
如果需要css()方法在动画的最后执行，将css放入最后一个动画的回调函数中即可。$(this).animate({left:"500px"},3000).animate({height:"200px"},3000,function(){$(this).css("border","5px soild blue")}
当动画完成之后，执行回调函数体内的代码
停止
停止元素的动画stop([clearQueue],[gotoEnd])
参数1用来是否清空未执行完的动画队列
参数2是否将正在执行的动画跳转到末状态
实例：鼠标移入时变高变宽，移出时变矮变窄1
2
3
4
5
6
7
8
9
10
11
12
13
14$(function() {
$("#panet").hover(function() {
//移入
$(this).stop(true) //传参数true,在移出之后清空移入时未执行完的动画
//避免移出之后还在执行移入的动画
.animate({height:"500px"},4000)
.animate({width:"200px"},3000)
//移出
},function() {
$(this).stop(true)
.animate({height:"20px"},3000)
.animate({width:"90px"},8000)
})
})判断元素是否处于动画状态
1
2
3if(! $(element).is(":animated"){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}延迟delay（）方法将队列中的函数延时执行
交互动画
可见性交互
- toggle(speed,callback)通过改变display值
- slideToggle(speed,callback)通过改变高度
- fadeToggle(speed,callback)通过改变透明度
fadeTo(speed,opacity,callback)将元素的不透明度以渐进的调整到指定值
实例：jQuery实现轮播图（手动）
1 |
|