一、基本使用
- JavaScript（簡稱JS）：是一種輕量級客戶端腳本語言，通常被直接嵌入HTML 頁面，在瀏覽器上執(zhí)行。
- JavaScript作用：改變頁面中的HTML元素、屬性、樣式、事件。
1.1 內(nèi)部方式
- 內(nèi)嵌樣式，在body標(biāo)簽中使用。
1.在body標(biāo)簽中寫js腳本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js測試</title>
</head>
<body>
<script>
alert("你好，qingjun");
</script>
</body>
</html>
2.查看效果。
1.2 外部導(dǎo)入方式
- 在head標(biāo)簽中使用。
1.編寫js腳本main.js，統(tǒng)一存放在js目錄下。
alert("你好，卿君");
2.html模板引用js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js測試</title>
<script type="text/javascript" src="js/main.js"></script> ##引用js文件。
</head>
<body>
</body>
</html>
3.查看效果。
1.3 css標(biāo)簽調(diào)用js腳本（觸發(fā)事件）
- 事件：指的是當(dāng)HTML中發(fā)生某些事件時(shí)所調(diào)用的方法（處理程序）。
- 例如點(diǎn)擊按鈕，點(diǎn)擊后做相應(yīng)操作，例如彈出一句話。
1.可以使用css中的一個(gè)標(biāo)簽直接調(diào)用js腳本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js測試</title>
</head>
<body>
<button type="button" onclick="alert('歡迎來到中國')">提交</button> ## onclick標(biāo)簽直接調(diào)用js腳本。
</body>
</html>
2.查看效果。
二、Windows對象
- Window 對象表示瀏覽器中打開的窗口。
2.1 對象屬性
| window對象屬性 | 描述 |
|---|---|
| document | 每個(gè)載入瀏覽器的 HTML 文檔都會(huì)成為 Document 對象 |
| innerheight | 返回窗口的文檔顯示區(qū)的高度 |
| innerwidth | 返回窗口的文檔顯示區(qū)的寬度 |
| location Location | 對象包含有關(guān)當(dāng)前 URL 的信息 |
| Navigator Navigator | 對象包含有關(guān)瀏覽器的信息 |
| Screen Screen | 對象包含有關(guān)客戶端顯示屏幕的信息 |
| history History | 對象包含用戶（在瀏覽器窗口中）訪問過的 URL |
| window window | 包含對窗口自身的引用 |
1.基本使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<script type="text/javascript">
window.document.write("輸出內(nèi)容");
console.log(window.innerWidth,window.innerHeight,"輸出內(nèi)容"); //瀏覽器做適配時(shí)可以使用。
console.log(window.Navigator);
</script>
</body>
</html>
2.刷新按鈕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<button type="button" onclick="location.reload()">刷新當(dāng)前頁面</button>
<button type="button" onclick="location.href=location.href">重新請求當(dāng)前頁面</button>
<button type="button" onclick="location.>請求別的頁面</button>
</body>
</html>
2.2 對象方法
| window對象方法 | 描述 |
|---|---|
| alert() | 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框 |
| confirm() | 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框 |
| setInterval() | 按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式 |
| clearInterval() | 取消由 setInterval() 設(shè)置的 timeout |
| setTimeout() | 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。（類似于休眠） |
| clearTimeout() | 取消由 setTimeout() 方法設(shè)置的 timeout |
| typeof() | 查看數(shù)據(jù)類型 |
1.點(diǎn)擊一次，刷新一次當(dāng)前系統(tǒng)時(shí)間。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<button type="button" onclick="refresh()">點(diǎn)擊查看當(dāng)前時(shí)間</button>
<script type="text/javascript">
function refresh() {
date = new Date()
alert("當(dāng)前時(shí)間為："+date)
console.log(date)
}
</script>
</body>
</html>
2.點(diǎn)擊開始，時(shí)間自動(dòng)走。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<div id="demo">
<p>當(dāng)前時(shí)間</p>
</div>
<button type="button" onclick="startRefresh()">開始</button>
<button type="button" onclick="stopRefresh()">停止</button>
<script type="text/javascript">
function refresh() {
x = document.getElementById('demo');
y = x.getElementsByTagName("p");
y[0].innerHTML = new Date() // 獲取當(dāng)前時(shí)間
}
// 點(diǎn)擊開始，調(diào)用refresh()函數(shù)，1000毫秒進(jìn)行周期性計(jì)數(shù)走動(dòng)。
function startRefresh() {
interval = setInterval("refresh()", 1000);
}
// 停止
function stopRefresh() {
console.log(interval);
clearInterval(interval)
}
</script>
</body>
</html>
三、數(shù)據(jù)類型
- 在JS中，數(shù)據(jù)類型有：字符串、數(shù)組、布爾、數(shù)組、對象、Null、Undefined。
3.1 字符串處理
1.字符串處理方法。
<script type="text/javascript">
var s = "hello world";
s.length; // 字符串長度
s[4] //根據(jù)索引獲取值
s.replace('h','H'); //替換某個(gè)字符
s.split("分隔符") //分隔為數(shù)組
s.match("w") //找到返回匹配的字符，否則返回null
console.log(s.match("w")); //將內(nèi)容打印在控制臺(tái)。
console.log(s.length);
console.log(s);
console.log(s.replace('o','M'));
console.log(s.split("o"))
</script>
2.字符拼接+。
3.2 數(shù)組處理
1.數(shù)組處理，相當(dāng)于python中的列表，是一個(gè)序列的數(shù)據(jù)結(jié)構(gòu)。
###############################################################
//定義數(shù)組。
var computer = new Array(); //定義空數(shù)組。
var computer = ["主機(jī)","顯示器","鍵盤","鼠標(biāo)"] //定義有值的數(shù)組。
###############################################################
//向數(shù)組添加元素。
computer[0]="主機(jī)"; //通過索引下標(biāo)獲取數(shù)組中的有序元素。
computer[1]="顯示器";
computer[2]="鍵盤";
computer.push("網(wǎng)線"); //追加元素。
###############################################################
console.log(computer[3]); //根據(jù)下標(biāo)獲取元素并打印到控制臺(tái)。
2.查看效果。
3.3 對象處理
1.對象處理，相當(dāng)于python中的字典，是一個(gè)具有映射關(guān)系的數(shù)據(jù)結(jié)構(gòu)，用于存儲(chǔ)有一定關(guān)系的元素。字典中的key不允許重復(fù)。
格式：d = {'key1':value1, 'key2':value2, 'key3':value3}
###############################################################
var user = {
name:"卿君",
sex: "男",
age:"26"
};
console.log(user.name); //根據(jù)key查看value值，方式一。
console.log(user['age']); //根據(jù)key查看value值，方式二。
user.height = "180cm" //增加一對key-value。
user['height'] = "182cm"; //根據(jù)key修改value值。
console.log(user.height);
2.查看效果。
四、流程控制
4.1 操作符
- 操作符：一個(gè)特定的符號，用它與其他數(shù)據(jù)類型連接起來組成一個(gè)表達(dá)式。常用于條件判斷，根據(jù)表達(dá)式返回True/False采取動(dòng)作。
| 類型 | 操作符 |
|---|---|
| 比較操作符 | == 等于 != 不等于 > 大于 < 小于 >= 大于等于 <= 小于等于 |
| 算術(shù)操作符 | + 加法 - 減法 * 乘法 / 除法 % 取余 ++ 自增，自動(dòng)+1 – 自減，自動(dòng)-1 |
| 邏輯操作符 | && 與 || 或 !() 結(jié)果取反 |
| 賦值運(yùn)算符 | = 賦值 += 加法賦值 -= 減法賦值 *= 乘法賦值 /= 除法賦值 %= 取余賦值 |
4.2 if判斷語句
- if條件判斷：判定給定的條件是否滿足（True或False），根據(jù)判斷的結(jié)果決定執(zhí)行的語句。
//語法。
if (表達(dá)式) {
<代碼塊>
} else if (表達(dá)式) {
<代碼塊>
} else {
<代碼塊>
}
1.控制開關(guān)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<img id="dengpao" src="img/off.png" alt=""><br>
<button type="button" onclick="main('on')">開燈</button>
<button type="button" onclick="main('off')">關(guān)燈</button>
<script type="text/javascript">
function main(status) {
x = document.getElementById('dengpao');
console.log(x);
if (status == 'on') {
x.src = "img/on.png";
} else if (status == 'off') {
x.src = "img/off.png";
}
}
</script>
</body>
</html>
2.查看效果。
4.3 for循環(huán)語句
- for循環(huán)：一般用于遍歷數(shù)據(jù)類型的元素進(jìn)行處理，例如字符串、數(shù)組、對象。
//語法。
for (<變量> in <序列>) {
<代碼塊>
}
1.遍歷數(shù)組，通過索引獲取元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<script type="text/javascript">
var computer = ["主機(jī)","顯示器","鍵盤","鼠標(biāo)"];
for(i in computer) {
// console.log(i) //獲取元素索引。
console.log(i,computer[i]) // 使用索引獲取值
}
</script>
</body>
</html>
2.遍歷數(shù)組，通過匿名函數(shù)返回元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<script type="text/javascript">
var computer = ["主機(jī)","顯示器","鍵盤","鼠標(biāo)"];
computer.forEach(function(e) {
console.log(e)
})
</script>
</body>
</html>
3.遍歷對象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<script type="text/javascript">
var user1 = {name:"卿君",sex:"男",age:"26"};
for(let a in user1) { //方式一。
console.log(a+"："+user1[a])
}
var user2 = {name:"柏木",sex:"男",age:"28"};
Object.keys(user2).forEach(function (k) { //方式二，使用內(nèi)置對象遍歷。
console.log(k + "——" + user2[k])
})
</script>
</body>
</html>
4.4 continue與break語句
- continue 當(dāng)滿足條件時(shí)，跳出本次循環(huán)。
- break 當(dāng)滿足條件時(shí)，跳出所有循環(huán)。
- 注意：只有在循環(huán)語句中才有效。
1.示例代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<script type="text/javascript">
var computer = ["主機(jī)","顯示器","鍵盤","鼠標(biāo)"];
//不打印第三個(gè)元素
for(i in computer) {
if (i == "2") {
continue
} else {
console.log(computer[i])
}
}
//不打印第第二個(gè)以后的元素
for(i in computer) {
if (i == "2") {
break
} else {
console.log(computer[i])
}
}
</script>
</body>
</html>
2.查看效果。
4.5 函數(shù)定義與調(diào)用
- 函數(shù)：是指一段可以直接被另一段程序或代碼引用的程序或代碼。
- 在編寫代碼時(shí)，常將一些常用的功能模塊編寫成函數(shù)，放在函數(shù)庫中供公共使用，可減少重復(fù)編寫程序段和簡化代碼結(jié)構(gòu)。
//語法：
function 函數(shù)名稱(參數(shù)1, 參數(shù)2, ...) {
<代碼塊>
return <表達(dá)式>
}
1.定義函數(shù)hello，在按鈕中引用函數(shù)，點(diǎn)擊按鈕執(zhí)行hello函數(shù)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<button type="button" onclick="hello()">按鈕</button>
<script type="text/javascript">
function hello() {
alert("hello world")
}
</script>
</body>
</html>
2.傳參用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制開關(guān)</title>
</head>
<body>
<button type="button" onclick="hello('卿君','26')">按鈕</button>
<script type="text/javascript">
function hello(name,age) {
alert("你好,我是"+name+", 今年"+age+"歲。")
console.log(hello)
}
</script>
</body>
</html>
五、選擇器
查找元素方法：
- 通過id（常用）
- 通過類名
- 通過標(biāo)簽名
5.1 通過id獲取元素
1.示例代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js測試</title>
</head>
<body>
<button type="button" id="qingjun">查看內(nèi)容</button>
<script>
var x = document.getElementById("qingjun"); //獲取id為qingjun的元素
x.onclick = function () { //綁定“查看內(nèi)容”事件
alert('好好學(xué)習(xí)')
}
</script>
</body>
</html>
2.查看效果。
5.2 通過標(biāo)簽名獲取元素
1.示例代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js測試</title>
</head>
<body>
<div id="main">
<p>Hello world！1</p>
<p>Hello world！2</p>
<p>Hello world！3</p>
</div>
<script type="text/javascript">
var x = document.getElementById("main"); //document表示當(dāng)前頁面，獲取id為main的元素，返回的是一個(gè)集合。
var y = x.getElementsByTagName("p"); // 獲取集合中的p標(biāo)簽，通過下標(biāo)獲取。
document.write("div中的第二段文本是：" + y[1].innerHTML); //向當(dāng)前文檔寫入內(nèi)容
</script>
</body>
</html>
2.查看效果。
六、JS操作HTML
6.1 插入內(nèi)容
1.向id=bb的標(biāo)簽寫入內(nèi)容。
<p id="bb"></p>
<script type="text/javascript">
var x = document.getElementById('bb'); //獲取id為main的元素
x.innerHTML="Hello" //插入內(nèi)容Hello。
</script>
2.查看結(jié)果。
6.2 修改標(biāo)簽屬性
1.修改顯示圖片，修改之前。
<img src="img/3.jpg" alt="" id="aa">
2.修改之后。
<img src="img/3.jpg" alt="" id="aa">
<script type="text/javascript">
var x = document.getElementById('aa');
x.src="img/4.jpg"
</script>
6.3 改變標(biāo)簽樣式
1.修改id=bb標(biāo)簽的顏色。
<p id="bb"></p>
<script type="text/javascript">
var x = document.getElementById('bb');
x.innerHTML="Hello" //先插入內(nèi)容。
x.style.color="blue" //在修改字體顏色
</script>
2.查看結(jié)果。
6.4 獲取輸入的值
- 比如提交一個(gè)數(shù)據(jù)框里的內(nèi)容，點(diǎn)擊提交按鈕，可以獲取到剛剛輸入的值供其他功能使用。
1.獲取輸入框里的內(nèi)容。
請輸入您的姓名: <input type="text" id="cc"><br>
<button type="button" name="text" onclick="main1()">提交</button> //店家提交按鈕執(zhí)行main1函數(shù)。
<script type="text/javascript">
function main1() {
var y = document.getElementById("cc");
alert(y.value)
}
</script>
2.修改其他標(biāo)簽的內(nèi)容。
#############################################################
<p id="bb"></p>
請輸入您的姓名: <input type="text" id="cc"><br>
<button type="button" name="text" onclick="main1()">提交</button>
#############################################################
<script type="text/javascript">
var x = document.getElementById('bb'); //獲取id=bb標(biāo)簽的元素。
x.innerHTML="Hello" //向元素插入HTML內(nèi)容
function main1() {
var y = document.getElementById("cc");
var s = document.getElementById("bb");
s.innerHTML = y.value //設(shè)置s元素的內(nèi)容是id=c的input值
}
6.5 添加標(biāo)簽元素
1.向div中添加一個(gè)p標(biāo)簽，并追加標(biāo)簽內(nèi)容。
<div id="main">
<p>張三，Java開發(fā)</p>
<p>李四，大數(shù)據(jù)工程師</p>
<p>王五，k8s運(yùn)維</p>
</div>
<script type="text/javascript">
var x = document.getElementById("main"); //獲取id為main的元素
var y = x.getElementsByTagName("p"); // 返回的是一個(gè)集合，下標(biāo)獲取
var p = document.createElement("p"); //創(chuàng)建p標(biāo)簽
var t = document.createTextNode("卿君，滲透測試"); //創(chuàng)建添加的文本
p.appendChild(t); //向創(chuàng)建的p標(biāo)簽追加文本
var e = document.getElementById("main"); //獲取添加的標(biāo)簽父元素
e.appendChild(p) //向父元素添加新創(chuàng)建的p標(biāo)簽
</script>
2.查看效果。
6.6 刪除元素
1.刪除id=main標(biāo)簽的元素。文章來源：http://www.zghlxwxcb.cn/news/detail-690390.html
<div id="main">
<p>張三，Java開發(fā)</p>
<p>李四，大數(shù)據(jù)工程師</p>
<p>王五，k8s運(yùn)維</p>
</div>
<script type="text/javascript">
var x = document.getElementById("main"); //獲取id為main的元素
var y = x.getElementsByTagName("p"); // 返回的是一個(gè)集合，下標(biāo)獲取
var p = document.createElement("p"); //創(chuàng)建p標(biāo)簽
var t = document.createTextNode("卿君，滲透測試"); //創(chuàng)建添加的文本
p.appendChild(t); //向創(chuàng)建的p標(biāo)簽追加文本
var e = document.getElementById("main"); //獲取添加的標(biāo)簽父元素
e.remove() //刪除id=main標(biāo)簽的所有元素。
</script>
2.查看效果。
文章來源地址http://www.zghlxwxcb.cn/news/detail-690390.html
到了這里，關(guān)于前端基礎(chǔ)3——JavaScript基礎(chǔ)用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)5.2（HTML5、CSS3、JavaScript ）CSS基礎(chǔ)，decoration，selector，properties，Cascading——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/751717-1.png)
