首页 > 其他分享> 文章详细

第三阶段-day04_JS&DOM

2022-04-27 00:34:03 阅读：139 来源： 互联网

标签：返回 10 console log DOM day04 var JS 节点

1 JS

Js javascript es6 ECMAScript

网页--->人

Html --->骨架

Css --->皮肤和血肉

Js--->思维逻辑

JavaScript : 和java没有关系

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript是一种弱类型语言
它的解释器被称为JavaScript引擎，为浏览器的一部分
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
跨平台特性，在绝大多数浏览器的支持下。

1.1 怎么在html中引入js

1.1.1 直接写在html页面中

在HTML文本中
HTML 中的js脚本(代码)必须位于 <script> 与 </script> 标签之间。

<body>
<script>
    alert(123)
</script>
</body>

1.1.2 外部导入js文件

<script src="1.js"></script>
在引用外部JS的script标签间不能编写JavaScript代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js.js"></script>
</head>

1.1.3 打印和调试代码

常用测试
- alert()
- console.log()
注释语句
- //
- /**/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert(111)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var List = ['1','2','3']

    // alert(List)
    // alert(List)

    console.log(List)
    console.log(List)
</script>

</body>
</html>

注意:

如果你的页面,如果和显示的效果不一样, 一些代码运行不正常

要干什么

第一步就是打开浏览器的控制台, 看一下报了什么错误

1.2 Js的类型

1.2.1变量的声明var

声明一个变量
- JavaScript在声明时统一使用无类型（untyped）的“var”关键字
- var来声明一个变量,这是一个固定的写法，是js的语法。
- JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的。
- JavaScript 对大小写敏感 Html 不敏感

变量名有命名规范：
- 只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字
- 如果重新声明 JavaScript 变量，该变量的值不会丢失
  - 在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
  - var carname="Volvo";
  - var carname;
(let const)
- let 和 const 关键字是 ES6 的新语法，主要用来取代 var 来定义变量。ES6 出了这么一个简单的新语法其实足以说明JS有很多不好的地方，而其中之一就是变量声明。

1.2.2变量的属性

String

var str=‘123s’;

Number

var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
只要是个数，那么就是数值型的，无论整浮、无论大小、无论正负，都是number类型的

Boolean

var x=true
var y=false

数组

var cars=new Array();cars[0]="Audi";
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];

对象

var person={firstname:"Bill", lastname:"Gates", id:5566};
获取参数
- name=person.lastname;
- name=person["lastname"];
添加参数并赋值
- person.aaa = 'aaaa’
注意:
- var person={firstname:"Bill", lastname:"Gates", id:5566};
- var b = person
- b.lastname = 'b'
- console.log(b) // 结果: lastname为b
- console.log(person) // 结果: lastname为b

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    var str = "21233";
    var str = "4444";
    var str
    console.log(str)

    var num = 1.1
    console.log(num)

    var num1 = 1
    console.log(num1)

    var bool = false
    var list1 = ['1','2','3']
    console.log(list1)

</script>
</body>
</html>

类型检测

typeof表示“某某的类型”

语法：

typeof 变量
instanceof表示"是某某类型”

console.log(typeof b)

1.3 事件和函数

我们可以通过事件和函数的对应关系

事件监听

函数执行

把html和js 关联起来

Onclick:点击

onmousedown:鼠标按钮被按下。

onmouseover:鼠标移到某元素之上。

1.3.1函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname(parm){
    // 执行代码
}

Eg:

<button onclick="myFunction(‘123’,’yyyy')">点击这里</button>

<script> 
    function myFunction(num,str){ 
        alert(num + str); 
    } 
</script>

eg2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function f(aaa) {
        alert(aaa)
    }
</script>

<!-- onclick:  点击事件  , 当监听到该html元素上发生了点击,
那么它 将触发其所指向的函数    -->
<button onclick="f('45678uygh')">按钮</button>
</body>
</html>

1.3.2语言逻辑

运算符

+,-,*,/,%,++,--
=, +=, -=, *=, /=, %=
注意:
加法：20+10+'20’
减法：'30'-'10'

比较和逻辑运算符

!=, > , <, >=, <=, ? 三元
&& , ||, !
注意:
== 值相等
=== 值相等并且类型相等
!== 值不相等或类型不相等

逻辑语句if----else

