【JavaScript】从入门到精通（完整详解，附有代码+案例）

蔚一

已于 2024-10-10 12:00:45 修改

阅读量291

点赞数 7

文章标签： javascript 开发语言前端 html5 css3

于 2024-10-10 11:54:17 首次发布

本文链接：https://blog.csdn.net/weixin_54555405/article/details/142817885

版权

文章目录

一.初始js
二.数组
三.操作BOM
四.操作DOM

一.初始js

1.1 输入、输出

输入：alert()、document.wirte()

输出：prompt()

1.2 变量

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    // 这样 age 的值就成了 18
    document.write(age)
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>
</body>
</html>

以下是使用 let 时的注意事项：

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

变量名命名规则

关于变量的名称（标识符）有一系列的规则需要遵守：

只能是字母、数字、下划线、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字或保留字）不允许使用
尽量保证变量具有一定的语义，见字知义

1.3 常量

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

const PI = 3.14

注意：常量不允许重新赋值,声明的时候必须赋值（初始化）

1.4 数据类型

在这里插入图片描述

undefined
null
number
boolean
string

typeof运算符返回值如下

undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或falsenumber：整数或浮点数
object：javascript中的对象、数组和null

除了0 所有的数字都为真

除了 ’ ’ 所有的字符串都为真 true

typeof 关键字检测数据类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 9 是什么类型数据，结果为 number
    document.write(typeof 9)
    
      // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>
</html>

1.5 运算符

算术运算符

运算符	作用
+	求和
-	求差
*	求积
/	求商
%	取模（取余数），开发中经常用于作为某个数字是否被整除

赋值运算符

运算符	作用
+=	加法赋值
-+	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

自增/自减运算符

符号	作用	说明
++	自增	变量自身的值加1，例如: x++
–	自减	变量自身的值减1，例如: x–

比较运算符

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
===	左右两边是否`类型`和`值`都相等（重点）
==	左右两边`值`是否相等
!=	左右值不相等
!==	左右两边是否不全等

<script>
        console.log(2 == 2) // true
        // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
        console.log(2 == '2') // true

        // === 全等 判断 值 和 数据类型都一样才行
        console.log(undefined === null) //false
				console.log(undefined == null) //ture
        console.log(undefined - 2) //NaN

        console.log(2 === '2') //false

				//false ;NaN 不等于任何人，包括他自己
        console.log(NaN === NaN)

        console.log(2 !== '2') // true
        console.log(2 != '2') // false
    </script>

逻辑运算符

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边有一个假的结果为假	一假则假
\|\|	逻辑或	或者	符号两边有一个真的结果为真	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真

 <script>
        // 逻辑中断
        document.write(11 || 22) //11
        document.write(11 && 22) //22
        document.write(undefined || 0) //0
        document.write(undefined || false) //false
        document.write("|||||")
        document.write(Boolean('')) //fales
        document.write(Boolean(0)) //fales
        document.write(Boolean(undefined)) //fales
        document.write(Boolean(NaN)) //fales
        document.write("|||||")
        document.write(Boolean(null)) //fales
        document.write(5 < 3 && 22) //fales
        document.write("|||||")
        document.write(undefined && 22) //undefined
        document.write(null && 22) //null
    </script>

1.6 分支语句

if 分支语句

if(条件表达式) {
  // 满足条件要执行的语句
}

if双分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else {
  // 不满足条件要执行的语句
}

 <script>
    // 1. 用户输入
    let uname = prompt('请输入用户名:')
    let pwd = prompt('请输入密码:')
    // 2. 判断输出
    if (uname === 'kwh' && pwd === '123456') {
      alert('恭喜登录成功')
    } else {
      alert('用户名或者密码错误')
    }
  </script>

if 多分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else if(条件表达式){
  // 满足条件要执行的语句
}else if(条件表达式){
  // 满足条件要执行的语句
}
...
else{
   // 不满足条件要执行的语句
}

三元运算符（三元表达式）

条件 ? 表达式1 ： 表达式2

 <script>
        //数字小于10，补零
        let num = +prompt('请输入数字：')
        num = num < 10 ? '0' + num : num;
        document.write(num)
    </script>

switch语句

// switch分支语句
// 1. 语法
// switch (表达式) {
//   case 值1:
//     代码1
//     break

//   case 值2:
//     代码2
//     break
//   ...
//   default:
//     代码n
// }

