web前端js詳解第一篇
阿新 • • 發佈：2022-03-31
Js
引入方式
1.外連結
js.js裡面寫的是console.log("aaaa")
2.直接寫
他沒有覆蓋的關係，只是有個執行的順序：
在頁面中寫入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
<div>你好世界</div>
<script>
var fff = document.getElementsByTagName('div')[0];
fff.innerText = 'hello world'
</script>
</body>
</html>
效果為在頁面中把你好世界修改為了hello world
還有一種寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<script>
window.onload = function () {
var fff = document.getElementsByTagName('div')[0];
fff.innerText = 'hello world'
}
</script>
</head>
<body>
<div>你好世界</div>
</body>
</html>
1.元素
網址為js學習教程
前面四個常用
Id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
<div class="box" id="box1">你好世界</div>
<div class="box">我不好</div>
<input type="text" name="hello" placeholder="輸入值">
<script>
//id唯一
var Id = document.getElementById('box1')
console.log(Id)
</script>
</body>
</html>
console是使其顯示在控制器內
修改值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
<div class="box" id="box1">你好世界</div>
<div class="box">我不好</div>
<input type="text" name="hello" placeholder="輸入值">
<script>
//id唯一
var Id = document.getElementById('box1')
console.log(Id)
Id.innerText = 'aaaaa'
</script>
</body>
</html>
js其餘的元素獲取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
<div class="box" id="box1">你好世界</div>
<div class="box">我不好</div>
<input type="text" name="hello" placeholder="輸入值">
<script>
// //id唯一
// var Id = document.getElementById('box1');
// console.log(Id);
// Id.innerText = 'aaaaa';
//
// //標籤,標籤是有多個的，可以通過索引取值
// var Name = document.getElementsByTagName('div')[0];
// console.log(Name); //也可以通過innerText修改值
//
// //class，也是有多個的，可以通過索引取值
// var Class = document.getElementsByClassName('box');
// console.log(Class);
// //不加索引的話就都會展示出來
//
// //name,也有多個，name只有input裡面有
// var myname = document.getElementsByName("hello")[0];
// console.log(myname);
//
// //css選擇器
// //只找一條，找到就返回
// var Select = document.querySelector('.box')
// console.log(Select)
// //找多條
// var Select = document.querySelectorAll('.box')
// console.log(Select)
</script>
</body>
</html>
2.簡單事件
單擊事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var aBox = document.getElementById('box')
aBox.onclick = function () { //這個小括號是用來傳值的，大括號是函式體裡的內容
this.innerText = '我被點選了' //this指代的是aBos，指呼叫物件的本身
}
</script>
</body>
</html>
點選圖片以後會出現 “我被點選了” 字樣
雙擊事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var aBox = document.getElementById('box')
aBox.ondblclick = function () {
this.innerText = '我被雙擊了'
}
</script>
</body>
</html>
快速雙擊會出現 '我被雙擊了' 字樣
滑鼠滑入滑出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var aBox = document.getElementById('box')
aBox.onmouseenter = function () {
this.innerText = '我滑入了'
}
aBox.onmouseleave = function () {
this.innerText = '我滑出了'
}
</script>
</body>
</html>
如果只有滑入或者滑出的其中一個，則只能變一次
視窗變化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var aBox = document.getElementById('box')
window.onresize = function () {
console.log('我在變化')
}
</script>
</body>
</html>
拖動改變瀏覽器視窗，底下會顯示“我在變化”，前面的數字是變化的次數
改變下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box"></div>
<select name="" id="">
<option value="">qq</option>
<option value="">aa</option>
<option value="">zz</option>
</select>
<script>
var aBox = document.querySelector('select')
aBox.onchange = function () {
console.log('下拉框在變化')
}
</script>
</body>
</html>
選擇一次下拉框就記錄一次
3.修改樣式
改寬度，高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: deepskyblue"></div>
<script>
var a = document.getElementById('box');
a.style.width = '300px';
a.style.height = '50px'
a.style.background = 'yellow'
</script>
</body>
</html>
一次性修改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: deepskyblue"></div>
<script>
var a = document.getElementById('box');
a.style.cssText = 'width:450px; heighth:500px';
</script>
</body>
</html>
還有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: deepskyblue"></div>
<script>
var a = document.getElementById('box');
a.style['margin-left'] = '100px'
a.style.marginLeft = '100px'; //兩者效果一樣
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: deepskyblue"></div>
<script>
var a = document.getElementById('box');
var b = 'width';
var c = '500px';
a.style[b] = c;
</script>
</body>
</html>
此種方法也可以
4.操作屬性
修改屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" id = "box" target="_blank" class="wrap qqq" xy = 'qiye'>去百度</a>
<script>
var a = document.getElementById('box');
a.id = 'https://www.vip.com' ; //改什麼屬性就點上什麼屬性
//alert(a.id); //彈出一個對話方塊顯示id
alert(a.className); //彈出一個對話方塊顯示class
</script>
</body>
</html>
有一點特殊，找class的時候必須寫成className，如果有多個class可以寫在一個括號裡，xy為自定義屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 300px;
width: 300px;
background: deepskyblue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" id = "box" target="_blank" class="wrap qqq" xy = 'qiye'>去百度</a>
<script>
var a = document.getElementById('box');
a.className = 'mmm'
</script>
</body>
</html>
可以看到class已經改成mmm了，也可以改自定義屬性，用這個程式碼：
a.setAttribute ('xy','qqq')
setAttribute也可以用於增加屬性，但如果原本就有這個屬性，則會覆蓋掉，原本沒有這個屬性的話就會增加這個屬性
5.資料型別
typeof是專門檢視型別的
除了上面的那六種，還有這兩種型別