1. .ready() 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready() 注意事项：
a. 确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件
b. 可以在同一个页面中无限次地使用$(document).ready()事件; 按其顺序执行！
2.on(events,[selector],[data],fn) 选择元素上绑定一个或多个事件的事件处理函数
<button>测试事件<span>span</span></button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$('button').on('click mouseover', 'span', '我爱你', function (e) {
console.log(e.data); // 我爱你 ^_^
})
</script>
3.off(events,[selector],[fn]) 在选择元素上移除一个或多个事件的事件处理函数
off() 方法移除用.on()绑定的事件处理程序。
4.one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
在每个对象上，这个事件处理函数只会被执行一次
$("p").one("click", function(){
alert( $(this).text() );
});
5.trigger(type,[data]) // 暂时有点不懂 在每一个匹配的元素上触发某类事件。
在每一个匹配的元素上触发某类事件。
6.triggerHandler(type, [data]) // 暂时有点不懂
会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
$("#new").click(function(){
$("input").triggerHandler("focus");
});
7.hover([over,]out)
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
8.toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
$("p").toggle(5000,'linear', function () { // fast slow normal
alert("Animation Done.");
});
9.blur([[data],fn]) 当元素失去焦点时触发 blur 事件。
$("p").blur( function () { alert("Hello World!"); } );
10.change([[data],fn]) 当元素的值发生改变时，会发生 change 事件。
$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
11.click([[data],fn]) 这个函数会调用执行绑定到click事件的所有函数。
$("p").click( function () { $(this).hide(); });
12.dblclick([[data],fn]) 当双击元素时，会发生 dblclick 事件。
$("p").dblclick( function () { alert("Hello World!"); });
13.error([[data],fn]) 当元素遇到错误（没有正确载入）时，发生 error 事件。
例子:
在服务器端记录JavaScript错误日志:
$(window).error(function(msg, url, line){
jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});
例子:隐藏JavaScript错误:
$(window).error(function(){
return true;
});
14.focus([[data],fn]) 当元素获得焦点时，触发 focus 事件。
例子:
当页面加载后将 id 为 'login' 的元素设置焦点:
$(document).ready(function(){
$("#login").focus();
});
例子:
使人无法使用文本框:
$('input[type="text"]').focus(function(){$(this).blur()})
15.focusin([data],fn) 当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
例子: // 可以做输入框聚焦后,兄弟元素改变的操作哦
<p><input type="text" /> <span>focusout fire</span></p>
$("p").focusin(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
16.focusout([data],fn) 当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
例子:
失去焦点后会触发动画:
<p><input type="text" /> <span>focusout fire</span></p>
$("p").focusout(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
17.keydown([[data],fn]) 当键盘或按钮被按下时，发生 keydown 事件。
例子:在页面内对键盘按键做出回应，可以使用如下代码:
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// 常用keyCode： 空格 32 Enter 13 ESC 27
}
});
18.keypress([[data],fn]) 当键盘或按钮被按下时，发生 keypress 事件。
keypress 事件与 keydown 事件类似。
19.keyup([[data],fn]) 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
当按下按键时，改变文本域的颜色：
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
20.mousedown([[data],fn]) 当鼠标指针移动到元素上方，并按下鼠标按键时会发生 mousedown 事件。
注意:
mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
例子:
当按下鼠标按钮时，隐藏或显示元素：
$("button").mousedown(function(){
$("p").slideToggle();
});
21.mouseenter([[data],fn]) 当鼠标指针穿过元素时，会发生 mouseenter 事件。
与mouseover 不同的是,仅当鼠标移到对应的元素上才会反应;后者则在其子元素上也会触发
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
22.mouseleave([[data],fn]) 当鼠标指针离开元素时，会发生 mouseleave 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
23.mousemove([[data],fn]) 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
例子:
获得鼠标指针在页面中的位置：
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
24.mouseout([[data],fn]) 当鼠标指针从元素(子元素也算)上移开时，发生 mouseout 事件。
25.mouseover([[data],fn]) 当鼠标指针位于元素(子元素也算)上方时，会发生 mouseover 事件。
26.mouseup([[data],fn]) 当在元素上放开鼠标按钮时，会发生 mouseup 事件。
$("button").mouseup(function(){
$("p").slideToggle();
});
27.resize([[data],fn]) 当调整浏览器窗口的大小时，发生 resize 事件。
$(window).resize(function() {
$('span').text(x+=1);
});
28.scroll([[data],fn]) 当用户滚动指定的元素时，会发生 scroll 事件
$(window).scroll( function() { /* ...do something... */ } );
$("div").scroll(function() {
$("span").text(x+=1);
});
29.select([[data],fn]) 当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
$(":text").select( function () { /* ...do something... */ } );
30.submit([[data],fn]) 当提交表单时，会发生 submit 事件。
例子:如果你要阻止表单提交
$("form").submit( function () {
return false;
} );
~~~~~~~~~~~~~~~~效果部分~~~~~~~~~~~~~~~~~
1. slideDown([speed],[easing],[fn])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn在动画完成时执行的函数，每个元素执行一次。
$("p").slideDown("slow",'linear',function(){ // [2000] ['fast' | 'slow' | 'normal']
alert('animate完毕')
});
2.slideUp([speed,[easing],[fn]])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
$("p").slideUp("fast",'linear',function(){ // [2000] ['fast' | 'slow' | 'normal']
alert("Animation Done.");
});
3.slideToggle([speed],[easing],[fn])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
$("p").slideToggle("fast",function(){
alert("Animation Done.");
});
4.fadeIn([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
("p").fadeIn("fast",function(){
console.log("Animation Done.");
});
5.fadeOut([speed],[easing],[fn]) // 同12
$("p").fadeOut("fast",function(){
alert("Animation Done.");
});
6.fadeTo([[speed],opacity,[easing],[fn]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
$("p").fadeTo("fast", 0.25, function(){
console.log("Animation Done.");
});
7.fadeToggle([speed,[easing],[fn]])
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
$("p").fadeToggle("fast",function(){
console.log("Animation Done.");
});
8.animate(params,[speed],[easing],[fn])
1.这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性
2.而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
例子：
<button id="go"> Run</button>
<div id="block">Hello!</div>
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
例子2：
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
9.stop([clearQueue],[jumpToEnd]) 停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
queue:用来停止动画的队列名称
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
10.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目。
duration:延时时间，单位：毫秒
queueName:队列名词，默认是Fx，动画队列。
例子：
在.slideUp() 和 .fadeIn()之间延时800毫秒。
$('#foo').slideUp(300).delay(800).fadeIn(400);
11.finish( [queue ] ) 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
queue : 停止动画队列中的名称。
$("#complete").click(function(){
$("div").finish();
});
12.jQuery.fx.off 关闭页面上所有的动画。
执行一个禁用的动画
jQuery.fx.off = true;
$("input").click(function(){
$("div").toggle("slow");
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