<script>
  switch (2) {
    case 1:
    console.log('您选择的是1')
    break  // 退出switch
    case 2:
    console.log('您选择的是2')
    break  // 退出switch
    case 3:
    console.log('您选择的是3')
    break  // 退出switch
    default:
    console.log('没有符合条件的')
  }
</script>

1.7 循环语句

while循环

while (条件表达式) {
   // 循环体    
}

// while循环: 重复执行代码

let i = 1
while (i <= 3) {
  document.write('hello js<br>')
  i++   
}

for 循环

for (初始语句;条件判断语句;条件控制语句){
    循环体语句;
}

 <script>
        // 去重，去掉0，放到新数组中
        let arr = [4, 2, 7, 0, 8, 9, 0]
        let newArr = [];
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] !== 0) {
                newArr.push(arr[i])
            }
        }
        document.write(newArr)
    </script>

循环嵌套

<script>
        // 1.for循环 打印99乘法表
        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(i + '*' + j + '=' + (i * j) + "&nbsp;&nbsp;&nbsp;&nbsp;")
            }
            document.write("<br>");
        }
    </script>

1.8 对象

1.8.1 对象创建和调用

<script>
				
				// 对象的创建
				function User(name ,age){
					this.name = name ;
					this.age = age;
					this.show = function(msg){
						document.write(this.name+"---"+msg)
					}
				}
				
				let user1 = new User("张三",18)
				let user2 = new User("赵六",19);
				user1.name = "王五"
				user1.show("你好")
  
     // 通过对象描述一个人的数据信息
    // person 是一个对象，它包含了一个属性 name
   let person = {
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    };
  
    // 访问人的名字
    console.log(person.name) // 结果为 小明
    // 访问人性别
    console.log(person.gender) // 结果为 男
    // 访问人的身高
    console.log(person['stature']) // 结果为 185
    // 或者
    console.log(person.stature) // 结果同为 185
				
				
				// 自定义函数
			 let = function sum(a ,b){
					return a+b;
				}
			
</script>

<script>
    // 声明一个空的对象（没有任何属性）
	let user = {}
    // 动态追加属性
    user.name = '小明'
    user['age'] = 18
    
    // 动态添加与直接定义是一样的，只是语法上更灵活
  </script>

1.8.2 方法及调用

