动画
1.显示,隐藏
显示,隐藏 show() hide() toggle()
$(selector).show(speed,callback);
$(selector).hide(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。 1.9版本之后，该方法已取消
2.滑动,滚动
滑动,滚动 slideDown() slideUp() slideToggle()
jQuery slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
3.淡入淡出
淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
4.自定义动画
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，
要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
jQuery animate() - 操作多个属性
请注意，生成动画的过程中可同时使用多个属性：//但是不可以改变背景色 jQ中没有颜色动画
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：
停止动画
$(selector).stop() //true 停止多个动画 false 停止一个动画
5.列队动画
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
自定义实现列队动画的方式，有两种：
1.通过连缀或顺序来实现列队动画。
2.在回调函数中再执行一个动画；
如果是同一个元素，可以依次顺序或连缀调用。
如果是不同元素，可以使用回调函数。
但有时列队动画太多，回调函数的可读性大大降低。
//连缀无法实现按顺序列队
$('#box').slideUp('slow').slideDown('slow').css('background','orange');
注意：如果是动画方法，连缀可以实现依次列队，
而.css()方法不是动画方法，会在一开始传入列队之前。
那么，可以采用动画方法的回调函数来解决。
//使用回调函数，强行将.css()方法排队到.slideDown()之后
$('#box').slideUp('slow').slideDown('slow',function(){
$(this).css('background','orange');
});
如果这样的话，当列队动画繁多的时候，可读性不但下降，而且原本的动画方法不够清晰。
所以，我们的想法是每个操作都是自己独立的方法。那么 jQuery 提供了一个类似于回调函数的方法：.queue()。
//使用.queue()方法模拟动画方法跟随动画方法之后
$('#box').slideUp('slow').slideDown('slow').queue(function(){
$(this).css('background','orange');
});
queue() 方法显示被选元素上要执行的函数队列。
队列是一个或多个等待运行的函数。
queue() 方法通常与 dequeue() 方法一起使用。
一个元素可以有若干队列。大部分通常只有一个，“fx” 队列，即默认的 jQuery 队列。
dequeue() 方法从队列中移除下一个函数，然后执行函数。
队列是一个或多个等待运行的函数。
dequeue() 方法通常与 queue() 方法一起使用。
一个元素可以有若干队列。大部分通常只有一个，“fx” 队列，即默认的 jQuery 队列。
注意：您应该确保 dequeue() 方法在通过 queue() 添加一个函数之后被调用，
以便允许要继续的进程。
clearQueue() 方法从尚未运行的队列中移除所有项目。
请注意当函数开始运行时，它会一直运行直到完成。
相关方法：
queue() - 演示排队的函数
dequeue() - 从队列移除下一个函数，然后执行函数
6.动画相关方法
很多时候需要停止正在运行中的动画，jQuery 为此提供了一个.stop()方法。
stop() 方法为被选元素停止当前正在运行的动画。
$(selector).stop(stopAll,goToEnd)
参数 描述
stopAll 可选。布尔值，规定是否停止被选元素的所有加入队列的动画。默认是 false。
goToEnd 可选。布尔值，规定是否立即完成当前的动画。默认是 false。
注意：第一个参数表示是否取消列队动画，默认为 false。
如果参数为 true，当有列队动 画的时候，会取消后面的列队动画。
第二参数表示是否到达当前动画结尾，默认为 false。
如果参数为 true，则停止后立即到达末尾处
有时在执行动画或列队动画时，需要在运动之前有延迟执行，
jQuery 为此提供了.delay() 方法。
这个方法可以在动画之前设置延迟，也可以在列队动画中间加
delay() 方法对队列中的下一项的执行设置延迟。
语法
$(selector).delay(speed,queueName)
参数 描述
speed 可选。规定延迟的速度。
可能的值：
毫秒
"slow"
"fast"
queueName 可选。规定队列的名称。
默认是 "fx"，标准效果队列。
过滤器:animated，这个过滤器可以判断出当前 运动的动画是哪个元素
:animated 选择器选取当前的所有动画元素。
语法
$(":animated")
7.动画全局属性
jQuery.fx.interval 属性用于改变以毫秒计的动画运行速率。
默认值是 13 毫秒。该属性常用于修改动画运行的每秒帧数。
降低这个值能够使动画在更快的浏览器中运行得更流畅，但这么做会影响性能 和 CPU。
注意：由于 jQuery 使用一个全局的间隔时间，
为了使该属性生效，动画应该不在运行或者首先停止所有动画。
语法
jQuery.fx.interval = milliseconds;
参数 描述
milliseconds 必需。规定以毫秒计的动画运行速率。默认是 13 毫秒。
jQuery.fx.off 属性用于对所有动画进行全局禁用或启用。
默认值是 false，它允许动画正常运行。当设置为 true 时，将禁用所有动画方法，这样会把元素设置为其最
后的状态，而不是显示效果。
提示：如需简化代码，可以使用 $.fx.off 来代替 jQuery.fx.off。
语法
jQuery.fx.off = true|false;
参数 描述
true 规定应该禁用动画。
false 默认。规定应该启用动画。
插件
插件是jQuery原型对象上扩展出来的一种新的方法（method）。插件一旦生效，所有的jQuery对象都将拥有该方法。
插件是对集合中所有元素的一次处理操作.
1.jQuery.extend扩展
jQuery.extend方法
静态方法，通常用来制作工具方法
用于扩展jQuery类本身，将对象合并到jQuery的全局对象中。
为类添加新的方法
//jQuery.extend({})
$.extend({
"minValue":function(a,b){
return a<b?a:b;//比较两个值,返回较小的值
},
"maxValue":function(){
return a>b?a:b;//比较两个值,返回较大的值
}
});
var a=2,b=5;
var maxV=$.maxValue(a,b);
var minV=$.minValue(a,b);
console.log("maxV:",maxV,"minv:",minV);
2.jQuery.fn.extend扩展元素方法
基本语法：$.fn.extend()
将src合并到元素实例的方法中。扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
//jQuery.fn.extend()
$.fn.extend({
myBold:function(){
console.log("this:",this);
return this.css({fontWeight:"bold"});
}
})
$("#d1").myBold();
$.fn.myColor=function(){
console.log("this:",this);
return this.css({color:"red"});
}
$("#d1").myColor();
3.封装插件
jQuery(function(){ });用于存放操作DOM对象的代码，
不可用于存放开发插件的代码，因为jQuery对象没有得到传递，
外部通过jQuery.method也调用不了其中的方法（函数）。
(function(){ })(jQuery)；用于存放开发插件的代码
插件设计规则：
插件文件的命名方法：jquery.[插件名].js
所有的元素扩展方法附加到JQuery.fn对象上面，而所有的全局函数附加到JQuery全局对象本身上。
在插件内部，this指向的是当前通过选择器获取的JQuery对象（单个或多个元素集合），
而不再指向的是目标DOM元素。
可以通过this.each 来遍历所有的元素
所有方法或函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题。
插件应该返回一个JQuery对象，以便保证插件的可链式操作。
JQuery插件开发步骤
1、使用闭包
;(function($)){ }(jQuery);
a)、避免全局依赖
b)、避免第三方破坏
c)、兼容jquery操作符'$'和'jQuery'
2、扩展
JQuery提供了2个供用户扩展的“基类”--$.extend和$.fn.extend
$.extend用于自身方法
$.fn.extentd用户扩展jquery类
3、选择器
a)、尽量使用Id选择器
b)、样式选择器应该尽量明确指定的tagName，
例如className为jq的div，要写成$('div.jq')而不是$('.jq')
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意：
-
如果只为$.extend()指定了一个参数，则意味着参数target被省略。
此时，target就是jQuery对象本身。通过这种方式，
我们可以为全局对象jQuery添加新的函数。 -
如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
语法
$.extend( target [, object1 ] [, objectN ] )
指示是否深度合并
$.extend( [deep ], target, object1 [, objectN ] )
警告: 不支持第一个参数传递 false 。
参数 描述
deep 可选。 Boolean类型 指示是否深度合并对象，默认为false。
如果该值为true，且多个对象的某个同名属性也都是对象，
则该"属性对象"的属性也将进行合并。
target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
object1 可选。 Object类型 第一个被合并的对象。
objectN 可选。 Object类型 第N个被合并的对象。
```
// 合并 settings 和 options，修改并返回 settings。
// var settings = {
// validate: false,
// limit: 5,
// name: "foo"
// };
// var options = {
// validate: true,
// name: "bar"
// };
// var r = $.extend(settings, options);
// console.log("r:", r);
// console.log("settings:", settings);
// console.log("options:", options);
// var obj1 = {
// name: "wangdong",
// age: 20
// }
// var obj2 = {
// hobby: "看书"
// }
// var obj3 = {
// work: "teacher"
// }
// var o = $.extend(obj1, obj2, obj3);
// console.log("obj1:", obj1, "obj2:", obj2, "obj3:", obj3, "o:", o);
// var obj1 = {
// name: "wangdong",
// job: {
// price: 999,
// time: 8
// }
// }
// var obj2 = {
// job: {
// price: 8888
// }
// }
// var o = $.extend(true, obj1, obj2);
// console.log("obj1:", obj1, "obj2:", obj2, "o:", o);
var obj1 = {
name: "wangdong",
job: {
price: 999,
time: 8
}
}
var obj2 = {
job: "teacher"
}
var o = $.extend(true, {}, obj1, obj2);
console.log("obj1:", obj1, "obj2:", obj2, "o:", o);
扫一扫
2486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
