美文网首页
JavaScript DOM 编程艺术[第2版] 学习笔记

JavaScript DOM 编程艺术[第2版] 学习笔记

作者: Xxthon | 来源:发表于2019-08-01 13:54 被阅读0次

    # JavaScript DOM 编程艺术[第2版] 学习笔记

    ## 语法

    ### 使用

    1. 在`<head></head>`部分包含一个`<script>`标签;

    2. 将js代码存入`.js`文件中,在HTML文件中通过`src`属性指向该文件;

    3. 最好还是在`</body>`标签之前通过`src`指向js文件;

    4. 不需要编译器,仅需要解释器;

    ### 语句

    1. 建议分行并且句末添加  ';'  ,便于阅读;

    ### 注释

    1. `//`注释;

    2. `/* */`注释;

    3. `<!-`注释,此注释仅单行注释,会忽略句末的`-->`;

    ### 变量

    1. 可以不声明变量,直接赋值;

    2. 先声明变量,再赋值;

    3. 声明变量的同时,进行赋值,可以对多个变量进行这样的操作,eg:`var mood = "happy", age = 34;`

    ### 数据类型

    1. 字符串

    2. 数值

    3. 布尔值

    4. 数组,要使用Array来声明,声明的同时可以给出长度;

      eg:`var members = Array(3);`;

      也可以不给出长度:

      eg:`var members = Array();`;

      也可以在声明时初始化:

      eg:`var members = Array("father", "mother", "son")`;

      也可以不给出Array关键字,如python中,使用`[]`来创建数组;

    5. 关联数组(字典、哈希表)

      ```javascript

      var lennon = Array();

      lennon['name'] = "john";

      lennon['year'] = 1940;

      lennon['living'] = false;

      ```

      字典中的value也可以是字典;

      数组中的元素可以是不同数据类型的数据,也可以是关联数组;

    ### 操作

    #### 算数操作符

    1. `+、-、*、/`

    2. `自增自减`;

    3. `+=`

    #### 条件语句

    1. `if、else`

    2. `>、<、>=、<=、==、!=`

    3. `&&、||、!`

    #### 循环语句

    1. `while`

    2. `do...while`

    3. `for(;;)`

    ### 函数

    1. `function 函数名(参数){}`;

    2. `return`

    ### 变量的作用域(scope)

    1. 在函数中使用`var`声明的变量都将变成局部变量;

    ### 对象(object)- 用户定义对象

    1. 拥有**属性**和**方法**;

    2. 用户使用“点”语法访问属性与方法;

    3. 为给定对象创建一个新实例:

      eg:`var jack = new Person;`;

    ### 内建对象(native object)

    1. `Array`;

    2. `Math`;

    3. `Date`;

    ### 宿主对象(host object)

    1. > 由Web浏览器提供的预定义对象被称为宿主对象(bost object);

    2. 主要包括`Form`、`Image`、`Element`

    ---

    ## DOM

    > DOM代表着被加载到浏览器窗口里的当前网页;浏览器向我们提供了当前网页的模型(地图),我们可以通过JavaScript去读取这张地图;

    ### DOM中的节点

    1. 元素节点;

    2. 文本节点;

    3. 属性节点(并非所有元素都包含这属性,但所有的属性都会被包含在元素里);

    4. 注释节点;

    #### 挂钩属性(css选择器?)

    1. class属性

    2. id属性

    #### 常用函数

    1. `getElementByID()`;返回一个对象

    2. `getElementsByTagName()`;

      返回一个数组;

      支持通配符参数,如'*';

    3. `getAttribute(attribute)`;

    4. `setAttribute(attribute, value)`;

      通过此函数对文档进行修改,将使得文档在浏览器窗口中的显示效果 和/或 行为动作发生相应的变化,但是通过view source时,文档的源代码不变;

    DOM的工作模式,造就了这种“表里不一”的现象:

    加载文档的静态内容 -> 以动态的方式对它们进行刷新 -> 动态刷新不影响文档的今天内容;

    相关文章

      网友评论

          本文标题:JavaScript DOM 编程艺术[第2版] 学习笔记

          本文链接:https://www.haomeiwen.com/subject/lqmqdctx.html