day34_js - 技术栈

今日内容

0 复习昨日

1 事件

1.1 事件介绍

1.2 事件绑定方式

1.3 不同事件的演示

2 DOM操作

2.1 概述

2.2 查找元素

2.3 元素内容的查找和设置

2.4 元素属性的查找和设置

2.5 元素CSS样式的查找和设置

2.6 创建元素

2.7 创建文本节点

2.8 追加元素

2.9 删除元素

3 案例练习

0 复习昨日

1 js是让页面能够动态效果,是一种脚本语言,弱类型语言

js编程语言,包含

基本语法

DOM

BOM

2 js的引入方式

标签内

<script>标签内

新建独立的js文件,在任意位置引入

3 变量

声明时不需要写数据类型,写var

值可以写不同类型

4 基本数据类型

number , string,boolean,undefined,null

不同类型有不同的使用方式

string操作字符串,

5 数组

长度不限制,内容不限制

6 日期

7 引用类型

var stu = {name:"张三",age:18}

stu.name

JSON

8 运算符

除法不取整,有小数

== 判断的是值,===判断是值和类型

&& || 与java中一样,有短路效果

9 分支,循环

10 函数
java 复制代码
function 函数名(参数1,参数1) {
}
var fun = function(){}
11 弹窗函数

alert

confirm

prompt

1 事件

1.1 事件介绍

事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等

1.2 事件绑定方式

事件要想发生,就得将事件和标签先绑定

一个完整的事件有三部分

事件源(标签)

什么事(事件)

响应(动作效果)

事件绑定,其实就是事件和标签绑定

方式1: 事件源,事件,响应在一起

方式2: 事件源,事件在一起,响应抽取函数

方式3: 事件和响应全部抽取
方式1: 事件源,事件,响应在一起

html 复制代码

  <body>
    <!-- 事件源(标签),事件,响应(函数) -->
    <!-- 方式1: 事件源,事件,响应在一起 -->
    <!-- onclick是单击事件,是html属性 -->
    <!-- alert() 函数就是事件的响应 -->
    <button type="button" onclick="alert('听说你点我了?')">按钮</button>
  </body>

方式2: 事件源,事件在一起,响应抽取函数

html 复制代码

  <body>
    <hr />
    <!-- 方式2: 事件源,事件在一起,响应抽取函数 -->
    <button type="button" onclick="dian()">按钮</button>
    <script>
      // 定义函数
      function dian() {
        alert("你又点我?!");
      }
    </script>
  </body>

方式3【重要】: 事件和响应全部抽取

html 复制代码

    <!-- 方式3: 事件和响应全部抽取 -->
    <button id="btn">再点一下试试</button>
    <script>
      // 1) 先获得标签对象
      var btn = document.getElementById("btn");
      // 2) 给标签对象设置事件以及响应
      btn.onclick = function () {
        alert("上瘾了是不是?!");
      };
    </script>

练习：练习,div宽高各200,背景颜色red,设计点击事件,点击是出现弹框,并有输出语句计算,点击次数

html 复制代码

  <body>
    <div
      id="d1"
      style="width: 200px; height: 200px; background-color: red"
    ></div>
    <script>
      var div = document.getElementById("d1");
      var count = 0;
      div.onclick = function () {
        // alert("点击了Div");
        count++;
        console.log(count);
      };
    </script>
  </body>

1.3 不同事件的演示

这些事件,都是html中标签的属性,都是以onxxx开头

事件名称	描述
onchange	HTML 元素内容改变
onblur	输入框失去焦点
onfocus	输入框获得焦点
onclick	用户点击（单击）HTML 元素
ondblclick	用户双击HTML元素
onmouseover	用户将鼠标移入一个HTML元素中
onmousemove	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeyup	键盘弹起
onkeydown	用户按下键盘按键
onkeypress	按压键盘
onload	浏览器已完成页面的加载
onsubmit	表单提交

1.3.1 鼠标事件

html 复制代码

    <script>
      var box = document.getElementById("box");
      // 鼠标移动,只要鼠标动,就会触发函数
      box.onmousemove = function () {
        console.log("鼠标移动");
      };

      // 鼠标移入,移入进一次,触发一次
      box.onmouseover = function () {
        console.log("鼠标移入");
      };

      // 鼠标离开
      box.onmouseout = function () {
        console.log("鼠标离开");
      };
    </script>

