首页 > 网络编程 > JavaScript > javascript技巧 > js引用、变量、打印、交互、定时器

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

2025-08-04 09:10:07 作者：好好研究

在JavaScript中变量用于存储数据,并可以在程序执行过程中动态更改,变量可以存储各种类型的数据,如数字、字符串、对象、函数等,这篇文章主要介绍了js基本内容之引用、变量、打印、交互、定时器、demo操作的相关资料,需要的朋友可以参考下

javascript是弱类型语言。

一、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 = 10
var b = 10.5
console.log(a)
console.log(b)

字符串

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

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

布尔类型

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

var e = true
var f = false
console.log(e)
console.log(f)

undefined未下定义的

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

var g
console.log(g)

null空

给声明的变量赋null

var h = null
console.log(h)

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)//获取数组的长度

（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数组下标获取

（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()

塞到数组中：

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

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]() // 通过数组的小标调用

塞到对象中：

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

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() // 通过属性调用函数

三、打印

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 = 0
var 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)

从图中可以看出timer3还没开始九停止了，可以加判断。

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

延迟定时器

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

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

六、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'
  }
}

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'
    }
  }
}

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

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

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

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

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)
}

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

window.onload = function() {
  var obj = document.getElementById("aa")

  // 找孩子
  console.log(obj.childNodes)
  console.log(obj.children)
}

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

window.onload = function() {
  var obj = document.getElementById("aa")

  // 第一个孩子
  console.log(obj.firstElementChild)
  console.log(obj.firstChild)
}

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

window.onload = function() {
  var obj = document.getElementById("aa")

  // 最后一个孩子
  console.log(obj.lastElementChild)
  console.log(obj.lastChild)
}

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

window.onload = function() {
  var obj = document.getElementById("aa")

  // 找上一个元素
  console.log(obj.previousElementSibling)
  console.log(obj.previousSibling)
}

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

window.onload = function() {
  var obj = document.getElementById("aa")

  // 找下一个元素
  console.log(obj.nextElementSibling)
  console.log(obj.nextSibling)
}

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 = "<h1>新内容</h1>"
}

（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')
}

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)
}

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引用、变量、打印、交互、定时器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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

一、js的引用

内嵌式

基本格式

外引

基本格式

二、变量

1. 基本类型：五种

数字

字符串

布尔类型

undefined未下定义的

null空

2. 复合类型：三种

（1）数组

（2）对象

（3）函数

三、打印

四、交互

窗口

交互

交互方法

五、定时器

周期定时器

延迟定时器

六、dom操作

1. 通过文档查找

2. 通过关系查找

3. 修改 获取

（1）改内容

它的三个属性

（2）改样式

（3）改属性

4. 添加

5. 删除

总结

您可能感兴趣的文章:

3. 修改获取