js-note自用【無規律，你看不懂滴】

GJ504b發表於2024-11-02
JS

獲取html標籤並修改文字

獲取html

法一·getElementById只可以獲得id[不推薦，瞭解即可]

        let block = document.getElementById('block')

法二·querySelectorAll得到的是一個nodelist物件【可以獲得所有型別選擇器】

獲取了選擇器之後，log()裡面就可以直接寫en單詞了，不用加識別符號號

    let block = document.querySelector('#block')

直接修改文字內容【不要求文字格式】

textContent

textContent 屬性是用來獲取或者設定一個元素的文字內容。但是，這個屬性是存在於單個元素節點上的
不能直接給一個 NodeList 物件設定 textContent。相反，您需要遍歷這個列表，並且對列表中的每個元素單獨設定 textContent。

遍歷nodelist

forEach函式

// 統一修改，一般不會
    變數名-s.forEach(function(變數名){
    operation1 2 3 4；
    
    });
    let contexts = document.querySelectorAll('.box p'); // 選擇所有類名為 'box' 的元素內的 <p> 元素
    contexts.forEach(function(context) {
        context.textContent = 'new'; //修改統一文字
    });
// 修改特異性文字 -> 箭頭函式
        contexts.forEach((context, index) => {
    if (index < textArr.length) {
        context.textContent = textArr[index]; // 使用陣列中的元素更新每個 <p> 元素的文字內容
    }//防止越界
});

賦值法

修改特異性文字 better

 let contexts = document.querySelectorAll(' .box p')// 裡面可以放任何選擇器，和css規則一致

        let textArr = [
            '777777777',
            '888888888',
            '999999999',
        ]
        for(let i = 0; i < contexts.length; i++){
            contexts[i].textContent = textArr[i]
        }
        console.log(contexts)//獲取了選擇器之後，log()裡面就可以直接寫en單詞了，不用加識別符號號

改變某個元素，改變它的前後元素內容，改變它的父級

改變它

將它設定一個class或者id，然後用querySeletor獲取這個元素，再用textContent修改

    let secondItem = document.querySelector('#secondItem')
    secondItem.textContent = 'change the second one'

改變它的前後元素

同上，只是需要加一點識別符號，讓編譯器識別
.previousElementSibling
.nextElementSibling

    secondItem.previousElementSibling .textContent = 'change the one that before secondItem'
        //previousElementSibling      sibling:子級元素，同輩之間
    secondItem.nextElementSibling.textContent = 'change the one that after secondItem'

改變它的父級

更新整個盒子裡的內容
secondItem.parentNode

    let box = secondItem.parentNode//宣告一個變數獲取，然後修改內容
    box.textContent = 'new page'
列印所有的標籤和選擇器
    let box = secondItem.parentNode//獲取父元素
    console.log(box)
    // box.textContent = 'new page'//-->更新整個盒子，盒子裡所有東西都被覆蓋了
    let items = box.children
    console.log(items)//列印.box裡的所有子級標籤

間接修改文字內容【要求格式】

格式就先用css寫好，然後用js手段實現切換
不可以用textContent

.innerHTML

let block = document.querySelector('.block')
    block.innerHTML = '普通內容<span class = "newStyle">加粗的文字</span>'

css和js的樣式處理

直接在js裡設定css樣式【不推薦/簡單修改】

變數.style.css的屬性(height width color)

（沒有程式碼提示，使得js冗雜。-連線的，去掉-，換成大寫，如：fontSize）

let block = document.querySelector('#block')
block.style.height = '80px'
block.style.width= '80px'
block.style.fontSize = '18px'
block.style.backgroundColor = 'tomato'

先準備好一個更改後css的樣式，再用js實現類名切換

    let block = document.querySelector('#block')
    block.className = 'changeStyle'//改變類名函式

.changeStyle{
    width: 80px;
    height: 80px;
    color: #fff;
    background-color: tomato;
}

事件互動

.addEventListener

.addEventListener('click',function(){
operation
})

    let block = document.querySelector('.block')
    block.addEventListener('click',function(){
        alert('surprise!')
    })
    block.addEventListener('click',function(){
    alert('surprise again!')    
    })

好的，看來你對網頁事件互動有點興趣。除了click事件，還有很多其他的事件可以用來響應使用者的操作。這裡給你列舉一些常用的事件：

  • 滑鼠事件：
    mousedown：當滑鼠按鈕被按下時觸發。
    mouseup：當滑鼠按鈕被釋放時觸發。
    mousemove：當滑鼠在元素上移動時觸發。
    mouseover：當滑鼠指標移動到元素上時觸發。
    mouseout：當滑鼠指標移出元素時觸發。
    dblclick：當滑鼠雙擊元素時觸發。
  • 鍵盤事件：
    keydown：當鍵盤按鍵被按下時觸發。
    keyup：當鍵盤按鍵被釋放時觸發。
    keypress：當鍵盤按鍵被按下並釋放時觸發。
  • 表單事件：
    submit：當表單提交時觸發。
    change：當表單元素的內容改變時觸發（如選擇下拉選單的選項）。
    focus：當元素獲得焦點時觸發。
    blur：當元素失去焦點時觸發。
  • 文件/視窗事件：
    load：當頁面完全載入後觸發。
    unload：當使用者離開頁面時觸發。
    resize：當視窗或框架的大小變化時觸發。
    scroll：當使用者滾動頁面時觸發。
  • 觸控事件（用於移動裝置）：
    touchstart：當觸控點接觸觸控式螢幕時觸發。
    touchmove：當觸控點在觸控式螢幕上移動時觸發。
    touchend：當觸控點離開觸控式螢幕時觸發。

定時器

setInterval 開始計時

setInterval(function(){
operation
},時間)

setTimeout 結束清空計時

setTimeout(function(){
clearInterval(timer)//固定，記憶
}, 時間)

    let timer = setInterval(function(){
        console.log('每隔2s輸出一次')
    }, 2000)/*一直計時*/
    setTimeout(function(){
        clearInterval(timer)
    }, 8000)/*結束計時*/

輪播圖製作

控制類名active實現出現與消失，要讓出現的類名有唯一性

    let carousel = document.querySelector('#carousel')
    let items = carousel.children

滑鼠點選互動事件，實現翻頁

    let prev = document.querySelector('#prev')
    let next = document.querySelector('#next')
    next.addEventListener('click',function(){
        items[index].className = ''/*先取消所有的active*/
        // 使得之後active的唯一性
        if(index === items.length - 1){/*到最後一張了*/
            index = -1/*因為下一步要+1，所以設定為-1*/
        }
        index ++
        items[index].className = 'active'
    })
    // prev.addEventListener同理

timer實現輪播

計時器代替了我們的點選動作，把點選的動作copy過來

        setInterval(function(){
            items[index].className = ''/*先取消所有的active*/
            if(index === items.length - 1){/*到最後一張了*/
                index = -1/*因為下一步要+1，所以設定為0*/
            }
            index ++
            items[index].className = 'active'

        }, 5000)

相關文章