1、加载DOM:以浏览器加载文档为例,在页面加载完成后,浏览器会通过JavaScript为DOM事件添加事件,在jQuery红使用$(document).ready()方法;
2、执行时机:jQuery中的$(document).ready()方法注册的事件处理程序在DOM完全就绪时就可以被调用;
3、jQuery中的$(document).ready()方法注册的事件,只要DOM完全就绪时就会被调用;
4、避免方法:为onload事件绑定一个处理函数
$(window).load(function() {
//编写代码
}
5、多次使用:
function one() {
alert("one");
}
function two() {
alert("two");
}
$(document).ready(function() {
one();
})
$(document).ready(function() {
two();
}
6、简写方式:$(doxument)可以简写成$()。因为当$()没有参数时,默认参数就是“document”;
7、事件绑定:在文档加载完成后,如果打算为元素绑定事件来完成某些操作,可以使用bind()方法来对匹配元素来进行特定事件的绑定;
8、bind()有3个参数:(1)事件类型,可以使自定义名称;(2)可选参数,作为event.data属性值传递给事件对象的额外数据对象;(3)用来绑定的处理函数;
9、基本效果:
HTML代码:
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是一个优秀的JavaScript库。
</div>
</div>
javascript代码:
$(function() {
$("#panel h5.head").bind("click", function() {
$(this).next().show();
})
})
10、加强效果:
$(function() {
$("#panel h5.head").bind("click", function() {
var $content = $(this).next();
if($content.is(":visible")) {
$content.hide();
} else {
$content.show();
}
})
})
11、改变绑定事件的类型:
$(function() {
$("#panel h5.head").bind("mouseover", function() {
$(this).next().show();
}).bind("mouseover", function() {
$(this).next().hide();
})
})
12、简写绑定时间:
$(function() {
$("#panel h5.head").mouseover(function() {
$(this).next().show();
}).mouseover(function() {
$(this).next().hide();
})
})
13、合成事件:有两个,hover()方法和toggle()方法;
14、hover()方法:
$(function() {
$("#panel h5.head").hover(function() {
$(this).next().show();
}.function() {
$(this).next().hide();
})
})
15、toogle方法:
$(function() {
$("#panel h5.head").toggle(function() {
$(this).next().show();
}.function() {
$(this).next().hide();
})
});
16、再次加强事件:
$(function() {
$("#panel h5.head").toggle(function() {
$(this).addClass("highligt");
$(this).next().show();
}.function() {
$(this).removeClass("highhligt");
$(this).next().hide();
});
});
17、事件冒泡:在页面上可以有多个事件,也可以多个元素响应通一个事件:
HTML代码:
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
JavaScript代码:
$(function() {
$('span').bind("click", function() {
var txt = $('#msg').html() + "<p>内层span元素被单击.</p>";
$('#msg').html(txt);
})
$('#content').bind("click", function() {
var txt = $('#msg').html() + "<p>外层div元素被单击.</p>";
$('#msg').html(txt);
})
$("body").bind("click", function() {
var txt = $('#msg').html() + "<p>body元素被单击</p>.";
$('#msg').html(txt);
});
})
18、事件冒泡引发的问题:本来只想触发最内层元素的click事件,然后这个元素外层的元素也会被触发;
19、触发自定义事件:
为元素绑定一个“myClick”事件:
$('#btn').bind("myClick", function() {
$(‘#test’).append("<p>我的自定义事件.</p>");
})
想要触发:
$('#btn').trigger("myClick")
还有一些明天补充,今天太困了