JavaScript入門學（Web APIs）

1.變量聲明

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

2 DOM介紹

2.1 什么是DOM

在這里插入圖片描述

2.2 DOM樹

在這里插入圖片描述

2.3 DOM對象（重要）

在這里插入圖片描述
在這里插入圖片描述

3.DOM（文檔對象模型）-獲取元素

在這里插入圖片描述

3.1 獲取匹配的第一個元素

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>獲取DOM對象</title><style>.box {width: 200px;height: 200px;}</style>
</head>
<body>
<div class="box">123</div>
<p id="nav">abc</p>
<ul><li>1</li><li>2</li><li>3</li>
</ul>
<script>//1.獲取匹配的第一個類選擇器const box = document.querySelector(`div`)  //標簽名const box1 = document.querySelector(`.box`)  //類選擇器console.log(box)console.log(box1)//2.獲取匹配的第一個id選擇器const nav=document.querySelector(`#nav`)console.log(nav)//3.獲取匹配的第一個li選擇器const li=document.querySelector(`ul li:first-child`)console.log(li)
</script>
</body>
</html>

3.2 獲取匹配的多個元素

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

3.3 其他獲取DOM元素的方法

在這里插入圖片描述

4.操作元素內容

在這里插入圖片描述

4.1 對象.innerText屬性

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>操作元素內容（對象.innerText屬性）</title>
</head>
<body>
<div class="box">文檔內容</div>
<script>//1.獲取元素const box=document.querySelector(`.box`)// console.log(box)//2.修改文字內容  對象.innerText 屬性console.log(box.innerText)  //獲取文字內容box.innerText=`div盒子`    //修改文字內容，不解析標簽
</script>
</body>
</html>

4.2 對象.innerHTML屬性(常用)

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>操作元素內容（對象.innerHTML屬性）</title>
</head>
<body>
<div class="nav">文檔文字內容</div>
<script>const nav=document.querySelector(`.nav`)  //獲取對象console.log(nav.innerHTML)  //獲取文檔內容nav.innerHTML=`修改文檔內容`   //修改文檔內容
</script>
</body>
</html>

在這里插入圖片描述

5.修改元素常見的屬性

5.1 修改圖片元素常見屬性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>修改元素常見的屬性</title>
</head>
<body>
<img src="../static/images/1.webp" alt="">
<script>//1.獲取圖片元素const img = document.querySelector(`img`)//2.修改圖片對象的屬性 ，對象.屬性=值img.src = "../static/images/2.webp"img.title="劉德華"  //鼠標懸浮
</script>
</body>
</html>

隨機圖片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>頁面刷新，圖片隨機更換</title>
</head>
<body>
<img src="../static/images/1.webp" alt="">
<script>//取得N~M的隨機整數function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N}//1.獲取對象const img = document.querySelector(`img`)//2.得到隨機序號const seq=getRandom(1,6)//3.修改對象屬性img.src = `../static/images/${seq}.webp`img.title="劉德華"
</script>
</body>
</html>

5.2 修改樣式元素屬性(style)

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>修改樣式元素屬性</title><style>.box{width: 200px;height: 200px;background-color: hotpink;}</style>
</head>
<body>
<div class="box"></div>
<script>//1.獲取元素const box=document.querySelector(`.box`)//2.修改樣式屬性   對象.style.樣式屬性=`值`，記得單位，之所以帶著style，是因為該代碼中的樣式在style元素中box.style.width=`300px`//多組單詞的采用小駝峰命名法box.style.backgroundColor=`blue`   //background-color需要使用小駝峰命名法box.style.border=`2px solid lightpink`box.style.borderTop=`2px solid red`   //上邊框樣式
</script>
</body>
</html>

隨機背景圖片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>頁面刷新，頁面隨機更換背景圖片</title><style>body {background: url("../static/images/desktop_1.jpg") no-repeat top center/cover;}</style>
</head>
<body>
<div class="box"></div>
<script>//隨機生成N~M的整數function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N}//1.獲取對象,省略//2.獲取隨機整數const seq = getRandom(1, 10)//3.修改背景顏色document.body.style.backgroundImage = `url("../static/images/desktop_${seq}.jpg")`
</script>
</body>
</html>

