留言系统/学习笔记/简历

乌托

游客留言请在此！

2017-06-13 18:42:19

游客请在下方回复，留言！

乌托

JavaScript常用API合集 (转载)

2017-06-14 10:23:32

一、节点
1.1 节点属性

Node.nodeName   //返回节点名称，只读
Node.nodeType   //返回节点类型的常数值，只读
Node.nodeValue  //返回Text或Comment节点的文本值，只读
Node.textContent  //返回当前节点和它的所有后代节点的文本内容，可读写
Node.baseURI    //返回当前网页的绝对路径

Node.ownerDocument  //返回当前节点所在的顶层文档对象，即document
Node.nextSibling  //返回紧跟在当前节点后面的第一个兄弟节点
Node.previousSibling  //返回当前节点前面的、距离最近的一个兄弟节点
Node.parentNode   //返回当前节点的父节点
Node.parentElement  //返回当前节点的父Element节点
Node.childNodes   //返回当前节点的所有子节点
Node.firstChild  //返回当前节点的第一个子节点
Node.lastChild   //返回当前节点的最后一个子节点

//parentNode接口
Node.children  //返回指定节点的所有Element子节点
Node.firstElementChild  //返回当前节点的第一个Element子节点
Node.lastElementChild   //返回当前节点的最后一个Element子节点
Node.childElementCount  //返回当前节点所有Element子节点的数目。

1.2 操作

Node.a(node)   //向节点添加最后一个子节点
Node.hasChildNodes()   //返回布尔值，表示当前节点是否有子节点
Node.cloneNode(true);  // 默认为false(克隆节点), true(克隆节点及其属性，以及后代)
Node.insertBefore(newNode,oldNode)  // 在指定子节点之前插入新的子节点
Node.removeChild(node)   //删除节点，在要删除节点的父节点上操作
Node.replaceChild(newChild,oldChild)  //替换节点
Node.contains(node)  //返回一个布尔值，表示参数节点是否为当前节点的后代节点。
Node.compareDocumentPosition(node)   //返回一个7个比特位的二进制值，表示参数节点和当前节点的关系
Node.isEqualNode(noe)  //返回布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
Node.normalize()   //用于清理当前节点内部的所有Text节点。它会去除空的文本节点，并且将毗邻的文本节点合并成一个。

//ChildNode接口
Node.remove()  //用于删除当前节点
Node.before()  //
Node.after()
Node.replaceWith()
1.3 Document节点

1.3.1 Document节点的属性

document.doctype   //
document.documentElement  //返回当前文档的根节点
document.defaultView   //返回document对象所在的window对象
document.body   //返回当前文档的

节点

document.head //返回当前文档的节点
document.activeElement //返回当前文档中获得焦点的那个元素。
//节点集合属性
document.links //返回当前文档的所有a元素
document.forms //返回页面中所有表单元素
document.images //返回页面中所有图片元素
document.embeds //返回网页中所有嵌入对象
document.scripts //返回当前文档的所有脚本
document.styleSheets //返回当前网页的所有样式表
//文档信息属性
document.documentURI //表示当前文档的网址
document.URL //返回当前文档的网址
document.domain //返回当前文档的域名
document.lastModified //返回当前文档最后修改的时间戳
document.location //返回location对象，提供当前文档的URL信息
document.referrer //返回当前文档的访问来源
document.title //返回当前文档的标题
document.characterSet属性返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1。
document.readyState //返回当前文档的状态
document.designMode //控制当前文档是否可编辑，可读写
document.compatMode //返回浏览器处理文档的模式
document.cookie //用来操作Cookie

1.3.2 Document节点的方法
（1）读写方法

document.open()   //用于新建并打开一个文档
document.close()   //不安比open方法所新建的文档
document.write()   //用于向当前文档写入内容
document.writeIn()  //用于向当前文档写入内容，尾部添加换行符。

（2）查找节点

document.querySelector(selectors)   //接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点。
document.querySelectorAll(selectors)  //接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。
document.getElementsByTagName_r(tagName)  //返回所有指定HTML标签的元素
document.getElementsByClassName(className)   //返回包括了所有class名字符合指定条件的元素
document.getElementsByName(name)   //用于选择拥有name属性的HTML元素
document.getElementById(id) //返回匹配指定id属性的元素节点。
document.elementFromPoint(x,y) //返回位于页面指定位置最上层的Element子节点。

（3）生成节点

document.createElement_x_x(tagName)   //用来生成HTML元素节点。
document.createTextNode(text)   //用来生成文本节点
document.createAttribute(name)  //生成一个新的属性对象节点，并返回它。
document.createDocumentFragment()  //生成一个DocumentFragment对象

（4）事件方法

document.createEvent(type)   //生成一个事件对象，该对象能被element.dispatchEvent()方法使用
document.addEventListener(type,listener,capture)  //注册事件
document.removeEventListener(type,listener,capture)  //注销事件
document.dispatchEvent(event)  //触发事件

（5）其他

document.hasFocus()   //返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。
document.adoptNode(externalNode)  //将某个节点，从其原来所在的文档移除，插入当前文档，并返回插入后的新节点。
document.importNode(externalNode, deep)   //从外部文档拷贝指定节点，插入当前文档。

1.4 Element节点

1.4.1 Element节点的属性

（1）特性属性

Element.attributes  //返回当前元素节点的所有属性节点
Element.id  //返回指定元素的id属性，可读写
Element.tagName  //返回指定元素的大写标签名
Element.innerHTML   //返回该元素包含的HTML代码，可读写
Element.outerHTML  //返回指定元素节点的所有HTML代码，包括它自身和包含的的所有子元素，可读写
Element.className  //返回当前元素的class属性，可读写
Element.classList  //返回当前元素节点的所有class集合
Element.dataset   //返回元素节点中所有的data-*属性。

（2）尺寸属性

Element.clientHeight   //返回元素节点可见部分的高度
Element.clientWidth   //返回元素节点可见部分的宽度
Element.clientLeft   //返回元素节点左边框的宽度
Element.clientTop   //返回元素节点顶部边框的宽度
Element.scrollHeight  //返回元素节点的总高度
Element.scrollWidth  //返回元素节点的总宽度
Element.scrollLeft   //返回元素节点的水平滚动条向右滚动的像素数值,通过设置这个属性可以改变元素的滚动位置
Element.scrollTop   //返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetHeight   //返回元素的垂直高度(包含border,padding)
Element.offsetWidth    //返回元素的水平宽度(包含border,padding)
Element.offsetLeft    //返回当前元素左上角相对于Element.offsetParent节点的垂直偏移
Element.offsetTop   //返回水平位移
Element.style  //返回元素节点的行内样式

（3）节点相关属性

Element.children   //包括当前元素节点的所有子元素
Element.childElementCount   //返回当前元素节点包含的子HTML元素节点的个数
Element.firstElementChild  //返回当前节点的第一个Element子节点
Element.lastElementChild   //返回当前节点的最后一个Element子节点
Element.nextElementSibling  //返回当前元素节点的下一个兄弟HTML元素节点
Element.previousElementSibling  //返回当前元素节点的前一个兄弟HTML节点
Element.offsetParent   //返回当前元素节点的最靠近的、并且CSS的position属性不等于static的父元素。
1.4.2 Element节点的方法

（1）位置方法

getBoundingClientRect()
// getBoundingClientRect返回一个对象，包含top,left,right,bottom,width,height // width、height 元素自身宽高
// top 元素上外边界距窗口最上面的距离
// right 元素右外边界距窗口最上面的距离
// bottom 元素下外边界距窗口最上面的距离
// left 元素左外边界距窗口最上面的距离
// width 元素自身宽(包含border,padding)
// height 元素自身高(包含border,padding)

getClientRects()   //返回当前元素在页面上形参的所有矩形。

// 元素在页面上的偏移量

var rect = el.getBoundingClientRect()
return {
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}
（2）属性方法

Element.getAttribute()：读取指定属性
Element.setAttribute()：设置指定属性
Element.hasAttribute()：返回一个布尔值，表示当前元素节点是否有指定的属性
Element.removeAttribute()：移除指定属性
（3）查找方法

Element.querySelector()
Element.querySelectorAll()
Element.getElementsByTagName_r()
Element.getElementsByClassName()
（4）事件方法

Element.addEventListener()：添加事件的回调函数
Element.removeEventListener()：移除事件监听函数
Element.dispatchEvent()：触发事件

//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)

// event对象
var event = window.event||event;

// 事件的目标节点
var target = event.target || event.srcElement;

// 事件代理
ul.addEventListener("click", function(event) {
  if (event.target.tagName.toLowerCase() === "li") {
    console.log(event.target.innerHTML)
  }
});
（5）其他

