一、事件
事件绑定的方法有两种：
- 绑定到元素
- 查找元素后绑定事件
方法1：绑定到元素
<body>
<p onclick='func1()'>点击我</p>
</body>
<script type="text/javascript">
function func1(){
alert('123');
}
方法2:查找到元素后绑定事件
<body>
<p>点击我</p>
</body>
<script type="text/javascript">
$('p').click(function(){
alert('123');
});
</script>
说明：方法2的优点是不用在元素里面进行事件添加，相当于事件和元素分离。
1、浏览器事件
resize（）//只要在浏览器窗口的大小改变时，根据不同的浏览器，该消息被追加到<div id="log">一次或多次。
<body>
<p id='log'>点击我</p>
</body>
<script type="text/javascript">
$(window).resize(function() {
$('#log').append('<div>Handler for .resize() called.</div>');
});
</script>
2、scroll（）//当用户在元素内执行了滚动操作，就会在这个元素上触发scroll事件。
$('#target').scroll(function() {
$('#log').append('<div>Handler for .scroll() called.</div>');
});
2、文档加载
当DOM准备就绪时，执行的一个函数。
$( document ).ready(function() { // Handler for .ready() called.});等价于
$(function() { // Handler for .ready() called.});3、事件绑定
bind(事件名称，函数）和unbind（‘click’，function(){}）
$('#foo').bind('click', function() { alert('User clicked on "foo."');});on（）和off（）
<!DOCTYPE html> <html> <head> <style> button { margin:5px; } button#theone { color:red; background:yellow; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button id="theone">Does nothing...</button> <button id="bind">Add Click</button> <button id="unbind">Remove Click</button> <div style="display:none;">Click!</div>
<script>
//定义函数aClick，然div显示，并展示慢慢消失效果。 function aClick() { $("div").show().fadeOut("slow"); }
//绑定点击函数，针对#theone绑定aClick函数，并把内容改为‘Can Click!’ $("#bind").click(function () { $("body").on("click", "#theone", aClick) .find("#theone").text("Can Click!"); });
//找到unbind元素并绑定click事件，执行aClick函数,找到#theone元素然后把内容改为‘Does nothing.....’ $("#unbind").click(function () { $("body").off("click", "#theone", aClick) .find("#theone").text("Does nothing..."); }); </script> </body> </html>
4、表单事件
- .blur() //为 "blur" 事件绑定一个处理函数，或者触发元素上的 "blur" 事件
- .change()//"change" 事件绑定一个处理函数，或者触发元素上的 "change" 事件。此事件仅限用于
<input>元素，<textarea>和<select>元素。 - .focus()//"focus" 事件绑定一个处理函数，或者触发元素上的 "focus" 事件。此事件起初适用于有限的元素，比如表单元素（
<input>,<select>等）和链接元素（<a href>）。 - .select()//"select" 事件绑定一个处理函数，或者触发元素上的该事件。此事件只能用在
<input type="text">和<textarea>。 - .submit()//"submit" 事件绑定一个处理函数，或者触发元素上的该事件。它只能绑定在
<form>元素上。以下几种情况会导致表单被提交：用户点击了<input type="submit">,<input type="image">, 或者<button type="submit">，或者当某些表单元素获取焦点时，敲击Enter（回车键），都可以提交。
5、键盘事件
- .keydown()
- .keypress()
- .keyup()
6、鼠标事件
- .click()
- .contextmenu()
- .dblclick()
- .focusin()
- .focusout()
- .hover()
- .mousedown()
- .mouseenter()
- .mouseleave()
- .mousemove()
- .mouseout()
- .mouseover()
- .mouseup()
- .toggle()
7、事件对象
- event.currentTarget
- event.data
- event.isDefaultPrevented()
- event.isImmediatePropagationStopped()
- event.isPropagationStopped()
- event.namespace
- event.pageX
- event.pageY
- event.preventDefault()
- event.relatedTarget
- event.result
- event.stopImmediatePropagation()
- event.stopPropagation()
- event.target
- event.timeStamp
- event.type
- event.which
二、效果
1、基础
- .hide()//隐藏
- .show()//显示
- .toggle()//切换（有就去掉，没有就增加）
2、自定义
- .animate()
- .clearQueue()
- .delay()
- .dequeue()
- jQuery.dequeue()
- .finish()
- jQuery.fx.interval
- jQuery.fx.off
- .queue()
- jQuery.queue()
- .stop()
3、渐变
- .fadeIn()
- .fadeOut()
- .fadeTo()
- .fadeToggle()
4、滑动
- .slideDown()
- .slideToggle()
- .slideUp()