12.13Web前端第十二次课练习和笔记

menge2333

已于 2023-12-20 16:51:49 修改

阅读量99

点赞数

分类专栏： Web前端文章标签：笔记

于 2023-12-19 14:32:16 首次发布

本文链接：https://blog.csdn.net/menge2333/article/details/135059280

版权

Web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

练习（微博发布案例）

let useCount=document.querySelector(".useCount")
let textarea=document.querySelector("textarea")
//字数变化
textarea.addEventListener("input",function(){
    useCount.innerHTML=textarea.value.length
})
//发布
//时间
function datetime(){
    let date=new Date();
    let date2=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'
    let hours=date.getHours()>9?date.getHours():'0'+date.hours()
    let min=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes()
    let sec=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds()
    let week=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    let times=hours+':'+min+':'+sec+' '+week[date.getDay()]
    return(`${date2}-${times}`)
}

//内容
let btn=document.querySelector("button")
let ul = document.querySelector(".contentList ul")
btn.addEventListener("click",function(){
    let newLi=document.createElement("li")
    newLi.innerHTML=`<img src="images/03.jpg">
                    <div>${textarea.value}</div>
                    <br> 
                    <span class="shijian">${datetime()}</span>
                    <button class="del">删除</button>`
    ul.insertBefore(newLi,ul.children[0])
    //删除
    let del=document.querySelector(".del")
    del.addEventListener("click",function(){
    ul.removeChild(newLi)
})
})

笔记

修改元素对象的属性

属性

1.普通属性（不在style标签）

a.元素对象.属性名=属性值

例1：修改图片

<body>
    <img src="./3.webp">
    <script src="./1.js"></script>
</body>

let img=document.querySelector("img")
img.src = "./2.webp"

例2：修改输入方式

<body>
    <input type="password">
    <script src="./1.js"></script>   
</body>

let input=document.querySelector("input")
input.type="text"

例3：使禁用的按钮可以使用

<body>
    <button disabled id="">提交</button>
    <script src="./1.js"></script>
   
</body>

let btn=document.querySelector("button")
btn.disabled=false

b.getAttribute\setAttribute (获取\更改)

例1：修改id

<body>
    <button disabled id="one">提交</button>
    <script src="./1.js"></script>
</body>

let btn=document.querySelector("button")
btn.setAttribute("id","two")
document.write(btn.getAttribute("id"))

2.style样式属性

a.元素对象.style.属性名="属性值"

head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="box">wenzi</div>
    <script src="./1.js"></script>
</body>
</html>

let box=document.querySelector(".box")
box.style.color="green"
box.style.backgroundColor="red"

b.className(会覆盖掉原来的类名)

box.className="new"

如果要保留原来的类名则需要加上原来的类名

box.className="box new"

c.classList

//添加

box.classList.add("new")

//删除

box.classList.remove("box")

//切换

box.claaList.toggle("box")

获取元素对象的style样式属性的值

例：

console.log(getComputedStyle(box,false)["backgroundColor"])

3.offset属性

只有 offsetWidth offsetHeight offsetTop offsetLeft

let box=document.querySelector(".box")
console.log(box.offsetWidth)
console.log(box.offsetHeight)
console.log(box.offsetTop)
console.log(box.offsetLeft)

//修改（和style样式一样）

例：

box.style.offsetTop="400px"

节点查找

通过子元素获取父元素（parentNode）

<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
    <script src="./1.js"></script>
</body>

let son=document.querySelector(".son")
console.log(son.parentNode)

通过父节点获取子节点

<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>

    <script src="./1.js"></script>
</body>
</html>

let ul=document.querySelector("ul")
console.log(ul.children[1])

获取兄弟节点

console.log(ul.previousElementSibling)

节点的创建

1.创建节点(document.createElement())

let newLi = document.createElement("li")

2.添加内容 (.innerHTML=``)

newLi.innerHTML=`<a href="#">新添加的li</a>`

3.追加（.appendChild()）

父元素.appendChild(创建对象) 【永远在父元素的尾部进行追加】

//父元素.insertBefore(目标节点，参照节点) 【可决定位置】

ul.insertBefore(newLi,ul.children[0])

let ul=document.querySelector("ul")
//创建节点
let newLi = document.createElement("li")
//添加内容
newLi.innerHTML=`<a href="#">新添加的li</a>`
console.log(newLi)
//追加
ul.appendChild(newLi)

节点的删除依据父节点

ul.removeChild(newLi)
ul.removeChild(ul.children[1])

克隆 (clonNode)

<body>
    <div class="father">
        fuqin
        <div class="son">erzi</div>
    </div>
    <script src="./1.js"></script>
</body>
</html>

let father=document.querySelector(".father")
console.log(father.cloneNode(false))

let father=document.querySelector(".father")
console.log(father.cloneNode(true))

事件（事件源事件类型事件对象）

事件监听

事件源.addEventListener("事件类型"，处理函数，true|false)

let btn=document.querySelector("button")
btn.addEventListener("click",()=>{
    console.log("666")
})

事件源.on事件类型 = 处理函数

let btn=document.querySelector("button")
btn.onclick = function(){
    alert("666")
}

事件对象：里边存储事件触发时的相关信息

例：获取键盘输入的内容

let text=document.querySelector("textarea")
text.onkeydown=function(e){
    console.log(e.key)
    if(e.key==="Enter")(
        alert("777")
    )
}

change事件

例：获取字符的长度 /input(数字一直变化)

拿：.value

let text=document.querySelector("textarea")
text.onchange=function(){
    console.log(text.value)
    console.log(text.value.length)
}

focus blur 获取焦点和失去焦点事件

mouseenter mouseleave 鼠标移入和鼠标移出事件