Element.scrollIntoView()   //滚动当前元素，进入浏览器的可见区域

//解析HTML字符串，然后将生成的节点插入DOM树的指定位置。
Element.insertAdjacentHTML(where, htmlString);
Element.insertAdjacentHTML("beforeBegin", htmlString); // 在该元素前插入
Element.insertAdjacentHTML("afterBegin", htmlString); // 在该元素第一个子元素前插入
Element.insertAdjacentHTML("beforeEnd", htmlString); // 在该元素最后一个子元素后面插入
Element.insertAdjacentHTML("afterEnd", htmlString); // 在该元素后插入

Element.remove()  //用于将当前元素节点从DOM中移除
Element.focus()   //用于将当前页面的焦点，转移到指定元素上

二、CSS操作

（1）类名操作

//ie8以下
Element.className  //获取元素节点的类名
Element.className += " " + newClassName  //新增一个类名

//判断是否有某个类名
function hasClass(element,className){
  return new RegExp(className,"gi").test(element.className);
}

//移除class
function removeClass(element,className){
  element.className = element.className.replace(new RegExp("(^|\b)" + className.split(" ").join("|") + "(\b|$)", "gi"),"");
}

//ie10
element.classList.add(className)  //新增
element.classList.remove(className)  //删除
element.classList.contains(className)  //是否包含
element.classList.toggle(className)  //toggle class

（2）style操作

element.setAttribute("style","")

element.style.backgroundColor = "red"

element.style.cssText //用来读写或删除整个style属性

element.style.setProperty(propertyName,value)  //设置css属性
element.style.getPropertyValue(property)  //获取css属性
element.style.removeProperty(property)  //删除css属性

操作非内联样式
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName]
window.getComputedStyle(el,null).getPropertyValue(attrName)
//伪类
window.getComputedStyle(el,":after")[attrName]

三、对象
3.1 Object对象

（1）生成实例对象
var o = new Object()

（2）属性
Object.prototype   //返回原型对象

（3）方法
Object.keys(o)   //遍历对象的可枚举属性
Object.getOwnPropertyName(o)   //遍历对象不可枚举的属性
对象实例的方法

valueOf()：返回当前对象对应的值。
toString()：返回当前对象对应的字符串形式。
toLocaleString()：返回当前对象对应的本地字符串形式。
hasOwnProperty()：判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性。
isPrototypeOf()：判断当前对象是否为另一个对象的原型。
propertyIsEnumerable()：判断某个属性是否可枚举。

3.2 Array对象

（1）生成实例对象
var a = new Array()

（2）属性
a.length  //长度

（3）Array.isArray()
Array.isArray(a)   //用来判断一个值是否为数组

（4）Array实例的方法

a.valueof()   //返回数组本身
a.toString()  //返回数组的字符串形式
a.push(value,vlaue....)   //用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。
pop()   //用于删除数组的最后一个元素，并返回该元素
join()  //以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。
concat()  //用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变。
shift()  //用于删除数组的第一个元素，并返回该元素。
unshift(value)  //用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。
reverse()   //用于颠倒数组中元素的顺序，返回改变后的数组
slice(start_index, upto_index);   //用于提取原数组的一部分，返回一个新数组，原数组不变。第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。负数表示倒数第几个。
splice(index, count_to_remove, addElement1, addElement2, ...);   //用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，返回值是被删除的元素。第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。
sort()   //对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数，表示按照自定义方法进行排序。该函数本身又接受两个参数，表示进行比较的两个元素。如果返回值大于0，表示第一个元素排在第二个元素后面；其他情况下，都是第一个元素排在第二个元素前面。
map()   //对数组的所有成员依次调用一个函数，根据函数结果返回一个新数组。
map(elem,index,arr)   //map方法接受一个函数作为参数。该函数调用时，map方法会将其传入三个参数，分别是当前成员、当前位置和数组本身。
forEach()   //遍历数组的所有成员，执行某种操作,参数是一个函数。它接受三个参数，分别是当前位置的值、当前位置的编号和整个数组。
filter()   //参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
some()    //用来判断数组成员是否符合某种条件。接受一个函数作为参数，所有数组成员依次执行该函数，返回一个布尔值。该函数接受三个参数，依次是当前位置的成员、当前位置的序号和整个数组。只要有一个数组成员的返回值是true，则整个some方法的返回值就是true，否则false。
every()   //用来判断数组成员是否符合某种条件。接受一个函数作为参数，所有数组成员依次执行该函数，返回一个布尔值。该函数接受三个参数，依次是当前位置的成员、当前位置的序号和整个数组。所有数组成员的返回值都是true，才返回true，否则false。
reduce()   //依次处理数组的每个成员，最终累计为一个值。从左到右处理（从第一个成员到最后一个成员）
reduceRight()  //依次处理数组的每个成员，最终累计为一个值。从右到左（从最后一个成员到第一个成员）
indexOf(s)   //返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。可以接受第二个参数，表示搜索的开始位置
lastIndexOf()  //返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。

3.3 Number对象

（1）生成对象
var n = new Number()

（2）Number对象的属性
Number.POSITIVE_INFINITY：正的无限，指向Infinity。
Number.NEGATIVE_INFINITY：负的无限，指向-Infinity。
Number.NaN：表示非数值，指向NaN。
Number.MAX_VALUE：表示最大的正数，相应的，最小的负数为-Number.MAX_VALUE。
Number.MIN_VALUE：表示最小的正数（即最接近0的正数，在64位浮点数体系中为5e-324），相应的，最接近0的负数为-Number.MIN_VALUE。
Number.MAX_SAFE_INTEGER：表示能够精确表示的最大整数，即9007199254740991。
Number.MIN_SAFE_INTEGER：表示能够精确表示的最小整数，即-9007199254740991。

（4）Number对象实例的方法

toString()   //用来将一个数值转为字符串形式.可以接受一个参数，表示输出的进制。如果省略这个参数，默认将数值先转为十进制，再输出字符串；否则，就根据参数指定的进制，将一个数字转化成某个进制的字符串。
toFixed()   //用于将一个数转为指定位数的小数，返回这个小数对应的字符串。
toExponential()  //用于将一个数转为科学计数法形式。可传入一个参数，参数表示小数点后有效数字的位数，范围为0到20，超出这个范围，会抛出一个RangeError。
toPrecision()  //用于将一个数转为指定位数的有效数字。

3.4 String 对象

（1）生成实例对象
var s = new String()

（2）String对象的属性
s.length   //返回字符串的长度

（3）方法

s.chatAt(index)   //返回指定位置的字符
s.fromCharCode()    //该方法的参数是一系列Unicode码点，返回对应的字符串。
s.charCodeAt(index)    //返回给定位置字符的Unicode码点（十进制表示）
s.concat(s2)  //用于连接两个字符串
s.slice(start,end)   //用于从原字符串取出子字符串并返回，不改变原字符串。第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。
s.substring(start,end)  //用于从原字符串取出子字符串并返回，不改变原字符串.第一个参数表示子字符串的开始位置，第二个位置表示结束位置。
s.substr(start,length)   //用于从原字符串取出子字符串并返回，不改变原字符串。第一个参数是子字符串的开始位置，第二个参数是子字符串的长度。如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串。
s.indexOf(s)   //返回给定元素在字符串中第一次出现的位置，如果没有出现则返回-1。可以接受第二个参数，表示搜索的开始位置
s.lastIndexOf()  //返回给定元素在字符串中最后一次出现的位置，如果没有出现则返回-1。
s.trim()  //用于去除字符串两端的空格，返回一个新字符串
s.toLowerCase()  //用于将一个字符串全部转为小写,返回一个新字符串，不改变原字符串。
s.toUpperCase()  //全部转为大写
s.localeCompare(s2)  //用于比较两个字符串。它返回一个整数，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串。
s.match(regexp)   //用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。
s.search()  //返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。
s.replace(oldValue,newValue)  //用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。
s.split()  //按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。还可传入第二个参数，决定了返回数组的成员数。

3.5 Math对象

（1）属性

Math.E：常数e。
Math.LN2：2的自然对数。
Math.LN10：10的自然对数。
Math.LOG2E：以2为底的e的对数。
Math.LOG10E：以10为底的e的对数。
Math.PI：常数Pi。
Math.SQRT1_2：0.5的平方根。
Math.SQRT2：2的平方根。

（2）数学方法

