js的基本内容：引用、变量、打印、交互、定时器、demo操作

技术文档

一、js的引用

注意：两种方式不能同时使用。

内嵌式

在html文件中的head标签中直接写js内容
使用script标签

基本格式

<head>  <script> <!-- 在此处写js内容 --> </script></head>

外引

同样使用script标签
在js文件中写，在head和body中均可引用地址，由于执行顺序的原因，在不同的地方，执行结果不同
defer：延迟加载，属性值是true和false，只能使用在外引中

基本格式

<head>  <script src=\"\"></script></head>

二、变量

1. 基本类型：五种

数字
字符串
布尔类型
undefined未下定义的
null

数字

整数
小数

var a = 10var b = 10.5console.log(a)console.log(b)

js的基本内容：引用、变量、打印、交互、定时器、demo操作

字符串

英文状态下的单引号\'\'，表示的是字符
英文状态下的双引号\"\"，表示的是字符串
在js中这两个不需要区分，只要前后匹配就行

var c = \'demo\'var d = \"nihao\"console.log(c)console.log(d)

js的基本内容：引用、变量、打印、交互、定时器、demo操作

布尔类型

true
false
逻辑运算需要使用这些

var e = truevar f = falseconsole.log(e)console.log(f)

undefined未下定义的

指的是没有给声明的变量赋值

var gconsole.log(g)

js的基本内容：引用、变量、打印、交互、定时器、demo操作

null空

给声明的变量赋null

var h = nullconsole.log(h)

js的基本内容：引用、变量、打印、交互、定时器、demo操作

2. 复合类型：三种

数组
对象
函数
使用的是json格式

（1）数组

使用的依然是中括号[]，使用逗号隔开
里面各种数据都可以放，不会区分
获取数组的长度使用.length属性
通过下标访问
js是通过下标解析
js中没有二维数组的概念

基本格式

var arr = []

示例：

