JavaScricp（总回顾）

知识点导图

1：基础知识

（1）JavaScript是脚本语言，弱类型，执行非常非常快

（2）它与java有什么关系？没有任何关系

（3）js能做什么事情？1控制浏览器 BOM ，2控制元素 DOM

（4）js不能做什么事情？不能做文件读取，创建及删除，不能直接访问数据库

（5）node.js - 开发平台，通过这个平台可以开发常规的web服务端，是一块非常轻量级的运行环境

Jquery.js - 前端框架

（6）JS是面向过程的语言，JS有面向对象，但是不是纯粹的面向对象语言

2：常用对话框

（1）alert("")：警告对话框，作用是弹出一个警告对话框

（2）confirm("")：确定对话框，弹出一个带确定和取消按钮的对话框——确定返回true，取消返回false

（3）primpt("要显示的文字"):可以允许用户输入内容的对话框

3：数据类型

（1）基本数据类型：字符串、小数、整数、时间日期、布尔型等

（2）变量只有一种类型：

通用类型var，可以随便存储其它类型的值，可以直接使用，不用定义。但习惯上定义。

定义变量： var a;    //所有变量定义都用var定义，var是通用的可变类型。

var s = "3.14";

（3）类型转换

分为自动转换和强制转换，一般用强制转换。

其他类型转换为整数：parseInt（）；

其他类型转换为小数：parseFloat（）；

判断数字是否合法：isNaN()

4：运算符（与C#一样）

    数学运算符：+    -    *    /    %    ++    --；

关系运算符：==    ！=    >=    <=    >    <；

逻辑运算符：&&    ||    ！；

其他运算符：+=    -=    *=    /=    %=    ？：；

5：语句

    一般分为顺序、分支和循环语句。

    （1）分支语句：  if{}else{}   if{}else{}

（2）循环for语句：for(初始条件：循环条件；状态改变){循环体}

（3）问题类型：穷举，迭代

（4）关键词：break、continue

（5）如果输出某一参数的值：输出的值是“+a+”和“+b

6：数组

     数组的定义：new Array();    //它的长度是动态变化的，里面可以放任意类型的元素。

数组元素的赋值：a[0]=123; a[1]="hello";  //元素中的索引从0开始。

数组的取值：a[i];

数组属性：a.length;    //数组元素的个数，长度。没有count（）

方法：a.sort(); //数组排序，按照每一个元素的第一个字符进行排序。

a.reverse();  //翻转数组。

7：函数

    函数的四要素：名称、输入、返回值、加工。

定义函数：function add(形参){函数体}     //函数名为add，输入为参数的形式，返回值可以是var类型，也可以return一个返回值。

匿名函数：function(){函数体}

函数必须经过调用才能执行。函数的调用：add（实参）

BOM（主要记忆）

window.open("打开的地址","打开的位置")

window.opener:打开此页面的上一个页面对象

window.close():关闭当前页面

window.scrollTo（x,y）滚动页面至哪里，y代表纵向滚动；

window.history.back();页面进行后退；

location地址栏：window.location.href="http://www.baidu.com";修改页面地址，会跳转页面（超链接）

DOM（主要记忆）

（1）找到元素

按照ID来找 var aa = document.getElementById("id");找到的肯定是一个对象

按照Class来找 var aa = document.getElementsByClassName("class");找到的肯定是一个数组

按照Name来找 var aa = document.getElementsByName("name");找到的肯定是一个数组

按照元素名来找 var aa = document.getElementsByTagName("div");找到的肯定是一个数组

（2）操作元素内容

innerHtml - 会将元素标记代码渲染后的效果显示出来（超链接形式显示）：会将所有的内容和代码一并取出来

innerText - 不会让内容进行任何渲染，写的什么直接就输出什么（把超链接代码显示出来了）：取值时它只会把能看到的文字信息取出来，不会取到HTML代码

value - 12个表单元素御用，别的元素没有权利使用它们并不是value就能解决全部表单元素的内容操作，部分元素还需要上面两种的配合。如：option，radio

（3）操作元素属性

1、添加属性

      oTxt1.setAttribute("readonly", "readonly");

2、修改属性
     oTxt1.setAttribute("Class", "ttt");

---

（ 添加、修改）如果没有此属性会添加进去，相反，会修改此属性的值

3、查询属性
      this.getAttribute("Class");

获取属性的值

4、删除属性
      this.removeAttribute("Class");

移除一个属性

（4）操作元素样式（所有的样式操作都是在元素代码内部进行添加及更改，优先级最高）

1、 添加样式

this.style.width="100px";
            this.style.boxShadow = "0px 0px 15px black";

2、修改样式
           this.style.width="100px";
           this.style.boxShadow = "0px 0px 15px black";

3、查询当前样式
           this.style.xxx - 只能获取写在元素代码内部的样式值

获取即使样式：
                   this.offsetWidth
                   this.offsetHeight
                   this.offsetTop
                   this.offsetLeft

4、删除样式

（5）操作元素

1、查找兄弟级的上一个和下一个

      this.nextSibling
      this.previousSibling

2、查找父级元素
     this.parentNode

3、查找全部子级元素
     this.childNodes

4、创建新元素
     var oDiv = document.createElement("div");

document.getElementById("boss").appendChild(oDiv);
     ---------------------------------------------------

var oDiv = "<div class='div1'></div>";

document.getElementById("boss").innerHTML += oDiv;
    ----------------------------------------------------

5、移除元素
     this.remove();