<script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
      singing: function () {
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
    
    // 调用对象中 singing 方法
    person.singing()
    // 调用对象中的 run 方法
    person.run()

  </script>

 <script>
    // 声明一个空的对象（没有任何属性，也没有任何方法）
	let user = {}
    // 动态追加属性
    user.name = '小明'
    user.['age'] = 18
    
    // 动态添加方法
    user.move = function () {
      console.log('移动一点距离...')
    }
    
  </script>

1.8.3 null

null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object。

1.9 函数(方法)

函数定义及调用

<script>
    // 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
    function sayHi() {
      console.log('嗨~')
    }
    // 函数调用，这些函数体内的代码逻辑会被执行
    // 函数名()
        
    sayHi()
    // 可以重复被调用，多少次都可以
    sayHi()
</script>

形参/实参

<script>

    function sayHi(name) {
      // 参数 name 可以被理解成是一个变量
      console.log(name)
      console.log('嗨~' + name)
    }

    // 调用 sayHi 函数，括号中多了 '小明'
    // 这时相当于为参数 name 赋值了
    sayHi('小明')// 结果为 小明

    // 再次调用 sayHi 函数，括号中多了 '小红'
    // 这时相当于为参数 name 赋值了
    sayHi('小红') // 结果为 小红
  </script>

 <script>
    // 声明（定义）一个计算任意两数字和的函数
    // 形参 x 和 y 分别表示任意两个数字，它们是两个变量
    function count(x, y) {
      x = x||0;
      y = y||0;
      console.log(x + y);
    }
    // 调用函数，传入两个具体的数字做为实参
    // 此时 10 赋值给了形参 x
    // 此时 5  赋值给了形参 y
    count(10, 5); // 结果为 15
</script>

返回值

<script>
    // 定义求和函数
    function count(a, b) {
      let s = a + b
      // s 即为 a + b 的结果
      // 通过 return 将 s 传递到外部
      return s
    }

    // 调用函数，如果一个函数有返回值
    // 那么可将这个返回值赋值给外部的任意变量
    let total = count(5, 12)
  </script>

总结：

在函数体中使用return 关键字能将内部的执行结果交给函数外部使用
函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写
return会立即结束当前函数
函数可以没有return，这种情况默认返回值为 undefined

匿名函数

匿名函数：没有名字的函数,无法直接使用。

// 声明
let fn = function() { 
   console.log('函数表达式')
}
// 调用
fn()

立即执行函数

(function(){ xxx  })();
(function(){xxxx}());

定时函数

//多少秒后执行一次
setTimeout("调用的函数",等待的毫秒数)

//每隔多少秒执行一次
setInterval("调用的函数",间隔的毫秒数)

清楚计数器

clearTimeout(setTimeOut()返回的ID值)

clearInterval(setInterval()返回的ID值)

计时器

<body>
		
		<div id="myclock"></div>
		<button onclick="stop()">暂停</button>
		<button onclick="start()">启动</button>
		
	</body>
	<script>
		// getData()
		function getData(){
		var today = new Date();
		var hh = today.getHours(); 
		var mm = today.getMinutes();
		var ss = today.getSeconds();
		document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
		}
		
		
		// function getShow(){
		// 	setInterval("getData()",3000)
		// }
		
		// 每隔一秒执行一次
		var timeS = setInterval("getData()",100)
		
		// 暂停时间
		function stop(){
			 // 清空计时器
			 clearInterval(timeS)
		}
		
		// 启动时间
		function start(){
			setInterval("getData()",100)
		}
		
    //一秒后执行
		// setTimeout("getData()",3000)
		
		
	</script>

二.数组

2.1 数组定义、赋值、访问

<script>
        // 定义数组 并给数组传值
        let list = ['HTML', 'CSS', 'JavaScript']
        let arr1 = new Array("a", "b", "c");
            // 访问数组
        document.write(list[0])
        document.write(list[1])
        document.write(list[4])

        
        for (let i = 0; i < list.length; i++) {
            document.write(list[i])
        }
    </script>

2.2 数组操作

push ,向数组末尾添加一个或更多元素，并返回新的长度
unshit 动态向数组头部添加一个单元
pop 删除最后一个单元
shift 删除第一个单元
splice 动态删除任意单元
sort():对数组排序
join( )把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']

  // 1. push 动态向数组的尾部添加一个单元
  arr.push('Nodejs')
  console.log(arr)
  arr.push('Vue')

  // 2. unshit 动态向数组头部添加一个单元
  arr.unshift('VS Code')
  console.log(arr)

  // 3. splice 动态删除任意单元
  arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
  console.log(arr)

  // 4. pop 删除最后一个单元
  arr.pop()
  console.log(arr)

  // 5. shift 删除第一个单元
  arr.shift()
  console.log(arr)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
 console.log(energy)//Banana,Orange,Apple,Mango
</script>

2.3 事件

名称	说明
onload	一个页面或一幅图像完成加载
onlick	鼠标单击某个对象
onmouseover	鼠标指导移到某元素上
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

2.3.1 onload

onload在网页或者某个元素加载完成后触发。可以用来执行特定的函数或者操作，例如在页面加载完毕后执行一些初始化操作、加载数据、显示某些元素等。

在网页中，可以将onload事件添加到window对象上，当整个页面加载完成后触发。在某个元素上，可以将onload事件添加到该元素上，当该元素加载完成后触发。

onload事件只在对象完全加载所有内容（包括图像、CSS文件、JavaScript文件等）之后才会触发。

<script>
			window.onload = function() { 
				alert("窗口加载完成！")
			}
</script>

2.3.2 onlick

onclick事件在用户点击（或触摸）一个HTML元素时触发。它适用于几乎所有的HTML元素，包括按钮、链接、图像等。

<body>
		
	<button id="myElement">按钮1</button>
	<button onclick="getData()">按钮2</button>
		
		<script>
		
			
			var element = document.getElementById("myElement");
			element.onclick = function(event) {
			  // 当元素被点击时执行的代码
			  alert("单击了一下")
			}
			
			function getData(){
				alert("6")
			}
		
		</script>
	</body>

2.3.3 onmouseover

onmouseover事件在鼠标光标进入（悬停在）一个元素上时触发。它适用于几乎所有的HTML元素，包括按钮、链接、图像等。

<body>
		
		<button id="myElement">按钮1</button>
		<button id="myElement2" onclick="getData()">按钮2</button>
		
		<script>
			// window.onload = function() { 
			// 	alert("窗口加载完成！")
			// }
			
			// var element = document.getElementById("myElement");
			// element.onclick = function(event) {
			//   // 当元素被点击时执行的代码
			//   alert("单击了一下")
			// }
			
			function getData(){
				alert("6")
			}
			
			
			var element = document.getElementById("myElement");
			element.onmouseover = function(event) {
			  // 当鼠标光标进入时执行的代码
			    alert("鼠标经过")
			}
			
			
		</script>
	</body>

2.3.4 onkeydown

onkeydown事件在用户按下键盘上的任意键时触发。它适用于所有类型的HTML元素

<body>
		
		<button id="myElement">按钮1</button>
		<button id="myElement2" onclick="getData()">按钮2</button>
		
		<script>
			// window.onload = function() { 
			// 	alert("窗口加载完成！")
			// }
			
			// var element = document.getElementById("myElement");
			// element.onclick = function(event) {
			//   // 当元素被点击时执行的代码
			//   alert("单击了一下")
			// }
			
			function getData(){
				alert("6")
			}
			
			
			// var element = document.getElementById("myElement");
			// element.onmouseover = function(event) {
			//   // 当鼠标光标进入时执行的代码
			//     alert("鼠标经过")
			// }
			
			
			var element = document.getElementById("myElement");
			element.onkeydown = function(event) {
			  // 在按键按下时执行的代码
			  alert("按下键盘")
			}
			
			
		</script>
	</body>

2.3.5 onchange

在表单元素的值发生变化并失去焦点时触发。可以用来执行特定的函数或操作，例如在输入框内容变化时验证输入、触发表单提交等。

onchange事件适用于大多数表单元素，如input、select和textarea等。

<body>
		
		账号：<input id="myInput" type="text" >
	
		<script>
		
			
			var inputElement = document.getElementById("myInput");
			    inputElement.onchange = function() {
			      alert('内容改变事件')
			    }
			
			
		</script>

三.操作BOM

3.1 概述

BOM：浏览器对象模型（Browser Object Model）

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

在这里插入图片描述

BOM可实现功能：

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

3.2 window对象

3.2.1 window对象常用属性

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

语法：

window.属性名= “属性值”

案例：

<script>
			// 【表示跳转到百度首页】
			window.location="http://www.baidu.com" ;
</script>

3.2.2 常用方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

confirm( )：将弹出一个确认对话框

confirm("对话框中显示的纯文本")

<script>
			   var flag=confirm("确认要删除此条信息吗？");
				if(flag==true){
					alert("删除成功！");
				}else{
					alert("你取消了删除");
				}
			// 【表示跳转到百度首页】
			// window.location="http://www.baidu.com" ;
		</script>

confirm( )与alert ( )、 prompt( )区别

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变。

prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

open()方法

window.open(“弹出窗口的url”,“窗口名称”,"窗口特征”)

属性名称	说明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes \| no \|1 \| 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes \| no \|1 \| 0	是否显示滚动条。黙认是yes
location=yes \| no \|1 \| 0	是否显示地址地段。黙认是yes
status=yes \| no \|1 \| 0	是否添加状态栏。黙认是yes
menubar=yes \| no \|1 \| 0	是否显示菜单栏。黙认是yes
resizable=yes \| no \|1 \| 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes \| no \|1 \| 0	是否显示标题栏。黙认是yes
fullscreen=yes \| no \|1 \| 0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

close( )：网页的关闭

<script>
			window.open("http://www.baidu.com","baidu","")
			window. close( );
			// 【表示跳转到百度首页】
			// window.location="http://www.baidu.com" ;
		</script>

3.3 history对象

名称	说明
back( )	加载 history 对象列表中的前一个URL
forward( )	加载 history 对象列表中的下一个URL
go( )	加载 history 对象列表中的某个具体URL

                等价
history.back()------->history.go(-1)    浏览器中的“后退”

                   等价
history.forward()------->history.go(1) 浏览器中的“前进”

3.4 location对象

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法：

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

3.5 Document对象

常用属性：

名称	说明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

Document对象的常用方法（参考4.2）

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

3.6 JavaScript内置对象

**1. Array：**用于在单独的变量名中存储一系列的值

**2. String：**用于支持对字符串的处理

**3. Math：**用于执行常用的数学任务，它包含了若干个数字常量和函数

3.7 Date对象的方法

var 日期对象=new Date(参数)

参数格式：MM DD,YYYY,hh:mm:ss

方法	说明
getDate()	返回Date对象的一个月中的每一天，其值介于1～31之间
getDay()	返回Date对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回Date对象的分钟数，其值介于0～59之间
getSeconds()	返回Date对象的秒数，其值介于059之间
getMonth()	返回Date对象的月份，其值介于0～11之间
getFullYear()	返回Date对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

<script>

			var today=new Date( );   //返回当前日期和时间
			
			var tdate=new Date("september 1,2013,14:58:12");
			alert(today)
			alert(tdate)
</script>

<body>
		<div id="myclock"></div>

	<script>
		function disptime(){
			// 获得当前时间
			var today = new Date();  
			var hh = today.getHours(); 
			var mm = today.getMinutes();
			var ss = today.getSeconds();
			document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
			alert(today)
			}
    //调用函数
		disptime()
		
	
	</script>
	</body>

3.8 Math对象

常用方法

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25Math.floor(-25.5);*返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26Math.round(-25.5;返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

<script>
      //如何实现返回的整数范围为2~99？
			// Math.random()得到的数是0-1之间的小数
			var iNum=Math.floor(Math.random()*98+2);
			alert(iNum)
</script>

// 圆周率
console.log(Math.PI);

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

// 舍弃小数部分，整数部分加1
Math.ceil(3.4)

// 找出最大值
Math.max(10, 21, 7, 24, 13)

// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方

// 求某数的平方根
Math.sqrt(16)

3.8 定时函数

setTimeout(“调用的函数”,等待的毫秒数)

<body>
		
		<div id="myclock"></div>
		<input type="button" value="显示提示消息" οnclick="disptime()"/>
		<button onclick="disptime()">显示提示消息</button>
		
		
		<script>
			
			function disptime(){
				// 获得当前时间
				var today = new Date();  
				var hh = today.getHours(); 
				var mm = today.getMinutes();
				var ss = today.getSeconds();
				document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
				}
			

			
		</script>

四.操作DOM

4.1 概述

DOM：Document Object Model（文档对象模型）

在这里插入图片描述

4.2 getElement系列

使用getElement系列方法访问指定节点

getElementById() 通过id访问节点
getElementsByName() 通过类名访问节点
getElementsByTagName() 通过标签访问节点

<body>
		<ul>
        <li id="li_one">1</li>
        <li name="li_two">2</li>
        <li name="li_two">3</li>
		</ul>
		<button onclick="show()"">按钮1</button>
		<button onclick="show_one()"">按钮2</button>
		<button onclick="show_two()"">按钮3</button>
</body>

<script>
		function show(){
			var arr = document.getElementsByTagName("li");
			// alert(arr)
			for (var i = 0; i < arr.length; i++) {
				alert(arr[i].innerHTML)
			}
		}
		
		function show_one(){
			var li_one = document.getElementById("li_one")
			alert(li_one.innerHTML)
		}
		
		function show_two(){
			var li_two = document.getElementsByName("li_two")
			for (var i = 0; i < li_two.length; i++) {
				alert(li_two[i].innerHTML)
				
			}
		}
		
</script>

4.3 根据层次关系访问节点

4.2.1 节点属性

parentNode :返回节点的父节点
childNodes :返回子节点集合，childNodes[i]
firstChild :返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild :返回节点的最后一个子节点
nextSibling :下一个节点
previousSibling :上一个节点

4.2.2 element属性

firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点

<body>
		<ul id="nodeList">
		    <li>aaa</li>
		    <li>bbb</li>
		    <li>ccc</li>
		</ul>

		<script>
		    var nodes = document.getElementById("nodeList");
		    var node1 = nodes.firstElementChild;
			  var node2 = nodes.nextElementSibling;
			  var node3 = nodes.lastElementChild;
		    // console.log(nodes);
		    // console.log(node);
			  document.write(nodes.innerHTML)
			  document.write(node1.innerHTML)
			 //document.write(node2.innerHTML)
			 document.write(node3.innerHTML)
		</script>

</body>

4.4 节点信息

nodeName：节点名称
nodeValue：节点值
nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

<body>
		<!-- <input type="text" value="请输入" id="a"> -->
		<div id="a"> 这是div</div>
		
		
		<script>
		    var name = document.getElementById("a").nodeName;
		    var value = document.getElementById("a").nodeValue;
		    var type = document.getElementById("a").nodeType;
		    console.log(name);//DIV
		    console.log(value);// null
		    console.log(type);// 1 
		</script>
	</body>

4.3 操作节点的属性

getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)

<body>
		<input value="OK">
		
		<p id="demo">点击下面的按钮来设置按钮的类型属性。</p>
		<button onclick="clickFucnction()">点我</button>
		
		
		<script>
			function clickFucnction(){
				document.getElementsByTagName("input")[0].
        setAttribute("type","button"); 
			};
		</script>
		
	</body>

4.4 创建和插入节点

createElement( tagName) 创建一个标签名为tagName的新元素节点
A.appendChild( B) 把B节点追加至A节点的末尾
insertBefore( A,B ) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点

<body>
		
		<p id="demo">单击按钮创建有文本的按钮</p>
		<button onclick="clickFucnction()">点我</button>

		<script>
			
				function clickFucnction(){
					var btn=document.createElement("button");
					var t=document.createTextNode("新加button");
					btn.appendChild(t);
					document.body.appendChild(btn);
				};
		
		</script>

4.5 删除和替换节点

removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点

<body>
		<!-- 单击按钮将coffee换成water -->
		<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
		<p id="demo">单击按钮替换列表中的第一项。</p>
		<button onclick="clickFucnction()">点我</button>
		<button onclick="deletShow()">点我</button>
		

		<script>
		function clickFucnction(){
			var textnode=document.createTextNode("Water");
			var item=document.getElementById("myList")
                        .childNodes[0];
			item.replaceChild(textnode,item.childNodes[0]);
		}
		
		function deletShow(){
			var node=document.getElementById("myList");
			var item=document.getElementById("myList")
                        .childNodes[0];
			item.remove(item);
		}
		</script> 
	</body>

4.6 style属性

HTML元素.style.样式属性＝"值"

<body>
  
		<div id="titles" onclick="show()">divdiv</div>
		
	<script>
		 function show(){
			 document.getElementById("titles")
         .style.color="#ff0000";
       
			 document.getElementById("titles")
         .style.fontSize="30px ";
		 }
		 
	</script>


</body>

4.7 className属性

语法：HTML元素.className=“样式名称”

<body>
  
		<div id="div_one" onclick="show()">divdiv</div>
		
		<script>
			function show(){
				document.getElementById("cart")
                    .className="cartOver";
			} 
		</script>
	
</body>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.fcolor{
			color: red;
		}
	</style>
	<body>
		<ul id="xyj">
         <li id="zbj" onclick="delEl(this)" class="fcolor">
             猪八戒
         </li>
		</ul>
		<button onclick="addEl(this)">添加元素</button>
		
		
	</body>
	<script>
		
		function delEl(e){
			// 删除节点
			e.parentNode.removeChild(e)
		}
		
		function addEl(e){
			var firstE = document.getElementById("xyj")
      .firstElementChild;
			// 克隆节点
			var li = firstE.cloneNode(true);
			
      //给克隆的节点设置值
			li.innerText = "孙悟空";
			
			// 将元素追加到末尾
			document.getElementById("xyj").appendChild(li)
	
		}
		
		
	</script>
</html>

单击div切换颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.div1{
			width: 100px;
			height: 100px;
			background-color: aquamarine;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-color: pink;
		}
	</style>
	<body>
      <div id="box" class="div1" onclick="showColor(this)">
         这是div
      </div>
	</body>
	<script>
		function showColor(e){
			var box = document.getElementById("box");
			// var boxClass = box.getAttribute("class");
			
			// alert(boxClass)// div1
			
			// box.setAttribute("class","div2")
			
			// 点击切换颜色
			// if(box.getAttribute("class") == "div1"){
			// 	box.setAttribute("class","div2")
			// }else{
			// 	box.setAttribute("class","div1")
			// }
			
			 // var a = e.className;
			 // alert(a)
			
			if(e.className == "div1"){
				e.className = "div2"
			}else{
				e.className = "div1"
			}
			
			
			
		}
	</script>
</html>

获取表单值和初始化表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			#box{
				float: left;
			}
			
			#formText{
				width: 300px;
				height: 300px;
				border: 3px black solid;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			<form action="6666" method="get" onsubmit="return showTable()">
				
				用户名:<input type="text" placeholder="请输入用户名" id="userName"/>
				<span></span>
				<br />
				密码：<input type="password" placeholder="请输入密码" name="" id="userPwd">
				<span></span>
				<br />
				
				性别：
				<input name="userSex" value="1" type="radio" checked="checked"/>男
				<input name="userSex" value="2" type="radio" />女
				<br />
				
				爱好：
				<input type="checkbox" checked name="loves" value="1001"/>打篮球
				<input type="checkbox" name="loves" value="1002"/>踢足球
				<input type="checkbox" name="loves" value="1003"/>打羽毛球
				<br />
				
				省：
				<select id="userCity">
					<option value="0">请选择</option>
					<option value="110">河南省</option>
					<option value="111">A省</option>
					<option value="112">B省</option>
				</select>
				<br />
				
				文本：
				<textarea name="" id="userRes" cols="6" rows="3">
          666
        </textarea>
				
				
				<br/>
				<input type="submit"  value="立即注册" name="" id="">
			</form>
			<button onclick="assignment()">初始化表单</button>
		</div>
		
		<div id="formText">
			<!-- 用来装表单初始化的值 -->
		</div>
		
		
	</body>
	<script>
		
		// 初始表单
		function assignment(){
			
			// 初始化用户名
			var userName = document.getElementById("userName").value="张三"
			
			// 初始化密码
			var userPwd = document.getElementById("userPwd").value="123456"
			
			// 初始化单选按钮
			var sexs = document.getElementsByName("userSex");
			// var sex = 1;
			for(var i = 0 ; i<sexs.length;i++){
				if(sexs[i].value == "2"){
					sexs[i].checked = true
				}
			}
			
			// 初始化复选框
			var loves = document.getElementsByName("loves")
			// var lovesArr = new Array();
			for (var i = 0; i < loves.length; i++) {
				if(loves[i].value == "1002"){
					// lovesArr.push(loves[i].value)
					loves[i].checked = true;
				}
			}
			
			// 初始化下拉框
			document.getElementById("userCity").value = "111"
			
			// 文本域初始化
			document.getElementById("userRes").value = "888"
			
		}
		
		
		// 获取表单value
		function showTable(){
			
			// 获取装表单的容器
			var formText = document.getElementById("formText");
			
			
			// 文本域
			var userRes = document.getElementById("userRes").value;
			console.log(userRes);
			formText.innerHTML +="文本域:"+userRes +"<br/>"
			
			
			
			// 下拉框
			var userCity = document.getElementById("userCity")
			console.log(userCity.value);
			formText.innerHTML += "下拉框:"+userCity.value +"<br/>"
			
			
			// 复选框
			var loves = document.getElementsByName("loves")
			var lovesArr = new Array();
			for (var i = 0; i < loves.length; i++) {
				if(loves[i].checked){
					lovesArr.push(loves[i].value)
				}
			}
			console.log(lovesArr.join(","));
			// formText.innerText += lovesArr +" "
			formText.innerHTML +="复选框:"+ lovesArr +"<br/>"
			
			
			
			// 单选按钮
			var sexs = document.getElementsByName("userSex");
			var sex = 1;
			for(var i = 0 ; i<sexs.length;i++){
				// alert(sexs[i])
				if(sexs[i].checked){
					sex =  sexs[i].value;
				}
			}
			console.log(sex);
			// formText.innerText += sex +" "
			formText.innerHTML += "性别:"+ sex +"<br/>"
			
			
			
			// // 验证用户名
			var userName = document.getElementById("userName");
			formText.innerHTML += "用户:"+ userName.value+"<br/>"
			// if(userName.value.length != 6 ){
			// 	userName.nextElementSibling.innerText = "用户名错误!";
			// 	userName.nextElementSibling.style.color="red"
			// 	userName.nextElementSibling.style.fontSize="14px"
			// 	userName.focus()
			// 	return false
			// }else{
			// 	userName.nextElementSibling.innerText = "正确!";
			// 	userName.nextElementSibling.style.color="green"
			// }
			
			// // 验证密码
			var userPwd = document.getElementById("userPwd");
			formText.innerHTML += "密码:"+ userPwd.value+"<br/>"
			// if(userPwd.value.length != 6 ){
			// 	userPwd.nextElementSibling.innerText = "密码错误!";
			// 	userPwd.nextElementSibling.style.color="red"
			// 	userPwd.nextElementSibling.style.fontSize="14px"
			// 	return false
			// }else{
			// 	userPwd.nextElementSibling.innerText = "密码正确!";
			// 	userPwd.nextElementSibling.style.color="green"
			// }
			
			
			// return true;
			return false;
			
		}
	</script>
</html>