笔记

1、最好的办法是把<script>标签放到HTML文档的最后,</body>之前,这样加载速度最快。

2、JavaScript是区分大小写的。 

3、JavaScript是弱类型语言,可以在任何时候改变变量的数据类型。

 var age = "thirty three";

 age = 20; var person = null;

4、数组声明方式汇总:

 a.var s = ["ds","sd","sd",23]; b.var beat = Array(2);beat[0]="sd";

 c. var beat = Array("a","a","d");

5、关联数组: 

 var lennon = Array();  lennon["name"] = "john"; lennon["year"] = 1920; lennon["living"] = false;

6、JavaScript对象可以分为三种:用户自定义对象,内建对象(Array,Math,Data) 宿主对象

7、元素节点=属性节点+文本节点。

8、typeof操作符可以告诉我们操作数是字符串,数值,函数,布尔值还是对象。

9、getElementById() getElementByTagName()  

html5新增    getElementByClassName() 

10、document.getElementById("placeholder"); 必须有document

    getAttribute(”href").必须有引号。

    setAttribute(“src”,source);Attr不是Arrt

11、document.getElementById("textPlace").childNodes;

childNodes属性  document.getElementsByTagName("body");

12、nodeType属性  childNodes属性

 元素节点nodeType -> 1    属性节点->2   文本节点-> 3

   nodeValue属性 firstChild  lastChild属性。

13、var texthold = document.getElementById("textholder");

   texthold.firstChild.nodeValue=pic.getAttribute("title");

14、window.open(url,name,features); 在新标签中打开URL地址。

15、onclick="popup('http://www.baidu.com')"  href="#" 指向当前文档开头

16.性能考虑: 

    1.尽量减少访问DOM和尽量减少标记 

if(document.getElementById("a").length>0){      

 var d = document.getElementById("a");   

 }          

var he = document.getElementById("a");  

if(he.length>0){

var d = he;

}

   2.合并放置脚本 把所有的脚本放到一个js文件里面去。

   3.压缩脚本。去掉不要的注释和空格。

17、function addLoadEvent(func){

       var oldonload = window.onload; 

       if(typeof window.onload != 'function'){

       window.onload = func ;

      }else{

       window.onload = function(){

         oldonload();

         func();

       }

      }

    }

18、document.write("<p>this is a inserted.</p>"); document最大的缺点就是违背了“行为应该与表现分开”原则

 innerHTML属性可以用来读取,写给某些给定元素里的HTML内容。

<div> <p>this is<em>my</em>content</p></div>

 dom看这个标记是通过dom树,innerHTML是通过

 

 var testdiv = document.getElementById("textdiv"); alert(testdiv.innerHTMl);输出上图下面的部分、

 dom像一把手术刀那样精细,而innerHMTL像大锤一样粗放。

 tesddiv.innerHTML = "<p>I Love You </p>"

19、document.createElement("p");  parent.append(child);  

 document.createTextNode("hello , world.")

 parentElement.insertBefore(newElement,targetElement)    

nextsibling属性

 

 

20、accesskey设置快捷键 当设置accesskey="q",的时候,按下alt+q键的时候就会相当于触发那个按钮

21、var para = document.getElementById("example");

   para.style.color = "black";

22、tr :nth-child (odd){  }

   tr: nth-child (even){  background-color:#fff;}

23、 parseInt(elem.style.top)

24、 var vx = getContext("2d"); vx.beginPath()  vx.moveTo()

 vx.closePath()    vx.stroke()

25、document.createElement("canvas").getContext("2d").getImageData()取得原始图像数据,循环遍历其中的每一个像素,将每个颜色像素的红绿蓝彩色求平均值,得到相应彩色值得灰度值。

26、Illustrator - Ai ->Canvas 插件,所见即所得,不过代码乱。

27、ctx.drawImage(img,0,0); ctx 是一个createElement("canvas");对象 im g是一个getElementById(”hello");

 var c = ctx.getImageData(0,0,img.width,img.height);

context.getImageData(sx,sy,sw,sh);

   sx,sy分别表示获取区域的起点横坐标,起点纵坐标
sw,sh分别表示所获取区域的宽度和高度

   ctx.putImageData(c,0,0,0,0,c.width,c.height);

  context.putImageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

   dx,dy为源图像上起点,dirtyX,dirtyY为目标图像起点

28、vid.parentNode.style.width = vid.videoHeight +'px';

29、HTML5 video 属性currentTime    duration  paused

   事件 play   pause  loadeddata  ended

30、input  autocomplete   autofocus  placeholder   required

31、使用通用选择器吧所有的元素的内外边距都设置为0,这样就把不同浏览器为元素设置的不同的内外边距都删除了,重置了这些值之后,所有的样式就可以一视同仁了。

原文地址:https://www.cnblogs.com/CClarence/p/4914565.html