if (条件 1) { 
    当条件 1 为 true 时执行的代码 
} else if (条件 2) { 
    当条件 2 为 true 时执行的代码 
} else { 
    当条件 1 和 条件 2 都不为 true 时执行的代码
}

注意if非boolean数据
- var myBoolean=new Boolean();
- var myBoolean=new Boolean(0);
- var myBoolean=new Boolean(null);
- var myBoolean=new Boolean("");
- var myBoolean=new Boolean(false);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    console.log(10 + 20 + "5")
    console.log(10 + 20 + '5')
    console.log(20 - "7" - 3)
    console.log(20 - '7' - 3)

    var str = '1'
    var num = 1

    console.log(str == num)
    console.log(str === num)
    console.log(str !== num)

    var myBoolean = new Boolean();
    var myBoolean = new Boolean(0);
    var myBoolean = new Boolean(null);
    var myBoolean = new Boolean("");
    var myBoolean = new Boolean(false);

    if(""){
        alert("真")
    }else {
        alert("假")
    }

</script>

</body>
</html>

逻辑语句switch

switch(n) { 
    case 1: 
        执行代码块 1 
        break; 
    case 2: 
        执行代码块 2 
        break; 
    default: 
        n 与 case 1 和 case 2 不同时执行的代码 
}

逻辑语句for

种类一:

var person={fname:"John",lname:"Doe",age:25}; 
for (x in person) { 
    alert(x) alert(person[x]) 
}

种类二:

for (var i=0; i<5; i++) { 
    x=x + "The number is " + i + "<br>"; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var List = [1,2,3,4]
    for (var i = 0; i < List.length; i++){
        console.log(List[i])
    }

    var obj = {
        name: 'zs',
        age: 18
    }
    for (item in obj){
        console.log(item)
        console.log(obj[item])
    }
    // 不建议用for/in 去遍历list

</script>
</body>
</html>

逻辑语句while

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

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

1.4 核心对象

1.4.1 Number

toString() 以字符串返回数值
- var ii = 123
- console.log(typeof ii) //number
- console.log(typeof ii.toString()) //string
toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)：
- var x = 9.6544;
- x.toFixed(2); // 返回 9.65
toPrecision() 返回字符串值，它包含了指定长度的数字：
- var x = 9.656;
- x.toPrecision(); // 返回 9.656
- x.toPrecision(2); // 返回 9.7(四舍五入）
MAX_VALUE 返回 JavaScript 中的最大数字。
- var x = Number.MAX_VALUE;
MIN_VALUE 返回 JavaScript 中的最小数字。
- var x = Number.MIN_VALUE;

parseInt() 方法：返回整数
- 允许空格。只返回首个数字：
- parseInt("10"); // 返回 10
- parseInt("10.33"); // 返回 10
- parseInt("10 20 30"); // 返回 10
- parseInt("10 years"); // 返回 10
- parseInt("years 10"); // 返回 NaN (NAN是一个标记: 非数值类型)

parseFloat() 方法：返回小数
- 允许空格。只返回首个数字：
- parseFloat("10"); // 返回 10
- parseFloat("10.33"); // 返回 10.33
- parseFloat("10 20 30"); // 返回 10
- parseFloat("10 years"); // 返回 10
- parseFloat("years 10"); // 返回 NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>


    // toString() 以字符串返回数值
    var ii = 123
    console.log(typeof  ii)
    console.log(typeof ii.toString())


    // toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)：
    var x = 9.6554;
    console.log(x.toFixed(2))// 返回 9.65

//     toPrecision() 返回字符串值，它包含了指定长度的数字(四舍五入)：
    var x = 9.656;
               // 返回 9.656
        x.toPrecision(2);       // 返回 9.7

    console.log(x.toPrecision())
    console.log(x.toPrecision(1))

//     MAX_VALUE 返回 JavaScript 中的最大数字。
var x = Number.MAX_VALUE;
    console.log(x)
//     MIN_VALUE 返回 JavaScript 中的最小数字。
var x = Number.MIN_VALUE;

    console.log(x)


    console.log('-----------------------------------------------')


    // parseInt() 方法 :返回数字(整数)
    // 允许空格。只返回首个数字：
    parseInt("10");         // 返回 10
    parseInt("10.33");      // 返回 10
    parseInt("10 20 30");   // 返回 10
    parseInt("10 years");   // 返回 10
    parseInt("years 10");   // 返回 NaN


    // NAN是一个标记:  非数值类型
    console.log(parseInt("10 years"))
    console.log(parseInt("years 10 "))

    // if (parseInt("years 10 ")){
    //     alert('真')
    // }else {
    //     alert('假')
    // }


