核心

• $(args)
  String　如果含有HTML标记则代表创建元素，否则代表选择器
  Function　页面加载完毕 （DOM结构解析渲染完成）执行的回调函数
  Node　将DOM转换为jQuery Elements
• $(function(){}) === $(document).ready(function(){})
• index()　获取匹配元素的下标（尽量带父元素去匹配）
• length || size()　获取匹配元素的数量（长度）
• $.fn.extend()　扩展jQuery原型对象（插件开发的常用方法）
• $.extend([obj]，obj1，obj2．．．,objN)　合并对象
• $().each(function(){})遍历匹配到的元素数组
• $.noConflict()　让出＄的占用

选择器

-基本选择器
-层次选择器
-内容选择器
-属性选择器
-。。。

与CSS选择器写法基本一致，并扩展了一些常用的选择方法，每一个选择器执行完成后，不论有没有匹配到的元素，都会返回一个（类）数组

DOM处理

• a.append(b) 将b追加到a的末尾
• a.appendTo(b) 将a追加到b的末尾
• a.before(b) 将b添加到a的前面（同辈）
• a.after(b) 将 b 添加到 a 的后面（同辈）
  -a.insertBefore(b) 将a 添加到b 的前面（同辈）
• a.insertAfter(b) 将a 添加到b 的后面（同辈）
• a.wrap(htmlStr) 用hrmlstr 标记包裹 a
  -a.unwrap()　解除 ａ 的包裹（unwrap并非要先wrap, unwrap 可用于快速移除指定元素的父元素）
• a.remove() 移除a （从DOM树种移除、事件或者数据也将被移除）
• a.detach() 移除 a （从DOM树中移除、事件或数据保留。再次追加时依然有效）
• a.empty() 清空 a 里面的内容
• a.clone([bol]) 克隆a 元素，传入true 将克隆事件等

CSS

-css()
　－css(String,String)　设置单个样式
　－＊css(String)＊获取指定样式
　－＊css(Object)＊以JSON的对象形式设置多个样式，设置样式时，必须驼峰式命名，像素值可以省略px

• addClass(className) | removeClass(className) 为匹配元素
  添加 / 删除 样式名 如果 添加 / 删除 多个样式名需要用空格分割
• toggleClass(className) 有 / 无 就删除 / 添加指定的样式名
• offset() | position() 获取或设置匹配元素的距离 文档或相对定位父元素的左侧和顶部的距离
• width() | height() 获取元素的实际宽高（css宽高）
• innerWidth() | innerHeight() 获取元素的宽高 ，含 padding

jQuery

核心

• $(args)
  • String 如果含有 HTML 标记则代表创建元素 否则代表选择器
  • Function 页面加载完毕（DOM 结构解析渲染完成）执行的回调函数
  • Node 将 DOM 转换为 jQuery Elements
• $(function(){}) === $(document).ready(function(){})
• index() 获取匹配元素的下标 （尽量带父元素去匹配）
• length || size() 获取匹配元素的数量（长度）
• $.fn.extend() 扩展 jQuery 原型对象（插件开发的常用方式）
• $.extend([obj],obj1,obj2,…,ojbN) 合并对象
• $().each(fucntion(){}) 遍历匹配到的元素数组
• $.noConflict() 让出$的占用

选择器

• 基本选择器
• 层次选择器
• 内容选择器
• 属性选择器
• 。。。

与 CSS 选择器写法基本一致，并扩展了一些常用的选择方式，每一个选择器执行完成后，不论有没有匹配到元素，都会返回一个（类）数组

DOM 处理

• a.append(b) 将 b 追加到 a 的末尾
• a.appendTo(b) 将 a 追加到 b 的末尾
• a.before(b) 将 b 添加 a 的前面（同辈）
• a.after(b) 将 b 添加到 a 的后面（同辈）
• a.insertBefore(b) 将 a 添加到 b 的前面（同辈）
• a.insertAfter(b) 将 a添加到 b的后面（同辈）
• a.wrap(htmlStr) 用 htmlStr 标记包裹 a
• a.unwrap() 解除 a的包裹（unwrap 并非必须要先 wrap，unwrap 可用于快速移除指定元素的父元素）
• a.remove() 移除 a（从 DOM 树中移除、事件或数据也将被移除）
• a.detach() 移除 a （从 DOM 树中移除、事件或数据保留，再次追加时依然有效）
• a.empty() 清空 a 里的内容
• a.clone([bol]) 克隆 a 元素，传入 true 将克隆事件等

