2-html()/text() toggle()/slideToggle()/自定义动画 stop() jQ遍历常用方法

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 遍历函数(常用方法)

  1. jQ().addBack(); 把当前的jQ实例对象和上一个jQ实例对象合并成一个新的jQ实例对象
  2. jQ().end(); 返回上一个jQ实例对象
  3. jQ().add(); 在当前jQ实例对象的基础上再添加一个jQ对象成为一个新的jQ对象
  4. 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]
  1. jQ.isFunction(); 检查参数是否是函数
  2. jQ.grep(); 过滤数组
    • 第一个参数:要处理的数组对象
    • 第二个参数:过滤函数
    • 第三个参数:布尔类型的值,控制过滤翻转 默认是false
  3. jQ.makeArray(); 把类数组的结构转换为数组(伪数组-->数组)
  4. jQ.each(); 迭代(遍历)对象 | 数组 | jQ实例对象(DOM节点)
    • 语法: 每迭代一次就会调用一次该回调,会把本次迭代的键值对作为参数传递给回调函数
      • jQ.each(target,fn(key,value){//...this}) 添加在构造函数自己身上的静态方法
      • jQ().each(fn(key,value){//...this}) 添加在构造函数对应的原型对象上面的原型方法
    • 注意事项
      1. 中断循环 当满足某个特定条件的时候,循环就结束.
        • 在回调函数中提供返回值,如果return false,那么迭代就结束,循环终止.
      2. 回调函数中的this
        • each方法的回调函数中的this并非指向window,而是指向当前循环的value值(对象)
    • 为什么要设置让this指向value
      • 为了方便:在大多数情况,我们遍历的时候,在回调函数中经常操作的是value,而索引的操作相对较少或者是没有,如果设置this指向value,我们在写回调函数的时候,可以省略参数
  5. jQ.map(); 数组映射
    • 遍历数组,并且对数组进行处理(过滤|放大|重组)返回新的数组
    • 参考: http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

你可能感兴趣的:(2-html()/text() toggle()/slideToggle()/自定义动画 stop() jQ遍历常用方法)