js基本內(nèi)容之引用、變量、打印、交互、定時器、demo操作實例

更新時間：2025年08月04日 09:14:13 作者：好好研究

在JavaScript中變量用于存儲數(shù)據(jù),并可以在程序執(zhí)行過程中動態(tài)更改,變量可以存儲各種類型的數(shù)據(jù),如數(shù)字、字符串、對象、函數(shù)等,這篇文章主要介紹了js基本內(nèi)容之引用、變量、打印、交互、定時器、demo操作的相關(guān)資料,需要的朋友可以參考下

javascript是弱類型語言。

一、js的引用

注意：兩種方式不能同時使用。

內(nèi)嵌式

在html文件中的head標(biāo)簽中直接寫js內(nèi)容
使用script標(biāo)簽

基本格式

<head>
  <!-- 內(nèi)嵌式 -->
  <script>
    <!-- 在此處寫js內(nèi)容 -->
  </script>
</head>

外引

同樣使用script標(biāo)簽
在js文件中寫，在head和body中均可引用地址，由于執(zhí)行順序的原因，在不同的地方，執(zhí)行結(jié)果不同
defer：延遲加載，屬性值是true和false，只能使用在外引中

基本格式

<head>
  <!-- 外因 -->
  <script src=""></script>
</head>

二、變量

1. 基本類型：五種

數(shù)字
字符串
布爾類型
undefined未下定義的
null

數(shù)字

整數(shù)
小數(shù)

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

字符串

英文狀態(tài)下的單引號''，表示的是字符
英文狀態(tài)下的雙引號""，表示的是字符串
在js中這兩個不需要區(qū)分，只要前后匹配就行

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. 復(fù)合類型：三種

數(shù)組
對象
函數(shù)
使用的是json格式

（1）數(shù)組

使用的依然是中括號[]，使用逗號隔開
里面各種數(shù)據(jù)都可以放，不會區(qū)分
獲取數(shù)組的長度使用.length屬性
通過下標(biāo)訪問
js是通過下標(biāo)解析
js中沒有二維數(shù)組的概念

基本格式

var arr = []

示例：

var arr = [50.8,70,"demo",true,undefined,null,[80,64.6,"aaa"]]
console.log(arr)
console.log(arr[6])// 通過下標(biāo)訪問
console.log(arr[6][2])//訪問下標(biāo)為6數(shù)組中的下標(biāo)為2的內(nèi)容
console.log(arr.length)//獲取數(shù)組的長度

（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數(shù)組屬性值的長度
console.log(obj.play[2]) // 通過play數(shù)組下標(biāo)獲取

（3）函數(shù)

使用function關(guān)鍵字
分為命名函數(shù)和匿名函數(shù)，推薦使用匿名函數(shù)
將命名函數(shù)賦給新的變量，函數(shù)名就失效了，后續(xù)調(diào)用起效的是變量名
函數(shù)還可以塞到數(shù)組和對象中

基本格式

// 命名函數(shù)
function 函數(shù)名(參數(shù)列表) {
}
函數(shù)名(參數(shù)值) // 函數(shù)調(diào)用
// 匿名函數(shù)
var 變量名 = function(參數(shù)列表){
}
變量名(參數(shù)值) // 函數(shù)調(diào)用

示例：

// 命名函數(shù)
function change(a, b) {
  console.log(a)
  console.log(b)
  console.log("change函數(shù)執(zhí)行啦")
}
console.log(change)
change(10, ["demo", 8])

// 匿名函數(shù)
var eat = function(a, b) {
  console.log(a)
  console.log(b)
  console.log("匿名函數(shù)調(diào)用啦")
}
console.log(eat)
eat()

塞到數(shù)組中：

在數(shù)組中調(diào)用需要通過數(shù)組的小標(biāo)

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("數(shù)組函數(shù)執(zhí)行啦")
}]
arr[7]() // 通過數(shù)組的小標(biāo)調(diào)用

塞到對象中：

在對象中調(diào)用通過變量名.屬性

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("對象函數(shù)執(zhí)行啦")
  }
}
obj.jump() // 通過屬性調(diào)用函數(shù)

三、打印

console：提供訪問瀏覽器調(diào)試控制臺的方法

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

console.dir(document) // 可以在控制臺查看文檔中存在的屬性

四、交互

窗口

window指整個瀏覽器的窗口

alert()：彈窗
document：整個文檔

交互

onclick：點擊
ondblclick：雙擊
onmouseenter：鼠標(biāo)放上去
onmouseleave：鼠標(biāo)移開
Math.random()：隨機生成0到1之間的數(shù)據(jù)
Math.ceil()：向上取整

交互方法

定時器（自動）：
函數(shù)調(diào)用（手動）：

以下示例均為函數(shù)調(diào)用方法。
示例1：

document.onclick = function() {
  alert(1) // 綁定事件：點擊之后，出現(xiàn)彈窗
}

示例2：

document.onclick = function() {
  document.body.style.background = "red" // 綁定事件：點擊背景變紅
}

示例3：

document.onclick = function() {
  console.log(Math.random()) // 綁定事件：每點擊一次，生成0到1之間的數(shù)據(jù)，并向上取整
}

示例4：

document.onclick = function() {
      console.log(Math.ceil(Math.random()*255)) // 綁定事件：每點擊一次，生成數(shù)據(jù)，并向上取整
}

示例5：

document.onclick = function() {
  console.log(Math.ceil(Math.random()*255)) // 綁定事件：每點擊一次，生成數(shù)據(jù)，并向上取整
  document.body.style.background = 'rgb('+ Math.ceil(Math.random()*255)+' , '+ Math.ceil(Math.random()*255)+','+ Math.ceil(Math.random()*255)+')' // 綁定事件：每點擊一次，背景顏色隨機生成
}

