NOTEBOOK

[-] 基本

• *通配
• #idID
• .class样式
• tagName标签元素名
• selector1,...,selectorN逗号分隔多个

[-] 层级

• E F全后代
• E>F子辈
• E+F相邻
• E~F兄弟

[-] 序列

• :first第一个
• :last最后一个
• :eq(index)索引第N个
• :gt(index)索引大于
• :lt(index)索引小于
• :even索引偶数，实际奇数
• :odd索引奇数，实际偶数

[-] 条件

• :not(selector)不含,无需引号,not(div,a)或not(div a)
• :has(selector)含
• :focus获得焦点,有focus方法的,不只是表单
• :animated正在执行动画
• :hidden隐藏的
• :visible可见的
• :lang(zh-cn)语言指定

[-] 内容

• :root等价html
• :headerH1~H6
• :targetHASH目标元素
• :contains(text)包含文本
• :empty空/无子元素
• :parent有子元素

[-] 属性

• [att]含属性
• [att=val]为..
• [att!=val]不为..
• [att^=val]以..开始
• [att$=val]以..结束
• [att*=val]含..(str)
• [att1][attN]同时满足..

[+] 子元素

• :first-child第一个子元素
• :first-of-type父元素中第一个此类元素
• :last-child最后一个子元素
• :last-of-type父元素中最后一个此类元素
• :nth-child(n)第N个子元素
• :nth-of-type(n)父元素中第N个此类元素
• :nth-last-child(n)倒数第N个子元素
• :nth-last-of-type(n)父元素中倒数第N个此类元素
• :only-child唯一子元素
• :only-of-type唯一同类子元素

[+] 表单

• :input所有input
• :texttype为text
• :passwordtype为password
• :radiotype为radio
• :checkboxtype为checkbox
• :submittype为submit
• :imagetype为image
• :resettype为reset
• :buttontype为button
• :filetype为file
• :hiddentype为hidden

[-] 表单对象属性

• :enabled所有可用
• :disabled所有禁用
• :checked所有被多选/单选选中元素
• :selected所有被下拉选中元素

[-] 基本

