码迷,mamicode.com
首页 > Web开发 > 详细

js学习12-《JS DOM 编程艺术》笔记

时间:2014-09-16 12:14:20      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   color   io   使用   java   ar   strong   

学习了下《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>

 

闭包结果见图片

js学习12-《JS DOM 编程艺术》笔记

标签:des   style   blog   color   io   使用   java   ar   strong   

原文地址:http://www.cnblogs.com/luckyflower/p/3974391.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!