Javascript-精华版

javascript

• 组成：ECMScript(核心），BOM(浏览器对象模型),DOM(文档对象模型）；

ECMScript(核心）

• 与html的接合样式
  1. <script> js代码 </script>（内部）
     可以放在html的任意位置，但是一般都放置在body结束标签之前，
• 数据类型
  • 原始数据类型：
    1. numeber:代表整数，小数，NaN；
    2. String:代表字符串，字符；
    3. null;内容为空的占位符；
    4. boolean:true,false;
    5. undefined:未定义的，一个变量如果没有给定初始化值，他默认为undefined类型；
  • 引用数据类型
    1. 对象；
• 运算符
  1. 一元运算符：当运算符的运算数不是数值类型的时候，会先进行转换
     1. 当运算数为字符串是：如果字符串的字面值为数值时，会直接转成数值类型；如果字面值不是数值类型的时候，会转成NaN;
     2. 当运算数的boolean时：true转为1，false转为0；
  2. 比较运算符：
     1. “===”：全等于，在比较之前会先进行类型的比较，如果类型不一样会直接返回false;
     2. 字符串比较的时候，是按照字典顺序一次比较的；
  3. 逻辑运算符：&&、||、！（没有&和|）
     1. number类型，除了0和NaN，其它都为true;
     2. String 类型，空字符为false,其它为true;(这里需要注意：空字符串是var str=""）；
     3. undefined和Null都为false;
     4. 所有的对象都为true;
  4. 逻辑控制语句
     1. switch()
        1. 在java中，参数类型可以是int,short,char,枚举，String,byte;
        2. 在js中，他可以是任意原始数据类型；

BOM

• 概述：浏览器对象模型。它是将浏览器的各个组成部分封装为对象。
  1. Window：窗口对象
  alert(提示信息）：窗口上会弹出提示信息；
  confirm(确认信息）：窗口上会弹出一个（确认和取消的）提示框，点确认会返回true，取消则返回false；
  2. History:历史记录
  3. Location:地址栏对象
  4. Navigator:浏览器对象
  5. Screen：屏幕对象
  这里我们只需要理解并会使用Window对象即可,对于Window的方法，我们可以直接调用，不用写Window;

DOM

• 概述：文档对象模型，它是将组成文档的各个组成部分封装为了对象，然后对标记文档进行CRUD的操作。
• 对于DOM ，我们需要理解并能熟练使用Document,Element.Node对象即可：

Document 的使用：

• 来获取Element对象：
  1. 通过id属性值获取：document.getElementById(标签的id值)
  2. 通过class属性值获取：document.getElemetsByClassName(class属性值);
  3. 通过标签名获取：
     document.getElementsByTagName(标签名)
  4. 通过name属性值获取：
     document.getElementsByName(name属性值)
     需要注意的是：2、3、4获取的都是一个element对象数组。
• 创建其它的对象:
  1. 创建element对象：
     var ele_a = document.createElement(“a”);
  2. 创建文本对象：
     var text_a= document.createTextNode(“删除”);
     ele_a.appendChild(text_a);

Element的使用：

• 当有了element对象之后，我们可以进行一下的操作：

1. 可以使用element.value 来获取 在网页中的文本框中的值；
   2. element.属性来设置属性值：
   方法一：eg<a> 点我</a>
   elemetn.href=“https://www.baidu.com”
   方法二：elemetn.setAttribute(“href”,“https://baidu.com”);
   3. element.innerHTML来设置其标签体内容和添加子节点

  <div id="i">中国</div>
   var doc=document.getElementById("i");
        doc.innerTHML="我爱你”；//输出的结果是“我爱你”
        doc.innerTHML+="我爱你”；//输出的结果是“中国我爱你”

4. 设置或返回元素的style属性

...
        <div id="i">中国</div>
         </style>
        var doc=document.getElementById("i");
        doc.style.color="red"  //中国（红色字体）
          </script>
...

5. 设置或返回元素的class属性

   .....
    <style>   
             .aa {font-size: 70px;}   
    </style>
        <div id="i">中国</div>
    <script>
            var doc=document.getElementById("i");
             dd.className="aa";
  	</script>
    ......

Node的使用：

• 属性：parentNode：返回父类节点对象；
• 方法：
  appendChild():添加子节点；
  removeChild():删除子节点：

总结：

对于BOM和DOM，我们需要注意的它俩之间的关系：它们不是平级关系，它们都只是抽象出来的一个模型， Element的对象是通过Document的对象document来获取和创建,而document又是由Window中的属性document来创建的