//     parseFloat() 方法。 返回小数
// 允许空格。只返回首个数字：
    parseFloat("10"); // 返回 10
    parseFloat("10.33"); // 返回 10.33
    parseFloat("10 20 30"); // 返回 10
    parseFloat("10 years"); // 返回 10
    parseFloat("years 10"); // 返回 NaN


    console.log(parseFloat("10.01 years"))

</script>

</body>
</html>

1.4.2 string

length 属性返回字符串的长度
- var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
- var sln = txt.length;
indexOf()方法返回字符串中指定文本首次出现的索引（位置）：
- var str = "The full name of China is the People's Republic of China.";
- var pos = str.indexOf("China");
- var pos = str.indexOf("China", 28);
indexOf() 不存在返回 -1。
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
- var str = "Apple, Banana, Mango";
- var res = str.slice(7,13);//裁剪字符串中位置 7 到位置 13 的片段
split() 将字符串转换为数组
- var txt = "a,b,c,d,e"; // 字符串
- txt.split(","); // 用逗号分隔
- txt.split(" "); // 用空格分隔
- txt.split("|"); // 用竖线分隔
- 如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <script>
10 
11 
12     // length 属性返回字符串的长度
13     var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
14     var sln = txt.length;
15     console.log(sln)
16 
17 
18 
19 //     indexOf()方法返回字符串中指定文本首次出现的索引（位置）：
20     var str = "The full name of China is the People's Republic of China.";
21 
22     // 标记的是字符串首字母的位置,  并且是以下标为0开始查询
23     var pos = str.indexOf("The");
24     console.log(pos)  //返回0
25 
26     // 第一个参数, 就是查询的字符串,   第二个参数标识从哪一位开始
27     var pos = str.indexOf("Chinaa", 28);
28     console.log(pos)  //返回-1
29 //     indexOf() 不存在返回 -1。
30 
31 
32 
33 
34 // slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
35     var str = "Apple, Banana, Mango";
36     var res = str.slice(7,13);//裁剪字符串中位置 7 到位置 13 的片段
37     console.log(res)  //返回Banana
38 
39 
40 //     split() 将字符串转换为数组(也是切割成数组) 返回的一定是个数组
41     var txt = "a,b,c,d,e";   // 字符串
42     txt.split(",");          // 用逗号分隔
43     console.log(txt.split(","))
44 
45     txt.split(" ");          // 用空格分隔
46     console.log(txt.split(" "))
47 
48     txt.split("|");          // 用竖线分隔
49     console.log(txt.split("|"))
50 //     如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：
51 
52     console.log(txt.split(""))
53 
54 </script>
55 
56 </body>
57 </html>

1.4.3 Array

toString() 返回数组转换的数组值（逗号分隔）的字符串。
- var fruits = ["Banana", "Orange", "Apple", "Mango"];
- alert(fruits.toString()); //Banana,Orange,Apple,Mango
pop() 方法从数组中删除最后一个元素,返回删除的元素
- fruits.pop(); // 从 fruits 删除最后一个元素（"Mango"）
- var x = fruits.pop(); // x 的值是 "Mango"
push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度
- fruits.push("Kiwi"); // 向 fruits 添加一个新元素
splice() 方法可用于向数组添加新项, 返回([])
- fruits.splice(2, 0, "Lemon", "Kiwi");
- // 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。
- // 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
- fruits.sort(); // 对 fruits 中的元素进行排序
reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组
- fruits. reverse(); // 对 fruits 中的元素进行排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var List = ['aaa','bbb','ccc','ddd']

        // tostring() 返回一个字符串
        console.log(List.toString())

        // pop 从尾部删除, pop()方法的返回值是被删除的元素
        var deleteStr = List.pop()
        console.log((List))
        console.log(deleteStr)

        // push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度
        var add = List.push('xxx');
        console.log(List)
        console.log(add)

        // splice() 对一个数组进行添加和删除
        // 第一个参数,标识起始位置, 第二个参数标识长度 ----> 删除的长度
        // 第三个参数, 标识添加元素, ---> 添加的位置,就是被删除元素的起始位置
        // 该方法的返回值是被删除的元素内容
        console.log(List)
        var List2 = List.splice(1,1,'nnn','mmm')
        console.log(List)
        console.log(List2)

        // sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
        var List3 = List.sort();
        console.log(List3)
        console.log(List)


        //reverse() 翻转数组,  原数组和返回值数组都是经过翻转的数组
        var List4 = List.reverse();
        console.log(List)
        console.log(List4)

    </script>

