jQuery思维导图

JQuery
  简介
    是一个对JavaScript进行了封装的库，简化了用户使用JavaScript
    特点：写得少做的多
    使用方法
      在页面引入jQuery库：引入外部的JS文件
      $:jQuery的全局对象，代表的就是jQuery
      $(function(){})：jQuery代码的入口函数。原始的写法：
        $(document).ready(function(){})---window.onload
        简写为：$(function(){})
  jquery的选择器
    强调
      jQuery的CSS()函数--作用
        是jQuery中用于设置元素CSS样式的函数
          CSS('样式属性名','属性值')：设置单个样式
          css({属性名1：属性值1，属性名2：属性值2...})
          eq(index)：匹配一个给定索引值的元素。页面中元素的索引值从0开始
    基本选择器
      id选择器：$('#id')
      class选择器（类选择器）：$('.class')
      标签名选择器：$('标签名')
      *通配符选择器：$('*')
      合并选择器：$('#id,.class,....')
    过滤选择器：是通过特定的过滤规则来筛选出所需的DOM元素。以":"开头
      基本过滤选择器
        :first--选择第一个元素
        :last--选择最后一个元素
        :not(section)--去除所有与给定选择器相匹配的元素
        :even--匹配所有索引值为偶数的元素，从索引0开始计数
        :odd--匹配所有索引值为奇数的元素，从索引0开始计数
        :eq(index)--匹配一个给定索引值的元素
        :gt(index)--匹配一个大于给定索引值的元素
        :lt(index)--匹配一个小于给定索引值的元素
      内容过滤选择器
        :contains--匹配包含给定文本的元素
        :empty--匹配所有不包含子元素或文本的空元素
        :has(selector)--匹配含有选择器所匹配的元素的元素
        :parent--匹配含有子元素或文本的元素
      可见性选择器
        :hidden--匹配所有不可见的元素，或者type为hidden的元素。不仅包含样式属性display为none的元素，也包含文本隐藏域<input type="hidden">和visible:hidden之类的元素
        :visible--匹配所有可见元素
      属性过滤选择器
        [attribute]：匹配包含给定属性的元素
        [attribute=value]：匹配给定的属性是某个特定值的元素
        [attribute!=value]：匹配所有不含某个指定的属性，或者属性不等于特定值的元素
        [attribute^=value]：匹配给定的属性是以某些值开头的元素
        [attribute$=value]：匹配给定的属性是以某些值结尾的元素
        [attribute*=value]：匹配给定的属性是包含某些值的元素
    子元素选择器：索引值从1开始
      :first-child--匹配第一个子元素
      :last-child--匹配最后一个子元素
      :nth-child
        :nth-child(even/odd)---选取父元素下索引值为奇数或偶数的元素
        :nth-child(2)---选取父元素下索引值为2的元素
        :nth-child(2n)---选取父元素下索引值为2的倍数的元素
    表单选择器
      :text--单行文本框
      :password--密码框
  jQuery的属性
    操作属性
      attr(name)：获取属性值。参数name是属性名
      attr(key,fn)：修改属性值
        参数key：代表元素的属性名
        参数fn：是一个函数，将该函数的返回值作为作为key的属性
      attr(key,value)：修改属性值，将value的值赋给key
      removeAttr(name)：删除指定的属性
    操作样式
      css(key,value)、css({'属性名1':'属性值1','属性名2':'属性值2'...})
      addClass(class|fn)：为匹配的元素添加指定的类名
      removeClass(class|fn)：从所有匹配的元素中删除全部或指定的类
        参数可以是类名，也可以是函数(将函数的返回值作为类名)
      toggleClass(class|fn)：如果所匹配的元素存在某个类就删除，不存在就添加
    操作元素的宽度高度
      width()：获取元素的宽度
      width(value):设置元素的宽度
      height()：获取元素的高度
      height(value)：设置元素的高度
    操作元素的内容
      html()：获取匹配元素的内容（底层使用的元素innerHTML）
      html(val)：设置匹配元素的内容（可以识别标签）
      text()：获取匹配元素的文本（底层使用的元素innerText属性，不能识别html标签）
      text(val)：设置匹配元素的文本（不能设置标签）
    操作值
      val()：获取匹配元素的value属性值
      val(args)：设置匹配元素的value属性值
    查找
      add()
      find(exp):
  jQuery的自定义动画
    animate(params,[speed],[easing],[fn])
      params:一组包含作为动画属性和终值样式属性及其值的集合
      speed：三种预定速度之一的字符串('slow','normal','fast')
      easing:动画的效果，要使用的擦除效果的名称（需要插件）
  jQuery的对象访问
    index([selector|element])：获取页面元素的索引值，索引值从0开始
  jQuery的事件处理
    事件绑定
      bind(type,[data],fn):给匹配元素的事件绑定处理程序
        参数type：事件类型
        参数data：作为event.data传递事件处理程序的数据对象
        参数fn：事件处理程序
    模拟鼠标悬停事件：当鼠标悬停到目标对象上方、离开目标对象时触发
      hover(over,out)
        参数over：是一个函数，鼠标悬停到目标对象上方时触发
        参数out：是一个函数，鼠标离开目标对象时触发
      强调：在jQuery的应用中如果某个对象同时会触发mouseover、mouseout事件，建议使用hover
    为匹配的元素绑定一个一次性的事件处理函数
      one(type,[data|[fn]])
    bind()的反向操作,从每一个匹配的元素中删除绑定事件，如果没有参数，则删除所有绑定事件
      unbind(type,[data],fn)
    on(events,[selector],[data],fn)
      在选择元素上绑定一个或多个事件的事件处理函数
        参数events：一个或多个用空格分隔的事件类型
    off：(events,[selector],fn)
      在选择元素上移除一个或多个事件的事件处理函数
    事件类型
      click：鼠标单击
      blur：失去焦点
      focus：获得焦点
      change：元素的值发生改变时触发
  jQuery的动画
    显示/隐藏：show()、hide()
      有三个参数(slow/normal/fast)
    交替显示/隐藏：toggle(speed)
    向上收缩/向下展开：通过高度的变化来显示/隐藏元素
      slideUp([speed],[easing],fn)：向上收缩
      slideDown([speed],[easing],fn)：向下展开
      slideToggle([speed],[easing],fn)：交替
    淡入淡出：通过改变匹配元素的透明度来显示和隐藏元素
      fadeIn([speed],[easing],fn):通过不透明度的变化来实现所有匹配元素的淡入效果
      fadeOut([speed],[easing],fn):通过不透明度的变化来实现所有匹配元素的淡出效果
      fadeToggle([speed],[easing],fn)：交替实现元素的淡入和淡出