js学习12-《JS DOM 编程艺术》笔记
学习了下《JS DOM 编程艺术》，做个学习总结：
1.字符串中放单引号双引号：
建议：
字符串中放单引号，则用双引号包含字符串
1 var s1="It's my doy";
字符串中放双引号，则用单引号包含字符串
1 var s2='He said "hi!" ';
其他使用\进行转义
2.==和===
=== ：严格比较。不仅比较值，还比较类型
== ：不严格比较，转换类型一致比较
3.JS语言里对象的三种类型
3.1内建对象：javascript提供的对象 Math Array
3.2宿主对象：浏览器对象。如document，window
3.3用户自定义对象：..
4.获取文档中的对象
1 document.getElementById("p1");
1 document.getElementByTagName("input");
1 document.getElementByClassName("classname1 classname2");//备注：此时name顺序不重要，可乱序
5.获取某对象属性
<html lang="zh-cn"></html>
eg:
var html=document.getElementsByTagName("html");//html为数组
html[0].getAttribute("title");//此时结果为null，代表没有值
html[0].title;//此时结果为”“;可能存在兼容问题，为旧版本web文档处理方式
6.event事件返回false，可使默认行为不被触发
eg:
1 <a href="www.baidu.com" onclick="return false">onclick</a>//此时点击该链接，跳转到百度页面的事件不会触发
7.获取某节点的子节点
var child=document.getElementsByTagName("body")[0].childNodes;
child.length;
child[0].nodeType;//返回结果为1 2 3 的数字。其中：1-元素节点，2-属性节点，3-文本节点
8.获取某文本节点的值
element.nodeValue;
eg:
1 <body> 2 ********test nodeType,nodeValue******* 3 <p>hello jermy</p> 4 <script type="text/javascript"> 5 function tag(tagname){ 6 return document.getElementsByTagName(tagname)[0]; 7 } 8 var p1=tag("p"); 9 var t1=p1.firstChild;//等价于p1.childNodes[0] 10 document.write("p1.nodeType="+p1.nodeType+";p1.nodeValue="+p1.nodeValue+"<br/>"); 11 document.write("t1.nodeType="+t1.nodeType+";t1.nodeValue="+t1.nodeValue); 12 </script> 13 </body>
9.伪协议(备注：此方法不建议使用)
<a href=“javascript:prop()” ></a>//此处点击a链接，在支持伪协议的浏览器直接运行，不支持伪协议浏览器将报错。支持伪协议但是被用户禁用js的浏览器中将do nothing。
网站设计关注点：平稳退化
11.换行string
1 document.getElementById("demo").innerHTML = "Hello \ 2 Dolly!";
12.自启动：
1 (function () { 2 document.getElementById("demo").innerHTML = "Hello! I called myself"; 3 }());
或者：
1 (function () { 2 document.getElementById("demo").innerHTML = "Hello! I called myself"; 3 })();
13.闭包的例子
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p>Counting with a local variable.</p> 6 7 <button type="button" onclick="myFunction()">Count!</button> 8 9 <p id="demo">0</p> 10 11 <script> 12 var add = (function () { 13 var counter = 0; 14 return function () {return counter += 1;} 15 })(); 16 17 function myFunction(){ 18 document.getElementById("demo").innerHTML = add(); 19 } 20 </script> 21 22 </body> 23 </html>
14. hijax理解：渐进增强的使用ajax
15. 动态向页面添加标记的方法：
document.write innerHTML（看到innerHTML想到了innerText，请移步查看区别）
http://www.cnblogs.com/luckyflower/p/3974423.html
16. 样式文件的结构
@import url(layout.css)
@import url(color.css)
@import url(typography.css)
三个分离的样式文件可以存储在一个basic.css文件之中，在页面中直接link该basic.css
17. 颜色
不论在哪个地方使用颜色，注意前景色+背景色，否则会容易丢失。
18. px,em ...
px:像素点
em:根据当前字体font大小来的一个相对值
19. 事件
和用户进行交互的唯一手段。有addeventListener等(后续补充)
