html() | text()
- 如果该方法未设置参数,则返回被选元素的当前内容
-
html()
: 方法返回或设置被选元素的内容 (inner HTML)。
- 返回一个值时,它会返回第一个匹配元素的内容
- 设置一个值时,它会覆盖所有匹配元素的内容(可以转换HTML标签)
-
text()
: 方法设置或返回被选元素的文本内容。
- 返回一个值时,它会返回所有匹配元素的组合的文本内容(会删除 HTML 标记)
- 设置值时,它会覆盖被选元素的所有内容
显示/隐藏/切换
- 语法:
show([timer],[callback]) | hide() | toggle()
- 参数
- timer :
[]
表示可选参数. 动画时间(速度),单位是毫秒 1s == 1000ms
- callback: -可选. 动画执行完毕之后的回调函数
- 动画实现本质: 控制标签的宽度和高度(透明度)来实现
展开/收起/切换
- 语法:
slideDown([timer],[callback]) | slideUp() | slideToggle()
- 参数: 同上
- 动画实现的本质: 控制标签的高度
淡入淡出
- 语法:
fadeIn|fadeOut|fadeToggle(timer,[callback])
-
fadeTo([timer],opacity,[callback])
: 淡入动画到指定的透明度
- 参数
- speed:-可选. 动画执行的速度,单位ms
- callBack:-可选. 动画执行完毕的回调函数
- opacity:-必选. 指定的标签透明度(0.0~1.0)
自定义动画
- 语法:
animate(params,[speed],[easing],[callBack])
- 参数
- params: -必需. 在这个对象中以键值对的方式控制属性样式
- speed: -可选。规定动画的速度。默认是 "normal"。可能的值(1000 | slow | fast)
- easing: -可选。规定在不同的动画点中设置动画速度的 easing 函数。
- callback: -可选。animate 函数执行完之后,要执行的函数。
- 注意点
- 只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
- 使用 "+=" 或 "-=" 来创建相对动画(width:"+=50px" | width:"toggle")。
- 可参考w3c: http://www.w3school.com.cn/jquery/effect_animate.asp
动画队列的执行顺序
- 如果标签身上被添加了多个动画效果, 所有的这些动画效果并不是同一时刻发生
- 而是在执行这些动画的时候, 会按照串行队列的方式顺序执行
- 栈: 这种数据结构特点是先进后出
- 队列: 这种数据结构特点是先进先出
队列动画延迟/停止
-
delay([speed])
方法对队列中的下一项的执行设置延迟。
- 参数 : -可选. 可能的值: ms | slow | fast
-
stop(stopAll,goToEnd)
- 参数
- stopAll: 可选。是否停止被选元素的所有的动画加入队列。默认false
- goToEnd: 可选。规定是否允许完成当前的动画。默认false
- 参数情况
- true false: 所有动画任务立刻停止
- true true : 立即完成当前的动画,后面的任务不再执行
- false true : 立即完成当前的动画,后面的任务继续执行
- false false: -默认的情况. 停止当前的动画,后面的任务继续执行
jQuery 遍历函数(常用方法)
-
jQ().addBack();
把当前的jQ实例对象和上一个jQ实例对象合并成一个新的jQ实例对象
-
jQ().end();
返回上一个jQ实例对象
-
jQ().add();
在当前jQ实例对象的基础上再添加一个jQ对象成为一个新的jQ对象
-
jQ.isArray();
检查参数是否是数组
function isArray(obj) {
if(Array.isArray)
{
return Array.isArray(obj);
}else {
return Object.prototype.toString.call(obj) == "[object Array]";
}
}
console.log(arr.toString());
var obj = {name:"zs"}; //[object Array]
console.log(obj.toString()); //[object Object]
-
jQ.isFunction();
检查参数是否是函数
-
jQ.grep();
过滤数组
- 第一个参数:要处理的数组对象
- 第二个参数:过滤函数
- 第三个参数:布尔类型的值,控制过滤翻转 默认是false
-
jQ.makeArray();
把类数组的结构转换为数组(伪数组-->数组)
-
jQ.each();
迭代(遍历)对象 | 数组 | jQ实例对象(DOM节点)
- 语法: 每迭代一次就会调用一次该回调,会把本次迭代的键值对作为参数传递给回调函数
-
jQ.each(target,fn(key,value){//...this})
添加在构造函数自己身上的静态方法
-
jQ().each(fn(key,value){//...this})
添加在构造函数对应的原型对象上面的原型方法
- 注意事项
- 中断循环 当满足某个特定条件的时候,循环就结束.
- 在回调函数中提供返回值,如果
return false
,那么迭代就结束,循环终止.
- 回调函数中的this
- each方法的回调函数中的this并非指向window,而是指向当前循环的value值(对象)
- 为什么要设置让this指向value
- 为了方便:在大多数情况,我们遍历的时候,在回调函数中经常操作的是value,而索引的操作相对较少或者是没有,如果设置this指向value,我们在写回调函数的时候,可以省略参数
-
jQ.map();
数组映射