Math.abs()：返回参数的绝对值
Math.ceil()：向上取整，接受一个参数，返回大于该参数的最小整数。
Math.floor()：向下取整
Math.max(n,n1,...)：可接受多个参数，返回最大值
Math.min(n,n1,..)：可接受多个参数，返回最小值
Math.pow(n,e)：指数运算, 返回以第一个参数为底数、第二个参数为幂的指数值。
Math.sqrt()：返回参数值的平方根。如果参数是一个负值，则返回NaN。
Math.log()：返回以e为底的自然对数值。
Math.exp()：返回e的指数，也就是常数e的参数次方。
Math.round()：四舍五入
Math.random()：返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。

（3）三角函数方法

Math.sin()：返回参数的正弦
Math.cos()：返回参数的余弦
Math.tan()：返回参数的正切
Math.asin()：返回参数的反正弦（弧度值）
Math.acos()：返回参数的反余弦（弧度值）
Math.atan()：返回参数的反正切（弧度值）

3.6 JSON对象

（1）方法

JSON.stringify()
//用于将一个值转为字符串。该字符串应该符合JSON格式，并且可以被JSON.parse方法还原。
//（JSON.stringify(obj, selectedProperties)）还可以接受一个数组，作为第二个参数，指定需要转成字符串的属性。
//还可以接受第三个参数，用于增加返回的JSON字符串的可读性。如果是数字，表示每个属性前面添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每行前面。

JSON.parse()   //用于将JSON字符串转化成对象。
3.7 console对象

（1）方法

console.log(text,text2,...)   //用于在console窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。如果第一个参数是格式字符串（使用了格式占位符），console.log方法将依次用后面的参数替换占位符，然后再进行输出。
console.info()   //在console窗口输出信息，同时，会在输出信息的前面，加上一个蓝色图标。
console.debug()  //在console窗口输出信息，同时，会在输出信息的前面，加上一个蓝色图标。
console.warn()  //输出信息时，在最前面加一个黄色三角，表示警告；
console.error()  //输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈
console.table()  //可以将复合类型的数据转为表格显示。
console.count()  //用于计数，输出它被调用了多少次。
console.dir()    //用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。
console.dirxml()  //用于以目录树的形式，显示DOM节点。
console.assert()  //接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。

//这两个方法用于计时，可以算出一个操作所花费的准确时间。
console.time()
console.timeEnd()
//time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后，console窗口会显示“计时器名称: 所耗费的时间”。

console.profile()  //用来新建一个性能测试器（profile），它的参数是性能测试器的名字。
console.profileEnd()  //用来结束正在运行的性能测试器。

console.group()
console.groupend()
//上面这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。
console.groupCollapsed()  //用于将显示的信息分组，该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。

console.trace()  //显示当前执行的代码在堆栈中的调用路径。
console.clear()  //用于清除当前控制台的所有输出，将光标回置到第一行。

来自：http://caibaojian.com/javascript-api-collection.html

乌托

HTML5中canvas需要注意

2017-06-14 10:25:10

有的书上说canvas的高度长度不能加.px后缀在ff上实验是可以加的。
canvas的高度长度为非负整数

canvas有两套长高系统（默认300X150px）
例1：
画板和绘图区长款都为300X150px。
例2：
         #canvas{width:600px;height:300px ;}


画板600X300px;绘图区默认设置300X150px；浏览器会自动缩放绘图区使之与画板的大小相符；

绘画前：
var canvas = document.getElementByIdx_x(“canvas”);
var context= canvas.getContext(“2d”);

字符串：
context.font="10px sans-serif" (默认) 文字的大小，文字字体
context.fillStyle="bule"  填充颜色（直用名称“red”；十六进制色值：#EEEEEE;rgb（1-255,1-255,1-255）；rgba（1-255,1-255,1-255，0-1透明度））
context.strokeStyle="red"  描边颜色（直用名称“red”；十六进制色值：#EEEEEE;rgb（1-255,1-255,1-255）；rgba（1-255,1-255,1-255，0-1透明度））
context.fillText(text, left,top, [maxWidth]);

其四个参数的含义分为是：需绘制的字符串，绘制到画布中时左上角在画布中的横坐标及纵坐标，绘制的字符串的最大长度。其中最大长度maxWidth是可选参数。

路径：
context.beginPath() 开始描绘路径前使用，其作用是清除之前的路径并提醒Context开始绘制一条新的路径。
context.closePath() 开始描绘路径后使用，其作用是关闭当前路径，不过不会清除路径。
context.moveTo(x, y) 路径的起点，默认状态下，第一条路径的起点是画布的(0, 0)点，之后的起点是上一条路径的终点。两个参数分为表示起点的x、y坐标值。
context.lineTo(x, y)  用于描绘一条从起点从指定位置的直线路径，描绘完成后绘制的起点会移动到该指定位置。参数表示指定位置的x、y坐标值。
context.rect(left, top,width, height);
用于描绘一个已知左上角顶点位置以及宽和高的矩形，描绘完成后Context的绘制起点会移动到该矩形的左上角顶点。参数表示矩形左上角顶点的x、y坐标以及矩形的宽和高。
context.arcTo(x1, y1, x2, y2,radius);
用于描绘一个与两条线段相切的圆弧，两条线段分别以当前Context绘制起点和(x2, y2)点为起点，都以(x1, y1)点为终点，圆弧的半径为radius。描绘完成后绘制起点会移动到以(x2, y2)为起点的线段与圆弧的切点。
context.arc(x, y, radius,startAngle, endAngle, anticlockwise);
用于描绘一个以(x, y)点为圆心，radius为半径，startAngle为起始弧度，endAngle为终止弧度的圆弧。anticlockwise为布尔型的参数，true表示逆时针，false表示顺时针。参数中的两个弧度以0表示0°，位置在3点钟方向；Math.PI值表示180°，位置在9点钟方向。
context.quadraticCurveTo(cpx,cpy, x, y);
用于描绘以当前Context绘制起点为起点，(cpx,cpy)点为控制点，(x, y)点为终点的二次样条曲线路径。
context.bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);
用于描绘以当前Context绘制起点为起点，(cpx1,cpy1)点和(cpx2, cpy2)点为两个控制点，(x, y)点为终点的贝塞尔曲线路径。

路径描绘完成后，需要调用Context对象的fill()和stroke()方法来填充路径和绘制路径线条，或者调用clip()方法来剪辑Canvas区域。以上三个方法的原型如下：
context.stroke();
用于按照已有的路径绘制线条。
context.fill();
用于使用当前的填充风格来填充路径的区域。
context.clip();
用于按照已有的路线在画布中设置剪辑区域。调用clip()方法之后，图形绘制代码只对剪辑区域有效而不再影响区域外的画布。如调用之前没有描绘路径（即默认状态下），则得到的剪辑区域为整个Canvas区域。

lineWidth
线条的宽度，单位是像素（px），默认为1.0。
lineCap
线条的端点样式，有butt（无）、round（圆头）、square（方头）三种类型可供选择，默认为butt。
lineJoin
线条的转折处样式，有round（圆角）、bevel（平角）、miter（尖角）三种；类型可供选择，默认为miter。
miterLimit
线条尖角折角的锐利程序，默认为10。

图片
var image=new Image（）
image.src=“”
drawImage(image, dx, dy);
drawImage(image, dx, dy,dw, dh);
drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);

乌托

事件监听函数

2017-06-14 10:27:02

这是事件监听函数，在比如捕获“click”、“mouseover”、“keydown”等事件，他是对象Event的一个方法

举例：

if (window.addEventListener) {

    window.addEventListener(‘load’, _uCO, false);

} else if (window.attachEvent) {

    window.attachEvent(‘onload’, _uCO);

}

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

乌托

JavaScript prototype 使用介绍[转载]

2017-06-14 10:28:14

用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级程序设计，终于揭开了其神秘面纱

用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级程序设计，终于揭开了其神秘面纱。

每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。

私有变量、函数

在具体说prototype前说几个相关的东东，可以更好的理解prototype的设计意图。之前写的一篇JavaScript 命名空间

文章中提到过JavaScript的函数作用域，在函数内定义的变量和函数如果不对外提供接口，那么外部将无法访问到，也就是变为私有变量和私有函数。

代码如下:

function Obj(){
   var a=0; //私有变量
    var fn=function(){ //私有函数 }
         }
这样在函数对象Obj外部无法访问变量a和函数fn，它们就变成私有的，只能在Obj内部使用，即使是函数Obj的实例仍然无法访问这些变量和函数

复制代码

代码如下:

var o=new Obj();
console.log(o.a); //undefined
console.log(o.fn); //undefined

静态变量、函数

当定义一个函数后通过 “.”为其添加的属性和函数，通过对象本身仍然可以访问得到，但是其实例却访问不到，这样的变量和函数分别被称为静态变量和静态函数，用过Java、C#的同学很好理解静态的含义。

代码如下:

function
Obj(){}
Obj.a=0;//静态变量
Obj.fn=function(){//静态函数
}
console.log(Obj.a); //0

console.log(typeof Obj.fn);//function var o=new Obj();
console.log(o.a);//undefined
console.log(typeof o.fn); //undefined

实例变量、函数

在面向对象编程中除了一些库函数我们还是希望在对象定义的时候同时定义一些属性和方法，实例化后可以访问，JavaScript也能做到这样

代码如下:

function Obj(){
this.a=[]; //实例变量
this.fn=function(){//实例方法}
}
console.log(typeof Obj.a); //undefined
console.log(typeof Obj.fn); //undefined
var o=new Obj();
console.log(typeof o.a); //object

console.log(typeof o.fn); //function

这样可以达到上述目的，然而

代码如下:

function Obj(){
this.a=[]; //实例变量
this.fn=function(){ //实例方法
}
}
var o1=new Obj();
o1.a.push(1);
o1.fn={};
console.log(o1.a); //[1]
console.log(typeof o1.fn); //object
var o2=new Obj();
console.log(o2.a); //[]
console.log(typeof o2.fn); //function

上面的代码运行结果完全符合预期，但同时也说明一个问题，在o1中修改了a和fn，而在o2中没有改变，由于数组和函数都是对象，是引用类型，这就说明o1中的属性和方法与o2中的属性与方法虽然同名但却不是一个引用，而是对Obj对象定义的属性和方法的一个复制。

这个对属性来说没有什么问题，但是对于方法来说问题就很大了，因为方法都是在做完全一样的功能，但是却又两份复制，如果一个函数对象有上千和实例方法，那么它的每个实例都要保持一份上千个方法的复制，这显然是不科学的，这可肿么办呢，prototype应运而生。

prototype

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，默认情况下prototype属性会默认获得一个constructor(构造函数)属性，这个属性是一个指向prototype属性所在函数的指针，有些绕了啊，写代码、上图！

代码如下:

function
Person(){
}
根据上图可以看出Person对象会自动获得prototyp属性，而prototype也是一个对象，会自动获得一个constructor属性，该属性正是指向Person对象。

当调用构造函数创建一个实例的时候，实例内部将包含一个内部指针（很多浏览器这个指针名字为__proto__）指向构造函数的prototype，这个连接存在于实例和构造函数的prototype之间，而不是实例与构造函数之间。

代码如下:

function Person(name){
this.name=name;
}
Person.prototype.printName=function(){  ; }
var person1=new Person("Byron");

var person2=new Person("Frank");
Person的实例person1中包含了name属性，同时自动生成一个__proto__属性，该属性指向Person的prototype，可以访问到prototype内定义的printName方法，大概就是这个样子的

写段程序测试一下看看prototype内属性、方法是能够共享

复制代码

代码如下:

function Person(name){
this.name=name;
}
Person.prototype.share=[];
Person.prototype.printName=function(){; }
var person1=new Person("Byron");
var person2=new Person("Frank");
person1.share.push(1);
person2.share.push(2);

console.log(person2.share); //[1,2]
果不其然！实际上当代码读取某个对象的某个属性的时候，都会执行一遍搜索，目标是具有给定名字的属性，搜索首先从对象实例开始，如果在实例中找到该属性则返回，如果没有则查找prototype，如果还是没有找到则继续递归prototype的prototype对象，直到找到为止，如果递归到object仍然没有则返回错误。同样道理如果在实例中定义如prototype同名的属性或函数，则会覆盖prototype的属性或函数。

代码如下:

function Person(name){
this.name=name;
}
Person.prototype.share=[];
var person=new Person("Byron");
person.share=0;

console.log(person.share); //0而不是prototype中的[]
构造简单对象

当然prototype不是专门为解决上面问题而定义的，但是却解决了上面问题。了解了这些知识就可以构建一个科学些的、复用率高的对象，如果希望实例对象的属性或函数则定义到prototype中，如果希望每个实例单独拥有的属性或方法则定义到this中，可以通过构造函数传递实例化参数。

代码如下:

function Person(name){
this.name=name;
}
Person.prototype.share=[];
Person.prototype.printName=function(){
;
}

乌托

js全局变量与局部变量预解析与作用域链详解[转载]

2017-06-14 10:28:40

局部变量和全局变量同名时,会隐藏这个全局变量；

4.变量

关键字: 4.变量

4.1 变量的类型

   JS是松散类型的语言

4.2 变量的声明

   var 声明是变量的标准声明

   var 声明的变量是永久性的,不能用delete运算符删除



   全局对象,调用对象初始化时,JS解析器会在相应的代码段里寻找var声明的变量,

   然后在全局对象,调用对象中创建相应的属性,此时它是未赋值的(undefined),

   当程序执行到相应的var声明代码段时才会给相应对象的属性赋值



   重复的声明:根据以上var声明作用的理解,重复的var声明不会造成任何错误,

   var声明只是方便创建全局对象,调用对象的属性,代码只是赋值用的



   遗漏的声明:给未声明的变量赋值,JS会隐式声明全局变量(在全局对象中增加相应的属性),然后给其赋值

4.3 变量的作用域

   全局变量,局部变量

   局部变量和全局变量同名时,会隐藏这个全局变量

   4.3.1 没有块级作用域

     函数中声明的变量,无论在哪里声明的,在整个函数中它们都是有定义的

   4.3.2 未声明的变量和未赋值的变量

     ;会产生一个错误--使用未声明的变量会产生一个错误

     var u;;会跳出undefined---使用未赋值的变量,使用的它的默认值undefined



4.4 基本类型和引用类型

   第三章已经讲过

4.5 垃圾收集

   同java



4.6 作为属性的变量

   4.6.1 全局对象

     JS解释器开始运行时,在执行任何JS代码前,会创建一个全局对象,这个对象的属性就是JS全局变量,

     并初始化为undefined

     var声明一个JS全局变量时,实际上就是定义了一个全局对象的属性,



     JS解释器还会用预定义的值和函数来初始化全局对象的许多属性,如:Infinity parseInt Math



     非函数内部可以用this来引用这个全局对象



     客户端的JS中,Window对象代表浏览器窗口,它包含该窗口中的所有JS代码的全局对象,具有自我引用的window属性

   4.6.2 局部变量:调用对象

     函数的局部变量存放在调用对象的属性

     调用对象是一个完全独立的对象,所以可以防止覆盖同名的全局变量

   4.6.3 JS的执行环境

     JS解释器执行一个函数时,会创建一个执行环境

     JS允许同时存在多个全局执行环境,如:JS客户端的ifame的情况



4.7 深入理解变量作用域

   每个JS执行环境都有一个和它相关联的作用域链它是一个对象列表或对象链.

  查询x:变量名解析(variable name resolution)的过程,它开始查看作用域链的每一个对象,

   如果有,返回值,如果没有继续查询下一个对象,以些类推.

  作用域链的优先级:嵌套函数的调用对象>调用对象>全局对象





   根据以上理解说明JS初始化的过程:



   在JS解释器执行任何代码之前,创建全局对象

     用预定义的值和函数来初始化全局对象中的属性,eg.Math,Infinity,parseInt

     搜索函数外的var声明,创建全局对象相应的属性,初始化为undefined

   创建全局的执行环境,作用域链只有一个对象-全局对象

   依次执行代码

     遇到var声明赋值语句给全局对象相应的属性赋值

     遇到未声明赋值语句,在全局对象中增加相应的属性,并赋值

     遇到函数调用,创建调用对象

       搜索函数中的var声明和参数,创建调用对象相应的属性,初始化为undefined

       创建函数执行环境,作用域链--第一对象:调用对象;第二对象:全局对象

       依次执行代码

         遇到var声明赋值语句给调用对象相应的属性赋值

         遇到未声明赋值语句,在全局对象中增加相应的属性,并赋值

         遇到函数调用,创建嵌套函数的调用对象

           搜索嵌套函数中的var声明和参数,创建嵌套函数的调用对象相应的属性,初始化为undefined

           创建嵌套函数执行环境,作用域链--第一对象:嵌套函数的调用对象;第二对象:调用对象;第三对象:全局对象



     依此类推



     eg1.

       var scope="global";

       function f(){

         ;

         var scope="local";

         ;

       }

       f();

       过程:

       创建全局对象,搜索函数外的var声明语句,在全局对象中创建scope属性,scope=undefined

       创建全局的执行环境,作用域链只有一个对象:全局对象

       依次执行代码:

         var scope="global"时,变量名解析开始,在全局对象属性中查找scope属性

         把"global"赋给scope

         遇到函数调用:创建调用对象

           搜索函数中的var声明语句和参数,在调用对象中创建scope的属性,scope=undefined

           创建函数执行环境,作用域链:调用对象>全局对象

           依次执行代码:

             ,查询scope,变量名解析,先搜索调用对象,找到scope属性,其值为undefined,执行

             var scope="local",查询scope,变量名解析,先搜索调用对象,找到scope属性,scope="local"

             ,查询scope,变量名解析,先搜索调用对象,找到scope属性,其值为"local",执行



     eg2.

       var scope="global";

       function f(){

         ;

         scope="local";

         ;

       }

       f();

     过程:

       创建全局对象,搜索函数外的var声明语句,在全局对象中创建scope属性,scope=undefined

       创建全局的执行环境,作用域链只有一个对象:全局对象

       依次执行代码:

         var scope="global"时,变量名解析开始,在全局对象属性中查找scope属性

         把"global"赋给scope

         遇到函数调用:创建调用对象

           搜索函数中的var声明语句和参数,没有找到var声明语句

           创建函数执行环境,作用域链:调用对象>全局对象

           依次执行代码:

             ,查询scope,变量名解析,先搜索调用对象,没找到scope属性,再搜索全局对象,找到scope属性,其值为"global"执行

            scope="local",查询scope,变量名解析,先搜索调用对象,没找到scope属性,,再搜索全局对象,找到scope属性,scope="local"

             ,查询scope,变量名解析,先搜索调用对象,没找到scope属性,再搜索全局对象,找到scope属性,其值为"local",执行

    eg3.

       scope1="global";

       ;

       function f(){

         ;

         scope2="local";

       }

       f();

     过程:

       创建全局对象,没有找到var声明语句,没有自定义的全局对象属性

       创建全局的执行环境,作用域链只有一个对象:全局对象

       依次执行代码:

         scope1="global"时,变量名解析开始,作用域链是没有找到scope1属性,在全局对象属性中创建scope1属性,并赋值为"global"

         时,变量名解析开始,作用域链是找到scope1属性,其值为"global",执行

         遇到函数调用:创建调用对象

           搜索函数中的var声明语句和参数,没有找到var声明语句

           创建函数执行环境,作用域链:调用对象>全局对象

           依次执行代码:

             ,查询scope2,变量名解析,作用域链是没有找到scope2属性,报错scope2 is not defined

乌托

javascript常用的Array的方法

2017-06-14 10:29:12

var list = new Array()是我们在js中常常写到的代码，今天就总结哈Array的对象具有哪些方法。

list[0] = 0; list[1] = 1; list[2] = 2;

或者这样声明：var list = [0,1,2]

1， shift():删除数组的第一个元素,返回删除的值。这里是0

2， unshift(3,4):把参数加载数组的前面，返回数组的长度。现在list:中是3,4,0,1,2

3，pop():删除数组的最后一个元素，返回删除的值。这里是2.

4，push(3):将参数加载到数组的最后，返回数组的长度，现在List中时：0,1,2,3

5，concat(3,4):把两个数组拼接起来。

6，splice(start,deleteCount,val1,val2,...)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...

7，reverse：将数组反序

   var a = [1,2,3,4,5];

   var b = a.reverse();

   //a：[5,4,3,2,1] b：[5,4,3,2,1]

8，sort(orderfunction)：按指定的参数对数组进行排序

   var a = [1,2,3,4,5];

   var b = a.sort();

   //a：[1,2,3,4,5] b：[1,2,3,4,5]

9，slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组

   var a = [1,2,3,4,5];

   var b = a.slice(2,5);

    //a：[1,2,3,4,5] b：[3,4,5]

10，join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符

    var a = [1,2,3,4,5];

   var b = a.join("|");

    //a：[1,2,3,4,5] b："1|2|3|4|5"

乌托

css中使用中文字体Unicode编码5FAE8F6F96C59ED1,9ED14F53【转载】

2017-06-14 10:29:42

在CSS里像这样设置某对象的字体：font-family:1.5em/1.75,’黑体’,Arial; 结果有些时候不起作用，用Firebug来查看才发现浏览器解释这个代码的时候，出现乱码了，所以不起作用。

那怎么解决这个乱码问题呢，由于CSS文件基本都是UTF-8的编码模式，所以我们可以把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。比如中文字体“宋体”经过Unicode编码后为“5b8b4f53″，在CSS中就可以这样写：font-family:’ 5b8b4f53’;

为了方便需要的朋友快速使用，下表中列出了一些常用中文字体的Unicode编码：

新细明体PMingLiU65B07EC6660E4F53细明体MingLiU7EC6660E4F53标楷体DFKai-SB680769774F53黑体SimHei9ED14F53宋体SimSun5B8B4F53新宋体NSimSun65B05B8B4F53仿宋FangSong4EFF5B8B楷体KaiTi69774F53仿宋_GB2312FangSong_GB23124EFF5B8B_GB2312楷体_GB2312KaiTi_GB231269774F53_GB2312微软正黑体Microsoft JhengHei5FAEx8F6F6B639ED14F53微软雅黑Microsoft YaHei5FAE8F6F96C59ED1

如果在你“DIV+CSS”的过程中，还需要用到一些表中没有的字体的话，可以借助Firefox的插件Firebug来查询所需中文字体对应的 Unicode编码，方法很简单，就是打开Firefox，然后打开Firebug，在“控制台”里底部“>>>”的后面像这样输入 “escape(‘黑体’)”，然后会显示一个错误信息，*** is not defined 前面的部分就是中文字体“黑体”对应的Unicode编码“9ED14F53”，注意命令符里的符号都是英文符号，否则可能会出错。

乌托

Meta标签详解，在网上转的，希望对大家有用(转载)

2017-06-14 10:30:21

Meta标签详解，在网上转的，希望对大家有用
　　引言
　　您的个人网站即使做得再精彩，在“浩瀚如海”的网络空间中，也如一叶扁舟不易为人发现，如何推广
个人网站，人们首先想到的方法无外乎以下几种：
　　
　　●　在搜索引擎中登录自己的个人网站
　　
　　●　在知名网站加入你个人网站的链接

　　●　在论坛中发帖子宣传你的个人网站

　　很多人却忽视了HTML标签META的强大功效，一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性，有兴趣吗，谁我来重新认识一下META标签吧！

　　META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的
标记和

　　详细介绍

　　下面介绍一些有关标记的例子及解释。

　　META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。

　　★HTTP-EQUIV

　　HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的HTTP-EQUIV类型有：

　　1、Content-Type和Content-Language (显示字符集的设定)

　　说明：设定页面使用的字符集，用以说明主页制作所使用的文字已经语言，浏览器会根据此来调用相应的字符集显示page内容。

　　用法：
　　　　　　

　　注意：　该META标签定义了HTML页面所使用的字符集为GB2132，就是国标汉字码。如果将其中的“charset=GB2312”替换成“BIG5”，则该页面所用的字符集就是繁体中文Big5码。当你浏览一些国外的站点时，IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集，则IE就提示下载。其他的语言也对应不同的charset，比如日文的字符集是“iso-2022-jp ”，韩文的是“ks_c_5601”。
　　　　　　
　　Content-Type的Content还可以是：text/xml等文档类型；
　　Charset选项：ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集；Content-Language的Content还可以是：EN、FR等语言代码。

　　2、Refresh (刷新)

　　　说明：让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。
　　　用法：
　　　　　　
　　　注意：其中的5是指停留5秒钟后自动刷新到URL网址。

　　3、Expires (期限)

　　　说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。
　　　用法：
　　　　　　
　　　注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。

　　4、Pragma (cach模式)

　　　说明：禁止浏览器从本地机的缓存中调阅页面内容。
　　　用法：
　　　注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。

　　5、Set-Cookie (cookie设定)

　　说明：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。
　　　用法：
　　　注意：必须使用GMT的时间格式。

　　6、Window-target (显示窗口的设定)

　　　说明：强制页面在当前窗口以独立页面显示。
　　　用法：
　　　注意：这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent。

　　7、Pics-label (网页RSAC等级评定)
　　　说明：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级
　　　　　　别就是通过该参数来设置的。
　　　用法：　　　　　　　　　　　　　　　"(PICS－1.1"http://www.rsac.org/ratingsv01.html"
　　　　　　 I gen comment "RSACi North America Sever" by "inet@microsoft.com"
　　　　　　　for "http://www.microsoft.com" on "1997.06.30T14:21－0500" r(n0 s0 v0 l0))">

　　　注意：不要将级别设置的太高。RSAC的评估系统提供了一种用来评价Web站点内容的标准。用户可以设置Microsoft Internet Explorer（IE3.0以上）来排除包含有色情和暴力内容的站点。上面这个例子中的HTML取自Microsoft的主页。代码中的（n 0 s 0 v 0 l 0）表示该站点不包含不健康内容。级别的评定是由RSAC，即美国娱乐委员会的评级机构评定的，如果你想进一步了解RSAC评估系统的等级内容，或者你需要评价自己的网站，可以访问RSAC的站点：http://www.rsac.org/。

　　8、Page-Enter、Page-Exit (进入与退出)

　　　说明：这个是页面被载入和调出时的一些特效。
　　　用法：
　　　　　　
　　　注意：blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:

　　　　　　
　　　　　　

　　　　　　　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种随机选择一种

　　9、MSThemeCompatible (XP主题)
　　　说明：是否在IE中关闭 xp 的主题
　　　用法：
　　　注意：关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。

　　10、IE6 (页面生成器)
　　　说明：页面生成器generator，是ie6
　　　用法：
　　　注意：用什么东西做的，类似商品出厂厂商。

　　11、Content-Script-Type (脚本相关)
　　　说明：这是近来W3C的规范，指明页面中脚本的类型。
　　　用法：
　　　注意：

　　★NAME变量

　　name是描述网页的，对应于Content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。
　　name的value值（name=""）指定所提供信息的类型。有些值是已经定义好的。例如description(说明)、keyword(关键字)、refresh(刷新)等。还可以指定其他任意值，如：creationdate(创建日期) 、
document ID(文档编号)和level(等级)等。
　　name的content指定实际内容。如：如果指定level(等级)为value(值)，则Content可能是beginner(初级)、intermediate(中级)、advanced(高级)。

　　1、Keywords (关键字)
　　　说明：为搜索引擎提供的关键字列表
　　　用法：
　　　注意：各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个META元素提供文档语言从属信息时，搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。例如：
　　　　　　
　　　　　　

　　2、Description (简介)
　　　说明：Description用来告诉搜索引擎你的网站主要内容。
　　　用法：
　　　注意：

　　3、Robots (机器人向导)
　　　说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
　　　用法：
　　　注意：许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录。

　　　 all：文件将被检索，且页面上的链接可以被查询；
　　　 none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用)
　　　 index：文件将被检索；（让robot/spider登录）
　　　 follow：页面上的链接可以被查询；
　　　 noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
　　　nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