1.3.2 键盘事件

html 复制代码

    <script>
      var i = document.getElementById("i");
      // 事件触发后,函数有对应的事件对象
      // 键盘按下
      i.onkeydown = function (event) {
        // console.log("键盘按下");
        // event是事件对象,内部包含事件的所有信息
        // console.log(event);
        // 可以获得这次键盘事件的代号,13是回车键
        if (event.keyCode == 13) {
          console.log("提交表单");
        }
      };
      // 键盘弹起
      i.onkeyup = function () {
        // console.log("键盘弹起");
      };
      // 键盘按压(与按下效果一样)
      i.onkeypress = function () {
        // console.log("键盘按压");
      };
    </script>

ps: 当不知道某个对象是什么的时候,就输出看效果,看内部的内容

1.3.3 表单事件【重点】

html 复制代码

  <body>
    <div>
      <!-- 
            因为tijiao()函数,返回有了true/false
            所以οnsubmit="return true" 即提交表达
               οnsubmit="return false" 阻止表达提交
         -->
      <form accept="/java2217" onsubmit="return tijiao()">
        用户名<input id="i1" type="text" name="username" /><br />
        密码<input type="password" name="password" /><br />
        籍贯<select id="jiguan" name="jigaun">
          <option>河南</option>
          <option>河北</option>
          <option>北京</option>
        </select>
        <input type="submit" value="提交" />
      </form>
      <script>
        var i1 = document.getElementById("i1");
        // 绑定获得焦点事件
        i1.onfocus = function () {
          // 将来可以通过操作DOM,获得输入框的值,也可以改变样式
          console.log("输入框获得焦点");
        };

        // 绑定失去焦点
        i1.onblur = function () {
          console.log("输入框失去焦点");
        };

        var jiguan = document.getElementById("jiguan");
        // 给下拉框绑定内容改变事件
        jiguan.onchange = function () {
          // 将来配合DOM操作,可以获得改变的内容,做一些其他事情
          // 可以用于省市二级联动
          console.log("内容改变");
        };

        /*
         1) 表单事件是表单form的事件,所以这个事件要绑定在form上
         2) 函数要返回true/false
         3) onsubmit中也要写return
        */
        function tijiao() {
          console.log("点击提交按钮");
          // return 返回false,认为表达不提交
          // 返回true.表达就会提交
          // 一般用来数据校验
          return true;
        }
      </script>
    </div>
  </body>

1.3.4 加载事件【重点】

浏览器加载页面,是瀑布式加载,即从上之下依次加载执行.

html 复制代码

  <head>
    <title>加载事件</title>
    <script>
      /*
        解决方案,等页面加载完后,再触发函数,执行绑定事件
        页面加载事件是窗口对象的事件
        该函数onload,会在页面加载后触发函数
        */
      window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
          alert("试试就试试!");
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下试试?!</button>
  </body>

ps: js代码可以放在页面的任何地方,但是一般建议放后面,越晚加载越好!

2 DOM操作

2.1 概述

DOM,Document Object Model,文档对象模型,将HTML页面当做文档,页面内部有各种标签,标签有平级,有嵌套;标签还有属性,因此document被加载成dom树,树上每个节点就是一个标签

有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式

2.2 查找元素

查找元素(标签)有很多方式

通过id查找元素

通过标签名查找元素

通过class查找元素

html 复制代码

  <body>
    <!-- 给标签设置id属性,id值要唯一 -->
    <button id="btn">按钮</button>
    <ul>
      <li>貂蝉</li>
      <li>西施</li>
      <li>王昭君</li>
      <li>杨玉环</li>
      <li class="xd">黎姿</li>
      <li class="xd">利智</li>
      <li class="xd">张曼玉</li>
      <li class="xd">朱茵</li>
    </ul>
    <script>
      // 方式1:通过id获得标签对象(对象是唯一)
      var btn = document.getElementById("btn");
      // console.log(btn);

      // 方式2:通过标签名来获得
      // 因为有同名,返回的是所有同名标签对象,放入数组中返回
      var liArr = document.getElementsByTagName("li");
      // console.log(liArr);
      for (var i = 0; i < liArr.length; i++) {
        // console.log(liArr[i]);
      }

      // 方式3: 通过类名获得标签对象
      var mvArr = document.getElementsByClassName("xd");
      console.log(mvArr);
    </script>
  </body>