五、定時器

周期定時器
延遲定時器
可使用在輪播圖上

周期定時器

使用setInterval()
clearInterval()：停止定時器，括號里放要停止的定時器標(biāo)志變量
timer：定時器標(biāo)志變量，可設(shè)置多個
設(shè)定好時間間隔，每隔多久重復(fù)一次

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("定時器標(biāo)志變量" + timer1)
console.log("定時器標(biāo)志變量" + timer2)
console.log("定時器標(biāo)志變量" + timer3)
clearInterval(timer3)

從圖中可以看出timer3還沒開始九停止了，可以加判斷。

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

延遲定時器

使用setTimeout()，只執(zhí)行一遍
設(shè)置時間，時間過后執(zhí)行
clearInterval()：停止定時器，延遲定時器本身只執(zhí)行一次，所有使不使用沒有像

  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()：根據(jù)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()：根據(jù)class值查找，找符合條件的所有對象組成數(shù)組
this：事件觸發(fā)者

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()：根據(jù)元素名字查找，找符合條件的所有對象組成數(shù)組

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

querySelector()：根據(jù)選擇器查找，找到符合條件的第一個對象
querySelectorAll()：根據(jù)選擇器查找，找符合條件的所有對象組成數(shù)組

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

2. 通過關(guān)系查找

<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：找父級文本和標(biāo)簽
parentElement：只找父級標(biāo)簽

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

  // 找父級
  console.log(obj.parentNode)
  console.log(obj.parentElement)
}

childNodes：找孩子文本和標(biāo)簽
children：只找孩子的標(biāo)簽

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

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

firstElementChild：找第一個孩子的文本和標(biāo)簽
firstChild：只找第一個字的文本

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

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

lastElementChild：找最后一個孩子的文本和標(biāo)簽
lastChild：只找最后一個孩子的文本

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

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

previousElementSibling：找上一個文本和標(biāo)簽
previousSibling：只找上一個文本

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

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

nextElementSibling：找下一個元素的文本和標(biāo)簽
nextSibling：只找下一個文本

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

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

3. 修改獲取

改內(nèi)容、改樣式、改屬性，前兩者的本質(zhì)也就是修改屬性。

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

（1）改內(nèi)容

它的三個屬性

只適用于展示的標(biāo)簽
- innerText
- innerHTML
適用于信息收集的標(biāo)簽
- value

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

  // 只適用于展示的標(biāo)簽
  obj.innerText = "新內(nèi)容"
  obj.innerHTML = "<h1>新內(nèi)容</h1>"
}

（2）改樣式

全部都找style

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

  // 改樣式
  obj.style.background = 'pink'
  obj.style.color = 'green'
}

（3）改屬性

對于原生屬性：使用對象.屬性的方式獲取，**對象.屬性=**去修改
對于自定義屬性：
- 獲?。和ㄟ^調(diào)用方法getAttribute()來獲取
- 設(shè)置：通過調(diào)用方法setAttribute()來設(shè)置
  - 前面為屬性，逗號隔開，在加一個空格，后面是屬性值

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

4. 添加

第一步：
- 創(chuàng)建元素
  - createElement()創(chuàng)建一個元素
- 復(fù)制元素
  - cloneNode()：復(fù)制元素
    - false：淺復(fù)制，只復(fù)制外殼
    - true：深復(fù)制，連帶里面的元素都復(fù)制

第二步：添加元素

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

 window.onload = function() {
   // 添加
   // 創(chuàng)建元素
   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)

調(diào)用insertBefore()方法，在標(biāo)簽前添加

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

replaceChild()：某個子元素替換掉

window.onload = function() {
// 添加
 // 創(chuàng)建元素
 var newNode = document.createElement("h3")
 newNode.innerText = "新添加的元素"
 newNode.style.background = 'pink'
 newNode.style.font = '15px'
 console.log(newNode)

 // 添加元素
 // 替換子標(biāo)簽
 var container = document.getElementById("container")// 先找到容器
 var p = document.querySelector("p")
 container.replaceChild(newNode,p)
}

5. 刪除

只能由父級元素去調(diào)用刪除方法
removeChild()：刪除方法

window.onload = function() {
  // 刪除
  // var container = document.getElementById("container")//通過選擇器找父級
  var p = document.querySelector("p")
  // container.removeChild(p)

  // 通過關(guān)系找父級元素
  p.parentElement.removeChild(p)
}

總結(jié)

到此這篇關(guān)于js基本內(nèi)容之引用、變量、打印、交互、定時器、demo操作的文章就介紹到這了,更多相關(guān)js引用、變量、打印、交互、定時器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

js基本內(nèi)容之引用、變量、打印、交互、定時器、demo操作實例

目錄

一、js的引用

內(nèi)嵌式

基本格式

外引

基本格式

二、變量

1. 基本類型：五種

數(shù)字

字符串

布爾類型

undefined未下定義的

null空

2. 復(fù)合類型：三種

（1）數(shù)組

（2）對象

（3）函數(shù)

三、打印

四、交互

窗口

交互

交互方法

五、定時器

周期定時器

延遲定時器

六、dom操作

1. 通過文檔查找

2. 通過關(guān)系查找

3. 修改 獲取

（1）改內(nèi)容

它的三個屬性

（2）改樣式

（3）改屬性

4. 添加

5. 刪除

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

js基本內(nèi)容之引用、變量、打印、交互、定時器、demo操作實例

一、js的引用

三、打印

四、交互

五、定時器

六、dom操作

3. 修改獲取