• $(selector) 返回匹配的元素集合
  
  传入参数

  selector,[context]	选择器表达式,查找范围：返回选择器对象的引用对象 $('div.foo').click(function() { $('span', this).addClass('bar'); // 限定查找范围 });
  HttpTags,[props]	创建DOM元素,元素属性：返回包含了这些DOM元素引用的JQ对象 $("<div/>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }).appendTo("body");
  element / elementArray	DOM 元素或 DOM元素数组： 返回DOM封装到 jQuery 对象 $('div.foo').click(function() { $(this).slideUp(); });
  object	普通 JavaScript 对象：封装成jQuery 对象并返回 // 定义一个普通 JavaScript 对象 var foo = {foo:'bar', hello:'world'}; // 封装成 jQuery 对象 var $foo = $(foo); // 绑定一个事件 $foo.on('custom', function (){ console.log('custom event was called'); }); // 触发这个事件 $foo.trigger('custom');
  callback	如果传入一个函数，则在 document 上绑定一个 ready 事件监听函数，当 DOM 结构加载完成时执行。 jQuery(function($) { // 你可以在这里继续使用$作为别名... });
  jQuery Object	如果传入一个 jQuery 对象，则创建该 jQuery 对象的一个副本并返回，副本与传入的jQuery 对象引用完全相同的 DOM 元素。
  空	返回一个空的jQuery对象。

  more info »
• .length(.size())jQuery 对象中元素的个数
• .index([sel])
  无参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
  如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
  如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。
• .get(index)/[index]取得其中一个匹配的元素
• .each(fn[i,ele]) 静态方法 jQuery.each() 是一个通用的遍历迭代方法，用于无缝地遍历对象和数组。
  对于数组和含有 length 属性的类数组对象（如函数参数对象 arguments） ，该方法通过下标遍历，从 0 到 length-1 ；
  对于其他对象则通过属性名遍历（for-in） 。
  在遍历过程中，如果回调函数返回 false，则结束遍历。
  函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）
  返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
  返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
  .each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。
• .toArray() 把jQuery集合中所有DOM元素恢复成一个数组。
• jQuery.noConflict() more info »
  关于命名
  1.将 jQuery 库在 Base 库之前引入，那么“$”的所有权就归 Base 库所有，而 jQuery 可以直接用 jQuery 对象调用，或者创建一个“$$”符给 jQuery 使用。
  var $$ = jQuery; //创建一个$$的 jQuery 对象
  $(function () { //这是 Base 的$
  alert($('#box').ge(0)); //这是 Base 的$
  alert($$('#box').width()); //这是 jQuery 的$$
  });
  2.如果将 jQuery 库在 Base 库之后引入， 那么 “$” 的所有权就归 jQuery 库所有， 而 Base库将会冲突而失去作用。这里，jQuery 提供了一个方法：
  jQuery.noConflict(); //将$符所有权剔除
  var $$ = jQuery;
  $(function () {
  alert($('#box').ge(0));
  alert($$('#box').width());
  });
  3.继续内部使用$作为参数：
  jQuery.noConflict(); //将$符所有权剔除
  jQuery(function ($) {
  alert($('#box').ge(0));
  });

[-] 数据

• .date()在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
  more info »
• .removeDate() .removeData()方法允许我们移除用.data()绑定的值。
  当带name参数调用的时候，.removeData()
  将删除那个特有的值，当不带任何参数的时候，所有的值将被移除。
  从jQuery的内部.data() 缓存不影响任何在文档中的HTML5的data-属性，使用.removeAttr()可以移除这些属性。
  当使用.removeData("name")时，如果没有这个属性名字是在内部数据缓存，jQuery将试图在元素上找到一个 data-的属性。
  为了避免重复查询 data- 属性，将这个名称设置为无论是null 或 undefined的值(例如 .data("name", undefined))，而不是使用.removeData()。
  more info »

[-] 队列

• .queue([name],fn[next])无名称则为fx动画队列,返回第一个元素关联的函数队列或修改
• .dequeue([name])出队(移除)并执行元素函数队列的下一个函数（非动画函数需要手动调用dequeue）
• .delay(time,[name])延迟
• .clearQueue()移除队列

[-] 插件

• jQuery.extend(obj)ex
• jQuery.fn.extend(arg)ex

  
        ;(function($){
         $.fn.extend({
           'method':function(){
             //some code
             return this;
           }
         })
        })(jQuery);
        

  
  JQ插件中的this就是已经封装过的元素是JQ对象，在JQ插件内部进行JQ方法中的This是DOM元素需要自己再封装

[-] 数组/对象操作

• $.each(obj,fn[i,val]) 遍历执行对象/数组,回调函数i为数组索引index或对象属性name,val为原值
  不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。 回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。 如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
  more info »
• $.map(obj,fn[val,i]) 遍历执行对象/数组,this为全局window对象,返回新的对象/数组
  more info »
• $.grep(arr,fn[ele,index]) 数组过滤,原始数组不受影响.回调函数ele为元素,index为索引
  more info »
• $.inArray(val,arr,fromi) 数组元素查找,类似indexOf,没有返回-1
  more info »
• $.merge(arr1,arr2) 数组合并
  第一个用于合并的数组，其中将会包含合并后的第二个数组的内容。
  第二个用于合并的数组，该数组不会被修改，其中的内容将会被合并到第一个数组中。
  more info »
• $.unique(arrDOM) 数组DOM重复元素删除
  排序数组，并移除任何重复的节点。 如果一个节点和已经在数组中的节点完全相同，那么它被认为是重复的; 两个不同的节点具有相同的属性是被认为不重复的.

[-] 测试操作

• $.type(data)判断数据类型
• $.isWindow(data)判断数据是否为 window 对象
• $.isNumeric(data)判断数据是否为数值
• $.isArray(obj) 判断是否为数组对象，是返回 true
• $.isFunction(obj) 判断是否为函数，是返回 true
• $.isEmptyObject(obj) 判断是否为空对象，是返回 true
• $.isPlainObjet(obj) 判断是否为纯粹对象，是返回 true
  通过 "{}" 或者 "new Object" 创建的
• $.contains(obj) 判断 DOM 节点是否含另一个 DOM 节点， 是返回 true

[-] 其他

• $.now()$.now()方法是表达式(new Date).getTime()返回数值的一个简写
• $.trim(str)等同字符串trim()方法,去掉前后空格
• $.noop一个空函数
  当你仅仅想要传递一个空函数的时候，就用他吧。
  这对一些插件作者很有用，当插件提供了一个可选的回调函数接口，那么如果调用的时候没有传递这个回调函数，就用jQuery.noop来代替执行。
• $.proxy(obj,fn)调整this指针
  more info »

[-] 属性

• attr({key,[val|fn]})attr('key') 获取第一个元素指定属性的值,如遍历获取则需each
  attr('key','value') 设置key的值为value
  attr('key',fn[index,old-value]) 回调参数:索引,原值
  attr({key1:'value1',key2:'value2'}) 设置多个属性的值,用逗号分隔
• removeAttr(key)removeAttr('key') 从每一个匹配的元素中删除某个属性
• prop({key,[true/false|fn]})prop('key') 获取匹配元素中第一个元素的属性
  prop('key',true/false) 设置每一个匹配元素的一个属性
  prop('key',fn[index,old-value]) 回调参数:索引,原值
  prop({key1:'value1',key2:'value2'})"
• removeProp(key)removeProp('key') 从每一个匹配的元素中删除某个属性

[-] CSS类

• addClass(class|fn)addClass('name') 添加一个样式
  addClass('name1 name2') 添加多个样式,空格分开
  addClass(fn[index,old-value]) 回调参数:索引,原样式名;返回一个或空格隔开的class名
• removeClass(class|fn)removeClass('name') 移除一个样式
  removeClass('name1 name2') 移除多个样式,空格分开
  removeClass(fn[index,old-value]) 回调参数:索引,原样式名;返回一个或空格隔开的class名
• toggleClass(class|fn[,sw])toggleClass('name') 元素如果存在（不存在）就删除（添加）一个类
  toggleClass('name',switch) 要切换的CSS类名,用于决定元素是否包含class的switch case值
  toggleClass(fn[index,old-value],switch) 回调参数:索引,原样式名;返回一个或空格隔开的class名

[-] HTML代码/文本/值

• html([text|fn])html() 无参数,返回元素集合中第一个元素的内容
  html('text') 设置所有选择器元素的内容
  html(fn[index,old-value]) 返回一个HTML字符串,回调参数:索引,原先的HTML值
  *限HTML/XHTML
• text([text|fn])text() 无参数,返回元素集合中第一个元素的内容
  text('text') 设置所有选择器元素的内容
  text(fn[index,old-value]) 返回字符串,回调参数:索引,原先的值
  *可用于XML
• val([val|fn|arr])val() 无参数,返回元素集合中第一个元素的值
  val('text') 设置所有选择器元素属性值
  val(fn[index,old-value]) 返回要设置的值,回调参数:索引,原先的值
  val('value') 设定一个select/checkbox的值
  val(['value1','value2']) 设定多选时的多个select/checkbox的值

[-] CSS

• css({key,[val|fn]})css('key') 获取第一个元素的样式值
  css('key','value') 设置每一个匹配元素一个指定的样式
  prop('key',fn[index,old-value]) 回调参数:索引,原值
  css({key1:'value1',key2:'value2'}) 设置每一个匹配元素多个指定的样式
  *坐标和尺寸注意加px单位,属性值加引号!
• jQuery.cssHooks

[-] 元素位置[!px]

• offset().l/toffset() 计算元素在视窗中的坐标,返回值对对象
  offset().left 获得元素视窗水平坐标
  offset().top 获得元素视窗垂直坐标
  *offset()值已包含scroll后实际视窗位置
• offset({top:y,left:x})offset({top:y,left:x}) 设置元素视窗坐标
  *计算的坐标以元素外围为起始点，包含padding和border，不包含margin
  *设置值对时不需要引号，且不带单位
• position().l/t [!arg]position() 获取相对父元素的偏移值对对象
  position().left 水平位移
  position().top 垂直位移
  *不能用于设置，只能获取，可通过获取后设置新的变量值赋值给css
  *计算的坐标以元素外围为起始点，包含padding和border，不包含margin
  *注意Body清空padding margin否则继承出问题
• scrollTop([y])获取/设置匹配元素相对滚动条垂直的偏移
  通过offset可获取元素位置,设置$(document).scrollTop(num)跳转至对应锚点
  
• scrollLeft([x]) 获取/设置匹配元素相对滚动条水平的偏移

[-] 指针位置

• e.pageX鼠标指针所在文档位置,已计算scroll
  event.screenX 原生JS:鼠标指针所在显示屏位置
  event.screenY 原生JS:鼠标指针所在显示屏位置

  ---

  
  event.clientX 原生JS:鼠标指针所在视窗位置,非文档位置
  计算文档位置：event.clientX+document.documentElement.scrollLeft || document.body.scrollLeft
  event.clientY 原生JS:鼠标指针所在视窗位置,非文档位置
  计算文档位置：event.clientY+document.documentElement.scrollTop || document.body.scrollTop

  ---

  
  clientWidth=document.documentElement.clientWidth|| document.body.clientWidth
  在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
  clientHeight= document.documentElement.clientHeight|| document.body.clientHeight
  在页面上返回内容的可视高度（不包括边框，边距或滚动条）

  ---

  
  scrollWidth=document.documentElement.scrollWidth|| document.body.scrollWidth
  返回元素的整个宽度（包括带滚动条的隐蔽的地方）
  scrollHeight=document.documentElement.scrollHeight|| document.body.scrollHeight
  返回整个元素的高度（包括带滚动条的隐蔽的地方）
• e.pageY鼠标指针所在文档位置,已计算scroll

[+] 元素尺寸

• height([val|fn])height() 无参数,获取第一个元素的高度
  height(y) 设置所有元素的高度,无单位 height(fn[index,old-value]) 回调参数:索引,原值.返回一个数值
• width([val|fn])width() 无参数,获取第一个元素的宽度
  width(x) 设置所有元素的宽度,无单位 width(fn[index,old-value]) 回调参数:索引,原值.返回一个数值
• innerHeight([y])获取/设置内高，含padding，不含边框和margin
• innerWidth([x])获取/设置内宽，含padding，不含边框和margin
• outerHeight([y])获取/设置外高,含padding,border,margin
• outerWidth([x])获取/设置外宽,含padding,border,margin

[-] 基本

• show([time,fn])显示
• hide([time,fn])隐藏
• toggle([time,fn])开关
• ani(arg..callee)A.ani(fnX function(){$(this).pre/next.ani(fnX)}
  A.ani(function(){$(this).pre/next.ani(arguments.callee)})
  所有动画额外参数:(回调函数前) linear匀速,swing缓动(默认)

[-] 滑动

• slideDown([time,fn])向下展开
• slideUp([time,fn])向上折叠
• slideToggle([time,fn])滑块开关

[-] 隐现

• fadeIn([time,fn])淡入
• fadeOut([time,fn])淡出
• fadeTo([time,0-1,fn])变换到指定透明度
• fadeToggle([time,fn])淡入淡出切换

[-] 自定义/队列

• animate({arg},time,[fn])$(ele).animate({css:'value'},speed,fn)
  $(ele).animate({css:+-some},speed,fn)
  单属性不能像css那样,简写！
  
  百分比不是一个整数,是字符串应添加引号! 可以通过在属性值前面指定+=或-=来让元素做相对运动(注意是+=,而不是+,需要赋值)
  注意：所有指定的属性必须用骆驼形式
  队列动画:
  1.回调函数嵌套
  2.连缀（同一目标）
  3.顺序（同一目标）
  
• queue(next)支持连缀或非连缀
  实现队列动画赋参数next,并在末尾执行next()
  或不传参数在末尾添加$(this).dequeue()
  当通过队列添加方法后再次连缀执行的动画如为基本动画(hide,show,toggle)必须赋参数!
  取得当前+后续的队列动画长度,queue('fx').length
• clearQueue()清理列队的功能方法：.clearQueue()。
  把它放入一个列队的回调函数或.queue()方法里，就可以把剩下为执行的列队给移除。
  *而非在连缀中书写！
• stop([true],[true])无参数:
  普通动画,暂停动画,恢复动画后继续完成动画
  列队动画,停止列队动画中的第一个动画,并停留在停止时的位置
  有参数：
  第一个参数:true,停止并清除后续队列动画,默认为false
  第二个参数:true,停止并立即跳到动画完成所在的位置(中间队列进行的特性改变等不执行)
• finish()类同stop,但会导致所有排队的动画的CSS属性跳转到他们的最终值。
• delay(time,[fx])延迟,支持连缀,时间参数

[-] 设置

• jQuery.fx.interval设置每秒运行的帧数,默认13,数值越大频率越慢
• jQuery.fx.off关闭所有动画效果,关闭true,开启false

[-] 内部插入

• append()
• appendTo()如果jquery选择器中的元素不存在,则会创建,直接appendTo目标元素即可。
• prepend()
• prependTo()

[-] 外部插入

• after()
• insertAfter()
• before()
• insertBefore()

[-] 替换

• replaceWith(content|fn|$)
• replaceAll($|selector)
• end()
• [ 主动插入与替换会先注销原节点 ]

[-] 复制删除

• clone([true/false])复制节点,true复制事件处理程序,false不复制
• remove([expr])删除A或满足某条件的A,移除事件,返回被删除的节点
• detach([expr])删除A或满足某条件的A,保留事件,返回被删除的节点
• empty()删除A所有子节点,不接收参数

[-] 包裹

• wrap(html|ele|fn)对每个元素外层逐层包裹
• wrapInner(html|ele|fn)对每个元素内部逐层包裹
• wrapAll(html|ele)对所有匹配元素外层整体包裹
• unwrap()移除一层包裹,从最内包裹层脱起,多个移除则需移除多次,无参数

[-] 层级筛选

• find()等价后代选择器E F
• children()等价子代选择器
• next() next() / nextall() / nextUntil()
  类似E+F 但只返回后面那个紧邻的同辈元素/所有/直到但不包含
• parent() offsetParent() 返回第一个匹配元素用于定位的父节点
  parent() / parents() / parentsUntil() 取得一个包含着所有匹配元素的唯一父元素的元素集合/所有（不包含根元素）/直到但不包含
• prev() prev() / prevall() / prevUntil()
  取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合/所有/直到某个但不包含
• siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

[-] 序列筛选

• first()第一个
• last()最后一个
• eq(index|-index)第N个/倒数第N个
• slice(start,[end])第N~M个

[-] 条件过滤

• filter(expr|obj|ele|fn)
• has(expr|ele)
• not(expr|ele|fn)
• contents()查找匹配元素内部所有的子节点（包括文本节点）

[-] 串联

• add(e|e|h|o[,c])
• addBack()

[-] 检测

• is(selector)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
  $("#checbox").is(:checked)
• hasClass(class)检查当前的元素是否含有某个特定的类，如果有，则返回true。里面只写class名称不要加点

[-] 事件处理

• on(type,[sel],[data],fn)事件绑定：
  on('type',[data],fn) 绑定一个事件处理函数
  on('type1 type2',[data],fn) 为多个事件绑定一个处理函数
  on({type1:fn1,type2:fn2}) 为多个事件绑定不同的处理函数
  on('type',[data],false) 取消默认行为和冒泡,注意在表单中取消的目标是form而非submit行为!
  on('type.namespace',[...,fn]) 绑定指定命名空间事件
  on('itype',...,fn).trigger() 绑定一个自定义事件加载时默认触发一次
  事件委托：
  $(parent).on('type','selector',[data],fn)
  *事件委托时的selector为parent的子元素选择器
  *依旧绑定在指定父元素上,触发目标写在第2个参数,data数据在第3个参数
  *selector必须为选择器字符串,不可传递冗余复杂的CSS表达式变量!内部this是指选择器触发元素!
• off(type,[sel],[fn])事件移除：
  off() 无参数删除所有事件绑定
  off('type') 删除某个事件
  off('type',fn) 删除指定事件和处理函数
  取消事件委托：
  off() 无参数,删除所有委托事件
  off('type') 删除所有type事件
  off('type','selector') *注意委托元素写在第2个参数，删除指定目标的一个或多个事件委托,事件类型由空格分隔
  off('type','selector',fn) 删除指定的事件触发的执行函数
  off('type.namespace',[...,fn]) 删除指定命名空间事件
• one(type,[sel],[data],fn)类似on,但仅触发一次的事件!

[+] 旧事件处理

• bind({type,[data],fn})bind('type',fn) 绑定一个事件处理函数
  bind('type1 type2',fn) 为多个事件绑定一个处理函数
  bind({type1:fn1,type2:fn2}) 为多个事件绑定不同的处理函数
  bind(type,false) 取消默认行为和冒泡,注意取消的目标是form而非submit行为!
• unbind([type,fn])unbind() 删除所有事件绑定
  unbind('type') 删除某个事件
  unbind('type',fn) 删除指定事件和处理函数
• delegate(ele,type,[d],fn)在统一级父元素上绑定事件，分配给触发事件的目标。
  1.在 DOM 中很多元素绑定相同事件时；
  2.在 DOM 中尚不存在即将生成的元素绑定事件时；
  我们推荐使用事件委托的绑定方式，否则推荐使用.bind()的普通绑定
  $(parent).delegate(target,type,fn)
• undelegate()undelegate() 无参数,删除所有委托事件
  undelegate(ele,type) 删除指定的一个或多个事件,事件类型由空格分隔
  undelegate(ele,type,fn) 删除指定的事件触发执行函数
  undelegate(type) 删除所有type事件
  undelegate(type.namespace) 删除指定命名空间事件

[-] 事件模拟

• trigger(type,[datas])模拟事件:让该事件在页面加载时便模拟执行一次,可连缀写法
  $(ele).type(fn[data]).trigger(type)
  简写方案:【限JQ封装的常用事件】想让某个事件执行模拟用户行为,直接再调用一个空的同名事件即可
  $(ele).type(fn).type() 单fn数据:可以传入数据，此处数据为事件函数传入的数据，而非e.data
  $(ele).type(fn[e,data]).trigger(type,data)
  多fn数据:可传入多个data数据,用[]将其包围
  $(ele).type(fn[e,data1,data2]).trigger(type,[data1,data2])
• triggerHandler(type, [data])与trigger的区别：
  1.不会触发事件的默认行为，如表单提交
  2.只会影响第一个匹配到的元素，而.trigger()会影响所有。
  3.返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)
  4.对于自定义事件，.triggerHandler()不会冒泡，trigger()则默认会冒泡

[-] 命名空间/自定义事件

• on(itype,fn).trigger(itype)除了通过 JavaScript 事件名触发trigger，也可以通过自定义的事件触发。
  所谓自定义事件其实就是一个被.bind()绑定的任意函数
• e.namespace 对匿名函数的移除,以及批量移除相同命名空间的不同事件
  适用于bind绑定事件与模拟事件,不能用于JQ封装的常用事件
  $(ele).bind(type.name1,fn)
  $(ele).trigger(type.name1)
  e.namespace返回命名空间的名称

[-] 浏览器/文档事件

• ready(fn)文档就绪,DOM结构完成时即执行,如果某些行为必须等待图片或css加载完成再执行则应绑定到load事件
• load([[data],fn])必须完全加载完成,而ready只判定DOM结构
  当所有子元素已经被完全加载完成时，load事件被发送到这个元素。
  此事件适用于任何可使用 URL关联的任何元素：images, scripts, frames, iframes, window 对象。
• unload([[data],fn]) unload事件部分浏览器不支持,可用于放置清理内存.
  点击某个离开页面的链接
  在地址栏中键入了新的 URL
  使用前进或后退按钮
  关闭浏览器
  重 新加载页面
• scroll([[data],fn]) scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
  调式IE的过程中，需要去掉console.log命令，否则会因为前面不识别而不运行，改为alert命令
  1.动态监听浏览器拖曳滚动条scroll事件应使用document绑定事件（而非html或body）
  $(document).scroll(function(){
  nowscroll = $(document).scrollTop();
  })
  2.绑定点击触发页面滚动事件，要设置'html'和'body'元素滚动，设置document无效
  设置body在IE中无效,设置html在webkit某些时候无效,尽量不要用window,未知报错
  $(selector).click(function(){
  $('body,html').animate({'scrollTop':val},speed)
  })
  当为a元素带#时，默认会跳到顶部，需要阻止默认行为！
• resize([[data],fn])浏览器window的尺寸发生改变时
• error([[data],fn])可用于设置window错误时返回true而不报错
  设置图片错误时隐藏图片
  或将(window)错误传递给服务器端记录文件

[+] 鼠标事件

• click([[data],fn])click(fn) 绑定一个函数到点击
  click(data,fn) 绑定一个函数并传入eventData
  click() 触发此事件,可能由其他事件触发此事件发生
  *click要素：鼠标指针在元素里面时点击，鼠标指针在元素里面时释放，如果这些不被满足，mousedown 或 mouseup事件可能更加合适。
• dblclick([[data],fn])双击
• mousedown([[data],fn])鼠标按下
• mouseup([[data],fn])鼠标弹起
• mouseover([[data],fn])鼠标经过
• mouseout([[data],fn])鼠标移出
• mousemove([[data],fn])鼠标移动
• mouseenter([[data],fn])鼠标穿入,穿过子元素而非本体内容时不触发
• mouseleave([[data],fn])鼠标穿出,穿过子元素而非本体内容时不触发
• hover(enter,leave)组合mouseenter与mouseleave

[-] 键盘事件

• keydown([[data],fn])键盘按下,返回键码e.keyCode
• keypress([[data],fn])键盘按下,返回字符编码e.charCode
• keyup(([[data],fn])键盘按下并弹起
• e.which鼠标事件监听绑定[click]等
  原生鼠标事件event.button [右键事件oncontextmenu] 左0中1右2
  
  键盘事件监听绑定[keyup]等,且必须绑定在可键入元素中,如input等
  原生键盘事件keyCode[keydown]与charCode[keypress] (charCode区分大小写或上标)
  
  JQ中组合他们：
  鼠标为左1中2右3,键码为keyCode
  
• e.altKey/ctrlKey/shiftKeyJS原生和JQ都可以使用的对象event.xKey / e.xKey
  同样需要绑定鼠标或者键盘事件(均可)
  需要在鼠标或键盘事件触发时同时按下(单独按下无效)
  返回true/false

[-] 表单事件

• focus([[data],fn])获取焦点,必须为当前元素
• blur([[data],fn])丢失焦点,必须为当前元素
• focusin([[data],fn])获取焦点,可以为当前元素的子元素
• focusout([[data],fn])获取焦点,可以为当前元素的子元素
• change([[data],fn])下拉选择,单选多选,文本框/域值发生变化时
  仅限用于input、textarea、select元素。
  对于下拉选择框，复选框和单选按钮，当用户用鼠标作出选择，该事件立即触发
  但对于其他类型的input元素，该事件触发将推迟，直到元素失去焦点才会触点
• select([[data],fn])文本被选择事件!而非下拉列表选择
• submit([[data],fn])注意绑定的对象是form!而非submit

[-] 事件对象属性

• e.data传入指定值绑定到事件函数里,可以为变量,如为函数会打印函数字符串,需要()执行函数返回函数返回的内容
• e.result返回同一个元素上一个事件绑定函数的返回值
• e.timeStamp返回事件触发时的时间戳
• e.type事件类型
• e.target触发事件的DOM元素
• e.currentTarget事件监听的元素,即被绑定事件的元素
• e.relatedTarget对于 mouseout 事件，它指向被进入的元素；
  对于 mousein 事件，它指向被离开的元素。
• e.delegateTarget事件委托目标

[-] 冒泡与默认行为

• action(return false)给JQ对象绑定事件的返回值设为false，则既阻止默认行为也会阻止冒泡
• e.stopPropagation()阻止冒泡
• e.preventDefault()阻止默认行为
  *阻止表单提交应对按钮绑定事件click,或表单绑定submit
• e.stopImmediatePropagation()取消事件冒泡，并取消该事件的后续事件处理函数【并未取消默认行为】
• e.isDefaultPrevented()
• e.isPropagationStopped()
• e.isImmediatePropagation()

[-] 底层接口

• $.ajax({setting}) $.ajax({
  url:'url.php',
  type:'POST', //默认为'GET'
  data:{name:'value',name:'value'},
  success:function(response,status,xhr){//something}
  })
  more info »
• $.ajaxSetup({setting}) 同$.ajax(),初始化设置重复应用的一些属性和方法
  more info »
• $.ajaxPrefilter([datatype],fn) jQuery.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) )
  在每个请求之前被发送和$.ajax()处理它们前处理，设置自定义Ajax选项或修改现有选项。
  options 是请求的选项
  originalOptions 值作为提供给Ajax方法未经修改的选项，因此，没有ajaxSettings设置中的默认值
  jqXHR 是请求的jqXHR对象
  more info »
• $.ajaxTransport([datatype],fn) 处理自定义数据类型
  传输（transport）是一个对象，它提供了两种方法，send 和 abort，内部使用由$.ajax()发出请求。传输（transport）是最高级的方法用来增强$.ajax()并且应仅作为当预过滤器（prefilters）和转换器（converters）无法满足你的需求的时候的最后的手段。
  由于每个请求需要有自己的传输（transport）对象实例，传输不能直接注册。因此，你应该提供一个函数代替返回传输（transport）。
  more info »

[-] 表单序列化

• serialize() $('form').serialize() 获取到 name=value&name=value 格式
  当对整体表单进行序列化时,注意被序列对象为form,会自动编码.
  注意: 只有 "successful controls"可以被序列化成字符串。其中，提交按钮的值不会被序列化。
  另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 name属性。
  此外，复选框（checkbox）和单选按钮（radio）(input 类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。
  另外，文件选择元素的数据也不会被序列化。
  more info »
• $.param({obj}) 将复杂的对象键值对转为name=value格式.
  因为一些框架解析序列化的数字的能力有限， 在传递 obj 参数时我们应该谨慎，尽量不要传递含有对象的数组，或者数组中嵌套其它数组。
  more info »

[-] 快捷方法

• load(url [.sel],[data],fn) url .selector对载入的HTML进行筛选，那么只要在 url 参数后面跟着一个选择器即可
  $(box).load('http://domain.com/test.html .some') //注意加.号
  一般用于静态文件加载
• $.get(url,[data],fn,type) 传参方式:
  $.get('url?name=value')
  $.get('url','name=value&name=value')
  $.get('url',{name:'value',name:'value'})
  type指定异步返回的类型: xml/html/script/json/jsonp/text
  一般情况下 type参数是智能判断,并不需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回.
  XML: $(response).find('xmltag1').find('xmltag2').text()
  
  
• $.post(url,[data],fn,type) 传参方式：
  $.get('url','name=value&name=value')
  $.get('url',{name:'value',name:'value'})
  
• fn(response,status,xhr) 回调参数：
  response（请求返回的原文本）
  status（请求状态):成功 success | 失败 error
  xhr（XMLHttpRequest对象）【属性见XHR条目】
  
• $.getScript(url,fn) 一般只需第一个参数,用于过多JS动画等分次按需加载
• $.globalEval(code) 此方法的表现不同于正常使用的JavaScript eval()，因为它是在全局上下文下执行（这对加载外部动态脚本很重要）。
  more info »

[-] JSON/JSONP

• Response Examples(PHP) GET：test.php?name=value
  
  POST：{name:'value'}
  
  JSONP：http://domain.com/test.php?callback=?
  dataType : 'jsonp'
  

  
              //跨域的 PHP 端文件
              1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
                $result = json_encode($arr);
                $callback = $_GET['callback'];
                echo $callback."($result)";
              ?>  
           

• JSON/JSONP 对于PHP文件输出的JSON格式数据,需要强制设置dataType为json类型
  

  
              //$.ajax()方法跨域获取 JSON
              $.ajax({
               url : 'http://www.li.cc/test.php?callback=?',
               dataType : 'jsonp',
               success : function (response, status, xhr) {
                console.log(response);
                alert(response.a);
               }
              });  
           

• $.parseJSON(json)接受一个JSON字符串，返回解析后的对象。
• serializeArray() 表单序列化：创建一个对象组成的javascript数组，用来编码成一个JSON一样的字符串。
  [ { name: "a", value: "1" }, { name: "b", value: "2" } ]
  more info »
• $.getJSON(url,[data],fn) 快捷方法获取JSON文件：
  JSON:$(response)[index].prop

[-] ajax事件

• ajaxSend(fn)请求发送前执行函数
• ajaxStart(fn) 绑定在document上.ajax请求提交
  例：$('document').ajaxStart(funtion(){
  $('隐藏提示盒').show();
  }).ajaxStop(function(){
  $('隐藏提示盒').hide();
  })
  
• ajaxSuccess(fn)请求成功时执行函数,局部方法.success()和.done()
• ajaxComplete(fn)请求完成时执行函数,不管是否成功,局部方法.complete()和.always()
• ajaxError(fn)请请求发生错误时执行函数,局部方法.error()和.fail()
• ajaxStop(fn) ajax请求结束

[-] 错误处理

• $.ajax({error:fn}) 调用ajax全局方法之局部对象属性:
  error : function (xhr,errorText,errorType){}
• $.post().error(fn) ajax快捷方法.error()连缀提示
  $.post().error(function(){xhr,status,info})
• $(doc).$.ajaxError(fn) 全局.ajaxError()事件
  $(document).ajaxError(function (event, xhr, settings, infoError) {}
• XHR/jqXHR/$.when() 使用 jqXHR 的连缀方式比$.ajax()的属性方式有三大好处：
  1.可连缀操作，可读性大大提高；
  2.可以多次执行同一个回调函数；
  jqXHR.done().done(); //同时执行多个成功后的回调函数
  3.为多个操作指定回调函数；
  //多个操作指定回调函数
  var jqXHR = $.ajax('test.php');
  var jqXHR2 = $.ajax('test2.php');
  $.when(jqXHR, jqXHR2).done(function (r1,r2) { //传入参数
  alert(r1[0]); //需要指定[0]获取jqXHR对象数据,而不是jqXHR
  alert(r2[0]);
  });

  ---

  XMLHttpRequest属性
  

  xhr.responseText	作为响应主体被返回的文本
  xhr.responseXML	如果响应主体内容类型是"text/xml"或"application/xml" ，则返回包含响应数据的 XML DOM 文档
  xhr.status	响应的 HTTP 状态，成功为200
  xhr.statusText	HTTP 状态的说明(成功为ok) 200 OK 服务器成功返回了页面 400 Bad Request 语法错误导致服务器不识别 401 Unauthorized 请求需要用户认证 404 Not found 指定的 URL 在服务器上找不到 500 Internal Server Error 服务器遇到意外错误，无法完成请求 503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求
  xhr.readyState	请求/相应过程的当前活动阶段 0 未初始化 尚未调用 open()方法 1 启动 已经调用 open()方法，但尚未调用 send()方法 2 发送 已经调用 send()方法，但尚未接受响应 3 接受 已经接受到部分响应数据 4 完成 已经接受到全部响应数据，而且可以使用

• def.done(d,[d])
• def.fail(failCallbacks)
• def.reject(args)
• def.rejectWith(c,[a])
• def.resolve(args)
• def.resolveWith(c,[a])
• def.promise([ty],[ta])
• def.always(al,[al])
• def.notify(args)
• def.notifyWith(c,[a])
• def.progress(proCal)
• def.state()

• cal.add(callbacks)
• cal.disable()
• cal.empty()
• cal.fire(arguments)
• cal.fired()
• cal.fireWith([c] [,a])
• cal.has(callback)
• cal.lock()
• cal.locked()
• cal.remove(callbacks)
• $.callbacks(flags)

[-] 扩展

• 官方插件库
• 中文插件库
• Esay UI
• jQuery UI

[-] 资料

• 中文API文档
• JQ中文手册
• jQuery源码分析 jQuery技术内幕：深入解析jQuery架构设计与实现原理
• 李炎恢jQuery视频教程

[-] 浏览器API

• IE API
• FireFox API

[-] 粗心大魔王

• JQ需要先执行ready函数内
• 坐标位置与宽度加px
• 字符串与属性值要引号
• 属性与CSS的回调可用index
• 动画中可用options
• 使用slow等内置参数时加引号
• 事件中可用e和data
• a弹出应用注意先阻止默认行为或+冒泡

[-]基础

• 全局变量 x1 = 1;
  var x2 = 2;
  window.x3 = 3;
  3种全局变量的异同

[-]其他

• Global Functions
  全局函数

  函数	描述
  decodeURI()	解码某个编码的 URI。
  decodeURIComponent()	解码一个编码的 URI 组件。
  encodeURI()	把字符串编码为 URI。
  encodeURIComponent()	把字符串编码为 URI 组件。
  escape()	对字符串进行编码。
  unescape()	对由 escape() 编码的字符串进行解码。
  isFinite()	检查某个值是否为有穷大的数。
  isNaN()	检查某个值是否是数字。
  Number()	把对象的值转换为数字。
  parseFloat()	解析一个字符串并返回一个浮点数。
  parseInt()	解析一个字符串并返回一个整数。
  String()	把对象的值转换为字符串。 .toString / valueOf除undefined,null
  eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。

• javascript:void(0)
• 补充说明 文件载入
  1.尽量使用外置文件，且放置在末尾
  2.defer延迟执行，async异步加载不影响其他加载【但不要含文档修改】
  3.页内时引入闭合标签需要转义，页内时以防低版本的解析问题，用cdata片段包含
  4. noscript 脚本禁用时的替代提醒 /noscript
  
  语法细节
  1.在函数内部定义的变量退出函数无效，在函数内部不用var声明的变量，则为全局变量
  2.同时一次性定义多个变量，用逗号分隔，不需要再写var
  var i=0;var j=1; ==> var i=0,j=0

[-]类型检测

• Javscript data types JS数据类型:
  Undefined Null Boolean Number String Object
  其中Array,function都属于Object
  一切皆为对象，new Object / new Boolean() / new Number() / new String() / new
  Array() / new Function() / new 构造函数名()
• typeof value typeof数据类型测试返回值（返回的是字符串

  undefined	未定义
  boolean	布尔值
  string	字符串/JSON
  number	数值
  object	对象/null
  function	function

  1. 不存在的变量与未声明的变量typeof检测均为undefined，但两者其实不同，故建议总是初始化。
  2. Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)，而 typeof 操作符检测 null 会返回 object。如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为 null。这样， 当检查 null 值就知道是否已经变量是否已经分配了对象引用了。
  3. undefined 是派生自 null 的，因此 ECMA-262 规定对它们的相等性测试返回 true。alert(undefined == null);但typeof数据类型不等。
• value instanceof types instanceof引用类型数据测试

  value instanceof Array	数组
  value instanceof Obj	构造函数实例
  value instanceof Date	日期时间
  value instanceof RegExp	正则表达式
  value instanceof Math	数学

• isNaN(value)是否为非数值,转换后非数值为true，数值false
  1. 非数值执行运算，会隐藏自动转型（除+）
  2. 加法操作中，数值字符串与数值运算，则改变为字符串串联，减法中，会继续自动转换数值进行运算
• isFinite(value)判断是否为无穷值超出计算范围
• Array.isArray(value)检测是否为数组（EC5）

[-]类型转换

• Boolean(value) Boolean(value)布尔转换规则 （控制流会自动转换）

  Boolean(value)	true	false
  undefined		undefined
  boolean	true	false
  string	非空	空
  number	非零数值	0与NaN
  object	对象（包括空的对象）	null（空对象）

• Number(value) 用于任何数据类型
  number=number
  boolean=1 / 0
  undefined=NaN
  null=0
  空字符串=0
  非数值(string+/object)=NaN
• parseInt(str) 用于字符串，自动判定进制
  忽略空格，空字符串=NaN
  第一个非空字符不是数值或负号=NaN
  第一个非空字符是数值，遇到非数值时停止解析=number
• parseFloat(str) 用于字符串
  第一个小数点有效，第二个无效
• all.toString([16])所有类型（除Null,undefined）,数值转成字符串的时候，可以传递进制参数，默认10进制
• String(value) 不确定null和undefined时,返回null和undefined
• str.split(符号,num) 字符串=>数组，符号+次数，多次分割，子项分割
• arr.join(符号) 数组=>字符串，把数组的所有元素放入一个字符串，元素通过指定的分隔符进行串联。
• JSON.parse(json)JSON=>JS对象
• JSON.stringify(obj)JS对象=>JSON

[+]运算

• 一元运算符

  一元运算符

  i++后置递增，++i前置递增，i--后置递减，--i前置递减，+i取正，-i取负
  • 只能操作一个值的运算符叫做一元运算符
  • 递增++和递减--、取正+、取负-
  • 递增递减中前置和后置的区别

  在没有赋值操作， 前置和后置是一样的。 但在赋值操作时， 如果递增或递减运算符前置 ， 那么前置的运算符会先累加或累减再赋值，如果是后置运算符则先赋值再累加或累减。

  var box = 100; var age = ++box; //age 值为 101 var height = box++; //height 值为 100

  • 非数值执行运算，会隐藏自动转型为数值（除+）

  其他类型应用一元运算符的规则

  var box = '89'; box++; //90，数值字符串自动转换成数值

  var box = 'ab'; box++; //NaN，字符串包含非数值转成 NaN

  var box = false; box++; //1，false 转成数值是 0，累加就是 1

  var box = 2.3; box++; //3.3，直接加 1

  var box = { //1，不设置 toString 或 valueOf 即为 NaN

  toString : function() {

  return 1;

  }

  }; box++;

• 算数运算符
  算术运算符

  +加法，-减法，*乘法，/除法，%求模
  • 加法操作中，数值字符串与数值运算，则改变为字符串串联，减法中，会继续自动转换数值进行运算
  • 加法操作中，非数值字符串与数值运算，会串联字符串，减法中，则会得到NaN
  • 加法操作中，数值+object类型=字符串（Num[object]），减法中，则会得到NaN
  • 乘法操作中，数值*非数值字符串或对象返回NaN，除法与求模同NaN
• 关系运算符
  关系运算符 （返回一个布尔值）

  >大于，<小于，>=大于等于，<=小于等于，==相等，!=不等，===全等，!==不全等
  • 两个操作数都是数值，则数值比较；
  • 两个操作数都是字符串，则比较两个字符串对应的字符编码值；
  • 两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；
  • 两个操作数有一个是对象，则先调用 valueOf()方法或 toString()方法，再用结果比较；
  • 不需要任何转换的情况下，null 和 undefined 是相等的；
  • 一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN 和自身不等；
  • 两个操作数都是对象，则比较他们是否是同一个对象，如果都指向同一个对象，则返回 true，否则返回 false。

  var box = {} == {}; //false，比较的是他们的地址，每个新创建对象的

  引用地址都不同

  var age = {};

  var height = age;

  var box = age == height; //true，引用地址一样，所以相等

   

• 逻辑运算符
  逻辑运算符（通常用于布尔值的操作）

  &&逻辑与(AND)、||逻辑或(OR)、!逻辑非(NOT)。

   

  如果两边的操作数有一个操作数不是布尔值的情况下，逻辑与运算就不一定返回布尔值，此时，遵循已下规则：

   

  &&逻辑与

  • • 第一个操作数是对象，则返回第二个操作数；
    • 第二个操作数是对象，则第一个操作数返回 true， 才返回第二个操作数， 否则返回 false;
    • 有一个操作数是 null，则返回 null；
    • 有一个操作数是 undefined，则返回 undefined。

  var box = 对象 && (5 > 4); //true，返回第二个操作数

  var box = (5 > 4) && 对象; //[object Object]

  var box = (3 > 4) && 对象; //false

  var box = (5 > 4) && null; //null

   

  ||逻辑或

  • • 第一个操作数是对象，则返回第一个操作数
    • 第一个操作数的求值结果为 false，则返回第二个操作数；
    • 两个操作数都是对象，则返回第一个操作数；
    • 两个操作数都是 null，则返回 null；
    • 两个操作数都是 NaN，则返回 NaN；
    • 两个操作数都是 undefined，则返回 undefined；

  var box = 对象 || (5 > 3); //[object Object]

  var box = (5 > 3) || 对象; //true

  var box = 对象 1 || 对象 2; //[object Object]

  var box = null || null; //null

  var box = NaN || NaN; //NaN

  var box = undefined || undefined; //undefined

   

  !逻辑非 

  逻辑非运算符可以用于任何值。 无论这个值是什么数据类型， 这个运算符都会返回一个布尔值。它的流程是：先将这个值转换成布尔值，然后取反。

  通常来说， 使用一个逻辑非运算符和两个逻辑非运算符可以得到相应的布尔值。

  • • 操作数是一个对象，返回 false；
    • 操作数是一个空字符串，返回 true；
    • 操作数是一个非空字符串，返回 false；
    • 操作数是数值 0，返回 true；
    • 操作数是任意非 0 数值(包括 Infinity)，false；
    • 操作数是 null，返回 true；
    • 操作数是 NaN，返回 true；
    • 操作数是 undefined，返回 true；
• 其他运算符

  赋值运算符

  乘/赋(*=)  除/赋(/=)  模/赋(%=)  加/赋(+=)  减/赋(-=)  左移/赋(<<=)  有符号右移/赋(>>=)  无符号有移/赋(>>>=)

   

  ---

  位操作符

  ~按位非，&按位与，|按位或，^按位异或，<<左移，>>有符号右移，>>>无符号右移

  ---

   
  其他运算符

  + 字符串运算符 、 ,逗号运算符 、三元运算符

   
  字符串运算符只有一个，即："+"。它的作用是将两个字符串相加。
  逗号运算符可以在一条语句中执行多个操作。
  三元条件运算符 a ? b : c
• 运算符优先级
  运算符优先级
  如果没有使用圆括号强制优先级，我们必须遵循以下顺序： 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

  运算符	描述
  . [] ()	对象成员存取、数组下标、函数调用等
  ++ -- ~ ! delete new typeof void	一元运算符
  * / %	乘法、除法、去模
  + - +	加法、减法、字符串连接
  << >> >>>	移位
  < <= > >= instanceof	关系比较、检测类实例
  == != === !==	恒等(全等)
  &	位与
  ^	位异或
  |	位或
  &&	逻辑与
  ||	逻辑或
  ?:	三元条件
  = x=	赋值、运算赋值
  ,	多重赋值、数组元素

[-]语句

• Statement

  类型	子类型	语法
  声明语句	变量声明语句	var box = 100;
  	标签声明语句	label : box;
  表达式语句	变量赋值语句	box = 100;
  	函数调用语句	box();
  	属性赋值语句	box.property = 100;
  	方法调用语句	box.method();
  分支语句	条件分支语句	if () {} else {}
  	多重分支语句	switch () { case n : ...};
  循环语句	for	for (;;;) {}
  	for ... in	for ( x in x) {}
  	while	while () {};
  	do ... while	do {} while ();
  控制结构	继续执行子句	continue ;
  	终端执行子句	break ;
  	函数返回子句	return ;
  	异常触发子句	throw ;
  	异常捕获与处理	try {} catch () {} finally {}
  其他	空语句	;
  	with语句	with () {}

• Switch
  1.switch中的case为全等判断 2.多个case使用同一个执行块应写为case 1: case2: ...

[-]内部属性/对象

• arguments函数的参数对象
  arguments对象 （类数组对象，但检测不是数组类型）

  arguments[0]	第一个参数名字
  arguments.length	参数的个数
  arguments.callee	主体函数本身，拥有这个参数对象的函数

   
• this函数执行的环境对象,函数里的函数中的this为window,闭包中调用父级函数指定var that = this
• caller调用当前函数的函数
• length函数希望接收的命名参数的个数
• prototype原型属性，不可枚举

[-]方法

• fn.apply(obj,arg)func.apply(作用域，[传递参数]/arguments)
• fn.call(obj,arg)func.call(作用域，[传递参数]),apply与call均让函数作用于特定作用域
  call必须明确传入每一个参数
• fn.bind(obj)bind(作用目标) 创建一个作用于某目标的函数实例

[-]其他

• (function(){})()匿名函数自执行,可以初始化各项值,但如果需要的变量并不是一开始初始化有的,则不可以,否则无法读取

[-]基础概念

• 对象创建方法 当对象的属性必须为变量时，则只能使用方括号！
  in遍历访问对象的属性/属性值
  for(var property in obj) {
  console.log(property); //遍历对象的全部属性
  console.log(obj[property]); //遍历所有对象的值
  }
  创建对象

  var obj = new Object() obj.key = value obj.key = function(){}	new 运算符
  var obj ={ key:value, key:function(){} }	字面量

  1. new可以省略，字面量方式中属性key可以有或去掉引号
  2. 对象属性间，不要忘记加逗号分隔
  3. 函数应用于对象时，对象名不需要加引号  function(obj){}
  对象属性

  obj.key	点表示法
  obj['key']	中括号表示法

  1. 中括号表示法时，key需要加上引号法
  2. 当属性含空格、关键字或为变量时，只能用中括号表示
  3. 删除属性delete obj.key
• 对象内部属性

  数据属性	configurable 能否删除或修改操作 true/false
  	enumerable 能否通过for-in枚举遍历 true/false
  	writable 属性值是否可写 true/false
  	value 包含属性的数据值 undefined
  访问属性	configurable 能否删除或修改操作 true/false
  	enumerable 能否通过for-in枚举遍历 true/false
  	get: 读取属性时调用的函数 undefined
  	set: 写入属性时调用的函数 undefined
  设置某类属性	Object.defineProperty(对象名,属性名,{设置块})
  设置两类属性	Object.defineProperties(对象名,{ 属性名:{设置块}, })

  configurable，enumerable，writable等默认属性为true，一旦启用设置函数即使没定义也全部设置为false.
• 函数创建方法
• 函数特征说明
• 变量与作用域
• 匿名函数与块级作用域
• 闭包与内存泄露
• 私有变量与模块模式
• 构造方法
• 继承方法

[-]字符位置

• charAt(N)返回索引上的字符
• charCodeAt(N)返回在指定的位置的字符的 Unicode 编码
• indexOf("A",n)返回索引位置，正向查找字符所在的索引
• lastIndexOf("A",n)返回索引位置，逆向查找

[-]位置筛选

• slice / substring(n,m)显示索引范围内的字符串，返回新字符串，包含起始不包含结尾
• substr(n,x)显示指定索引起范围内的字符串，返回新字符串
  slice / substring / substr 负数
  单个负数：
  alert(box.slice(-3)); //Lee，6+(-3)=3 位开始 length-n
  alert(box.substring(-3)); //Mr.Lee 负数返回全部 返回全部
  alert(box.substr(-3)); //Lee，6+(-3)=3 位开始 length-n
  第二位负数：
  alert(box.slice(3, -1)); //Le 6+(-1)=5, (3,5) a,length-n
  alert(box.substring(3, -1)); //Mr. 第二参为负，直接转 0，并且方法会把较小的数字提前，(0,3) a,0
  alert(box.substr(3, -1)); //'' 第二参数为负，直接转 0 ，(3,0) a,0

[-]匹配替换

• match(正则/匹配值)返回数组，没找到则返回null，正则识别全局
• search(正则/匹配值)返回起始的索引，没找到则返回-1，始终从头开始找，找到一个即返回，正则无需全局设置 strt
• replace(正则/匹配值,"替换目标") 返回新字符串对象，识别正则全局，function可内含一个switch控制流

[-]串联分割

• concat()返回新字符串，串联
• split(*/正则,N)返回数组，把字符串按指定符号或正则分割为字符串数组

[-]其他方法

• trim()返回新字符串，删除前置与后置空格
• toUpperCase()返回新字符串，转换大写 toLocaleUpperCase()
• toLowerCase()返回新字符串，转换小写 toLocaleLowerCase()
• localeCompare()大写小写，在之后（大于），返回1，在之前（小于），返回-1，相等，返回0
• String.fromCharCode(编码)返回编码转回的字符串

[-]数字

• Finity Finity isFinite(---) 判断是否为无穷

  最大值	Number.MAX_VALUE 1.79e+308
  最小值	Number.MIN_VALUE 5e-324
  正无穷	Number.POSITIVE_INFINITY
  负无穷	Number.NEGATIVE_INFINITY

  • 科学计数法，浮点数+e+10的指数
  • 0/0=NaN，正数/0=正无穷，负数/0=负无穷
  • 正无穷+正无穷=正无穷，负无穷+负无穷=负无穷，正无穷+负无穷=NaN
  • 无穷乘法操作得到无穷，无穷除法与求余操作得到NaN
• NaN NaN isNaN(---) 判断是否为NaN

  Number.NaN	得到 NaN 值
  var box = 0 / 0; //NaN var box = 12 / 0; //Infinity var box = 12 / 0 * 0; //NaN	任何与 NaN 进行运算的结果均为 NaN
  alert(NaN == NaN) //false	NaN 与自身不相等(NaN 不与任何值相等)

  • isNaN()函数也适用于对象。
  • 在调用 isNaN()函数过程中，首先会调用 valueOf()方法， 然后确定返回值是否能够转换成数值。如果不能，则基于这个返回值再调用 toString()方法，再测试返回值。
  • 只要NaN参与的运算均为NaN
• toFixed(N)把数字转换为字符串，结果的小数点后有指定位数的数字。
• toString(进制)把数字转换为字符串，使用指定的基数。
• toLocaleString()根据本地数字格式转换为字符串 1,000.789
• toExponential(N)把对象的值转换为指数计数法。N小数点后位数
• toPrecision(N)把数字格式化为指定的长度。N为显示位数，自动选择toFixed() toExponential(N)两者之一。

[-]正则表达式

• test()在字符串中测试模式匹配，返回 true 或 false
• exec()在字符串中执行匹配搜索，返回结果数组或null

[-]数学

• random() 1.随机颜色16进制：Math.floor( Math.random() * 16777215 ).toString( 16 ) 2.2个值之间的随机值：function random(min,max){return min + (max-min)*Math.random();}
• ceil()
• floor()
• round()
• sqrt()

[-]日期

• getFullYear()
• getMonth()[0-11]
• getDate()
• getDay()[0-6]
• getHours()
• getMinutes()
• getSeconds()
• getMilliseconds()
• getTime()
• parse()
• toString
• toUTCString

[-]基本概念

• 创建方法创建方式

  构造函数	var arr = new Array(); arr[0]=value;  var arr = new Array(element0, element1, ..., elementn); var arr = new Array(size);  [size=数组项目的个数,只写1位,且必须是数字]
  字面量	var arr = [66,80,90,77,59]

   

  注意：
  1. ECMAScript中的数组每个元素可以保存任何类型

  2. ECMAScript 中数组的大小也是可以调整的。

  3. var arr = new Array(10)  不等于 var arr = [10]
• .length
  数组属性·长度Length

  str.length	字符串长度
  arr.length	数组长度
  function.length	参数长度/个数
  object & number类型无length

   
   
• [index]
  数组下标

  var  box =[]; box['name']=iRuxu; alert(box);  //空 alert(box['name']); //iRuxu alert(box[0]); //iRuxu

  如果是字符串下标，不会体现在数组上，需要指定下标键打印，如果是索引下标，则可以直接打印
   
  数组方法I

[-]添加移除

• push()栈：后方添加项目，返回总数。
• pop()栈：后方移除项目，返回移除项。
• unshift()队列：前方添加项目，返回总数。
• shift()队列：前方移除项目，返回移除项。

[-]串联分割

• concat()连接两个或更多的数组，并返回结果，返回新数组。（合并数组->新）
• slice(n,m)从某个已有的数组返回选定的元素，返回新数组。（过滤数组->新）
  当含1个参数时，起始到末尾全部：slice(1)——索引为1开始到末尾
  当含2个参数时，起始到末尾-1：slice(1,4)——索引为1~3，不包含4
• splice(n,m,[val]) 方法向/从数组中添加/删除/替换项目，然后返回被删除的项目。
  注释：请注意，splice() 方法与 slice() 方法的作用是不同的，splice()方法会直接对数组进行修改。
  第1个参数为起始索引位置，第2个参数为删除的数目，当数目为0时则为添加项目，第3个参数开始为添加新的项目（如只删除无此参数）。
  splice(0,1)——位置0删除1项
  splice(2,0,arr1,arr2) ——位置2开始添加2项
  splice(1,1,100) —— 位置1删除并添加1项
• join(符号)把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

[-]排序

• reverse()反转
• sort()默认升序排列
• sort(fn)严格升序或降序排列
  function sortNumber(a,b){return a - b //降序b-a}
  sort方法参数如果提供一个函数，那么该函数必须返回以下值之一：
  负值，所传递的第一个参数比第二个参数小；
  正值，所传递的第一个参数比第二个参数大；
  零，两个参数相等。

[-]查找位置

• indexOf(value,n)正向查找,n为起始索引,如查找不到则返回-1
• lastIndexOf(value,n)逆向查找

[-]迭代方法

• every(fn[item,index,arr])每一项为true，返回true
  arr.every(function(item,index,array){
  要求
  })
• some(fn[item,index,arr])某一项为true，返回true
  arr.some(function(item,index,array){
  要求
  })
• filter(fn[item,index,arr]) 返回为true的新数组，按某个函数方法过滤
  arr.filter(function(item,index,array){
  要求
  })
• map(fn[item,index,arr])返回执行函数后的新数组
  arr.map(function(item,index,array){ 要求
  })
• forEach(fn[item,index,arr])遍历数组去执行某个函数，无返回值
  arr.forEach(function(item,index,array){
  要求
  })

[-]递归方法

• reduce返回正向函数执行后的归并值 arr.reduce(function(prev,cur,index,array){
  return prev+cur;
  })
• reduceRight
  var arr=[1,2,3]
  var sum=arr.reduce(function(prev,cur,index,array){
  return prev+cur;
  })
  alert(sum); //6

[-]多维数组

• 二维数组 声明1维，1维循环（声明2维，2维循环），循环条件中参数使用分号，索引号与长度关系。 var myarr=new Array(); //先声明一维 for(var i=0;i<x;i++){ 一维长度="" myarr[i]="new" array();="" 在声明二维="" for(var="" j="0;j<y;j++){" 二维长度="" myarr[i][j]="i+j;" 赋值，每个数组元素的值为i+j="" }="" <="" textarea=""> </x;i++){>

[-]Underscore

[-]Window

• window properties
  1. window 对象有一系列的属性，这些属性本身也是对象。
  2. window 下的属性和方法，可以使用 window.属性、window.方法()或者直接属性、方法()的方式调用。例如：window.alert()和 alert()是一个意思。
  3. 全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以，但实际上全局定义归属于对window定义
  4. 尝试访问未声明的变量会抛出错误，但是可以通过查询window对象知道某个可能未声明的变量是否存在。
   
  • window 对象的属性

  内容
  document	窗口中当前显示的文档对象
  location	当前窗口的 URL
  history	保存有窗口最近加载的 URL
  screen	显示屏幕相关信息，如高度、宽度（以像素为单位）
  Navigator	对 Navigator 对象的只读引用 navigator.userAgent
  offscreenBuffering	用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新
  层级
  name	窗口名
  opener	打开当前窗口的窗口
  self / window	指示当前窗口 / 指示当前窗口，与 self 等效
  frames	窗口中的框架对象数组 frames[]    frames.length 存放数组 frames[] 中含有的元素个数    top.frames[n] 页面第几个框架
  length	窗口中的框架数
  parent	指向包含另一个窗口的窗口（由框架使用）
  top	包含特定窗口的最顶层窗口（由框架使用）
  状态
  closed	当窗口关闭时为真
  defaultStatus	窗口底部状态栏显示的默认状态消息（IE）
  status	描述由用户交互导致的状态栏的临时消息（IE）

   
• alert/confirm/prompt()

  系统对话框
  alert(text)	警告
  confirm(text)	确认/取消  返回布尔值：true,false
  prompt(text,defaultInput)	输入框 返回值：确认>内容，取消>null
  print()	打印
  find()	查找

• open(url,name,[options]) window.open(url,name,[options]) 打开一个新窗口并返回新 window 对象，将open()赋值给一个变量，对变量可以执行对子窗口的设置
  ■open方法 window.open("URL", "位置", "属性","历史记录");
  使用 window.open()方法可以导航到一个特定的 URL， 也可以打开一个新的浏览器窗口 。它可以接受四个参数：
  1.URL http://www.baidu.com
  2.窗口名称或窗口目标 _target / _parent / somename
  3.一个特性字符串，见下表
  4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值：true替换历史记录，false创建新历史记录

[-]定时器

• setTimeout(fn,time)设置延迟多久执行，一次性行为
• clearTimeout(x)
• setInterval(fn,time)设置间隔多久执行
• clearInterval(x)

[-]其他

• location location.href 地址
  location.reload() 重新加载
• encodeURIComponent(url)
• decodeURIComponent(url)
• history.go(n)

[-]动画

• 手机端需添加-webkit-前缀
• transitionendCSS 完成过渡后触发
• animationendCSS动画结束播放时触发
• animationiterationCSS 动画重复播放时触发
• animationstartCSS 动画开始播放时触发

[-]移动端

• onorientationchange 屏幕旋转事件，检测终端类型
  var screenStatus = "onorientationchange" in window ? "orientationchange" : "resize";
  window.orientation = 90/-90为横屏
• touchstart当手指接触屏幕时触发
• touchmove当已经接触屏幕的手指开始移动后触发
• touchend当手指离开屏幕时触发
• gesturestart当两个手指接触屏幕时触发
• gesturechange当两个手指接触屏幕后开始移动时触发
• gestureend当两个手指离开屏幕时触发
• orientationchange 检测触摸屏幕的手指何时改变方向

[-]Form

[-]鼠标

[-]键盘

[-]CSS

• .clientWidth返回内容的可视宽度（不包括边框，边距或滚动条）
  document.body.clientWidth; 在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
  document.body.clientHeight; 在页面上返回内容的可视高度（不包括边框，边距或滚动条）
  兼容：clientWidth= document.documentElement.clientWidth|| document.body.clientWidth; 在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
• .clientHeight返回内容的可视高度（不包括边框，边距或滚动条）
• .offsetWidth返回元素的宽度，包括边框和padding，但不包括margin
• .offsetHeight返回元素的高度，包括边框和padding，但不包括margin
• .scrollWidth返回元素的整个宽度（包括带滚动条的隐蔽的地方）
  document.body.scrollWidth; 返回元素的整个宽度（包括带滚动条的隐蔽的地方）
  document.body.scrollHeight; 返回整个元素的高度（包括带滚动条的隐蔽的地方）
  兼容：scrollWidth=document.documentElement.scrollWidth|| document.body.scrollWidth; 返回元素的整个宽度（包括带滚动条的隐蔽的地方）
• .scrollHeight返回整个元素的高度（包括带滚动条的隐蔽的地方）
• .scrollTop滚动条滚动距离
  IE低版本document.documentElement.scrollTop
  现代浏览器document.body.scrollTop
• .scrollLeft返回当前视图中的实际元素的左边缘和左边缘之间的距离
• .offsetParent返回元素的偏移容器
• .offsetTop返回当前元素的相对垂直偏移
• .offsetLeft返回当前元素的相对水平偏移

[-]文档处理

• .cookie
• .lastModified
• .readyState
• createElement()
• createTextNode()
• createAttribute()
• normalize()
• getElementById()
• getElementsByName()
• getElementsByTagName()
• document.querySelector("#selector")
• document.querySelectorAll(".selector")
• write()

[-]DOM方法

• getAttribute('attr')
• setAttribute('attr',val)
• .innerHTML
• .nodeName
• .nodeValue
• .nodeType
• .attributes
• .children[n]
• .childNodes
• .firstChild
• .lastChild
• .parentNode
• appendChild()
• createTextNode()
• insertBefore(key,参照节点)
• repalceChild(key,被替换)
• cloneNode(true)
• removeChild()

[-]Attribute对象

[-]JSON

• JSON概念 概念：
  它是一种表示结构化数据的形式，JSON是一个格式化的字符串，文件格式后缀为.json
  
  语法：
  简单值：字符串、数值、布尔值、null，不支持undefined
  对象：一组无序的键值对
  数组：一组有序的值的列表，可以通过索引来访问
  
  JSON与JS的区别：
  JSON字符串必须使用双引号（单引号会导致语法错误），且对象的属性必须加双引号
  在JS中直接引入一段JSON数据应该用单引号将其括起来，因为它其实代表一个字符串
  如：'{"name" : "Lee","age" : 100}'
  JSON数组与对象比普通JS少了分号与赋值，其本身表示的是字符串
• eval('json_str')
  方法一：eval('json_str')
  方法二：JSON对象内置方法(ECMA5)
  *说明：IE7及IE7-需要引用库文件 https://github.com/douglascrockford/JSON-js/
  <!--[if lte IE 7]> json2.js <![endif]-->
• JSON.parse('json_str') 解析（JSON>JS）：把JSON字符串解析为原生JS值
  JSON.parse('json_str',[还原函数]) var box = '[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'; var json = JSON.parse(box, function (key, value) { if (key == 'name') { return 'Mr. ' + value; } else { return value; } }); alert(json[0].name);
• JSON.stringify(js_obj) 转换（JS>JSON）把JS对象序列化为JSON字符串
  JSON.stringify(js_obj,[过滤函数/数组],[缩进])
  过滤器与缩进为可选 ，当只保留缩进但不过滤时，将过滤器设置为null
  1. 过滤器数组：指定需要的键
  var box = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}]; var json = JSON.stringify(box, ['name', 'age'] , 4); alert(json);
  2. 过滤函数：过滤函数与还原函数都接受两个参数，即键和值，都需要返回一个值
  var box = [{name : 'a', age : 1, height : 177},{name : 'b', age : 2, height : 188}]; var json = JSON.stringify(box, function (key, value) { switch (key) { case 'name' : return 'Mr. ' + value; case 'age' : return value + '岁'; default : return value; } }, 4); alert(json);
  3. 缩进：可以为数字（空格）或指定符号
• toJSON() JS对象中添加toJSON()方法，自定义过滤一些数据
  var box = [{name : 'a', age : 1, height : 177, toJSON : function () { return this.name; }},{name : 'b',age : 2, height : 188, toJSON : function () { return this.name; }}];
• 执行优先级 执行优先级：toJSON() --> 过滤参数 --> 标准序列化 --> 缩进
  如在toJSON中已被过滤的键值则就算过滤参数中仍有设置也已无效

[-]参考资料

• MDN
• StackOverflow

[-]相关书籍

• Javascript高级程序设计
• Javascript权威指南
• Javascript编程精解

[-]Common

• !doctype html HTML5
  
  HTML4无框架
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  HTML4有框架
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• html根元素
  语言 lang="zh-CN"
  缓存 manifest="demo.appcache"
• head头部信息
• body内容区域
• 注释

[-]Meta

• lang 简体中文 html lang="zh-cmn-Hans"
  繁体中文 html lang="zh-cmn-Hant"
• title标题
• charset HTML5
  
  HTML4
  
• base 定义页面中所有链接的默认地址或默认目标。
  注释：如果使用了base标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。
• viewport
  width viewport 宽度(数值/device-width)
  height viewport 高度(数值/device-height)
  initial-scale 初始缩放比例
  maximum-scale 最大缩放比例
  minimum-scale 最小缩放比例
  user-scalable 是否允许用户缩放(yes/no)
  minimal-ui 在页面加载时最小化上下状态栏(iOS7.1)
• X-UA-Compatible 强制使用IE最高版本及谷歌内核 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 360安全浏览器默认使用极速模式渲染 <meta name="renderer" content="webkit">
  360浏览器内核控制 Meta 标签说明文档
• Cache-Control不允许百度转码
  旧写法：
  
  新写法：
  
  参考资料
• name(SEO)

  name

  author description keywords generator copyright revised Robots

  content

  作者 描述 关键词 创建者/程序 版权信息 页面的最新版本 (  David, 2008/8/8/  ) all|none|index|noindex|follow|nofollow 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上的链接可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； 设定为nofollow：文件将不被检索，页面上的链接可以被查询。 参考资料

• http-equiv

  http-equiv

  content-type content-language expires pragma set-cookie pics-label MSThemeCompatible

  content

  <meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"> <meta http-equiv="Content-Language" contect="zh-CN"> <meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"> 网页到期时间 <meta http-equiv="Pragma" contect="no-cache"> 禁止缓存和脱机浏览 <meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"> Cookie过期自动删除 <meta http-equiv="Pics-label" contect=""> IE网页评级 <Meta http-equiv="MSThemeCompatible" Content="Yes"> 是否在IE中关闭 xp 的主题 注意：关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。

• refresh
  定时让网页在指定的时间n内，跳转到页面http://yourlink；
• windows-target
  强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用
• Page-Enter
  • <meta http-equiv="Page-Enter" content="revealTrans(duration=5.0,transition=20)">
  • Duration持续时间（单位：秒）
  • Transition滤镜类型。表示使用哪种特效，取值为0-23:

  0 矩形缩小	1矩形扩大	2 圆形缩小	3 圆形扩大	4 下到上刷新	5 上到下刷新
  6 左到右刷新	7 右到左刷新	8 竖百叶窗	9 横百叶窗	10 错位横百叶窗	11 错位竖百叶窗
  12 点扩散	13 左右到中间刷新	14 中间到左右刷新	15 中间到上下	16 上下到中间	17 右下到左上
  18 右上到左下	19 左上到右下	20 左下到右上	21 横条	22 竖条	23 以上22种随机选择一种

[-]Link

• dns-prefetch提前域名解析'/>
• style可配合条件注释或指定media媒体查询引入样式表
  '/>
• favicon 小ICON图标'/>
• RSS订阅RSS订阅input
  '/>

[-]Script

• script也可以写在body区域或底部,推荐放在底部加载
  '/>
  defer延迟执行，async异步加载不影响其他加载【但不要含文档修改】
• noscript禁用脚本提示
• IE9-支持HTML5 <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js?'></script> <![endif]-->
• IE9-支持媒体查询 <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js?'></script> <![endif]-->
• modernizr
• IE9-支持CSS3选择器

[-]Win8/WinPhone

• msapplication-TileColor Windows 8 磁贴颜色
  <meta name="msapplication-TileColor" content="#000">
• msapplication-TileImage Windows 8 磁贴图标
  <meta name="msapplication-TileImage" content="icon.png" <="" textarea="">
• msapplication-tap-highlight windows phone 点击无高光
  <meta name="msapplication-tap-highlight" content="no">
• window8

[-]iOS

• apple-mobile-web-app-capable 启用 WebApp 全屏模式
  <meta name="apple-mobile-web-app-capable" content="yes">
• format-detection 禁止识别电话号码/邮件
  <meta name="format-detection" content="telphone=no, email=no">
• apple-mobile-web-app-title 添加到主屏后的标题（iOS 6 新增）
  <meta name="apple-mobile-web-app-title" content="标题">
• apple-touch-icon-precomposed iOS图标,rel 参数：
  apple-touch-icon 图片自动处理成圆角和高光等效果。
  apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。
  iPhone 和 iTouch，默认 57x57 像素，必须有.
  默认 57x57 像素，必须有 <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png?"> iPad，72x72 像素，可以没有，但推荐有 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png?"> Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png?"> Retina iPad，144x144 像素，可以没有，但推荐有 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png?"> IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在中加上这段 <link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png?">
• apple-touch-startup-image iOS 启动画面,官方文档
  iPad 的启动画面是不包括状态栏区域的。
  iPad 竖屏 768 x 1004（标准分辨率） <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png?"> iPad 竖屏 1536x2008（Retina） <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png?"> iPad 横屏 1024x748（标准分辨率） <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png?"> iPad 横屏 2048x1496（Retina） <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png?"> iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
  iPhone/iPod Touch 竖屏 320x480 (标准分辨率) <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png?"> iPhone/iPod Touch 竖屏 640x960 (Retina) <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png?"> iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png?"> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。 <link rel="apple-touch-startup-image" href="launch6.png?" media="(device-width: 375px)"> <link rel="apple-touch-startup-image" href="launch6plus.png?" media="(device-width: 414px)">
• iOS8

[-]Mobile

• UC UC强制竖屏 <meta name="screen-orientation" content="portrait"> UC强制全屏 <meta name="full-screen" content="yes"> UC应用模式 <meta name="browsermode" content="application">
• QQ QQ强制竖屏 <meta name="x5-orientation" content="portrait"> QQ强制全屏 <meta name="x5-fullscreen" content="true"> QQ应用模式 <meta name="x5-page-mode" content="app">
• other

[-]内容

• address定义文档作者或拥有者的联系信息。
• cite定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
• header定义一个文档头部部分
• footer定义一个文档底部
• nav定义导航链接
• section定义了文档的某个区域
• article定义一个文章内容
• aside定义其所处内容之外的内容。
• details定义了用户可见的或者隐藏的需求的补充细节。
• summary定义一个可见的标题。 当用户点击标题时会显示出详细信息。

[+]布局

• div层
• span文本
• h1~h6标题
• p段落
• br换行,title中换行& #10;
• hr水平线
• a链接
• iframe内联框架src=url, 沙盒过滤

[+]格式

• b粗体
• i定义斜体文本。
• del定义被删除文本。
• em定义强调文本。
• strong定义语气更为强烈的强调文本。
• mark标签定义带有记号的文本。
• sub定义下标文本。
• sup定义上标文本。
• bdo定义文本的方向。bdo dir=ltr/rtl
• abbr定义一个缩写。
• blockquote定义块引用。
• q定义短的引用。浏览器经常会在这种引用的周围插入引号。
• meter定义度量衡。仅用于已知最大和最小值的度量。
• progress定义运行中的任务进度（进程）。

[-]列表

• ul定义一个无序列表
• ol定义一个有序列表
• li定义一个列表项
• dl/dt/dd自定义列表

[-]表格

• table表格
• caption表格标题
• th表头单元格
• tr行
• td单元格
• thead表头
• tbody主体
• tfoot表尾
• col定义表格中一个或多个列的属性值。
• colgroup定义表格中供格式化的列组。参考实例

[-]表单

• form表单

  form action="url" autocomplete="on/off" method="get/post" name="" target="_blank" novalidate(="novalidate")	规定当提交表单时向何处发送表单数据。 规定是否启用表单的自动完成功能。（HTML5） 规定用于发送表单数据的 HTTP 方法。 表单名 action打开方式 无需验证（HTML5、safari!x）
  enctype="" 限POST方法 规定在向服务器发送表单数据之前如何对其进行编码。	application/x-www-form-urlencoded      默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。 multipart/form-data      不对字符编码。当使用有文件上传控件的表单时，该值是必需的。 text/plain      将空格转换为 "+" 符号，但不编码特殊字符。

• label定义 input 元素的标注。
• input定义一个输入控件。语音搜索
  

  button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
  checkbox	定义复选框。
  color	定义拾色器。
  date	定义 date 控件（包括年、月、日，不包括时间）。
  datetime	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
  datetime-local	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
  emailNew	定义用于 e-mail 地址的字段。
  file	定义文件选择字段和 "浏览..." 按钮，供文件上传。
  hidden	定义隐藏输入字段。
  image	定义图像作为提交按钮。
  month	定义 month 和 year 控件（不带时区）。
  number	定义用于输入数字的字段。
  password	定义密码字段（字段中的字符会被遮蔽）。
  radio	定义单选按钮。
  range	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
  reset	定义重置按钮（重置所有的表单值为默认值）。
  search	定义用于输入搜索字符串的文本字段。
  submit	定义提交按钮。
  tel	定义用于输入电话号码的字段。
  text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
  time	定义用于输入时间的控件（不带时区）。
  url	定义用于输入 URL 的字段。
  week	定义 week 和 year 控件（不带时区）。

• datalist规定了 input 元素可能的选项列表。
• textarea定义多行的文本输入控件。
• button定义按钮。
• select定义选择列表（下拉列表）。
• optgroup定义选择列表中相关选项的组合。
• option定义选择列表中的选项。
• fieldset定义了一组相关的表单元素，并使用外框包含起来
• legend定义了
  元素的标题

[-]图像

• img定义图像。
• map/area定义图像映射/定义图像地图内部的区域。
• canvas绘制图形
• figurefigure 标签用于对元素进行组合。
• figcaptionfigure的标题

[-]多媒体

• audio定义声音，比如音乐或其他音频流。
• video定义一个音频或者视频
• source定义media元素 (video 和 audio)的媒体资源
• track为媒体(video 和 audio)元素定义外部文本轨道。
• object定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
• embed定义嵌入的对象。
• param定义对象的参数。

[+]概念资料

• 插入方式 嵌入方式：
  1.img标签:'/>
  2.css背景:
  3.svg标签 <svg xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg>
  4.iframe标签:
  5.使用embed标签(早期将SVG图像嵌入到HTML页面中都是通过embed元素。当时并不是所有的浏览器都支持原生SVG。)
  6.使用object标签(object元素是HTML4的标准标签元素，被所有较新的流星器支持。它只不过是不允许使用脚本。)
  没有单位时总是以px作为单位,即使父级设置了其他类型单位,子级未设置单位的依然按px绘制。
• W3school参考手册
• 视频教程
• W3C规范

[+]工具素材

• SVG Filter生成
• Clip Path生成
• Flaticon
• Icomoon
• SVG Editor

[-]基本属性

• viewBox viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
• preserveAspectRatio preserveAspectRatio="xMidYMid meet" 参考资料
  第1个值表示，viewBox如何与SVG viewport对齐，自由组合；
  xMin viewport和viewBox左边对齐
  xMid viewport和viewBox x轴中心对齐
  xMax viewport和viewBox右边对齐
  YMin viewport和viewBox上边缘对齐。注意Y是大写。
  YMid viewport和viewBox y轴中心点对齐。注意Y是大写。
  YMax viewport和viewBox下边缘对齐。注意Y是大写。
  第2个值表示，如何维持高宽比（如果有）。
  meet 保持纵横比缩放viewBox适应viewport
  slice 保持纵横比同时比例小的方向放大填满viewport
  none 扭曲纵横比以充分适应viewport
• g编组
• defs引用的元素容器
• pattern定义一个可用于平铺的图案,fill:url(#id)
• usesvg画布铺满整个浏览器,需要设置html+body~font-size:0;line-height:0;
  use xlink:href="#id"
• clipPathclipPath定义一个用于剪裁的形状,clip-path="url(#id)"通过引用对某个图像进行剪裁
  单词！！【定义】clipPath 《=》 【引用】clip-path="url(#id)"
  被剪裁形状内的区间为显示区间！！
  css制作遮罩动画中,遮罩图形的尺寸不可操作,只有transform属性
• mask蒙版
  maskUnits="'userSpaceOnUse' or 'objectBoundingBox'.设定裁剪面是否是相对完整的视窗或对象（默认：'objectBoundingBox'）"
  maskContentUnits="第二个掩码相对对象的图形位置使用百分比'userSpaceOnUse'或'objectBoundingBox'（默认：'userSpaceOnUse'）"
  x="裁剪面掩码（默认值：-10％）"
  y="裁剪面掩码（默认值：-10％）"
  width="裁剪面掩码（默认是：120％）"
  height="裁剪面掩码（默认是：120％）"
• image 定义图像
  x="图像的左上角的x轴坐标"
  y="图像的左上角的y轴坐标"
  width="图像的宽度". 必须.
  height="图像的高度". 必须.
  xlink:href="图像的路径". 必须.

[-]绘制图形

• rect矩形 x,y,width,height,rx,ry
• circle圆形 cx,cy,r
• ellipse椭圆 cx,cy,rx,ry
• line直线 x1,y1,x2,y2
• polygon多边形 points="x1,y1 x2,y2 ...,xN,yN"
• polyline折线 points="x1,y1 x2,y2 ...,xN,yN"
• path路径 d=". . ."
• text文字 x,y

[-]图形属性

• width/height宽高
• x/y矩形/文字起始点水平/垂直坐标
• rx/ry 矩形水平圆角 / 椭圆水平半径
  矩形垂直圆角 / 椭圆垂直半径
• cx/cy圆心水平/垂直坐标
• r圆半径
• x1,y1,x2,y2线条的起始与结束坐标点
• points定义多边形/折线每个角的x和y坐标,每一组数x,y xn,yn每一组点之间用空格分开
• d定义路径数据：
  所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
  M = moveto （移动到）
  L = lineto （连线）
  H = horizontal lineto （水平连线）
  V = vertical lineto （垂直连线）
  C = curveto （曲线）
  S = smooth curveto （平滑曲线）
  Q = quadratic Bézier curve （二次贝塞尔曲线）
  =》M x0 y0 q x1 y1 x2 y2 小写代表相对,即后面的值表示正数+水平向下/负数-水平向上
  T = smooth quadratic Bézier curveto （平滑贝塞尔曲线）
  A = elliptical Arc （椭圆弧形）
  Z = closepath （闭合路径）
• styleCSS样式

[-]样式属性

• fill(#fff)填充颜色
• fill-opacity(0-1)填充透明度
• stroke(#f39)轮廓颜色
• stroke-opacity(0-1)轮廓线透明度
• stroke-width(8)轮廓宽度(可不要单位)
• stroke-linecap(round)轮廓笔触样式
  butt:结尾柄
  round:圆
  square:方
• stroke-dasharray虚线样式
  自定义虚线的结构
  stroke-dasharray="5,5"
  stroke-dasharray="20,10,5,5,5,10"
  SVG描边动画,设置stroke-dasharray: 1000;stroke-dashoffset: 1000;设置keyframe{ to{stroke-dashoffset: 0;}}
• transform变换是基于自身坐标系！矩阵等同线性代数矩阵

[-]字体

• text文字，基于基线对齐
• textPath 路径文字 textPath xlink:href="#id"
  超出路径的部分不会被渲染
  位移控制：
  水平：x(起始位置点),text-anchor:start/end/middle(文字的哪个点对齐文本x起始点),startOffset:%(文本以哪个开始作为与路径对齐的点),dx(切线起点)
  垂直：y(无),dy(法线位置,dx/dy会对后续字符一起影响) <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path id="path1" d="M75,20 a1,1 0 0,0 100,0"></path> </defs> <text x="10" y="100" style="fill:red;"> <textpath xlink:href="#path1">I love SVG I love SVG</textpath> </text> </svg>
• tspantext中多行文本,可拥有单独样式
• axlink:href a标签可以添加到任意图形上
  链接文本,应包围在text外面,xlink:title提示
  <a xlink:href="http://www.w3schools.com/svg/" target="_blank"> <text x="0" y="15" fill="red">I love SVG</text> </a>

[-]渐变

• linearGradient线性渐变
  id="id 属性可为渐变定义一个唯一的名称。引用必须"
  gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'.使用视图框或对象，以确定相对位置矢量点。 （默认为'objectBoundingBox）"
  gradientTransform="适用于渐变的转变"
  x1="渐变向量x启动点（默认0％）"
  y1="渐变向量y启动点（默认0％）"
  x2="渐变向量x的终点。 （默认100％）"
  y2="渐变向量y的终点。 （默认0％）"
  spreadMethod="'pad' or 'reflect' or 'repeat'"
  xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive" <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"> </stop></stop></lineargradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse> </svg>
• radialGradient径向渐变
  gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. 使用视图框或对象以确定相对位置的矢量点。 （默认为'objectBoundingBox）"
  gradientTransform="适用于渐变的变换"
  cx="渐变的中心点（数字或％ - 50％是默认）"
  cy="渐变的中心点。 （默认50％）"
  r="渐变的半径。 （默认50％）"
  fx="渐变的焦点。 （默认0％）"
  fy="渐变的焦点。 （默认0％）"
  spreadMethod="'pad' or 'reflect' or 'repeat'"
  xlink:href="引用到另一个渐变，其属性值作为默认值。递归" <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <radialgradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0"> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"> </stop></stop></radialgradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse> </svg>

[+]滤镜

• filter滤镜
  所有互联网的SVG滤镜定义在defs元素中。defs元素定义短并含有特殊元素（如滤镜）定义。 filter标签用来定义SVG滤镜。filter标签使用必需的id属性来定义向图形应用哪个滤镜
• 示例 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0"> <fegaussianblur in="SourceGraphic" stddeviation="15"> </fegaussianblur></filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"></rect> </svg>
  filter元素id属性定义一个滤镜的唯一名称
  feGaussianBlur元素定义模糊效果
  in="SourceGraphic"这个部分定义了由整个图像创建效果
  stdDeviation属性定义模糊量
  rect元素的滤镜属性用来把元素链接到"f1"滤镜
• feBlend与图像相结合的滤镜
• feOffset过滤阴影
• feGaussianBlur高斯模糊
• feColorMatrix用于彩色滤光片转换
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feImage
• feMerge
• feMorphology
• feSpecularLightingfeTile
• feTurbulence
• feDistantLight用于照明过滤
• fePointLight用于照明过滤
• feSpotLight用于照明过滤

[-]动画

• 参数详解参考资料
  attributeName : 可以是元素直接暴露的属性，可以是CSS属性
  attributeType : CSS/XML/auto
  from = 动画的起始值。
  to = 指定动画的结束值,如果to,by同时出现，则by打酱油，只识别to.
  by = 动画的相对变化值。
  values = "a,b,c,d"用分号分隔的一个或多个值，可以看出是动画的多个关键值点。
  begin = "3s;6s" 动画开始的时间。begin的定义是分号分隔的一组值；
  相对时间：-3s；
  关联其他：id.end/begin +/-3s；
  绑定事件：id.click +/-3s；
  重复次数：id.repeat(整数) +/-3s；
  某个按键：accessKey(" character ")
  无线等待：indefinite 需要beginElement()方法触发或者指向该动画元素的超链接(SVG中的a元素)
  dur = "3s" 动画执行的时间
  calcMode = discrete离散，from值直接跳到to值。
  linear线性，动画从头到尾的速率都是一致的
  paced踏步，通过插值让动画的变化步调平稳均匀
  spline样条，插值定义贝塞尔曲线
  repeatCount:表示动画执行次数,合法数值或者indefinite
  repeatDur:定义重复动画的总时间,可以是普通时间值或者indefinite
  fill:freeze元素保持了动画结束之后的状态 | remove表示动画结束直接回到开始的地方
  accumulate:是累积的意思。支持参数有：none | sum. 默认值是none. 如果值是sum表示动画结束时候的位置作为下次动画的起始位置。
  additive:控制动画是否附加。支持参数有：replace | sum. 默认值是replace. 如果值是sum表示动画的基础知识会附加到其他低优先级的动画上
  restart:always | whenNotActive | never.always是默认值，表示总是，也就是点一次圈圈，马儿跑一下。whenNotActive表示动画正在进行的时候，是不能重启动画的。never表示动画是一波流。
• set 参考资料 <set attributename="x" attributetype="XML" to="60" begin="3s"> </set>
• animate随时间动态改变属性
  attributeName="目标属性名称"
  from="起始值"
  to="结束值"
  dur="持续时间"
  repeatCount="动画时间将发生"
• animateColor定义随着时间的推移颜色转换
  by="相对偏移值"
  from="起始值"
  to="结束值"
• animateMotion使元素沿着动作路径移动
  calcMode="动画的插补模式。可以是'discrete', 'linear', 'paced', 'spline'"
  path="运动路径"
  keyPoints="沿运动路径的对象目前时间应移动多远"
  rotate="应用旋转变换"
  xlink:href="一个URI引用元素，它定义运动路径"
• animateTransform动画上一个目标元素变换属性，从而使动画控制平移，缩放，旋转或倾斜
  by="相对偏移值"
  from="起始值"
  to="结束值"
  type="类型的转换其值是随时间变化。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'"

[-]Javascript API

• 创建图形document.creatElementNS(ns,tagName)
• SVG_NS'http://www.w3.org/2000/svg'
• XLINK_NS'http://www.w3.org/1999/xlink'
• Morpheus 平滑复杂动画的补间动画创建 Git | 参考资料
  用法：
  1.引入库,创建SVG,给SVG画布定义id,内部元素必须为g分组,不支持symbol,同样给定id
  2.实例化SVG为对象，此处为整个svg画布。var myIcons = new SVGMorpheus('#icon');不设置参数时默认显示最后一个g。
  3.切换目标，注意此处引入的id不再加“#”号！myIcons.to('icon-pacman');结合事件切换

  ---

  SVGMorpheus构造方法
  var myIcons = new SVGMorpheus(element, options, callback);
  1.element
  SVG元素，可以是选择器（字符串）、也可以直接就是SVG元素、Object元素或IFrame元素（对象）。
  2.options
  可选参数们。具体见下：
  options.iconId – 可选。表示初始化之后，默认显示的图标id, 如果不使用默认值，则使用最后一个图标。
  options.duration – 可选。动画持续时间，单位是毫秒。默认是750ms.
  options.easing – 可选。设置默认缓动类型（缓动关键字后面有陈列）。默认是：quad-in-out.
  options.rotation – 可选。设置动画旋转方向，顺时针还是逆时针，支持下面4个关键字clock, counterclock, random以及none, 分别表示顺时针，逆时针，随机时针以及没有旋转。默认值是clock也就是顺时针变旋转变补间。
  3.callback 可选。设置所有图标变换动画结束后的回调。

  ---

  SVGMorpheus.to()方法
  myIcons.to(iconId, options, callback);
  1.iconId
  要变换的图标的id, 在元素上。【不需要#】
  2.options
  可选参数们。具体见下：
  options.iconId – 可选。表示初始化之后，默认显示的图标id, 如果不使用默认值，则使用最后一个图标。
  options.duration – 可选。当前动画持续时间，单位是毫秒。默认是750ms.
  options.easing – 可选。设置当前动画缓动类型（缓动关键字后面有陈列）。默认是：quad-in-out.
  circ-in, circ-out, circ-in-out, cubic-in, cubic-out, cubic-in-out, elastic-in, elastic-out, elastic-in-out, expo-in, expo-out, expo-in-out, linear, quad-in, quad-out, quad-in-out, quart-in, quart-out, quart-in-out, quint-in, quint-out, quint-in-out, sine-in, sine-out, sine-in-out
  options.rotation – 可选。设置当前动画旋转方向，顺时针还是逆时针，支持下面4个关键字clock, counterclock, random以及none, 分别表示顺时针，逆时针，随机时针以及没有旋转。默认值是clock也就是顺时针变旋转变补间。
  3.callback 可选。设置当前图标变换动画结束后的回调。
• Snap.svg
• Snap API

[-]核心

• getContext("2d")
• createEvent()
• toDataURL()
• save()保存当前环境的状态。
• restore()返回之前保存过的路径状态和属性。

[-]图像

• drawImage(image,x,y)参考资料
  在画布上定位图像：
  JavaScript 语法： context.drawImage(img,x,y);
  在画布上定位图像，并规定图像的宽度和高度：
  JavaScript 语法： context.drawImage(img,x,y,width,height);
  剪切图像，并在画布上定位被剪切的部分：
  JavaScript 语法： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);
• width返回 ImageData 对象的宽度。
• height返回 ImageData 对象的高度。
• data返回一个对象，其包含指定的 ImageData 对象的图像数据。
• createImageData()创建新的、空白的 ImageData 对象。
• getImageData()返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。
• putImageData()把图像数据（从指定的 ImageData 对象）放回画布上。
• globalAlpha设置或返回绘图的当前 alpha 或透明值。
• globalCompositeOperation设置或返回新图像如何绘制到已有的图像上

[-]颜色样式阴影

• fillStyle="col/gra/img"设置fillStyle属性可以是CSS颜色，渐变，或图案
• strokeStyle设置或返回用于笔触的颜色、渐变或模式。
• shadowColor设置或返回用于阴影的颜色。
• shadowBlur设置或返回用于阴影的模糊级别。
• shadowOffsetX设置或返回阴影与形状的水平距离。
• shadowOffsetY设置或返回阴影与形状的垂直距离。
• createLinearGradient(x,y,x1,y1)线条渐变
• createRadialGradient(x,y,r,x1,y1,r1)径向/圆渐变
• createRadialGradient()t(x0,y0,r0,x1,y1,r1)创建放射状/环形的渐变（用在画布内容上）。
• addColorStop()指定颜色停止，参数使用坐标来描述，可以是0至1.
• fillRect(x,y,width,height)fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

[-]路径

• fill()填充当前绘图（路径）。
• stroke()绘制已定义的路径。
• beginPath()起始一条路径，或重置当前路径。
• moveTo()把路径移动到画布中的指定点，不创建线条。
• closePath()创建从当前点回到起始点的路径。
• lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条。
• clip()从原始画布剪切任意形状和尺寸的区域。
• quadraticCurveTo()创建二次贝塞尔曲线。
• bezierCurveTo()创建三次贝塞尔曲线。
• arc()创建弧/曲线（用于创建圆形或部分圆）。
• arcTo()创建两切线之间的弧/曲线。
• isPointInPath()如果指定的点位于当前路径中，则返回 true，否则返回 false。

[-]线条

• lineCap设置或返回线条的结束端点样式。
• lineJoin设置或返回两条线相交时，所创建的拐角类型。
• lineWidth设置或返回当前的线条宽度。
• miterLimit设置或返回最大斜接长度。

[-]矩形

• rect()创建矩形。
• fillRect()绘制"被填充"的矩形。
• strokeRect()绘制矩形（无填充）。
• clearRect()在给定的矩形内清除指定的像素。

[-]转换

• scale()缩放当前绘图至更大或更小。
• rotate()旋转当前绘图。
• translate()重新映射画布上的 (0,0) 位置。
• transform()替换绘图的当前转换矩阵。
• setTransform()将当前转换重置为单位矩阵。然后运行 transform()。

[-]文字

• font设置或返回文本内容的当前字体属性。 ctx.font="30px Arial";
• textAlign设置或返回文本内容的当前对齐方式。
• textBaseline设置或返回在绘制文本时使用的当前文本基线。
• fillText(text,x,y)实心文本
• strokeText(text,x,y)空心文本
• measureText()返回包含指定文本宽度的对象。

[-]Storage

• localStorage本地永久
  if(window.localStorage){ //some }else{ alert('不支持') }
• sessionStorage本地临时
  if(window.sessionStorage){ //some }else{ alert('不支持') }
• local vs session session与local的区别：
  寿命：session数据保存在所在窗口或标签页关闭时(刷新时可以存储)
  共享：session值在本窗口或标签页可见,local可被同源的每个窗口或标签共享
  storage与cookie的区别：
  只要网页上同源（规则,主机,端口一致）,不需在同一个页面即可读取，不需要传递
  同一页面后续多次加载也可以读取。
• setItem(key,val)设置值：
  sessionStorage.setItem('key','val');
  sessionStorage.key = 'val';
  sessionStorage['key'] = 'val';
  
• getItem(key)获取值：
  sessionStorage.getItem('key');
  sessionStorage.key ;
  sessionStorage['key'];
  如果用户关闭了存储或存储已达到最大容量将抛出QUOTA_EXCEEDED_ERR错误
• removeItem(key)删除值
  删除数据不返回被删除数据
• clear()清空所有值
• length键值对数量
• key(index)获取一个指定位置的键
• storage(event) window.addEventListener('storage',fn[e],true) 添加事件监听
  storage事件对象属性
  .key 包含了被更新或删除的键
  .oldValue 包含了更新前键对应的数据,新添加数据null
  .newValue 包含了更新后的数据,删除数据null
  .url 事件发生的源
  .storageArea 引用,指向值发生改变的localStorage或sessionStorage

[-]Manifest

• 创建方式html manifest="demo.appcache"

[-]IndexDB

• window.openDatabase('sqlname')返回database对象
• transaction.executesql()
• executeSQL()创建数据表

[-]Geolocation

• position.coords.latitude (纬度)
• position.coords.longitude (经度)
• getCurrentPosition()参考资料
• 百度地图

[-]多媒体

• onabort终止加载
• onerror数据加载错误
• oncanplay开始播放
• onplay开始播放
• onpause暂停
• onended播放结束
• onloadeddata当前帧
• onloadedmetadata指定元数据加载后触发
• oncanplaythrough正常播放且无需停顿和缓冲时
• ondurationchange时长发生变化
• onemptied当前列表为空
• onloadstart浏览器开始寻找指定视频/音频（audio/video）触发
• onplaying暂停或者在缓冲后准备重新开始播放时触发
• onprogress在浏览器下载指定的视频/音频（audio/video）时触发
• onratechange播放速度发送改变时触发
• onseeked重新定位视频/音频（audio/video）的播放位置后触发
• onseeking开始重新定位视频/音频（audio/video）时触发
• onstalled事件在浏览器获取媒体数据，但媒体数据不可用时触发。
• onsuspend事件在浏览器读取媒体数据中止时触发。
• ontimeupdate事件在当前的播放位置发送改变时触发。
• onvolumechange件在音量发生改变时触发。
• onwaiting事件在视频由于要播放下一帧而需要缓冲时触发。

[-]拖放

[-]网站优化

• 减少HTTP请求合并文件,雪碧图,BASE64,合并CSS/JS等
• CDN内容分发网络
• 添加Expire/Cache-Control头
• Gzip压缩
• 将CSS放在顶部
• 将script放在页面底部
• 避免在CSS中使用表达式
• 将CSS/JS文件外置
• 减少DNS查询 提前DNS查找'>
• 精简CSS/JS
• 避免重定向
• 移除重复的脚本
• 配置ETag
• 使用Ajax缓存

[-]扩展阅读

[-]接口

• 百度统计
• QQ(群)推广
• 微信公众平台
• 新浪微博开放平台
• 腾讯微博开放平台
• DNSPOD

[-]其他

• 百度搜索风云榜
• 问卷星
• 百度分享
• 无觅关联
• 腾讯企业邮箱