</body>
</html>

1.4.4 数学对象Math

Math.ceil(x)返回大于等于x的最小整数
Math.floor(x)返回小于等于x的最大整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.round(x) 把一个数四舍五入为最接近的整数。
Math.max(x,y,z,...,n) 返回最高值
Math.min(x,y,z,...,n) 返回最低值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
//  Math.ceil(x)返回大于等于x的最小整数
    console.log(Math.ceil(1.1))
    console.log(Math.ceil(1))

//  Math.floor(x)返回小于等于x的最大整数
    console.log(Math.floor(1.1))

//  Math.random() 返回 0 ~ 1 之间的随机数
    console.log(Math.random())

//  Math.round(x) 把一个数四舍五入为最接近的整数。
    console.log(Math.round(4.7))

//  Math.max(x,y,z,...,n)    返回最高值
    console.log(Math.max(3.4,3,5,9))

//  Math.min(x,y,z,...,n)    返回最低值
    console.log(Math.min(3.4,3,5,9))

</script>

</body>
</html>

1.4.5 Boolean

var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

作业

实现随机点名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<script>

    var List = ["蔡晨松","邱少斌","庆云","任师","追思"]

    function click1(){
        var num = Math.floor(Math.random() * List.length)

        if(List.length < 1){
            alert("所有同学都点到过了")
            return
        }
        console.log(List[num])
        List.splice(num, 1)
    }
</script>

<button onclick="click1()">
    点击
</button>
</body>
</html>

2 DOM

什么叫dom操作?

打开浏览器，进入推荐页面，有很多新闻。我不喜欢的，我可以点×，让它不出现。代码是死的，应该同一个html页面不能改变，是写死的。新闻点×就不出现，刷新页面就变了，是把代码形成了dom结构。里面是一个个对象。

代码是死的，对象是活的。

文档对象模型 (浏览器拿到一份html代码之后, 到最终显示的过程, 叫dom解析)

从代码中抽象出一种逻辑关系---> dom结构 (对象引用关系)

代码--------不是直接关联的--------->显示

代码---> dom结构(对象引用关系结构)(实际上是对象)-----> 页面显示

2.1 Dom Tree

文档对象模型(document object model )。
- HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：DOM Tree

2.2 Dom的加载顺序

就是一个页面从代码开始,一直到最终显示的过程

我们什么时候拿到代码的? 请求服务器服务器返回的html页面

解析HTML结构(从上向下的过程)。
加载外部脚本和样式表文件。(加载外部文件)
解析并执行脚本代码。(解析外部文件)
构造HTML DOM模型。 (dom模型结构---> 构建对象引用的关系)

当dom结构的对象关系构建完成, 那么就已经可以在页面上显示了

加载图片等外部文件。
页面加载完毕。

2.3 节点