2.3 元素内容的查找和设置

元素内容,是指标签开闭之间的内容.
html 复制代码
这就是内容
这就是内容
查找和设置使用的是相同的属性

innerHTML 获得或设置标签的内容

innerText 获得或设置标签的内容

html 复制代码

  <body>
    <p id="p1"><span>你好啊,JavaScript</span></p>
    <button id="btn1">设置innerHTML</button>
    <button id="btn2">设置innerText</button>
    <script>
      var p1 = document.getElementById("p1");
      // 获得内容,innerHTML获得是标签和内容
      var innerHTML = p1.innerHTML;
      console.log(innerHTML);

      // 获得内容,innerText获得的只是文本内容
      var innerText = p1.innerText;
      console.log(innerText);

      var btn1 = document.getElementById("btn1");
      btn1.onclick = function () {
        // 给p标签设置内容,内容中有标签会解析成标签
        p1.innerHTML = "<span>你好啊,李焕英</span>";
      };

      var btn2 = document.getElementById("btn2");
      btn2.onclick = function () {
        // 给p标签设置内容,内容全部解析为文本
        p1.innerText = "<span>你好啊,李焕英</span>";
      };
    </script>
  </body>

2.4 元素属性的查找和设置

元素属性,是指开标签内的属性,比如

id

name

value

...

html 复制代码

  <body>
    <input id="i1" class="c1" type="text" value="默认值" />
    <button id="btn1">点击获得属性值</button>
    <button id="btn2">点击设置属性值</button>
    <script>
      var btn1 = document.getElementById("btn1");
      var i1 = document.getElementById("i1");

      btn1.onclick = function () {
        // 获得属性值
        console.log(i1.id); // 获得id属性值
        console.log(i1.class); // 没有获得class属性
        console.log(i1.type); // 获得type属性值
        console.log(i1.value); // 获得value属性值【重要】
      };

      btn2.onclick = function () {
        // 设置属性值
        i1.type = "password";
        i1.value = "123456";  // 【重要】
      };
    </script>
  </body>

2.5 元素CSS样式的查找和设置

元素css样式的查找和设置,是指标签中style的属性值的获得和设置

获得属性值

元素对象.style.属性

设置属性值

元素对象.style.属性 = ""

html 复制代码

  <body>
    <div
      id="box"
      style="width: 200px; height: 200px; background-color: red"
    ></div>
    <button id="btn1">获得css样式</button>
    <button id="btn2">设置css样式</button>
    <script>
      var box = document.getElementById("box");

      var btn1 = document.getElementById("btn1");
      btn1.onclick = function () {
        // 获得样式,主要是style的属性值
        var style = box.style;
        // console.log(style);
        // 获得具体样式,可以再继续调用
        console.log(box.style.width);
        console.log(box.style.height);
        // 有连字符的,要去掉,后面首字母变大写
        console.log(box.style.backgroundColor);
      };

      var btn2 = document.getElementById("btn2");
      btn2.onclick = function () {
        // 设置box样式,尺寸越来越大
        // 获得原来的尺寸
        var width = box.style.width; // 200px
        var height = box.style.height;
        // 获得宽度,截取数值
        // var newWidth = width.substring(0, width.length - 2);
        // 自带属性获得不带px的宽度
        var newWidth2 = box.clientWidth;
        var newHeight = box.clientHeight;
        // 设置尺寸
        box.style.width = newWidth2 + 10 + "px";
        box.style.height = newHeight + 10 + "px";

        // 只能获得,不能这样设置!
        // box.clientWidth = newWidth2 + 10;
        // box.clientHeight = newHeight + 10;
      };
    </script>
  </body>

2.6 创建元素

通过dom对象可以创建出一个标签

document.createElement("标签名")

2.7 创建文本内容

创建出一个文本内容,这个内容是值开闭标签间的文本内容

document.createTextNode("文本内容");

2.8 追加元素

在开闭标签内,在末尾追加内容

标签对象.appendChild(元素)