var arr = [50.8,70,\"demo\",true,undefined,null,[80,64.6,\"aaa\"]]console.log(arr)console.log(arr[6])// 通过下标访问console.log(arr[6][2])//访问下标为6数组中的下标为2的内容console.log(arr.length)//获取数组的长度

js的基本内容：引用、变量、打印、交互、定时器、demo操作

（2）对象

使用的花括号{}，使用逗号隔开
获取属性值，使用对象.属性

基本格式

var obj = { 属性1:属性值1, 属性2:属性值2,}

示例：

var obj = { name:\"zhangsan\", age:20, play:[\'足球\',\'乒乓球\',\'篮球\'], friend:{ name:\"lisi\", age:21 }}console.log(obj)console.log(obj.name) // 获取属性值console.log(obj.play.length) // 获取play数组属性值的长度console.log(obj.play[2]) // 通过play数组下标获取

js的基本内容：引用、变量、打印、交互、定时器、demo操作

（3）函数

使用function关键字
分为命名函数和匿名函数，推荐使用匿名函数
将命名函数赋给新的变量，函数名就失效了，后续调用起效的是变量名
函数还可以塞到数组和对象中

基本格式

// 命名函数function 函数名(参数列表) {}函数名(参数值) // 函数调用// 匿名函数var 变量名 = function(参数列表){}变量名(参数值) // 函数调用

示例：

// 命名函数function change(a, b) { console.log(a) console.log(b) console.log(\"change函数执行啦\")}console.log(change)change(10, [\"demo\", 8])// 匿名函数var eat = function(a, b) { console.log(a) console.log(b) console.log(\"匿名函数调用啦\")}console.log(eat)eat()

js的基本内容：引用、变量、打印、交互、定时器、demo操作
塞到数组中：

在数组中调用需要通过数组的小标

var arr = [50.8,70,\"demo\",true,undefined,null,[80,64.6,\"aaa\"],function change(a, b) { console.log(a) console.log(b) console.log(\"数组函数执行啦\")}]arr[7]() // 通过数组的小标调用

js的基本内容：引用、变量、打印、交互、定时器、demo操作
塞到对象中：

在对象中调用通过变量名.属性

var obj = { name:\"zhangsan\", age:20, play:[\'足球\',\'乒乓球\',\'篮球\'], friend:{ name:\"lisi\", age:21 }, jump: function change(a, b) { console.log(a) console.log(b) console.log(\"对象函数执行啦\") }}obj.jump() // 通过属性调用函数

js的基本内容：引用、变量、打印、交互、定时器、demo操作

三、打印

console：提供访问浏览器调试控制台的方法

log：打印
dir：以对象的方式打印

console.dir(document) // 可以在控制台查看文档中存在的属性

四、交互

窗口

window指整个浏览器的窗口

alert()：弹窗
document：整个文档

交互

onclick：点击
ondblclick：双击
onmouseenter：鼠标放上去
onmouseleave：鼠标移开
Math.random()：随机生成0到1之间的数据
Math.ceil()：向上取整

交互方法

定时器（自动）：
函数调用（手动）：

以下示例均为函数调用方法。
示例1：

document.onclick = function() { alert(1) // 绑定事件：点击之后，出现弹窗}

示例2：

document.onclick = function() { document.body.style.background = \"red\" // 绑定事件：点击背景变红}

示例3：

document.onclick = function() { console.log(Math.random()) // 绑定事件：每点击一次，生成0到1之间的数据，并向上取整}

示例4：

document.onclick = function() { console.log(Math.ceil(Math.random()*255)) // 绑定事件：每点击一次，生成数据，并向上取整}

示例5：

document.onclick = function() { console.log(Math.ceil(Math.random()*255)) // 绑定事件：每点击一次，生成数据，并向上取整 document.body.style.background = \'rgb(\'+ Math.ceil(Math.random()*255)+\' , \'+ Math.ceil(Math.random()*255)+\',\'+ Math.ceil(Math.random()*255)+\')\' // 绑定事件：每点击一次，背景颜色随机生成}

五、定时器

周期定时器
延迟定时器
可使用在轮播图上

周期定时器

使用setInterval()
clearInterval()：停止定时器，括号里放要停止的定时器标志变量
timer：定时器标志变量，可设置多个
设定好时间间隔，每隔多久重复一次

var i = 0var timer1 = setInterval(function() { console.log(i) i++},2000)var timer2 = setInterval(function() { console.log(\"-------------\") i++},2000)var timer3 = setInterval(function() { console.log(\"*************\") i++},2000)console.log(\"定时器标志变量\" + timer1)console.log(\"定时器标志变量\" + timer2)console.log(\"定时器标志变量\" + timer3)clearInterval(timer3)

js的基本内容：引用、变量、打印、交互、定时器、demo操作
从图中可以看出timer3还没开始九停止了，可以加判断。

var i = 0var timer = setInterval(function() { if(i>=5){ clearInterval(timer) } // i>=5之后，停止定时器 console.log(i) i++},2000)

js的基本内容：引用、变量、打印、交互、定时器、demo操作

延迟定时器

使用setTimeout()，只执行一遍
设置时间，时间过后执行
clearInterval()：停止定时器，延迟定时器本身只执行一次，所有使不使用没有像

 var timer = setTimeout(function() { console.log(\'aaa\') },2000)

js的基本内容：引用、变量、打印、交互、定时器、demo操作

六、dom操作

document：整个文档
Object：对象
model：模型
把HTML里的元素和js的对象绑定在一起，可以在js中对HTML中的元素进行操作

1. 通过文档查找

<body> <div class=\"aaa\">hello</div> <div id=\"bbb\">html</div> <p class=\"bbb\">world</p> <span class=\"aaa\">demo</span></body>

getElementById()：根据ID值查找，找到符合条件的第一个对象

window.onload = function() { var obj = document.getElementById(\"bbb\") obj.onclick = function() { obj.style.width = \'50px\' obj.style.height = \'50px\' obj.style.background = \'red\' }}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

getElementsByClassName()：根据class值查找，找符合条件的所有对象组成数组
this：事件触发者

window.onload = function() { var arr = document.getElementsByClassName(\"aaa\") for(var i=0;i<arr.length;i++){ arr[i].onclick = function() { this.style.display = \'block\' this.style.width = \'50px\' this.style.height = \'50px\' this.style.background = \'red\' } }}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

getElementsByTagName()：根据元素名字查找，找符合条件的所有对象组成数组

window.onload = function() {var arr = document.getElementsByTagName(\"div\")console.log(arr)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

querySelector()：根据选择器查找，找到符合条件的第一个对象
querySelectorAll()：根据选择器查找，找符合条件的所有对象组成数组

window.onload = function() {var obj = document.querySelector(\".aaa\")var arr = document.querySelectorAll(\".aaa\")console.log(obj)console.log(arr)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

2. 通过关系查找

<body> <ul> <li>demo1</li> <li>demo2</li> 111 <li id=\"aa\">1 <span>xxx</span>2 <p>yyy</p>3 <h5>zzz</h5>4 </li> 222 <li>demo3</li> </ul></body>

parentNode：找父级文本和标签
parentElement：只找父级标签

window.onload = function() { var obj = document.getElementById(\"aa\") // 找父级 console.log(obj.parentNode) console.log(obj.parentElement)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

childNodes：找孩子文本和标签
children：只找孩子的标签

window.onload = function() { var obj = document.getElementById(\"aa\") // 找孩子 console.log(obj.childNodes) console.log(obj.children)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

firstElementChild：找第一个孩子的文本和标签
firstChild：只找第一个字的文本

window.onload = function() { var obj = document.getElementById(\"aa\") // 第一个孩子 console.log(obj.firstElementChild) console.log(obj.firstChild)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

lastElementChild：找最后一个孩子的文本和标签
lastChild：只找最后一个孩子的文本

window.onload = function() { var obj = document.getElementById(\"aa\") // 最后一个孩子 console.log(obj.lastElementChild) console.log(obj.lastChild)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

previousElementSibling：找上一个文本和标签
previousSibling：只找上一个文本

window.onload = function() { var obj = document.getElementById(\"aa\") // 找上一个元素 console.log(obj.previousElementSibling) console.log(obj.previousSibling)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

nextElementSibling：找下一个元素的文本和标签
nextSibling：只找下一个文本

window.onload = function() { var obj = document.getElementById(\"aa\") // 找下一个元素 console.log(obj.nextElementSibling) console.log(obj.nextSibling)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

3. 修改获取

改内容、改样式、改属性，前两者的本质也就是修改属性。

<body> <div id=\"aa\" style=\"background: red;\" class=\"xx\" index=\"bb\">hello</div> <input type=\"submit\"></body>

（1）改内容

它的三个属性

只适用于展示的标签
- innerText
- innerHTML
适用于信息收集的标签
- value

window.onload = function() { var obj = document.getElementById(\"aa\") console.log(obj) // 只适用于展示的标签 obj.innerText = \"新内容\" obj.innerHTML = \"新内容
\"}

（2）改样式

全部都找style

window.onload = function() { var obj = document.getElementById(\"aa\") console.log(obj) // 改样式 obj.style.background = \'pink\' obj.style.color = \'green\'}

（3）改属性

对于原生属性：使用对象.属性的方式获取，**对象.属性=**去修改
对于自定义属性：
- 获取：通过调用方法getAttribute()来获取
- 设置：通过调用方法setAttribute()来设置
  - 前面为属性，逗号隔开，在加一个空格，后面是属性值

window.onload = function() { var obj = document.getElementById(\"aa\") console.log(obj) // 改属性 // 自定义属性 console.log(obj.getAttribute(\"index\")) obj.setAttribute(\"demo\", \'xxx\')}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

4. 添加

第一步：
- 创建元素
  - createElement()创建一个元素
- 复制元素
  - cloneNode()：复制元素
    - false：浅复制，只复制外壳
    - true：深复制，连带里面的元素都复制

第二步：添加元素

容器添加元素，调用appendChild()方法，在子元素的最后位置添加

 window.onload = function() { // 添加 // 创建元素 var newNode = document.createElement(\"h3\") newNode.innerText = \"新添加的元素\" newNode.style.background = \'pink\' newNode.style.font = \'15px\' console.log(newNode) // 添加元素 var container = document.getElementById(\"container\")// 先找到容器 container.appendChild(newNode)// 追加元素 } ``` ![子元素后添加](https://i-blog.csdnimg.cn/direct/422dc5d755b94998af8040508fa767de.png)

调用insertBefore()方法，在标签前添加

 window.onload = function() { // 添加 // 创建元素 var newNode = document.createElement(\"h3\") newNode.innerText = \"新添加的元素\" newNode.style.background = \'pink\' newNode.style.font = \'15px\' console.log(newNode) // 添加元素 // 在标签前添加 var p = document.querySelector(\"p\") // 先找到要在那个标签前添加 container.insertBefore(newNode, p) } ``` ![在某元素前添加](https://i-blog.csdnimg.cn/direct/916b71dea29145b8941a4486083d84ed.png)

replaceChild()：某个子元素替换掉

window.onload = function() {// 添加 // 创建元素 var newNode = document.createElement(\"h3\") newNode.innerText = \"新添加的元素\" newNode.style.background = \'pink\' newNode.style.font = \'15px\' console.log(newNode) // 添加元素 // 替换子标签 var container = document.getElementById(\"container\")// 先找到容器 var p = document.querySelector(\"p\") container.replaceChild(newNode,p)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

5. 删除

只能由父级元素去调用删除方法
removeChild()：删除方法

window.onload = function() { // 删除 // var container = document.getElementById(\"container\")//通过选择器找父级 var p = document.querySelector(\"p\") // container.removeChild(p) // 通过关系找父级元素 p.parentElement.removeChild(p)}

js的基本内容：引用、变量、打印、交互、定时器、demo操作

js的基本内容：引用、变量、打印、交互、定时器、demo操作

目录

一、js的引用

内嵌式

基本格式

外引

基本格式

二、变量

1. 基本类型：五种

数字

字符串

布尔类型

undefined未下定义的

null空

2. 复合类型：三种

（1）数组

（2）对象

（3）函数

三、打印

四、交互

窗口

交互

交互方法

五、定时器

周期定时器

延迟定时器

六、dom操作

1. 通过文档查找

2. 通过关系查找

3. 修改获取

（1）改内容

它的三个属性

新内容

（2）改样式

（3）改属性

4. 添加

5. 删除

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

js的基本内容：引用、变量、打印、交互、定时器、demo操作

目录

一、js的引用

内嵌式

基本格式

外引

基本格式

二、变量

1. 基本类型：五种

数字

字符串

布尔类型

undefined未下定义的

null空

2. 复合类型：三种

（1）数组

（2）对象

（3）函数

三、打印

四、交互

窗口

交互

交互方法

五、定时器

周期定时器

延迟定时器

六、dom操作

1. 通过文档查找

2. 通过关系查找

3. 修改 获取

（1）改内容

它的三个属性

新内容

（2）改样式

（3）改属性

4. 添加

5. 删除

相关问题

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

3. 修改获取