　　4、Author (作者)
　　　说明：标注网页的作者或制作组
　　　用法：abc@sina.com">
　　　注意：Content可以是：你或你的制作组的名字,或Email

　　5、Copyright (版权)
　　　说明：标注版权
　　　用法：
　　　注意：

　　6、Generator (编辑器)
　　　说明：编辑器的说明
　　　用法：
　　　注意：Content="你所用编辑器"

　　7、revisit-after (重访)
　　　说明：
　　　用法：
　　　注意：

　　★Head中的其它一些用法

　　1、scheme (方案)
　　　说明：scheme can be used when name is used to specify how the value of content should
　　　　　　be interpreted.
　　　用法：
　　　注意：

　　2、Link (链接)
　　　说明：链接到文件
　　　用法：
　　　注意：很多网站如果你把她保存在收件夹中后，会发现它连带着一个小图标，如果再次点击进入之后还会发现地址栏中也有个小图标。现在只要在你的页头加上这段话，就能轻松实现这一功能。用来将目前文件与其它 URL 作连结，但不会有连结按钮，用於
标记间，格式如下：
　　　　　　　
　　　　　　　

　　3、Base (基链接)
　　　说明：插入网页基链接属性
　　　用法：http://www.xia8.net/" target="_blank">
　　　注意：你网页上的所有相对路径在链接时都将在前面加上“http://www.cn8cn.com/”。其中target="_blank"是链接文件在新的窗口中打开，你可以做其他设置。将“_blank”改为“_parent”是链接文件将在当前窗口的父级窗口中打开；改为“_self”链接文件在当前窗口（帧）中打开；改为“_top”链接文件全屏显示。