html 复制代码

  <body>
    <button id="btn">点击时创建p标签,已经内容</button>
    <div id="box"></div>
    <script>
      var btn = document.getElementById("btn");
      btn.onclick = function () {
        // 创建元素p
        var p = document.createElement("p"); // <p></p>

        // 创建文本内容
        var text = document.createTextNode("你好啊,Java"); // 你好啊,Java

        // 在p标签内,追加文本
        p.appendChild(text); // <p>你好啊,Java</p>

        var box = document.getElementById("box");
        // 把内容追加到div中
        box.appendChild(p);
      };
    </script>
  </body>

2.9 删除元素

删除子节点

元素对象.removeChild(子元素);

html 复制代码

  <body>
    <ul id="ul">
      <li>刘德华</li>
      <li>吴彦祖</li>
      <li>彭于晏</li>
    </ul>
    <button id="btn">点击删除子元素</button>
    <script>
      var btn = document.getElementById("btn");
      btn.onclick = function () {
        // 获得父元素
        var ul = document.getElementById("ul");
        // 获得所有li元素
        var liArr = document.getElementsByTagName("li");
        // 遍历
        for (var i = 0; i < liArr.length; i++) {
          // 通过父元素,删除子元素
          ul.removeChild(liArr[i]);
          i--; //下标回退
        }
      };
    </script>
  </body>

3 案例

查找 - document.getElementById

内容 innerHTML

属性元素对象.属性

样式元素对象.style.属性
练习1

输入框,点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失

事件: 获得焦点,失去焦点

要设置css样式

html 复制代码

    <!-- 点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失 -->
    <input id="i1" />
    <script>
      var i1 = document.getElementById("i1");
      i1.onfocus = function () {
        i1.style.height = "300px";
        i1.style.width = "300px";
        // i1.style.borderColor = "blue";
        i1.style.border = "30px yellow solid";
        i1.style.backgroundColor = "red";
      };

      i1.onblur = function () {
        i1.style.height = "";
        i1.style.width = "";
        i1.style.border = "";
        i1.style.backgroundColor = "";
        // 重置样式
        i1.style = "reset";
        // i1.style = "";
      };
    </script>
  </body>

设置div,高300宽300,鼠标进入div,div背景变红,离开div背景变绿

html 复制代码

  <div
      id="box"
      style="width: 300px; height: 300px; border: 2px red solid"
    ></div>
    <script>
      var box = document.getElementById("box");
      // 鼠标进入div,div背景变红,离开div背景变绿
      box.onmouseover = function () {
        box.style.backgroundColor = "red";
      };
      box.onmouseout = function () {
        box.style.backgroundColor = "green";
      };
</script>

练习: 设置输入框,输入内容,点击按钮,将内容追加到div后

html 复制代码

  <body>
    请输入内容:<input id="i1" />
    <button id="btn">追加内容</button>
    <div id="box"></div>
    <script>
      var btn = document.getElementById("btn");
      btn.onclick = function () {
        // 获得输入框的内容
        var text = document.getElementById("i1").value;
        // 创建p标签
        var p = document.createElement("p");
        // 创建文本节点
        var textNode = document.createTextNode(text);
        // 追加内容
        p.appendChild(textNode);

        // 给div追加内容
        var box = document.getElementById("box");
        box.appendChild(p);
        document.getElementById("i1").value = "";
      };
    </script>
  </body>

作业

0 先重复2遍代码!!

1当输入框获得焦点的时候，提示输入的内容格式.

2当输入框失去焦点的时候，提示输入有误

3 设计一个div,设定宽高,在设置一个按钮,点击随机切换背景颜色
  提示使用JS的Math对象的方法,可以查看API

var btn = document.getElementById("btn");

btn.onclick = function () {

// 获得输入框的内容

var text = document.getElementById("i1").value;

// 创建p标签

var p = document.createElement("p");

// 创建文本节点

var textNode = document.createTextNode(text);

// 追加内容

p.appendChild(textNode);

    // 给div追加内容
    var box = document.getElementById("box");
    box.appendChild(p);
    document.getElementById("i1").value = "";
  };
</script>

```

作业

0 先重复2遍代码!!

1当输入框获得焦点的时候，提示输入的内容格式.

2当输入框失去焦点的时候，提示输入有误

3 设计一个div,设定宽高,在设置一个按钮,点击随机切换背景颜色
  提示使用JS的Math对象的方法,可以查看API