一,加载DOM
JavaScript中会使用window.onload,而在jQuery中则会使用$(document).ready()方法
这两个方法有什么不同呢?
1.执行时机不同,对于window.onload方法是在网页所有的元素(包括元素的所有关联文件)完全
加载到浏览器后才执行;而$(document).ready()则是在DOM载入就绪时,就可以被调用,例如
很可能图片还未加载完毕
2.多次使用,$(document).ready()可以多次使用
3.简写方式,$(function(){}) 或者$().ready(function(){})
二,事件绑定
在文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bing()方法来匹配元素进行特定
事件绑定,bind()方法的调用格式:
bind(type ,[data] ,fn);
$(function(){
$("#panel h5.head").bind("click",function(){
$(this).next().show(); //$(this).next():获取“内容”元素
})
})
改变绑定事件类型:
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
})
})
简写绑定事件:
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
})
三,合成事件
1.hover() 模拟光标悬停时间
$(function(){
$("#panel h5.head").hover(function(){
$(this).next().show();
}).function(){
$(this).next().hide();
})
})
2,toggle() 模拟连续单击事件
//如果元素是隐藏的,单击切换为显示;如果显示的,切换为隐藏的
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().toggel();
}).function(){
$(this).next().toggel();
})
})
四,时间冒泡
1,什么是冒泡呢?
答: 假设网页上有两个元素,一个元素嵌套在另一个元素之中,并且都绑定了click事件,事件会按照从里到外(dom的层次结构)
像水泡一样的向上直至顶端。
2,停止事件冒泡
$('span').bind("click",function(event){
var txt=$('#msg').html()+"<p>内层span元素</p>");
$('#msg').html(txt);
event.stopPropagation(); //停止事件冒泡
3,阻止默认行为
例如,超链接跳转,单击“提交"按钮后表单会提交
必要时,可以使用preventDefault()方法来阻止。
五,事件对象的属性
1,event.type 获取事件类型
$('a').click(function(event){
alert(event.type);//获取事件类型
return false;//组织链接跳转
}); //click
2,event.preventDefault()
3,event.stopProgation()
4,event.target 获取触发事件的元素
$(“a[href=' http://google.com']").click(function(event){
var tg=event.target;//获取事件对象
alert(tg.href);
return false;//组织链接跳转
}); //click
5,event.relatedTarget 访问相关元素
6,event.pageX和event.pageY 获取光标相对于页面的x和y坐标
IE中:event.x Firefox:event.pageX
7,event.which 获取鼠标单击事件中的左,中,右;键盘事件中,获取键盘的按键
$("a"),mousedown(function(e){
e.which;//1,左;2,中,3,右
})
$("input"),keyup(function(e){
e.which;
})
8,event.metaKey 获取<ctrl>按键
六,移除事件
1,移除按钮元素上以前注册的事件
$('#btn').unbind("click");
2,移除按钮其中一个事件
$('#delTwo').unbind("click",myFun2);
七,操作模拟
trigger()