　　以上是META标签的一些基本用法，其中最重要的就是：Keywords和Description的设定。为什么呢？道理很简单，这两个语句可以让搜索引擎能准确的发现你，吸引更多的人访问你的站点!根据现在流行搜索引擎(Google，Lycos，AltaVista等)的工作原理，搜索引擎先派机器人自动在WWW上搜索，当发现新的网站时，便于检索页面中的Keywords和Description，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。

　　由此看来，我们必须记住添加Keywords和Description的META标签，并尽可能写好关键字和简介。否则，
后果就会是：
　　
　　●　如果你的页面中根本没有Keywords和Description的META标签，那么机器人是无法将你的站点加入数
　　　　据库，网友也就不可能搜索到你的站点。

　　●　如果你的关键字选的不好，关键字的密度不高，被排列在几十甚至几百万个站点的后面被点击的可
　　　　能性也是非常小的。

　　写好Keywords(关键字)要注意以下几点：

　　●　不要用常见词汇。例如www、homepage、net、web等。

　　●　不要用形容词，副词。例如最好的，最大的等。

　　●　不要用笼统的词汇，要尽量精确。例如“爱立信手机”，改用“T28SC”会更好。

　　“三人之行，必有我师”，寻找合适关键词的技巧是：到Google、Lycos、Alta等著名搜索引擎，搜索与
你的网站内容相仿的网站，查看排名前十位的网站的META关键字，将它们用在你的网站上，效果可想而知了。

　　★小窍门

　　为了提高搜索点击率，这里还有一些“捷径”可以帮得到你：

　　●　为了增加关键词的密度，将关键字隐藏在页面里(将文字颜色定义成与背景颜色一样)。

　　●　在图像的ALT注释语句中加入关键字。如：Keywords

　　●　利用HTML的注释语句，在页面代码里加入大量关键字。用法：

乌托

js中运算符与优先级

2017-06-14 10:31:10

优先级         运算符
1.                  ()
2.                  ++/--
3.                  *   /   %
4.                  +  -
5.                  <  <=  >  >=
6.                  ==    !=
7.                  &&
8.                  ||
9.                  =  +=  -=  *=  /=  %=

特殊的运算符  in
经常见for（i in array）
var obj = { name1: "jack", age: 9, abc: undefined };
  console.log("name1" in obj); // true
     console.log("age" in obj); // true
     console.log("age123" in obj);  // false
在 array中 i 只有是索引时才有效
在 object中 i 只有是 key时才有效

乌托

绝对路径与相对路径

2017-06-14 10:31:33

/winder/cain/index.html
相对路径
./当前路径如:  ./index.html   （一般情况 ./ 可以省略）打开当前路径下的index.html文件
../当前路径的父级  如:  ../index.html   打开当前路径父级下的index.html文件，也就是/winder/index.html
绝对路径
/cain/index.html  无论当前路径是什么，会自动地从当前盘的根目录开始查找指定的程序。

乌托

XML学习

2017-06-14 10:32:04

XML 文档必须有根元素
XML 文档必须有关闭标签
XML 标签对大小写敏感
XML 元素必须被正确的嵌套
XML 属性必须加引号
XML

XML JavaScript

ie7及以上预览器都支持
xmlhttp=new XMLHttpRequest();

ie5-ie6支持
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange=function(){}   //状态码发生变化时运行函数
xmlhttp.open("get/post",url,true异步/false同步)
xmlhttp.send()  //发送数据 get 为null

xmlhttp.status 响应状态码 // 200
xmlhttp.statusText  状态文字 // ok
xmlhttp.responseText 响应的文字
xmlhttp.responseXML 响应的XML解析为dom
xmlhttp.getAllResponseHeaders() 获得响应头
xmlhttp.getResponseHeader("Last-Modified") 获得响应头的Last-Modified
在 XML 中有 5 个预定义的实体引用：
< <</td> 小于
> > 大于
& & 和号
" " 省略号
" " 引号
模板：
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for Firefox, Mozilla, IE7, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  ;
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = "OK"
    document.getElementByIdx_x("p1").innerHTML=xmlhttp.getAllResponseHeaders();
    }
  else
    {
    alert("Problem retrieving data:" + xmlhttp.statusText);
    }
  }
}

乌托

dom学习

2017-06-14 10:32:27

获取节点
getElementById(id)  //获取id
getElementsByName(name)  //获取name
IE下通过getElementsByName(name)只能取得表单元素的节点；
IE下不区分id和name，也就是说通过getElementsByName(name)取得的节点数组也包含id和name相同的了，通过getElementById(id)，也可以将name作为参数，看MSDN的官方说明。
getElementsByTagName_r(tagName)  //获取标签
getElementsByClassName() //获取class ：在 ie5,6,7,8 中无效。