CSS

• css()
  • css(String,String) 设置单个样式
  • css(String) 获取指定样式
  • css(Object) 以 JSON 对象形式设置多个样式
  • 设置样式，象素值可以省略 PX，必须驼峰式命名
• addClass(className) | removeClass 为匹配元素 添加 / 删除 样式名 如果 添加 / 删除 多个 需要用空格分隔
• toggleClass(className) 有 / 无 就 删除 / 添加 指定的样式名
• offset() | position() 获取或设置匹配元素的距离 文档 / 相对定位父元素 的 左侧和顶部 的距离，返回一个对象，{left:..,top:..}
• width() | height() 获取元素的实际宽高（CSS 宽高）
• innerWidth() | innerHeight() 获取元素的宽高，含 padding
• outerWidth() | outerHeight() 获取元素的宽高，含 paddin 、 border
• outerWidth(true) | outerHeight(true) 获取元素的宽高，含 paddin 、 border 、margin
• scrollTop() | scrollLeft() 获取或设置滚动条距离（要设置，必须由事件触发）

属性

• attr()
  • attr(String,String) 设置单个属性
  • attr(String) 获取单个属性
  • attr(Object) 设置多个属性
• removeAttr(attrName) 移除指定属性
• prop() 与 attr 效果一致（操作添加即为 true 的属性）
• removeProp()
• html() 设置或获取元素的 html 内容
• text() 设置或获取元素的文本内容
• val() 设置或获取表单元素的值

筛选

• first()
• last()
• eq()
• chilren()
• find()
• parent()
• hasClass()
• 最为常用的几个方法，find() children() parent() 等可以接受选择器

事件

• on(eventName[,委托元素选择器][,data],function(){}) 添加事件
• off() 移除事件 （ 移除时，需要参数与添加事件时参数一致）
• delegate()
• undelegate()
• bind()
• unbind()
• one() 添加只执行一次
• click()
• ...
• hover(overFunction,outFunction) 移入移出事件

AJAX

• $.get(url[,data][,callback][,dataType])

• $.post()

• $.ajax(options)

  • url 要发送请求的地址
  • data 要发送的参数
  • dataType 预期返回的数据格式 xml json html text …
  • success 成功回调函数
  • error 失败回调函数

• jsonp

  $.ajax({
    url : "xx.com",
    data : {
      a : "a"
    },
    dataType : "jsonp",
    jsonp : "myCallback",//指定传往服务器的参数名 默认为 callback
    jsonpCallback : "test",//指定额外的处理函数，要求全局环境必须存在此函数
    success : function(res){
      
    }
  })
  function test(res){
    
  }
  

  ​

工具

• $.isFunction()
• $.isArray()
• $.isPlainObject()
• $.isNumeric()
• $.extend()

效果

• show()
• hide()
• slideDown()
• slideUp()
• slideToggle()
• fadeIn()
• fadeOut()
• fadeToggle()
• animate()
• stop()
• finish()

其它内容

• DOMContentLoaded 事件 DOM 元素解析完毕后触发的事件

• defer | async

  • 什么也不加，脚本同步阻塞加载，加载完毕便执行，此时操作 DOM 不成功
  • async 脚本异步加载，加载完毕后便执行，此时 DOM 结构不一定解析完毕，此时操作 DOM 可能有风险
  • defer 脚本异步加载，加载完毕后不执行，等待 DOM 结构解析完毕（DOMContentLoaded 事件触发）才执行 ，操作 DOM 安全

• requestAnimationFrame(func) 关键帧动画（新的 API）

• Array.prototype.xxx = function() 扩展 javascript 内置对象

  ​