读书笔记-《JavaScript DOM编程艺术》

第1章

第2章

1.最好的方法是将<script>标签放在HTML文档的最后,</body>之前,这样可以使得浏览器更快的加载页面。

2.解释型语言

3.注释:建议用

1
2
3
4
5
6
//单行注释

/*
多行注释
多行注释
*/

4.变量区分大小写

5.弱类型语言,不需要类型声明。

6.支持字符串.数值.浮点数.布尔值.

7.数组Array,数组中的元素可以是不同类型的数据,或者变量
如:

1
2
3
4
5
var arr = Array(4);
var arr = Array();
arr[2]="test";

var arr = [1,2,3,"test"];

关联数组

8.对象
声明对象:

1
2
3
4
var lennon = Object();
lennon.name = "John";
lennon.year = 1940;
lennon.isLiving = false;

或者:

1
var lennon = {name:"John", year:1940, isLiving:false};//这不是JSON吗?

9.条件语句 if(){}else{}同Java一样

10.======
= 赋值
== 比较值,不严格,””==false,成立!
=== 严格比较,不仅比较值,还会比较变量的类型

11.用户自定义对象

1
var liuhao = new Person;//和java相比,没有括号

12.内建对象:Array.Math.Date
数组,

1
2
var persons = new Array();
persons.length;

13.宿主对象:由运行环境(Web浏览器)提供的,包括Form.Image.Element等,用来获取网页上的表单.表单元素等信息


第3章

14.DOM:Document.Object.Model。加载到当前窗口的网页,可以使用js去读取其中的内容。

15.window对象,对应浏览器本身,其属性和方法通常称为BOM(浏览器对象模型)。window.open.window.blur等方法。各种弹出广告的实现

16.HTML DOM 树形结构:

17.CSS的简单使用

1
2
3
selector{
property:value;
}

如:

1
2
3
4
p{
color:yellow;
font-size:1.2em;
}

18.CSS属性的继承:节点树上的各个元素将继承其父元素的样式属性,如:

1
2
3
4
body{
color:white;
background-color:black;
}

将作用于嵌套在body元素内部的所有元素。

19.class属性:可以在所有的元素上添加class属性:

1
2
<p class="special">This is a special p.<p/>
<h2 class="special">This is a special p.</h2>

可以通过如下的方式设置上面两个元素的属性:

1
2
3
.special{
font-style:italic;
}

也可以单独设置某种元素的class属性:

1
2
3
p.special{
font-style:italic;
}

20.id属性:网页元素的唯一标示符,对于<ul id="abc">,可以这样设置它的属性:

1
2
3
#abc{
color:black
}

也可以利用id属性为包含在该元素中的其他元素设置样式:

1
2
3
#abc li{
font-style:italic;
}

21.获取元素对象:通过ID.标签名(如p.li等标签).类名

  • document.getElementById("demo"):返回一个对象
  • element.getElementsByTagName("li"):返回一个对象数组,其中每个对象对应着文档中有着给定标签的一个元素。该方法允许使用通配符,
  • getElementsByClassName():返回一个对象数组,可以查找带有多个类名的元素。

22.获取 设置元素属性

  • object.getAttribute(attribute)attribute:待查询元素的属性的名字,
    <p title="提醒">不要忘了买这些!</p>里的title属性
  • object.setAttribute(attribute,value),将属性attribute的值设置为value

23.DOM工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。


第4章

24.事件函数的处理机制:在给某个元素添加了事件处理函数(如onclick)后,一旦事件发生,就会执行相应的JavaScript代码,被调用的JavaScript代码可以返回一个值,这个值将会传递给那个事件处理函数(onclick)。例如,给一个链接添加一个onclick函数,并让该函数返回一个布尔类型的值。这样一来,当这个链接被点击时,如果那段代码返回了true,那么onclick函数就认为这个“链接被点击了”;如果返回了false,那么就会认为这个链接“没有被点击”。
如:

1
<a href="http://www.baidu.com" onclick="return false;">点我</a>

点击后,将不会触发链接默认的行为(跳转)。

25.想在页面加载时运行函数count,可以这样设置

1
window.onload = count;

26.childNodes属性:可以用来获取任何一个元素的所有子元素,是一个包含其全部子元素的数组,包含的不仅仅是元素节点(ul、img等),甚至连空格和换行符都被当作节点。

27.nodeType属性:node.nodeType获取节点的nodeType属性,返回的是一个数字,共有12种取值,常用的有:

  • 元素节点:1
  • 属性节点:2
  • 文本节点:3

28.nodeValue属性:node.nodeValue获取/设定一个节点的值。

1
<p id="description">选个图吧</p>

<p>的nodeValue属性将是一个空值null,包含在<p>元素中的文本是另外一个节点,是<p>元素的一个子节点。

29.firstChild和lastChild属性:
node.firstChild等价于node.childNodes[0]
node.lastChild等价于node.childNodes[node.childNodes.length-1]


待更新。。。

hoxis wechat
提供 CSDN 资料免费下载服务,欢迎来撩~
赞赏一杯咖啡
0%