获取关系节点
parentNode //父节点
firstChild //第一个子节点
lastChild // 最后一个自节点
childNodes和children  //所有子节点：各种版本各种浏览器下表现都不一样，有兼容性问题。
document.documentElement //获取根节点
document.body //获取body节点
节点信息
nodeName(tagName)
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName是#text
文档节点的nodeName是#document
nodeValue
文本节点的nodeValue包含文本
属性节点的nodeValue包含属性值
元素节点和文档节点没有nodeValue
nodeType.

元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

appendChild()     //追加子节点
removeChild()     //删除子节点
replaceChild(newnode,oldnode)     //替换子节点
insertBefore()      //在指定的子节点前面插入新的子节点
createAttribute()    //创建属性节点
createElement_x()    //创建元素节点
createTextNode()    //创建文本节点
getAttribute()    //返回指定的属性值
setAttribute()    //把指定属性设置或修改为指定的值。

innerHTML //获取内部的html

style  //获取css :属性使用驼峰式写法

乌托

jquery学习选择器

2017-06-14 10:32:55

直接选择器
$("#id")  //id
$(".class") //class
$("element") //如:div
$("*")  //所有dom
$("selector1,selector2,selectorN")  //如：$("div,span,p.myClass")

关系选择器
$("parent children") //如：$("div p")
$("parent>children") //如：$("div>p") 直系后代
$("prev+next")   //匹配所有紧接在 prev 元素后的 next 元素
$("prev~siblings") //匹配 prev 元素之后的所有 siblings 元素
$(":first")  //第一个如:$("div:first")
$(":last")  //最后一个元素
$(":not(selector)")   //没有（"选择器"）的
$(":first-child")  //匹配所给选择器( :之前的选择器)的第一个子元素
$(":last-child")  //匹配所给选择器( :之前的选择器)的最后一个子元素
$ (":first-of-type") 1.9+//结构化伪类，匹配E的父元素的第一个同标签名的孩子。等价于 :nth-of-type(1) 选择器。
$(" :last-of-type")  1.9+  //结构化伪类，匹配E的父元素的最后一个E类型的孩子
大体的意思跟 :first-of-type 差不多，只是一个是第一个元素，一个是最后一个元素，这里就不赘述了。
$(":nth-child")  //匹配其父元素下的第N个子或奇偶元素   如：$("ul li:nth-child(2)")
$(":nth-last-child")  1.9+//选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。$("ul li:nth-last-child(2)");
$(":nth-last-of-type") 1.9+//选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
$(":nth-of-type")  1.9+//选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
$("only-child")   //如果某个元素是父元素中唯一的子元素，那将会被匹配
$("only-of-type") //选择所有没有兄弟元素，且具有相同的元素名称的元素。

索引选择器
$(":even")  //索引为偶数的  0开始
$("odd")  //索引为奇数的  1开始
$("eq(index)")  //索引为index的
$(":gt(index)")  //大于索引的
$(":lt(index)")  //小于索引的

条件选择器
$(":lang()")  1.9+ //如：$("p:lang(it)")
$(":header")   //匹配 h1 ,h2等标签元素
$(":animated") //匹配动画的元素
$(":focus")  1.6+//匹配当前获取焦点的元素
$(":root") 1.9+//根元素永远是html
$(":target")  1.9+//选择由文档URI的格式化识别码表示的目标元素
例如，给定的URI http://example.com/#foo， $( "p:target" )，将选择
元素。
$(":contains("text")")  // 包含text文字的如：$("div:contains("John")")
$(":empty")  //匹配所有不包含子元素或者文本的空元素
$(":has(selector)")  //匹配含有选择器所匹配的元素的元素 $("div:has(p)")
$(":parent")   // 匹配含有子元素或者文本的元素
$(":hidden")  //匹配所有不可见元素，或者type为hidden的元素
$(":visible")   //匹配所有的可见元素

属性选择器
[attribute]  //匹配包含给定属性的元素
[attribute=value]  //匹配给定的属性是某个特定值的元素如：$("input[name="newsletter"]")
[attribute!=value]  //匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value]  //匹配给定的属性是以某些值开始的元素
[attribute$=value] //匹配给定的属性是以某些值结尾的元素
[attribute*=value]   // 匹配给定的属性是以包含某些值的元素  如：$("input[name*="man"]")
[attrSel1][attrSel2][attrSelN]   //复合属性选择器，需要同时满足多个条件时使用。如：$("input[id][name$="man"]")

表单选择器

$(":input")   //匹配所有 input, textarea, select 和 button 元素
$(":text")   //匹配所有的单行文本框
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")

表单对象属性
$(":enabled")   //匹配所有可用元素
$(":disabled")   //匹配所有不可用元素
$(":checked")  //匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
$(":selected")   //匹配所有选中的option元素

$.escapeSelector(selector)    3.0+//这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。

乌托

php学习类

2017-06-14 10:35:10

public $name = "lisa"; // 公共的访问权限，如果类没有指定成员的访问修饰符，默认就是public的访问权限。
protected $money = 3000.00; // 受保护的权限被声明为protected的成员，只允许该类的子类进行访问。
private $age = 35; // 私有的访问权限对于类内部所有成员都可见，没有访问限制。对类外部不允许访问。

PHP 支持 9 种原始数据类型

四种标量类型：
boolean（布尔型）
integer（整型）
float（浮点型，也称作 double)
string（字符串）

三种复合类型：
array（数组）
object（对象）
callable（可调用）

最后是两种特殊类型：
resource（资源）
NULL（无类型）

为了确保代码的易读性，本手册还介绍了一些伪类型：
mixed（混合类型）
number（数字类型）
callback（回调类型，又称为 callable）
array|object（数组 | 对象类型）
void （无类型）

以及伪变量 $...。
gettype(目标)  //得到目标的类型
is_type   如  is_string() 是字符窜类型？  false /ture
is_int()是数字类型？  false /ture

乌托

jquery学习核心方法

2017-06-14 10:35:46

each 方法  //字面意思 :每个。类似for
    有两种使用方法
    1. $("css").each（callback（index，ele）{ }）
        // 选择器+each的方法，回调函数返回两个参数 index和element，this可以代替element。
    2. $.each(array,callback(index,ele){ })
        //array 包括对象集合、dom对象集合  这种使用方式很像apply，使用$d的each方法，this指向array，并调用callback

size方法  //字面意思：数量同length
    $("css").size()   //选择器的数量
     jQuery源代码：jQuery.fn.size = function() {
return this.length;
     };

selector方法  //字面意思:选择器
     如：$("div li:not(.cc)").selector  //  div li:not(.cc)

context方法  //字面意思：上下文
     如：$(".footer",document.body).context;  //

get 方法 //字面意思:得到
     $(this).get(0)===$(this)[0]  //eq（index）类似，不过eq返回的是jQuery元素，get返回dom元素
     jQuery源代码：get: function(num) {
return num == null ?this.toArray() :(num < 0 ? this[this.length + num] : this[num]);
}
     源代码中可以看出get可以使用负数  -1 就是集合中最后一个，如果不给参数，返回所有dom的array

index方法 // 字面意思：在集合中的索引
    如：$("css").index(ele)   //1  ele元素在css集合中的索引，如果没有返回-1；类似 indexof（）

data方法 //字面意思：数据
    使用方法分get 和set 、remove
    get：    $("css").data("key");  // 得到选择器的对象对应dom中储存key对应的value；
    set：    $("css").data("key","value")  // 设置选择器的对象对应dom中储存键值对；
    remove  (1.7+)：    $("css").removeData("key")   //删除选择器的对象对应dom中储存key对应的键值对；
   在html5中可以直接在html中预设如：

extend方法  //字面意思：扩充
   分2种方式：扩充方法、拷贝
   扩充方法：
        在原型上加方法：jquery.fn.extend({key:function}) //在原型上添加方法，一般用于扩充插件，$("css").key() 调用；

乌托

jquery data()源码学习

2017-06-14 10:36:10