dom树中的节点彼此拥有层级关系
父、子和同胞(兄弟或姐妹）专指元素节点。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

2.4 操作引用关系

2.4.1 第一步: 获得节点

获得节点的常用方法
- getElementById(): 固定id对应的节点

var div1 = document.getElementById('div1')

整个html文档就是一个文档对象，就是document对象，根据id名获得对象。

- getElementsByName(): 获得节点数组, 根据name属性

var div2 = document.getElementsByName('div2')

- 数组
- getElementsByTagName(): 获得节点数组, 根据标签名

var div3 = document.getElementsByTagName('div')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div1">
    123
</div>

<script>
    var div1 = document.getElementById('div1')
    console.log(div1)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div name="div2">
    123
</div>

<script>
    var div2 = document.getElementsByName('div2')
    console.log(div2)

    var div3 = document.getElementsByTagName('div');
    console.log(div3)
</script>
</body>
</html>

2.4.2 添加一个节点

AppendChild(): 添加子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ol id="ollist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

<input id="inputStr">
<button onclick="add()">添加</button>

<script>
    function add() {
        var inputStr = document.getElementById('inputStr');
        console.log(inputStr)
        console.log(inputStr.value)//input、textarea、select都是表单元素，都用.value

        //获得ollist节点
        var ollist = document.getElementById('ollist');

        //要往ollist节点中添加<li>1</li>这样的数据

        // 创建一个节点
        var li = document.createElement('LI');
        // 创建一个文本节点
        var inputNode = document.createTextNode(inputStr.value);

        li.appendChild(inputNode)
        ollist.appendChild(li)

        // 清空输入框
        inputStr.value = ''
    }
</script>
</body>
</html>

2.4.3 删除一个节点

RemoveChild(): 删除一个子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ol id="ollist"><li>1</li><li>2</li><li>3</li></ol>

节点下标:<input id="inputStr">
<button onclick="delete1()">删除节点</button>

<script>
    function delete1() {
        var inputStr = document.getElementById('inputStr')
        var ollist = document.getElementById('ollist')

        // 获得ol标签(节点)的子节点数组
        var list = ollist.childNodes

        // 获得输入下标的对应ol的子节点
        var deleteNode = list[inputStr.value]

        ollist.removeChild(deleteNode)
    }
</script>

</body>
</html>

加载顺序

2.4.4 替换一个节点

ReplaceChild() : 替换一个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ol id="ollist"><li>1</li><li>2</li><li>3</li></ol>

节点下标:<input id="inputTag"><br>
替换内容:<input id="inputStr">

<button onclick="change1()">替换节点</button>


<script>

    function change1() {
        var  inputTag = document.getElementById('inputTag')
        var  inputStr = document.getElementById('inputStr')
        var  ollist = document.getElementById('ollist')

        // 创建一个节点
        var liNode = document.createElement('LI')
        var inputStrNode = document.createTextNode(inputStr.value)
        liNode.appendChild(inputStrNode)

        // 获得旧节点
        var oldNode = ollist.childNodes[inputTag.value]

        // replaceChild 有两个参数, 第一个参数: 新节点, 第二个参数:旧节点
        ollist.replaceChild(liNode, oldNode)

        inputTag.value = ''
        inputStr.value = ''
    }

</script>

</body>
</html>

2.5 Inner

innerText & innerHTML

2.5.1 innerText

改变一个节点的内部文本

var div1 = document.getElementById('div1')
div1.innerText = '123'

2.5.2 innerHTML

也是向一个节点中插入内容, 但是可以插入html代码(html代码在这个插入过程中是可以解析的)

<body>

<div id="div1">
    我是一个div
</div>

<button onclick="change1()">改变</button>

<script>
    function change1() {
        var div1 = document.getElementById('div1');
        // div1.innerText = '<b>123</b>'
        div1.innerHTML = '<b>123</b>'

    }
</script>
</body>
</html>

2.6事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div onclick="click1(event)">
    我是一个div
</div>

<script>
    function click1(event) {
        console.log(event)

    }
</script>

</body>
</html>

3 重点

3.1 Js

整体作为了解()

核心就是核心对象

3.2 Dom

3.2.1 理解dom思想

为什么要产生dom这个东西

3.2.2 会dom操作(增删改)

4 作业

1.把所有代码手动敲一遍

2.实现注册页面（看不清换一张和验证验证码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--实现注册页面（看不清换一张，和验证码验证）-->
<table cellspacing="10" >
    <tr>
        <td>注册邮箱:</td>
        <td><input></td>
    </tr>
    <tr>
        <td></td>
        <td>你还可以使用手机注册</td>
    </tr>
    <tr>
        <td>创建密码:</td>
        <td><input></td>
    </tr>
    <tr>
        <td>真实姓名:</td>
        <td><input></td>
    </tr>
    <tr>
        <td align="right">性别:</td>
        <td>
            <input type="radio" value="1" name="aaa">男
            <input type="radio" value="2" name="aaa">女
        </td>
    </tr>
    <tr>
        <td align="right">生日:</td>
        <td>
            <select>
                <option>2000</option>
                <option>2000</option>
                <option>2000</option>
                <option>2000</option>
            </select>年
            <select>
                <option>00</option>
                <option>00</option>
                <option>00</option>
                <option>00</option>
            </select>月
            <select>
                <option>00</option>
                <option>00</option>
                <option>00</option>
                <option>00</option>
            </select>日
        </td>
    </tr>
    <tr>
        <td align="right">我正在:</td>
        <td>
            <select>
                <option>学习</option>
                <option>睡觉</option>
                <option>机器学习</option>
                <option>00</option>
            </select>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <!--span就是一个标签，不会影响你的内容-->
            <img  id="img1" src="verycode.gif"><span onclick="changeImg()" >看不清换一张?</span>
        </td>
    </tr>
    <tr>
        <td align="right">验证码:</td>
        <td><input id="inputStr"></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <img onclick="click1()" src="btn_reg.gif">
        </td>
    </tr>
</table>

<script>

    var listurl = ["1111.png","1234.png","2222.png","3333.png","4567.png"]
    var listNum = ['1111','1234','2222','3333','4567']
    //可以存对象
    // var listObj = [
    //     {
    //         url: '1111.png',
    //         code: 1111
    //     },
    //     {
    //     }
    // ]

    var midTag = -1 // 记录前一次的验证码索引

    function changeImg() {
        var img1 = document.getElementById("img1")

        var bool = true
        //新验证码索引与前一次验证码索引值相同，则一直循环，直到值不同为止
        while(bool){
            var tag = Math.floor(Math.random()*listurl.length)
            if(tag == midTag){
                //新验证码索引与前一次验证码索引值相同
            }else{
                //索引值不同
                bool = false
                midTag = tag
            }
        }

        img1.src = listurl[midTag]

    }

    function click1() {

        var inputStr = document.getElementById("inputStr")
        if(midTag == -1){
            if(inputStr.value == "bnksu"){
                alert("验证码正确")
            }else{
                alert("验证码错误")
            }
            // return
        }
        var str = listNum[midTag]
        if(inputStr.value == str){
            alert("验证码正确")
        }else{
            alert("验证码错误")
        }
    }

</script>

</body>
</html>

3.实现汇率换算页面（点击互换和汇率换算）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        select, button{
            height: 30px;
        }
        input{
            height: 20px;
        }
        .div2{
            margin-bottom: 5px ;
        }

        td{
            width: 200px;
            height: 30px;
            text-align: center;
        }

        [colspan] {
            background: red;
        }
        .div1{
            width: 610px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<!--实现汇率换算页面（点击互换和汇率换算）-->

<div class="div1">

    <div class="div2">
        <select id="select1">
            <option value="1">美元</option>
            <option value="2">人民币</option>
            <option value="3">欧元</option>
            <option value="4">日元</option>
            <option value="5">韩元</option>
            <option value="6">港元</option>
        </select>

        <button onclick="change1()">互换</button>

        <select id="select2">
            <option value="1">美元</option>
            <option value="2">人民币</option>
            <option value="3">欧元</option>
            <option value="4">日元</option>
            <option value="5">韩元</option>
            <option value="6">港元</option>
        </select>

        数额:
        <input id="inputStr">

        <button onclick="change2()"> 按汇率换算</button>

    </div>
    <table border="1px">
        <tr>
            <td colspan="3">按当前汇率换算结果</td>
        </tr>
        <tr>
            <td id="td11">美元</td>
            <td>汇率</td>
            <td id="td13">人民币</td>
        </tr>
        <tr>
            <td id="td21">100</td>
            <td id="td22">7</td>
            <td id="td23">700</td>
        </tr>

    </table>
</div>

<script>
    var listRate = [1, 7,  0.9 , 100, 1000, 7]
    var listM = ['美元', '人民币', '欧元', '日元', '韩元', '港元']
    
    function change1() {
        var select1 = document.getElementById("select1")
        var select2 = document.getElementById("select2")

        //获取select1.value的值，对应为1，2，3，4，5，6，
        // 对应listRate和listM数组的下标 - 1
        var mid = select1.value
        select1.value = select2.value
        select2.value = mid
    }
    
    function change2() {
        // alert("111")
        var inputStr = document.getElementById("inputStr").value
        var select1 = document.getElementById("select1")
        var select2 = document.getElementById("select2")

        //select2.value - 1 是因为select2的value的下标是从1开始的。
        var rate = listRate[select2.value -1] / listRate[select1.value -1]
        var money =  inputStr*rate

        document.getElementById("td11").innerText=listM[select1.value-1]
        document.getElementById("td13").innerText=listM[select2.value-1]

        document.getElementById("td21").innerText = inputStr
        document.getElementById("td22").innerText = rate
        document.getElementById("td23").innerText = money

    }

</script>
</body>
</html>

标签：返回,10,console,log,DOM,day04,var,JS,节点
来源： https://www.cnblogs.com/dust2017/p/16096794.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9