jQuery 思维导图

jQuery 思维导图，jQuery 效果有显示隐藏、滑动效果、事件切换、动画队列及其停止排队方法、淡入淡出效果、自定义动画animate。

jQuery

• 选择器
  • 基础 $(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号
  • 层级选择器
    • 子代选择器 $（"ul >li"); 使用>号获取亲儿子层级的元素：注意,不会获取孙子层级元素
    • 后代选择器 $(" ul li "); 使用空格，代表后代选择器，获取ul 下的所以li 元素，包括孙子等
  • 设置样式 $("div").css('属性'，'值')
  • 筛选选择器
    • : first $('li:first') 获取第一个li元素
    • : last $('li:last') 获取最后一个li元素
    • : eq(index) $('li:eq(2)') 获取到的li元素中，选择索引号2的元素，索引号index从0开始
    • : odd $('li:odd') 获取到的li元素中,选择索引号为奇数的元素
    • : ever $('li:ever') 获取到的li元素中,选择索引号为偶数的元素
  • 筛选方法（重点）
    • parent() | $("li").parent(); | 查找父级
    • 秋尊 children(selector) | $("ul").children("li") | 相当于 $("u1>1i")，最近一级 (亲儿子)
    • 饭的 find(selector) | $("ul").find("li"); | 相当于$(”ul li"),后代选择器
    • 谁不灵丝 siblings(selector) | $(".first").siblings("li"); | 查找兄弟节点，不包括自己本身
    • 呢丝特哦 nextAll([expr]) | $(".first").nextAl1() | 查找当前元素之后所有的同辈元素
    • 补U哦 prevtAl1([expr]) | $(".last").prevAl1() | 查找当前元素之前所有的同辈元素
    • 海丝克拉丝 hasClass(class) | $('div').hasClass("protected") | 检查当前的元素是否含有某个特定的类，如果有，则返回true
    • eq(index) | $("li").eq(2); | 相当于$("li:eq(2)"),index 从0开始
  • jQuery 里面的排他思想
    • $(this).css(“color”,”red”); $(this).siblings(). css(“color”,””);
    • 链式编程 $(this).css('color', 'red').sibling().css('color', '');
• 样式操作
  • 操作 css 方法
    • 1. 参数只写属性名，则是返回属性值 $(this).css(''color'');
    • 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css(''color'', ''red'');
    • 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号， $(this).css({ "color":"white","font-size":"20px"});
  • 设置类样式方法
    • 作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加 点。
    • 1. 添加类 $(“div”).addClass(''current'');
    • 2. 移除类 $(“div”).removeClass(''current'');
    • 3. 切换类 $(“div”).toggleClass(''current");
  • 类操作与className区别
    • 原生 JS 中 className 会覆盖元素原先里面的类名。 jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
• jQuery 效果
  • 显示隐藏
    • 收 | show([speed,[easing],[fn]]) 显示
    • 黑特 | hide([speed,[easing],[fn]]) 隐藏
    • 考狗 | toggle([speed,[easing],[fn]]) 切换
    • 参数
      • （1）参数都可以省略， 无动画直接显示。
      • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
      • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
      • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。建议：平时一般不带参数，直接显示隐藏即可。
  • 滑动效果
    • 丝来特当 | slideDown([speed,[easing],[fn]]) | 下滑效果
    • 丝来特啊补 | slideUp([speed,[easing],[fn]]) | 上滑效果
    • 丝来特他补 | slideToggle([speed,[easing],[fn]]) | 滑动切换
    • 参数
      • （1）参数都可以省略。
      • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
      • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
      • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
  • 事件切换
    • 好w | hover([over,]out )
      • （1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
      • （2）out:鼠标移出元素要触发的函数（相当于mouseleave）
      • （3）如果只写一个函数，则鼠标经过和离开都会触发它
  • 动画队列及其停止排队方法
    • 1. 动画或效果队列 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
    • 2. 停止排队 | stop()
      • (1）stop() 方法用于停止动画或效果。
      • (2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
  • 淡入淡出效果
    • 费的e | fadeIn([speed,[easing],[fn]]) | 淡入效果
    • 费的奥特 | fadeOut([speed,[easing],[fn]]) 淡出效果
    • 费的考狗 | fadeToggle([speed,[easing],[fn]]) 淡入淡出切换
    • 参数
      • （1）参数都可以省略。
      • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
      • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
      • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
    • 费的吐 | fadeTo([[speed],opacity,[easing],[fn]]) | 渐进方式调整到指定的不透明度
      • （1）opacity 透明度必须写，取值 0~1 之间。
      • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
  • 自定义动画 animate
    • animate(params,[speed],[easing],[fn])
    • . 参数
      • （1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。
      • （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
      • （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
      • （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
    • 子主题