5.3 修改樣式元素屬性(類名-className)

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>通過類名修改樣式</title><style>div {width: 200px;height: 200px;background-color: pink;}.nav {color: purple;}.box {width: 300px;height: 300px;background-color: skyblue;margin: 100px auto;padding: 10px;border: 1px solid #000;}</style>
</head>
<body>
<div class="nav"></div>
<script>//1.獲取元素const div = document.querySelector(`div`)//2.添加類名   class是個關鍵字，所以我們要使用classNamediv.className = `nav box`  //注意：不用`.box`而是`box`，有多種類名的情況
</script>
</body>
</html>

5.4 修改樣式元素屬性（classList）（重點）

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>通過classList修改樣式</title><style>.box{width: 200px;height: 200px;background-color: skyblue;}.active{width: 300px;height: 300px;background-color: purple;}</style>
</head>
<body>
<div class="box active">文字</div>
<script>//通過classList來追加樣式//1.獲取對象const box=document.querySelector(`.box`)//2.修改樣式//2.1 修改樣式-追加類   add(``)類名不加點，并且是字符串// box.classList.add(`active`)//2.2 修改樣式-刪除類// box.classList.remove(`box`)//2.3 修改樣式-切換類  有-刪除，無-添加box.classList.toggle(`active`)
</script>
</body>
</html>

5.5 操作表單元素屬性

在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>修改表單屬性</title>
</head>
<body>
<!--文本框-->
<!--<input type="text" value="計算機">  &lt;!&ndash;value文本框的默認值&ndash;&gt;-->
<hr>
<!--復選框-->
<input type="checkbox" name="" id="">
<!--當屬性和值一樣僅寫一個即可-->
<!--<button disabled="disabled">點擊</button>-->
<button disabled>點擊</button>
<script>//   文本框//1.獲取對象// const uname = document.querySelector(`input`)//2.操作對象屬性  獲取表單的值// console.log(uname.innerHTML)   //innerHTML獲取不到表單內容// console.log(uname.value)//3.設置表單的值// uname.value=`計算機專業`    //修改文本框中的默認值// uname.type=`password`//    復選框//1.獲取對象const checkbox = document.querySelector(`input`)console.log(checkbox.checked)  //false//2.操作對象屬性checkbox.checked=true    //加引號時，有隱式轉換//按鈕隱藏//1.獲取對象const button=document.querySelector(`button`)console.log(button.disabled)  //默認false，不禁用
</script>
</body>
</html>

5.6 自定義屬性

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>自定義屬性</title>
</head>
<body>
<!--自定義屬性：data-屬性名：屬性名前綴必須加上，而屬性名可以自定義命名-->
<div data-id="1" data-seq="自定義屬性">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div><script>//1.獲取對象const div = document.querySelector(`div`)//2.操作對象屬性console.log(div.dataset.id)   //data-id屬性的值console.log(div.dataset.seq)   //data-seq屬性的值
</script>
</body>
</html>

6.定時器-間歇函數

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>定時器-間歇函數</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head>
<body>
<div class="slider"><div class="slider-wrapper"><img src="../static/images/slider01.jpg" alt=""/></div><div class="slider-footer"><p>對人類來說會不會太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div>
</div><script>//setInterval(函數,間歇時間)// setInterval(function(){console.log(`1秒執行一次`)},1000)/*function fn() {console.log(`1秒執行一次`)}let n = setInterval(fn, 3000)console.log(n)// setInterval(fn,1000)   //注意：此處的函數名僅僅時函數名，而不加()// setInterval(`fn`,1000)   //注意：此處的函數名可以使用，但極為少見let m = setInterval(function () {console.log(11)}, 2000)console.log(m)clearInterval(m)   */  //關閉定時器，關閉變量名為m帶的定時器// 1. 初始數據const sliderData = [{ url: '../static/images/slider01.jpg', title: '對人類來說會不會太超前了？', color: 'rgb(100, 67, 68)' },{ url: '../static/images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)' },{ url: '../static/images/slider03.jpg', title: '真正的jo廚出現了！', color: 'rgb(36, 31, 33)' },{ url: '../static/images/slider04.jpg', title: '李玉剛：讓世界通過B站看到東方大國文化', color: 'rgb(139, 98, 66)' },{ url: '../static/images/slider05.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: '../static/images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: '../static/images/slider07.jpg', title: '一站式解決你的電腦配置問題！！！', color: 'rgb(53, 29, 25)' },{ url: '../static/images/slider08.jpg', title: '誰不想和小貓咪貼貼呢！', color: 'rgb(99, 72, 114)' },]//1.獲取元素const img = document.querySelector(`.slider-wrapper img`)const p = document.querySelector(`.slider-footer p`)let i = 0//2.開啟定時器setInterval(function () {i++//無縫銜接位置if(i>=sliderData.length){i=0}//更換圖片路徑img.src = sliderData[i].url//把字寫到p里面p.innerHTML = sliderData[i].title//小圓點//1.先刪除之前的activedocument.querySelector(`.slider-indicator .active`).classList.remove(`active`)//只讓當前li，添加activedocument.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add(`active`)}, 1000)
</script>
</body>
</html>

7.事件監聽（綁定）

7.1 事件監聽

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>監聽事件-關閉廣告</title><style>.box {position: relative;width: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1{position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head>
<body>
<div class="box">心飛揚，透心涼<div class="box1">X</div>
</div>
<script>//1.事件源const box1=document.querySelector(`.box1`)//關閉的是大盒子const box=document.querySelector(`.box`)//2.事件類型（事件監聽）box1.addEventListener(`click`,function(){box.style.display=`none`})//3.事件處理程序
</script>
</body>
</html>

綜合練習：隨機點名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>隨機點名案例</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}</style>
</head>
<body>
<h2>隨機點名</h2>
<div class="box"><span>名字是：</span><div class="qs">這里顯示姓名</div>
</div>
<div class="btns"><button class="start">開始</button><button class="end">結束</button>
</div><script>// 數據數組const arr = ['甄嬛', '沈眉莊', '安陵容', '烏拉那拉氏', '瑾汐',`流朱`]// 定時器的全局變量let timerId = 0// 隨機號要全局變量let random = 0// 業務1.開始按鈕模塊const qs = document.querySelector('.qs')// 1.1 獲取開始按鈕對象const start = document.querySelector('.start')// 1.2 添加點擊事件start.addEventListener('click', function () {timerId = setInterval(function () {// 隨機數random = parseInt(Math.random() * arr.length)// console.log(arr[random])qs.innerHTML = arr[random]}, 35)// 如果數組里面只有一個值了，還需要抽取嗎？  不需要  讓兩個按鈕禁用就可以if (arr.length === 1) {// start.disabled = true// end.disabled = truestart.disabled = end.disabled = true}})// 2. 關閉按鈕模塊const end = document.querySelector('.end')end.addEventListener('click', function () {clearInterval(timerId)// 結束了，可以刪除掉當前抽取的那個數組元素arr.splice(random, 1)console.log(arr)})
</script>
</body>
</html>

7.2 事件監聽版本

在這里插入圖片描述
在這里插入圖片描述

7.3 事件類型

在這里插入圖片描述

7.3.1 鼠標事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件類型</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body>
<div></div>
<script>const div = document.querySelector(`div`)//鼠標經過div.addEventListener(`mouseenter`,function (){// alert(`鼠標經過`)console.log(`鼠標經過`)})//鼠標離開div.addEventListener(`mouseleave`,function (){// alert(`鼠標離開`)console.log(`鼠標離開`)})
</script>
</body>
</html>
綜合練習：鼠標事件-輪播圖
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件類型-輪播圖點擊切換</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head>
<body>
<div class="slider"><div class="slider-wrapper"><img src="../static/images/slider01.jpg" alt=""/></div><div class="slider-footer"><p>對人類來說會不會太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div>
</div>
<script>// 1. 初始數據const data = [{url: '../static/images/slider01.jpg', title: '對人類來說會不會太超前了？', color: 'rgb(100, 67, 68)'},{url: '../static/images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)'},{url: '../static/images/slider03.jpg', title: '真正的jo廚出現了！', color: 'rgb(36, 31, 33)'},{url: '../static/images/slider04.jpg', title: '李玉剛：讓世界通過B站看到東方大國文化', color: 'rgb(139, 98, 66)'},{url: '../static/images/slider05.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)'},{url: '../static/images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)'},{url: '../static/images/slider07.jpg', title: '一站式解決你的電腦配置問題！！！', color: 'rgb(53, 29, 25)'},{url: '../static/images/slider08.jpg', title: '誰不想和小貓咪貼貼呢！', color: 'rgb(99, 72, 114)'},]// 獲取元素const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')// 1. 右按鈕業務// 1.1 獲取右側按鈕const next = document.querySelector('.next')let i = 0  // 信號量 控制播放圖片張數// 1.2 注冊點擊事件next.addEventListener('click', function () {// console.log(11)i++// 1.6判斷條件  如果大于8 就復原為 0// if (i >= 8) {//   i = 0// }i = i >= data.length ? 0 : i// 1.3 得到對應的對象// console.log(data[i])// 調用函數toggle()})// 2. 左側按鈕業務// 2.1 獲取左側按鈕const prev = document.querySelector('.prev')// 1.2 注冊點擊事件prev.addEventListener('click', function () {i--// 判斷條件  如果小于0  則爬到最后一張圖片索引號是 7// if (i < 0) {//   i = 7// }i = i < 0 ? data.length - 1 : i// 1.3 得到對應的對象// console.log(data[i])// 調用函數toggle()})// 聲明一個渲染的函數作為復用function toggle() {// 1.4 渲染對應的數據img.src = data[i].urlp.innerHTML = data[i].titlefooter.style.backgroundColor = data[i].color// 1.5 更換小圓點    先移除原來的類名， 當前li再添加 這個 類名document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}// 3. 自動播放模塊let timerId = setInterval(function () {// 利用js自動調用點擊事件  click()  一定加小括號調用函數next.click()}, 1000)// 4. 鼠標經過大盒子，停止定時器const slider = document.querySelector('.slider')// 注冊事件slider.addEventListener('mouseenter', function () {// 停止定時器clearInterval(timerId)})// 5. 鼠標離開大盒子，開啟定時器// 注冊事件slider.addEventListener('mouseleave', function () {// 停止定時器if (timerId) clearInterval(timerId)// 開啟定時器timerId = setInterval(function () {// 利用js自動調用點擊事件  click()  一定加小括號調用函數next.click()}, 1000)})
</script>
</body>
</html>

7.3.2 焦點事件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件類型-焦點事件</title>
</head>
<body>
<input type="text">
<script>const input=document.querySelector(`input`)input.addEventListener(`focus`,function (){console.log(`有焦點觸發`)})input.addEventListener(`blur`,function (){console.log(`失去焦點觸發`)})
</script>
</body>
</html>

7.3.3 鍵盤事件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件類型-鍵盤事件</title>
</head>
<body>
<input type="text">
<script>const input=document.querySelector(`input`)input.addEventListener(`keydown`,function (){console.log(`鍵盤按下`)})input.addEventListener(`keyup`,function (){console.log(`鍵盤彈起`)})
</script>
</body>
</html>

7.3.4 文本事件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件類型-文本事件</title>
</head>
<body>
<input type="text">
<script>const input=document.querySelector(`input`)input.addEventListener(`input`,function(){console.log(input.value)})
</script>
</body>
</html>

綜合練習：評論回車發布

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>評論回車發布</title><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(../static/images_webApis/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head>
<body>
<div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="發一條友善的評論" rows="2" maxlength="200"></textarea><button>發布</button>
</div>
<div class="wrapper"><span class="total">0/200字</span>
</div>
<div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">清風徐來</p><p class="text">大家都辛苦啦，感謝各位大大的努力，能圓滿完成真是太好了[笑哭][支持]</p><p class="time">2022-10-10 20:29:21</p></div></div>
</div>
<script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')// 1. 當我們文本域獲得了焦點，就讓 total 顯示出來tx.addEventListener('focus', function () {total.style.opacity = 1})// 2. 當我們文本域失去了焦點，就讓 total 隱藏出來tx.addEventListener('blur', function () {total.style.opacity = 0})// 3. 檢測用戶輸入tx.addEventListener('input', function () {// console.log(tx.value.length)  得到輸入的長度total.innerHTML = `${tx.value.length}/200字`})// const str = 'andy'// console.log(str.length)
</script>
</body>
</html>

7.4 事件對象

7.4.1 獲取事件對象

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件對象-獲取事件對象</title>
</head>
<body>
<button>點擊</button>
<script>const btn = document.querySelector(`button`)//function(e){}:e/ev/event為事件對象btn.addEventListener(`click`, function (ev) {console.log(ev)})
</script>
</body>
</html>

7.4.2 事件對象常用屬性

對象屬性詳細內容見于：mdn官網
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件對象-事件對象常用的屬性</title>
</head>
<body>
<input type="text">
<script>const input=document.querySelector(`input`)//實現僅點擊回車鍵才可以進行觸發input.addEventListener(`keyup`,function(ev){// console.log(ev)//獲取具體點擊的鍵值// console.log(ev.key)//實現僅點擊回車鍵，進行發布新聞或評論if(ev.key===`Enter`){console.log(`點擊回車鍵（Enter）發布按鈕`)}})
</script>
</body>
</html>

綜合練習：點擊回車發布評論

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件對象-點擊回車發布評論</title><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(../static/images_webApis/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head>
<body>
<div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="發一條友善的評論" rows="2" maxlength="200"></textarea><button>發布</button>
</div>
<div class="wrapper"><span class="total">0/200字</span>
</div>
<div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">星夢清河</p><p class="text">大家都辛苦啦，感謝各位大大的努力，能圓滿完成真是太好了[笑哭][支持]</p><p class="time">2022-10-10 20:29:21</p></div></div>
</div><script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')const item = document.querySelector('.item')const text = document.querySelector('.text')const time = document.querySelector(`.time`)// 1. 當我們文本域獲得了焦點，就讓 total 顯示出來tx.addEventListener('focus', function () {total.style.opacity = 1})// 2. 當我們文本域失去了焦點，就讓 total 隱藏出來tx.addEventListener('blur', function () {total.style.opacity = 0})// 3. 檢測用戶輸入tx.addEventListener('input', function () {// console.log(tx.value.length)  得到輸入的長度total.innerHTML = `${tx.value.length}/200字`})// 4. 按下回車發布評論tx.addEventListener('keyup', function (e) {// 只有按下的是回車鍵，才會觸發// console.log(e.key)if (e.key === 'Enter') {// 如果用戶輸入的不為空就顯示和打印if (tx.value.trim()) {// console.log(11)item.style.display = 'block'// console.log(tx.value)  // 用戶輸入的內容text.innerHTML = tx.valueconst date = new Date()const y = date.toLocaleDateString()  //年/月/日const hours = date.getHours()  //時const minutes = date.getMinutes()  //分const seconds = date.getSeconds()  //秒const time1 = y + " " + hours + ":" + minutes + ":" + secondstime.innerHTML = time1}// 等我們按下回車，結束，清空文本域tx.value = ''// 按下回車之后，就要把 字符統計 復原total.innerHTML = '0/200字'}})
</script>
</body>
</html>

7.5 環境對象

在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>環境對象</title>
</head>
<body>
<button>點擊</button>
<script>//每個函數中都有this,函數對象//普通函數中的this，指的是window/*function fn(){console.log(this)}window.fn()  //調用函數fn()fn()  //調用函數fn()*///1.獲取事件const btn=document.querySelector(`button`)//2.綁定事件btn.addEventListener(`click`,function fn(){console.log(this)// btn.style.color=`red`this.style.color=`red`  //this表示該對象})
</script>
</body>
</html>

7.6 回調函數

在這里插入圖片描述
在這里插入圖片描述

綜合練習：Tab切換

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>Tab欄切換</title><style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}</style>
</head>
<body>
<div class="tab"><div class="tab-nav"><h3>每日特價</h3><ul><li><a class="active" href="javascript:;">精選</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百貨</a></li><li><a href="javascript:;">個護</a></li><li><a href="javascript:;">預告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="../static/images_webApis/tab00.png" alt="" /></div><div class="item"><img src="../static/images_webApis/tab01.png" alt="" /></div><div class="item"><img src="../static/images_webApis/tab02.png" alt="" /></div><div class="item"><img src="../static/images_webApis/tab03.png" alt="" /></div><div class="item"><img src="../static/images_webApis/tab04.png" alt="" /></div></div>
</div>
<script>// 1. a 模塊制作 要給 5個鏈接綁定鼠標經過事件// 1.1 獲取 a 元素const as = document.querySelectorAll('.tab-nav a')// console.log(as)for (let i = 0; i < as.length; i++) {// console.log(as[i])// 要給 5個鏈接綁定鼠標經過事件as[i].addEventListener('mouseenter', function () {// console.log('鼠標經過')// 排他思想// 干掉別人 移除類activedocument.querySelector('.tab-nav .active').classList.remove('active')// 我登基 我添加類 active  this 當前的那個 athis.classList.add('active')// 下面5個大盒子 一一對應  .item// 干掉別人document.querySelector('.tab-content .active').classList.remove('active')// 對應序號的那個 item 顯示 添加 active 類document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')})}
</script>
</body>
</html>

綜合練習：表單全選反選案例

在這里插入圖片描述
在這里插入圖片描述

8.事件流

8.1 事件流和兩個階段說明

在這里插入圖片描述

8.2 事件捕獲

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件流-事件捕獲</title><style>.father {width: 150px;height: 150px;background-color: #0099cc;}.son {width: 100px;height: 100px;background-color: #404060;}</style>
</head>
<body>
<div class="father"><div class="son"></div>
</div>
<script>const fa=document.querySelector(`.father`)const son=document.querySelector(`.son`)//省---市---縣  （大--->小）  捕獲//縣---市---省  （小--->大）  冒泡//以上轉換成標簽嵌套//以下是同類型事件，均為clickdocument.addEventListener(`click`,function fn(){alert("我是爺爺")},true)fa.addEventListener(`click`,function fn(){alert("我是兒子"),true})son.addEventListener(`click`,function fn(){alert("我是孫子"),true})//爺爺---兒子---孫子
</script>
</body>
</html>

8.3 事件冒泡

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件流-事件冒泡</title><style>.father {width: 150px;height: 150px;background-color: #0099cc;}.son {width: 100px;height: 100px;background-color: #404060;}</style>
</head>
<body>
<div class="father"><div class="son"></div>
</div>
<script>const fa=document.querySelector(".father")const son=document.querySelector(".son")//縣---市---省  （小--->大）  冒泡//以下是同類型事件，均為clickdocument.addEventListener(`click`,function fn(){alert("我是爺爺")})fa.addEventListener(`click`,function fn(){alert("我是兒子")})son.addEventListener(`click`,function fn(){alert("我是孫子")})
</script>
</body>
</html>

8.4 阻止冒泡

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件流-阻止冒泡或捕獲</title><style>.father {width: 150px;height: 150px;background-color: #0099cc;}.son {width: 100px;height: 100px;background-color: #404060;}</style>
</head>
<body>
<div class="father"><div class="son"></div>
</div>
<script>const fa=document.querySelector(".father")const son=document.querySelector(".son")//縣---市---省  （小--->大）  冒泡//以下是同類型事件，均為clickdocument.addEventListener(`click`,function fn(){alert("我是爺爺")})fa.addEventListener(`click`,function fn(){alert("我是兒子")})son.addEventListener(`click`,function fn(e){alert("我是孫子")e.stopPropagation()  //阻止冒泡或捕獲})
</script>
</body>
</html>

8.5 解綁事件

在這里插入圖片描述

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件流-事件解綁</title>
</head>
<body>
<button>點擊</button>
<script>//獲取按鈕const btn = document.querySelector("button")//綁定事件：點擊按鈕，出現彈窗/* btn.onclick = function () {alert("綁定事件")// btn.οnclick=null  //可進行點擊一次后，進行解綁事件}//L0 事件解綁btn.onclick = null  //類型給btn.onclick重新賦值為空對象*/btn.addEventListener("click",fn)//L2 事件解綁btn.removeEventListener("click",fn)function fn(){alert("事件")}
</script>
</body>
</html>

8.6 鼠標經過事件的區別

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件流-鼠標經過流</title><style>.father{width: 300px;height: 300px;background: #999999;}.son{width: 200px;height: 200px;background-color: #e1251b;}</style>
</head>
<body>
<div class="father"><div class="son"></div>
</div>
<script>const fa=document.querySelector(".father")const son=document.querySelector(".son")fa.addEventListener("mouseenter",function fn (){alert("鼠標經過")})fa.addEventListener("mouseleave",function fn(){alert("鼠標離開")})// son.addEventListener("mouseout",function fn(){//     alert("son")// })
</script>
</body>
</html>

8.7 注冊事件的區別

在這里插入圖片描述

9.事件委托

9.1 事件委托到父級

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件委托</title>
</head>
<body>
<ul><li>第1個孩子</li><li>第2個孩子</li><li>第3個孩子</li><li>第4個孩子</li><li>第5個孩子</li><p>不變色</p>
</ul>
<script>//點擊每個li，使點擊到的li變成紅色//使用事件委托的方式，委托給了父級，事件寫到父級身上//1.獲取父級元素const ul = document.querySelector("ul")//2.綁定事件ul.addEventListener(`click`,function(e) {// this.style.color="red"// console.log(e.target)  //點擊的那個對象// console.dir(e.target)   //對象的所有屬性// e.target.style.color='red'if(e.target.tagName==="LI"){   //注意：tagName的值要大寫e.target.style.color='red'}})
</script>
</body>
</html>

9.2 阻止元素默認行為

在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>事件委托-阻止元素默認行為</title>
</head>
<body>
<form action="https://www.baidu.com/"><input type="submit" value="提交">
</form>
<a href="https://www.baidu.com"/>
<script>const form=document.querySelector("form")form.addEventListener("submit",function (e){//阻止默認事件e.preventDefault()})const a=document.querySelector("a")a.addEventListener("submit",function (e){//阻止元素默認行為e.preventDefault()})</script>
</body>
</html>

10.其他事件

10.1 頁面加載事件

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>其他事件-頁面加載事件</title><script>//等待頁面“所有資源（標簽+圖片等內容）”加載完畢，就會去執行加載元素（該window中加載的方法最后執行）/* window.addEventListener("load",function(){const btn = document.querySelector("button")btn.addEventListener("click",function(){alert("頁面加載事件")})})*//*img.addEventListener("load",function(){//等待圖片資源加載完成后，再去加載此處內容})*///等待頁面標簽加載完畢，就會去執行加載此處方法document.addEventListener("DOMContentLoaded",function (){const btn = document.querySelector("button")btn.addEventListener("click",function(){alert("頁面加載事件")})})</script>
</head>
<body>
<button>點擊</button>
</body>
</html>

10.2 元素滾動事件

在這里插入圖片描述
在這里插入圖片描述

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>其他事件-元素滾動事件</title><style>body{padding-top: 100px;height: 3000px;}div{margin: 100px;overflow: scroll;width: 210px;height: 200px;border: 1px solid #000;}</style><!--<script>//window加scrollwindow.addEventListener('load',function(){window.addEventListener('scroll',function(){console.log("頁面滾動")})})</script>-->
</head>
<body>
<div>心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！心中有信仰，腳下有力量！
</div><script>/*window.addEventListener('scroll',function(){console.log("頁面滾動")})*/const div=document.querySelector("div")div.addEventListener('scroll',function (){// console.log("頁面滾動")// scrollTop 被卷去的頭部,頁面滾動了多少像素，crollTopconsole.log(div.scrollTop);//獲取html元素寫法var n = document.documentElement.scrollTop;if(n>=100){div.style.display='block'}else{div.style.display='none'}})
</script>
</body>
</html>

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>頁面滾動事件</title><style>body{height: 3000px;}</style>
</head>
<body>
<script>document.documentElement.scrollTop=800window.addEventListener('scroll',function(){// console.log(document.documentElement.scrollTop)//必須寫到里面const n=document.documentElement.scrollTop//得到是什么數據   數字型 不帶單位console.log(n)})
</script>
</body>
</html>

10.3 頁面尺寸事件

在這里插入圖片描述
在這里插入圖片描述

11.元素尺寸與位置

在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>元素尺寸與位置</title><style>div{position: relative;width: 200px;height: 200px;background-color: #e1251b;margin: 100px;}p{width: 100px;height: 100px;background-color: pink;margin: 50px;}</style>
</head>
<body>
<div></div>
<p></p>
<script>const div=document.querySelector("div")const p=document.querySelector("p")
//  檢測盒子的位置，最近一級帶有定位的祖先元素console.log(div.offsetLeft);console.log(p.offsetLeft)
</script>
</body>
</html>

12.日期對象

在這里插入圖片描述

12.1 實例化

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>日期對象-實例化</title>
</head>
<body>
<script>//1.獲取當前時間   new是實例化象征const date=new Date()console.log(date)//2.獲取指定時間,用于倒計時const date2=new Date("2024-2-25 08:30:00")console.log(date2)
</script>
</body>
</html>

12.2 事件對象方法

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>日期對象-時間對象方法</title>
</head>
<body>
<script>const date=new Date()//1.獲取年份console.log(date.getFullYear())//2.獲取月份console.log(date.getMonth()+1)//3.獲取月份中的第幾天console.log(date.getDate()+1)//4.星期幾console.log(date.getDay())//5.時console.log(date.getHours())//6.分console.log(date.getMinutes())//7.秒console.log(date.getSeconds())
</script>
</body>
</html>

12.3 時間戳

在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>日期對象-時間戳</title>
</head>
<body>
<script>const date=new Date()//1.方法一:getTime()console.log(date.getTime());//2.方法二：new Dateconsole.log(+new Date());//獲取指定時間戳console.log("指定時間戳："+ +new Date("2024.02.28 12:20:22"))//3.方法三：date.now()console.log(Date.now());//獲取星期XXconst arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']console.log(arr[new Date().getDay()])
</script>
</body>
</html>

13.節點操作

13.1 DOM節點

在這里插入圖片描述
在這里插入圖片描述

13.2 查找節點

在這里插入圖片描述

13.2.1 父節點查找

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>節點查找-父節點查找</title>
</head>
<body>
<div class="grandfather"><div class="dad"><div class="baby"></div></div>
</div>
<script>const baby = document.querySelector(".baby")console.log(baby)  //babyconsole.log(baby.parentNode)  // dad，只能得到最后一級console.log(baby.parentNode.parentNode)  //grandfather
</script>
</body>
</html>

13.2.2 子節點查找

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>節點查找-子節點查找</title>
</head>
<body>
<ul><li><p>第一段</p></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<script>const ul=document.querySelector("ul")console.log(ul.children)
</script>
</body>
</html>

13.2.3 兄弟節點

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>節點查找-兄弟節點查找</title>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>
<script>const li2=document.querySelector("ul li:nth-child(2)")console.log(li2.previousElementSibling)  //上一個兄弟console.log(li2.nextElementSibling)  //下一個兄弟
</script>
</body>
</html>

在這里插入圖片描述

13.3 增加節點

在這里插入圖片描述

13.3.1 創建節點

在這里插入圖片描述

13.3.2 追加節點

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>增加節點-創建節點</title>
</head>
<body>
<ul><li>1</li>
</ul>
<script>//1.創建節點const div = document.createElement("div")// console.log(div)document.body.appendChild(div)const ul = document.querySelector("ul")const li = document.createElement("li")//2.追加節點1，作為最后一個子元素li.innerHTML = "小麗"// ul.appendChild(li)//3.追加節點2，作為第一個元素//insertBefore(放哪個元素，放到哪里)ul.insertBefore(li,ul.children[0])
</script>
</body>
</html>

13.4 刪除節點

14.M端事件

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>M端事件</title><style>div {width: 300px;height: 300px;background-color: pink;}</style>
</head>
<body>
<div></div>
<script>const div = document.querySelector("div")//1.觸摸div.addEventListener("touchstart", function () {console.log("觸摸")})//2.離開div.addEventListener("touchend",function(){console.log("離開")})//3.移動div.addEventListener("touchmove",function(){console.log("移動")})
</script>
</body>
</html>

15.JS插件

在這里插入圖片描述

16.Window對象

16.1 BOM（瀏覽器對象模型）

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>window-BOM</title>
</head>
<body>
<script>console.log(document===window.document)function fn(){alert("window-BOM")}window.fn()var num=10console.log(window.num)console.log(num)
</script>
</body>
</html>

16.2 定時器-延時函數

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>window-延時定時器</title>
</head>
<body>
<script>setTimeout(function(){console.log("時間到啦！！！"),100000})
</script>
</body>
</html>

16.3 JS執行機制

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>js機制</title>
</head>
<body>
<script>//輸出結果：1，2，4，3console.log(1)console.log(2)setTimeout(function fn(){console.log(3)},1000)console.log(4)
</script>
</body>
</html>

16.4 location對象

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>window-location</title><style>span {color: red;}</style>
</head>
<body>
<a href="http://www.baidu.com">百度<span>5</span>秒后打開界面</a>
<script>/*console.log(window.location)console.log(location)console.log(location.href)*///經常使用href,js的方法去跳轉頁面// location.href="http://www.baidu.com"//1.獲取元素const a = document.querySelector("a")//2.開啟定時器//3.聲明倒計時變量let num = 5let timeId = setInterval(function () {num--a.innerHTML = "百度<span>${num}</span>秒后打開界面"//如果num===0，則停止定時器，并且完成跳轉功能if (num === 0) {clearInterval(timeId)//4.跳轉location.hreflocation.href = "http://www.baidu.com"}}, 1000)</script>
</body>
</html>

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

16.5 navigator對象

在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>nabigator</title>
</head>
<body>
這是PC端的頁面
<script>//檢測userAgent（瀏覽器信息）!(function (){const userAgent=navigator.userAgent//驗證是否為Android或iPhoneconst android=userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone=userAgent.match(/(iPhone\sOS)\s([\d_]+)/)//如果是Android或iPhone,則跳轉至移動站點if(android||iphone){location.href="http://www.baidu.com"}})()
</script>
</body>
</html>

16.6 histroy對象

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>history</title>
</head>
<body>
<button>前進</button>
<button>后退</button>
<script>const back=document.querySelector("button:first-child")const forward=back.nextElementSiblingback.addEventListener("click",function(){//后退一步// history.back()history.go(-1)})forward.addEventListener("click",function(){//前進一步// history.forward()history.go(1)})
</script>
</body>
</html>

17.本地存儲

17.1 本地存儲介紹

在這里插入圖片描述

17.2 本地存儲分類

17.2.1 本地存儲分類-localStorage

關閉瀏覽器不會消失
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>瀏覽器本地存儲-localStorage</title>
</head>
<body>
<script>//本地存儲，存儲的都是字符串類型//1.要存儲一個名字uname,chenchen//localStorage.setItem('鍵','值')localStorage.setItem("uname","chenchen")//2.獲取localStorage.getItem("uname")//3.刪除本地存儲，只刪除值localStorage.removeItem("uname")//4.修改，當本地存儲，存儲的有該字段則為修改，否則為增加localStorage.setItem("uname","cc")console.log(localStorage.getItem("uname"))
</script>
</body>
</html>

17.2.2 本地存儲分類-sessionStorage

關閉瀏覽器數據就會消失
在這里插入圖片描述
在這里插入圖片描述

17.3 存儲復雜數據類型

主要有兩步：
1.把對象轉換成字符串
2.把字符串轉成對象
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>存儲復雜數據類型</title>
</head>
<body>
<script>const obj={uname: 'chenchen',age:18,gender:'女'}//存儲復雜數據類型,無法直接使用// localStorage.setItem('obj',obj)//取// console.log(localStorage.getItem('obj'))//1.復雜數據類型存儲必須轉換為JSON字符串類型存儲localStorage.setItem('obj',JSON.stringify(obj))//JSON對象，屬性和值有引號，而是引號統一是雙引號// {"uname":"chenchen","age":18,"gender":"女"}//取console.log(localStorage.getItem('obj'))//2.把JSON字符串轉換為對象console.log(JSON.parse(localStorage.getItem('obj')))
</script>
</body>
</html>

18.數組的map和join方法

在這里插入圖片描述
在這里插入圖片描述

18.1map方法

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>數組方法</title>
</head>
<body>
<script>const str=['pink','blue','green','yellow']//1.map方法const newStr=str.map(function (ele,index){//數組元素console.log(ele)//數組索引// console.log(index)return ele+"顏色"})console.log(newStr)//2.join方法
</script>
</body>
</html>

18.2 join方法

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

19.正則表達式

19.1 介紹

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

19.2 語法

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>正則表達式的使用</title>
</head>
<body>
<script>//要檢測的字符串const str="I like javascript"//1.定義正則表達式，檢測規則const reg=/java///2.檢測方法console.log(reg.test(str));  //true
</script>
</body>
</html>

在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>正則表達式的使用</title>
</head>
<body>
<script>//要檢測的字符串const str = "I like javascript"//1.定義正則表達式，檢測規則const reg = /java///2.test(),檢測方法,是否匹配// console.log(reg.test(str));  //true//3.exec()console.log(reg.exec(str)); //返回字符串
</script>
</body>
</html>

19.3 元字符

在這里插入圖片描述
正則測試工具

在這里插入圖片描述
在這里插入圖片描述

19.3.1 邊界符

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>正則表達式-元字符</title>
</head>
<body>
<script>//元字符//普通字符console.log(/java/.test("java"))   //trueconsole.log(/java/.test("javajava"))   //trueconsole.log(/java/.test("javaScript"))   //trueconsole.log("===^===")//1.邊界符,^：開始，$：結束console.log(/^java/.test("java"))   //trueconsole.log(/^java/.test("javajava"))   //trueconsole.log(/^java/.test("javascript")) //trueconsole.log("===$===")console.log(/java$/.test("java"))  //true,只有該種情況是true,否則全是falseconsole.log(/^java$/.test("javajava"))   //falseconsole.log(/^java$/.test("javaScript"))  //false
</script>
</body>
</html>

19.3.2 量詞

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>正則表達式-元字符-量詞</title>
</head>
<body>
<script>console.log(/^哈$/.test("哈"))  //trueconsole.log(/^哈*$/.test("哈哈"))  //true，重復零次或更多次console.log(/^哈+$/.test("哈哈"))  //true，重復一次或更多次console.log(/^哈?$/.test("哈哈哈"))  //false，重復零次或一次console.log(/^哈{2}$/.test("哈哈哈"))  //false，重復2次console.log(/^哈{2,}$/.test(("哈哈哈")))  //true，重復2次或更多次console.log(/^哈{2,5}$/.test("哈哈哈哈哈哈"))  //false,重復2~5次
</script>
</body>
</html>

在這里插入圖片描述

19.3.3 字符類

在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>正則表達式-元字符-字符類</title>
</head>
<body>
<script>console.log(/^[abc]$/.test("a"))  //trueconsole.log(/^[abc]$/.test("b"))  //trueconsole.log(/^[abc]$/.test("c"))  //trueconsole.log(/^[abc]$/.test("ab"))  //false，加了精確匹配，只有一個console.log(/^[abc]{2}$/.test("ab"))  //trueconsole.log(/^[a-z]$/.test("a"))  //true,加了精確，只有a-z其中的一個console.log(/^[a-z]$/.test("ab"))  //false,加了精確，只有a-z其中的一個console.log(/^[A-Z]$/.test("A"))  //true,加了精確，只有a-z其中的一個console.log(/^[a-zA-Z0-9]$/.test("A"))  //true,加了精確，只有a-z其中的一個console.log(/^[1-9][0-9]{4,}$/.test("124899"))  //true,表示一個字符串，第一位為1~9，第二位為0~9，第三位為>=4console.log(/^[1-9][0-9]{4,}$/.test("024899"))  //false,表示一個字符串，第一位為1~9，第二位為0~9，>=4位console.log(/^[1-9][0-9]{4,}$/.test("123899"))  //true,表示一個字符串，第一位為1~9，第二位為0~9，>=4位console.log(/^[1-9][0-9]{4,}$/.test("023899"))  //false,表示一個字符串，第一位為1~9，第二位為0~9，>=4位console.log(/^[1-9][0-9]{4,}$/.test("123"))  //false,表示一個字符串，第一位為1~9，第二位為0~9，>=4位
</script>
</body>
</html>

在這里插入圖片描述

19.4 修飾符

在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>正則表達式-修飾符</title>
</head>
<body>
<script>//不區分大小寫console.log(/^java$/.test("java"))  //trueconsole.log(/^java$/.test("JAVA"))  //falseconsole.log(/^java$/gi.test("JAVA"))  //true,后面的i表示，匹配的時候不區分大小寫//替換const str="javascript"console.log(str.replace(/a/i, "web"));console.log(str)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>正則表達式-敏感詞</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>發布</button>
<div></div>
<script>const tx = document.querySelector("textarea")const btn = document.querySelector("button")const div = document.querySelector("div")btn.addEventListener("click", function () {// console.log(tx.value)const c=tx.value.replace(/激情|激動/g, "**")div.innerHTML = c})
</script>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/716165.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/716165.shtml
英文地址，請注明出處：http://en.pswp.cn/news/716165.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Canvs的js庫：Fabric.js簡單強大，用于繪制各種圖形

Canvs的js庫：Fabric.js簡單強大，用于繪制各種圖形

Fabric.js是一個用于創建交互式的HTML5 Canvas應用程序的JavaScript庫。它提供了一個簡單而強大的API&#xff0c;用于在Web瀏覽器中繪制和操作圖形對象。Fabric.js可以用于創建各種圖形應用程序&#xff0c;例如繪圖編輯器、圖像編輯器、流程圖、地圖和數據可視化等。 官網文…
閱讀更多...
校企合作項目總結

校企合作項目總結

校企合作總結 前言項目框架開發待辦水平越權總結 前言 寒假里小組給了校企合作的項目&#xff0c;分配給我的工作量總共也就兩三套crud&#xff0c;雖然工作很少&#xff0c;但還是從里面學到了很多東西&#xff0c;收獲了大量的實習經驗&#xff0c;在這里總結記錄一下。 項…
閱讀更多...
FreeRTOS學習筆記——FreeRTOS中斷管理

FreeRTOS學習筆記——FreeRTOS中斷管理

精華總結&#xff1a; 中斷優先級0為最高&#xff0c;任務優先級0為最低 中斷優先級分組中為方便rtos管理4bit全部設置成搶占優先級 32單片機的中斷管理是由3個寄存器完成&#xff08;名字忽略&#xff0c;具體功能忽略&#xff09;&#xff0c;三個寄存器都是32bit&#xff0c…
閱讀更多...
微信小程序云開發教程——墨刀原型工具入門（文件設置+編輯組件）

微信小程序云開發教程——墨刀原型工具入門（文件設置+編輯組件）

引言 作為一個小白&#xff0c;小北要怎么在短時間內快速學會微信小程序原型設計&#xff1f; “時間緊&#xff0c;任務重”&#xff0c;這意味著學習時必須把握微信小程序原型設計中的重點、難點&#xff0c;而非面面俱到。 要在短時間內理解、掌握一個工具的使用&#xf…
閱讀更多...
NOC2023軟件創意編程（學而思賽道）python小高組決賽真題

NOC2023軟件創意編程（學而思賽道）python小高組決賽真題

目錄 下載原文檔打印做題： 軟件創意編程 一、參賽范圍 1.參賽組別：小學低年級組（1-3 年級）、小學高年級組（4-6 年級）、初中組。 2.參賽人數：1 人。 3.指導教師：1 人（可空缺）。 4.每人限參加 1 個賽項。 組別確定：以地方教育行政主管部門（教委、教育廳、教育局） 認…
閱讀更多...
【風格遷移】StyTr2：引入 Transformer 解決 CNN 在長距離依賴性處理不足和細節丟失問題

【風格遷移】StyTr2：引入 Transformer 解決 CNN 在長距離依賴性處理不足和細節丟失問題

StyTr2&#xff1a;引入 Transformer 解決 CNN 在長距離依賴性處理不足和細節丟失問題 提出背景StyTr2 組成StyTr2 架構 提出背景 論文&#xff1a;https://arxiv.org/pdf/2105.14576.pdf 代碼&#xff1a;https://github.com/diyiiyiii/StyTR-2 問題&#xff1a; 傳統的神經…
閱讀更多...
idea中springboot項目創建后追加依賴

idea中springboot項目創建后追加依賴

springboot項目創建后追加依賴 前言1、安裝插件editstarters設置->插件 2、進入pom.xml 頁面 前言 在項目創建的時候選擇好依賴創建項目&#xff0c;之后追加依賴不是很方便&#xff0c;介紹一個簡單的使用方法&#xff0c;通過editstarters進行添加 1、安裝插件editstart…
閱讀更多...
在 Ubuntu 終端輸出不同顏色、粗體、下劃線或其他樣式的字體

在 Ubuntu 終端輸出不同顏色、粗體、下劃線或其他樣式的字體

嗯。調試時總發現自己打印的調試信息太過普通、單調&#xff0c;于是乎…… Notice 要在終端實現字體的特殊樣式&#xff0c;通常通過使用特殊的控制字符來實現&#xff0c;而不是通過某語言本身的功能來實現。 在大多數終端中&#xff0c;可以使用 ANSI 轉義序列來設置字體的…
閱讀更多...
CleanMyMac X2024測評深度分析與功能全面介紹

CleanMyMac X2024測評深度分析與功能全面介紹

一、軟件概述 CleanMyMac X 是一款強大的Mac清理和優化工具&#xff0c;它可以幫助用戶輕松管理和釋放Mac上的空間&#xff0c;優化系統性能&#xff0c;提高運行速度。這款軟件以其直觀的用戶界面和豐富的功能受到了廣大Mac用戶的歡迎。 CleanMyMac X4.14.6全新版下載如下: …
閱讀更多...
令牌桶算法和漏桶算法各自的應用場景

令牌桶算法和漏桶算法各自的應用場景

令牌桶算法和漏桶算法都是流量控制算法&#xff0c;它們在網絡和系統中有著不同的應用場景&#xff0c;具體如下&#xff1a; 令牌桶算法的應用場景&#xff1a; 網絡流量控制&#xff1a; 令牌桶算法廣泛應用于網絡流量控制中&#xff0c;特別是在網絡設備中&#xff0c;如路…
閱讀更多...
html基礎標簽+Http請求

html基礎標簽+Http請求

文章目錄 目錄 文章目錄 前言 一.網址組成 二.HTTP協議解析 Http 請求報文 報文請求方法 報文頭 Cache-Control 常見緩存控制行為 cookie 解析 Http 響應報文 常見狀態碼 三.域名解析(DNS) DNS域名服務器分類 遞歸查詢 迭代查詢 四.端口號 五.路徑信息 六.Https協議 ?對稱…
閱讀更多...
第一篇【傳奇開心果系列】Python的自動化辦公庫技術點案例示例：深度解讀Pandas庫

第一篇【傳奇開心果系列】Python的自動化辦公庫技術點案例示例：深度解讀Pandas庫

傳奇開心果博文系列 系列博文目錄Python的自動化辦公庫技術點案例示例系列 博文目錄前言一、主要特點和功能介紹二、Series 示例代碼三、DataFrame示例代碼四、數據導入/導出示例代碼五、數據清洗示例代碼六、數據選擇和過濾示例代碼七、數據合并和連接示例代碼八、數據分組和聚…
閱讀更多...
Linux系統管理：虛擬機 Kali Linux 安裝

Linux系統管理：虛擬機 Kali Linux 安裝

目錄 一、理論 1.Kali Linux 二、實驗 1.虛擬機Kali Linux安裝準備階段 2.安裝Kali Linux 2. Kali Linux 更換國內源 3. Kali Linux 設置固定IP 4. Kali Linux 開啟SSH遠程連接 5. MobaXterm遠程連接 Kali Linux 三、問題 1.apt 命令 取代哪些 apt-get命令 一、理論…
閱讀更多...
《OpenScene: 3D Scene Understanding with Open Vocabularies》閱讀筆記1

《OpenScene: 3D Scene Understanding with Open Vocabularies》閱讀筆記1

傳統的3D場景理解方法依賴于帶標簽的3D數據集，用于訓練一個模型以進行單一任務的監督學習。我們提出了OpenScene，一種替代方法，其中模型在CLIP特征空間中預測與文本和圖像像素共同嵌入的3D場景點的密集特征。這種零樣本方法實現了與任務無關的訓練和開放詞匯查詢。例如，為了…
閱讀更多...
Phoncent博客：探索AI寫作與編程的無限可能

Phoncent博客：探索AI寫作與編程的無限可能

Phoncent博客&#xff0c;一個名為Phoncent的創新AIGC博客網站&#xff0c;于2023年誕生。它的創始人是莊澤峰&#xff0c;一個自媒體人和個人站長&#xff0c;他在網絡營銷推廣領域有著豐富的經驗。莊澤峰深知人工智能技術在內容創作和編程領域的潛力和創造力&#xff0c;因此…
閱讀更多...
有趣的CSS - 閃爍的鴻星爾克文字招牌效果

有趣的CSS - 閃爍的鴻星爾克文字招牌效果

大家好&#xff0c;我是 Just&#xff0c;這里是「設計師工作日常」&#xff0c;今天分享的是利用 animation 動畫實現一個閃爍的霓虹燈文字效果。 《有趣的css》系列最新實例通過公眾號「設計師工作日常」發布。 目錄 整體效果核心代碼html 代碼css 部分代碼 完整代碼如下html…
閱讀更多...
第十一屆藍橋杯省賽第二場C++ B組 / C組《成績統計》（c++）

第十一屆藍橋杯省賽第二場C++ B組 / C組《成績統計》（c++）

1.題目說明 小藍給學生們組織了一場考試&#xff0c;卷面總分為100 分&#xff0c;每個學生的得分都是一個 0 到 100 的整數。 如果得分至少是 60 分&#xff0c;則稱為及格。 如果得分至少為 85 分&#xff0c;則稱為優秀。 請計算及格率和優秀率&#xff0c;用百分數表示…
閱讀更多...
使用Spark探索數據

使用Spark探索數據

需求分析 使用Spark來探索數據是一種高效處理大規模數據的方法&#xff0c;需要對數據進行加載、清洗和轉換&#xff0c;選擇合適的Spark組件進行數據處理和分析。需求分析包括確定數據分析的目的和問題、選擇合適的Spark應用程序和算法、優化數據處理流程和性能、可視化和解釋…
閱讀更多...
【嵌入式實踐】【芝麻】【設計篇-3】從0到1給電動車添加指紋鎖：項目整體規劃

【嵌入式實踐】【芝麻】【設計篇-3】從0到1給電動車添加指紋鎖：項目整體規劃

0. 前言 該項目是基于stm32F103和指紋模塊做了一個通過指紋鎖控制電動車的小工具。支持添加指紋、刪除指紋&#xff0c;電動車進入P檔等待時計時&#xff0c;計時超過5min則自動鎖車&#xff0c;計時過程中按剎車可中斷P檔狀態&#xff0c;同時中斷鎖車計時。改項目我稱之為“芝…
閱讀更多...
Pycharm下如何生成exe軟件

Pycharm下如何生成exe軟件

第一步 下載pyinstaller pip install pyinstaller 對pyinstaller第二步 使用pyinstaller cmd切換到項目目錄執行命令:pyinstaller --add-data “./templates;templates” 入口文件名.py
閱讀更多...
最新文章

Copyright @ 2022~2023