小鸟随鼠标移动案例

<style>
        img{
            width: 50px;
            position: fixed;
        }
        body{
            width: 100vh;
            height: 100vh;
        }
    </style>
</head>
<body>
    <img src="./WechatIMG597.png" alt="">
    <script>
const  img=document.querySelector('img')
document.body.addEventListener('mousemove',function (event) {
    const  left=event.clientX
    const  top=event.clientY

    img.style.top= top+ 'px' 
    img.style.left= left+ 'px' 
})
    </script>

按enter发布微博

const   area=document.querySelector('#area')
const   ul=document.querySelector('ul')
const   btn=document.querySelector('button')

btn.addEventListener('click',function (event ) {
    const  li=document.createElement('li')
    li.innerText=area.value
    ul.appendChild(li)//不用单引号
})

area.addEventListener('keydown',function (event) {
    if (event.key==='Enter') {//enter必须是Enter
       btn.click()
       event.preventDefault()//阻止浏览器默认行为
    }
})

const特点

 //报错的情况:这个是一个给了,就固定的元素
       /*  const  i=3
        i++
        console.log(i) */
        
        // 不报错的情况.数组,对象这种,里面包含多个值的
        const  arr=[]
        arr.push('讲','jingjo ')
        console.log(arr)

全选,反选

let   chkALL=document.querySelector('.chkALL')
let  chkone=document.querySelectorAll('.ch')
let   yesall=document.querySelector('#chkall')
let    none=document.querySelector('.unall')
chkALL.addEventListener('click',function () {
  /*   chkone.checked=true
    console.log(chkone.checked) */
    // 全选效果
    for (let index = 0; index < chkone.length; index++) {
        chkone[index].checked=true
    }
//取消全选效果
    none.addEventListener('click',function () {
        for (let index= 0; index< chkone.length; index++) {
        chkone[index].checked=false
    }
    })
})
//遍厉每一个是否选择
for (let index = 0; index < chkone.length; index++) {

chkone[index].addEventListener('click',function () {
    let  chknum=0
for (let index2=0; index2 < chkone.length;index2++) {
  if (chkone[index2].checked) {
      chknum++
  }
}
if(chknum===chkone.length){
    yesall.checked=true
}
else{
    yesall.checked=false
}
});
}

元素节点增删改操作(insertBefore)

事件(event)的属性(client参考物为页面+offset参考是点击对象)

js webapi案例合集

小鸟随鼠标移动案例

按enter发布微博

const特点

全选,反选

元素节点增删改操作(insertBefore)

事件(event)的属性(client参考物为页面+offset参考是点击对象)