Java Script基础

Javascript简称js，js是一种脚本语言，常用在web客户端脚本语言，主要是用来给html增加动态功能。

JavaScript引入方式

JS引入方式有行内样式、内联样式、外部方式

行内样式

内联样式

    <h2>这是内嵌样式：</h2>
    <button onclick="btn1()" id="btn1">内嵌</button>

    <script type="text/javascript">
      function btn1() {
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
          alert("这是内嵌样式设置");
        };
      }
    </script>

外部样式

    <h2>外部引入方式：</h2>
    <button id="btn2">外部</button>
    <script type="text/javascript" src="ex2.js"></script>

window.onload = function () {
  var btn = document.getElementById("btn2");
  btn.onclick = function () {
    alert("这是外部引入方式的点击事件");
  };
};

JavaScript变量类型

字符串（String）、数字(Number)、布尔(Boolean)、未定义（Undefined）、空（Null）

JavaScript条件判断语句

if语句

      var a = 40;
      if (a >= 30) {
        console.log(a * 2);
      }

else if语句

<script type="text/javascript">
      var a = 126;
      if (150 >= a >= 130) {
        console.log("优秀");
      }else if( 120 <= a <140 ){
        console.log("一般");
      }else if(a >= 90){
        console.log("及格");
      }else{
        console.log("不及格");
      }
    </script>

switch语句

<script type="text/javascript">
      var a = 59;
      switch (a) {
        case 59:
          console.log("低速驾驶");
          break;
        case 100:
          console.log("超速驾驶");
          break;
      }
    </script>

JavaScript循环语句

For循环

for（语句1；语句2；语句3）{
执行的代码
}

While循环

while（条件）{
条件成立时执行的代码
自增或自减
}

Do While循环

do{
需要执行的代码
}
while (条件);

JavaScript显示方案

使用 window.alert() 写入警告框

<script type="text/javascript">
      window.alert("这里是警告框"); 
    </script>

使用 document.write() 写入 HTML 输出

<script type="text/javascript">
      document.write("写入HTML") 
    </script>

使用 innerHTML 写入 HTML 元素

<script type="text/javascript">
      function aa(){
      document.getElementById("div1").innerHTML="innerHTML改写了内容";
      }
      </script>
      <div id="div1">
      asdsadsad
      </div>
      <input type="button" value="点我" onclick="aa()" />

使用 console.log() 写入浏览器控制台

<script type="text/javascript">
       console.log("这里是控制台") 
    </script>

JavaScript函数

function函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
语法：function functionname()
{
// 执行代码
}

JavaScript对象

JavaScript 对象是拥有属性和方法的数据。
methodName : function() {
// 代码
}

创建对象方法

1、new Ｏbject()
2、构造函数模式（constructor）
3、使用字面量

访问对象方法

使用.的方式调用对象的属性
格式：对象名.属性名（不带双引号）
//定义对象
var a = {name:‘33’,age:‘77’}
//调用对象name属性
a.name

使用[ ]的方式调用对象的属性
格式：对象名[ ’ 属性名 ’ ]
//定义对象
var a = {name:‘33’,age:‘77’}
//调用对象name属性
a.[‘name’]

JavaScript操作对象DOM

DOM节点分类

文档是一个文档节点。
所有的HTML标签都是元素节点
所有的HTML属性都是属性节点
文本插入到 HTML 元素是文本节点

DOM查询元素方法

使用getElement系列方法访问节点

根据id获取一个元素节点
var div1 = document.getElementById(“div1”)
根据标签名获取一堆节点的集合
var li1 = document.getElementsByTagName(“li”);
根据class获取一堆元素节点
var div2 = document.getElementsByClassName(“content”);
使用css选择器选择第一个匹配的元素节点
var d1 = document.querySelector(“.content”);
根据css选择器选择一批能够被匹配到的所有的元素
var d1 = document.querySelectorAll(“.content”);

根据层次关系访问节点

获取li的父节点
var li = document.getElementById(“li”).parentNode();
获取div的子节点集合
var divs = document.getElementById(“div”).childNodes();
获取ul的第一个子节点
var ul = document.getElementById(“ul”).firstChild();
获取ul的最后一个子节点
var ul = document.getElementById(“ul”).lastChild();
获取div的下一个节点
var div = document.getElementById(“div”).nextSibiling();
获取div的上一个节点
var div = document.getElementById(“div”).previousSibiling();