data方法的主要流程：
确定是否有参数传入->
    1.没有参数-> 使用jquery的静态方法  jQuery.data(elem);（elem是调用data()的对象）->返回elem对象的所有cache缓存，如果elem是dom类型且属性没有解析过，则解析elem的属性是否有data-开头的属性，如果有通过dataAttr(elem, name, data[name]);（data[name]的作用：查看是否添加过这个属性，如果有dataAttr直接返回data[name]，减少不必要的操作）得到以data-开头属性对应的值并进行类型转换，之后添加键值对到elem对象的cache缓存；->调用对象elem的缓存
    2.有一个参数->
               (1). 如果参数是对象 ->调用jquery的静态方法jQuery.data( this, key );  //添加到调用对象的缓存
               (2). 非对象类型的参数-> 调用dataAttr（elem, key, jQuery.data( elem, key ) ）// jQuery.data( elem, key )  如果有值代表有缓存，dataAttr会返回这个缓存，如果没有值dataAttr查看调用对象elem的dom属性是否有data-开头的属性，有就返回，没有返回undefined；->返回key的值
    3.有一个以上的参数->jquery的静态方法调用 jQuery.data( this, key, value );

源代码解析：
   1.原生方法 data()
     data: function( key, value ) {
var i, name, data,
      elem = this[0],   //调用对象
        //  attrs =elem? elem.attributes : undefined;
      attrs = elem && elem.attributes;
       //如果没有参数
      if ( key === undefined ) {
          //如果有elem对象
           if ( this.length ) {
                   // 返回elem对象的所有cache缓存
                 data = jQuery.data( elem );
                     //如果是 DOM 元素 && 如果elem对象没有parsedAttrs属性执行html属性data—解析
                 if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
                       i = attrs.length;       // 返回elem对象属性的数量
                       while ( i-- ) {
                              if ( attrs[ i ] ) {    //attrs[i] elem对象属性的第i个键值对
                              name = attrs[ i ].name;    //elem对象属性名
                              //是否存在data-开头的属性
                              if ( name.indexOf( "data-" ) === 0 ) {
                                           //取到data-后面的属性名，进行一次驼峰命名转换
                                      name = jQuery.camelCase( name.slice(5) );
                                           //通过 dataAttr 解析 elem 元素身上的 html 标签 "data-" 的值
                                       dataAttr( elem, name, data[ name ] );
                              }
                         }
                    }
                     //给elem对象添加parsedAttrs属性，预防多次解析，浪费性能
                   jQuery._data( elem, "parsedAttrs", true );
              }
          }
          return data;
      }

      // 如果key是对象
     if ( typeof key === "object" ) {
            //每个调用对象执行一次
           return this.each(function() {
               //在缓存中储存key对象
           jQuery.data( this, key );
           });
     }
                  //如果参数大于1
     return arguments.length > 1 ?
                 //每个调用对象执行一次
                this.each(function() {
                       //在缓存中储存键值对
                        jQuery.data( this, key, value );
                 }) :
                 //如果参数只有一个&&有调用对象，Query.data( elem, key )  如果有值代表有缓存，dataAttr会返回这个缓存，如果没有值dataAttr查看调用对象elem的dom属性是否有data-开头的属性，有就返回，没有返回undefined；
                  elem ? dataAttr( elem, key, jQuery.data( elem, key ) ) : undefined;
}

   2.静态方法 $.data()
         data: function( elem, name, data ) {
return internalData( elem, name, data );
}
   3.函数 internalData()

         function internalData( elem, name, data, pvt  ) {
               //检查 elem 元素是否可以设置数据
if ( !jQuery.acceptData( elem ) ) {
return;
}

var ret, thisCache,
                // 产生jQuery键值随机数类似于： "11020056177454302087426"
  // jQuery.expando = (core_version + Math.random()).replace(/D/g, "");
  // (core_version + Math.random()) 产生一串随机字符串 "1.10.20.6013481540139765"
   // replace(/D/g, "") 去掉非数字
internalKey = jQuery.expando
        //确定是否是dom元素
isNode = elem.nodeType,
                //是dom元素，取到缓存对象。如果是 JS 对象，则直接将数据保存在这个对象上，
cache = isNode ? jQuery.cache : elem,
                //elem的internalKey 属性对应全局缓存中的位置
id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey;

// 如果是读取数据，且没有数据，则返回
if ( (!id || !cache[id] || (!pvt && !cache[id].data)) && data === undefined && typeof name === "string" ) {
return;
}

if ( !id ) {
if ( isNode ) {
                        // 对于 DOM 结点，jQuery.uuid 会自加 1，并附加到 DOM 元素上
id = elem[ internalKey ] = deletedIds.pop() || jQuery.guid++;
} else {
id = internalKey;
}
}

if ( !cache[ id ] ) {
// 对于 DOM 如果数据缓存对象不存在，则初始化为空对象 {}
         // 对于 JS 对象，设置方法 toJSON 为空函数，以避免在执行 JSON.stringify() 时暴露缓存数据
         // 如果一个对象定义了方法 toJSON(), JSON.stringify() 在序列化该对象时会调用这个方法来生成该对象的 JSON 元素
cache[ id ] = isNode ? {} : { toJSON: jQuery.noop };
}

if ( typeof name === "object" || typeof name === "function" ) {
if ( pvt ) {
cache[ id ] = jQuery.extend( cache[ id ], name );
} else {
cache[ id ].data = jQuery.extend( cache[ id ].data, name );
}
}

thisCache = cache[ id ];

// jQuery data() is stored in a separate object inside the object"s internal data
// cache in order to avoid key collisions between internal data and user-defined
// data.
if ( !pvt ) {
if ( !thisCache.data ) {
thisCache.data = {};
}

thisCache = thisCache.data;
}

if ( data !== undefined ) {
thisCache[ jQuery.camelCase( name ) ] = data;
}

// Check for both converted-to-camel and non-converted data property names
// If a data property was specified
if ( typeof name === "string" ) {

// First Try to find as-is property data
ret = thisCache[ name ];

// Test for null|undefined property data
if ( ret == null ) {

// Try to find the camelCased property
ret = thisCache[ jQuery.camelCase( name ) ];
}
} else {
ret = thisCache;
}

return ret;
}

4.
整个流程中多次使用：
jquery静态方法:  jQuery.data(elem,key,data) ,  函数: dataAttr(elem,key,data)
jQuery.data源代码：
                   data: function( elem, name, data ) {
          return internalData( elem, name, data );
           },

乌托

吾儿壮哉

2017-06-14 10:38:06

吾儿壮哉

乌托

css重置

2017-06-14 10:41:47

@charset "UTF-8";
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin: 0; padding: 0; }
fieldset,img{ border: 0; }
:focus{ outline: 0; }
address,caption,cite,code,dfn,em,strong,th,var,optgroup{ font-style: normal; font-weight: normal; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; font-family: "Microsoft YaHei"; }
abbr,acronym{ border: 0; font-variant: normal; }
code,kbd,samp,tt{ font-size: 100%; }
input,button,textarea,select{ *font-size: 100%; border:none;}
body{ background:#fff; color:#5e5e5e; font: 14px/2em Microsoft YaHei,SimSun,Arial;}
ol,ul{ list-style: none; }
table{ border-collapse: collapse; border-spacing: 0; }
caption,th{ text-align: left; }
sup,sub{ font-size: 100%; vertical-align: baseline; }
:link, :visited, ins{ text-decoration: none; }
blockquote,q{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after{ content: ""; content: none; }
a:link, a:visited{ color: #5e5e5e;}
a:hover { color:#c9394a;}
a:active { color: #666;}
.clearfix:after{content:"020";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}
.l{float:left;}
.r{float:right;}
.clear{ height:0; overflow:hidden; clear:both}

乌托

网页头部header标签汇总

2017-06-14 10:42:55

<meta charset="utf-8">

    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    
    <meta name="description" content="不超过150个字符"/>

    
    <meta name="keywords" content=""/>

    
    <meta name="author" content="name, email@gmail.com"/>

    
    <meta name="robots" content="index,follow"/>

    
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

    

    
    <meta name="apple-mobile-web-app-title" content="标题">

    
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    
    <meta name="format-detection" content="telphone=no, email=no"/>
    
    
    <meta name="renderer" content="webkit">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    
    <meta name="HandheldFriendly" content="true">
    
    <meta name="MobileOptimized" content="320">
    
    <meta name="screen-orientation" content="portrait">
    
    <meta name="x5-orientation" content="portrait">
    
    <meta name="full-screen" content="yes">
    
    <meta name="x5-fullscreen" content="true">
    
    <meta name="browsermode" content="application">
    
    <meta name="x5-page-mode" content="app">
    
    <meta name="msapplication-tap-highlight" content="no">
    
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    
    

    
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    
    

    
    <meta name="msapplication-TileColor" content="#000"/>
    
    <meta name="msapplication-TileImage" content="icon.png"/>
    

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    

    
    
    <meta property="og:type" content="类型" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="标题" />
    <meta property="og:image" content="图片" />
    <meta property="og:description" content="描述" />

消息提示