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>

闭包结果见图片

时间: 2024-10-09 06:22:50

js学习12-《JS DOM 编程艺术》笔记的相关文章

dom编程艺术笔记1--第二章

第二章语法部分: 1.js注释:<!-- XXXXX 而"-->"这部分js会认为是注释内容的一部分 2.var 声明变量 不用声明变量类型 3.声明使用一个数组语法:var object = Array(arg) 或者var object = Array(xxx,xxx,xxx) 4.对象声明:var a = Object(); 语句结束用分号 a.name a.year用这种对象+点的方式创建对象属性 或者var a = {key:value}方式 创建+添加对象属性

javascript dom 编程艺术笔记 第四章:图片库

首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

javascript dom编程艺术笔记之图片库的改进

dom的操作要遵守的原则 1.平稳退化 2.分离javascript 3.向后兼容 4.性能考虑 改进后的显示图片方法 function showpic(whichpic){ if(!document.getElementById("placeholder")) return false; var source=whichpic.getAttribute("href"); var placeholder=document.getElementById("p

javascript DOM 编程艺术----笔记

平稳退化和渐进增强原则平稳退化 : 如果正确的使用了JavaScript脚本,就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利的浏览你的网站. 这就是所谓的平稳退化(graceful degradation),就是说,虽然某些功能无法使用,但最基本的操作仍能顺利完成. 渐进增强: 所谓的"渐进增强"就是用一些额外的信息层去包裹原始数据. 按照"渐进增强"的原则创建出来的网页几乎都符合"平稳退化"原则. 总结: 保证网页能在最

《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数

刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 看到版本翻译为预留退路,刚刚看到个名词,我觉得很奇怪,以前没有听说过啊.不过看到英文注释就知道了Graceful degradation不就是优雅降级么,听说过! 书中举了个例子,点击一个链接,弹出一个窗口的方法. function popUp(WinURL){ window.open(WinURL,&quo

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

《javascript DOM 编程艺术》学习笔记(一)

书籍已经看完了前六章的内容,有了一定的编程基础后觉得本书内容相对来说过于简单,应该是完全针对于初学者的(或者如作者所说是写个Web设计师的),作者在表述一个问题,一句代码都解释得非常啰嗦与重复,不过从书中学习到更多的,也是作者想让读者体会的是让大家理解DOM脚本编程技术背后的思路和原则,作者特别以早期Javascript的滥用来强调Web的规范与标准,这一点是非常值得学习的,也是一个程序员的基本素养. 截止到第六章,将所学到的知识点归纳如下: 1.基本语法:与php一样是弱类型语言,虽然功能强大

JS DOM 编程艺术 随笔

DOM 最大的作用就是将整个文档通过节点树来展现.通过类似方法可以获取特定节点,并绑定js方法实现与人的交互. 1.通过dom方法,获取页面的元素(getElementsByTagName/id,通过class(getAttribute))2.获取元素之后,为他们绑定行为(点击/其他)的处理事件3.最后把所有函数绑定到window.onload()函数上面去 onload = function(){function1function2...} plus 小技巧: <a onclick=>函数