JavaScript复习：四-优快云博客

本文链接：https://blog.youkuaiyun.com/self_correction/article/details/128642045

五十二、记住用户名

    <div>
        用户名:
        <input: type="text". id="username">I
    </div> 
    <div> 
        密码:
        <input type=" password" id=" pas sword"> 
    </div> 
    <div> 
        <button id=" login" >登录</button>
    </div> 
    <script>
      //先获取用户名 密码信息进行存储
        var uservalue = localStorage.getItem("username")
        var passvalue = localstorage.getItem("password")

        username.value = uservalue 
        password.value = passvalue

        login.onclick = function(){
            console.log(username. value,password. value)

            localstorage.setItem("username",username.value )
            localStorage.setItem("password",password.value)
        }

五十三、DOM

DOM (Document object Mode1) :文档对象模型
其实就是操作htm1中的标签的一-些能力
我们可以操作哪些内容
获取一个元素.
移除一个元素.
创建一个元素
向页面里面添加一个元素
给元素绑定一些事件
获取元素的属性
给元素添加一些css样式

DOM的核心对象就是docuemnt对象
document对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM: 页面中的标签，我们通过js获取到以后，就把这个对象叫做DOM对象

五十四、获取元素方式

    <div id="box"></div>

    <ul>
        <li class="newsitem">111</li>
        <li class="newsitem">111</li>
        <li class="newsitem">111</li>
        <li class="newsitem">111</li>
        <li class="newsitem">111</li>
        <li class="newsitem">111</li>
        <li class="newsitem">111</li>
    </ul>
    <script>
        // console. log( box )
        // box. innerHTML =”11111 "
        /*
        html, head, body 非常规
        常规=>id,class, tag
        */
        // console . log( document . documentElement) // rem
        // console. log( document.head) //获取head
        // console. log( document . body) // 获取body
        // getElementById
        // console.log( )
        // var obox = document.getElementById("box" )
        // obox.innerHTML = "22222 "

        //getElementsByClas sName
        // var items = document.getElementsByClassName ("newsitem")
        // console.log(items) //伪数组

        // items[0]. innerHTML = "news -111111" 

        // for (var i=0;i< items . length;i++){
        //     items[i].innerHTML = "news-"+ i
        // }

        // Set => Array.from

        var newitems = Array.from(items)
        console.log(newitems.filter)

五十五、操作元素

<1>.操作元素属性

    <div id="box" kerwin="hello">hello </div> 

    <input type="text" value="hello" id="username">

    <input type="checkbox" checked id="rember">

    <img src="" alt="" id=" photo"> 

    <ul>
        <li kerwinindex="1">111</li>
        <li kerwinindex="2">222</li>
        <li kerwinindex="3">333</li>
    </ul>
    <div id= "box2" data-kerwin="hello" data-tiechui= "hello2"></div>

    <script>
        /*
        元素自带(原生)属性
        自定义属性
        */
        //操作原生属性
        box. innerHTML = "22222"
        
        username.type = "password"
        // console. log( )
        rember. checked = false

        photo.src = 

        //自定义属性
        box.setAttribute("tiechui" ,"222222" )
        console.log(box.getAttribute("tiechui"))
        box.removeAttribute("tiechui")
        box.removeAttribute("kerwin")
        
        for(var i=0;i<oitems.length;i++){
            oitems[i].setAttribute("index",i)
        }
        //h5 ===> 约定data-******  .dataset
        console.log(box2.dataset)
        box2.dataset.xiaoming = "hello3"

        delete box2.dataset.xiaoming 
        delete box2.dataset.kerwin
        delete box2.dataset.tiechui

        var oitems = document.getElementsByTagName("1i")
        for(vari=0;i<oitems.length;i++){
        oitems[i].dataset.index = i
        }

<2>.操作元素文本内容

    <div id="box">
        hello world
        <div>zhangzhengyu</div>
    </div>
    <input type= "text" id="username" value= "hello">

    <select name="" id="select">
        <option value="1">11111</option>
        <option value="2">2222</option>
        <option value="3 ">3333</option>
    </select> 

    <script>
        // innerHTML
        // innerText
        // value

        console.log(box.innerHTML)
        //box.innerHTML="<h1>11111111</h1>
        console.log(box.innerText) //获取只有文本
        box.innerText ="<h1>1111111</h1>" //不解析 html
        
        console.log(box.value)
        
        username.value = "2222222"

        console.log(select.value)
        select.value = "3"

<2>.操作元素类名

五十六、密码可视

    <input type="password" id="password"> 
    <button id="eyebtn">eye</button> 
    <script>
        var passInput = document.getElementById("password")

        var eyeBtn = document.querySelector("#eyebtn")

        eyeBtn.onclick = function(){ 
        console.log(passInput.type)

        if(passInput.type == "password"){
            passInput.type = "text"
            }else{
            passInput.type="password"
            }
        }

五十七、DOM节点

DOM的节点我们一般分为常用的三大类元素节点/文本节点/属性节点
什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点(标签节点)
比如我们标签里面写的文字，那么就是文本节点
写在每一个标签上的属性,就是属性节点

五十八、获取DOM节点

    zhangzhengyu
    <p>11111</p> 
    <!-- 我是一个注释 -->
    <script>
        /*
        1. \n zhangzhengyu \n
        2.    <p>11111</p> 
        3. \n
        4. <!-- 我是一个注释 -->
        5. 
        *
       // childNodes属性 vs children

        console.log(box.childNodes) //所有节点
        console.log(box.children) //所有元素

        // firstChild firstElementChild

        console.log(box.firstChild)
        console.log(box.firstElementChild)

        // JastChild lastElementChild

        console.log(box.nextSibling)
        console.log(box.nextElementSibling)

五十九、节点操作

    <div id="box">
        <div id="child">1111111</div>
    </div>
    <script>
        //创建
        var odiv = document.createElement("div")
        odiv.className = "aaa"
        odiv.id="aaa"
        odiv.style.background = "yellow"
        odiv.innerHTML = "我是新创建的节点"
        console.log(odiv)

        //插入节点

        //box.appendChild(odiv) 
        //insertBefore(要插入的节点谁的前面)

        box.insertBefore (odiv,child)

        //删除节点(节点对象)
        // box.removeChild(child) 
        // box.remove()   //删除自己以及后代
        //替换节点replaceChild(新的节点，老的节点)
        var odiv2 = document.createElement("div")
        odiv2.innerHTML = "2222222"
        box.replaceChild(odiv2,child)

        //克隆节点() false 不克隆后代
        // true 克隆后代
        var oCloneBox = box.cloneNode(true)
        console.log(oCloneBox)
        oCloneBox.id="box2"
        document.body.appendChild(oCloneBox)

六十一、节点属性

我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点

接下来我们就来聊一些各种节点之间属性的区别
我们先准备一段代码

<body>
<u1 test="我是 u1的一个属性">
<1i>he11o</1i>
</u1>
<script>
//先获取u1
var ou1 = document . querySelector('ul')
//获取到u1下的第一个子元素节点，是一个元素节点
var eleNode = ou1. fi rstElementChild
//获取到u1的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
var attrNode = ou1. attributes [0]
//获取到u1下的第一个子节点，是一个文本节点
var textNode = ou1. fi rstChild
</script>
</body>

六十二、获取元素

<1>.获取元素尺寸

    <div id="box"></div>
    <script>
    //console.log(getComputedstyle(box).width)
    //console.log(box.style.width)
    //offset*(border+padding+content)
    console.log(box.offsetWidth,box.offsetHeight)
    //注意

    /*
    1.单位数字
    2. box-sizing (border+padding+content)
    3. display:none 拿不到
    */

    //client*(padding+content)
    console.log(box.clientWidth,box.clientHeight)

<2>.获取元素偏移量

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 500px;
            height: 500px;
            background-color: yellow;
            overflow: hidden;
        }
        #myparent{
            width: 300px;
            height: 300px;
            background-color: blue;
            overflow: hidden;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div{
            margin: 50px;
        }
        ul{
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid black;
            background: red;
            margin: 50px;
            border-left-width: 50px;
            border-top-width: 50px;

        }
    </style>
</head>
<body>
    <div id="box">
        <div id="myparent">
            <div id="child">

            </div>

        </div>
    </div>
    <ul id="list"></ul>


    <script>
        console.log(child.offsetLeft,child.offsetTop)
        console.log(myparent.offsetLeft,myparent.offsetTop)
        console.log(box.offsetLeft,box.offsetTop)
        
        /*
        参考点:是定位父级
        如果父级元素都没有定位，偏移量相对于body
        */
        console.log(list.clientLeft,list.clientTop)

    </script>

六十三、获取可视窗口的尺寸

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            /* width: 2000px; */
            height: 2000px;
        }
    </style>
</head>
<body>
    <script>
        console.log("宽度",innerWidth)
        console.log("高度",innerHeight)
        console.log("宽度",document.documentElement.  
        clientWidth)
        console.log("高度",document. ocumentElement.clientHeight )

    </script>

六十四、事件

一个事件由什么东西组成
触发谁的事件:事件源
触发什么事件:事件类型
触发以后做什么:事件处理函数

var oDiv = document . querySelector('div')
oDiv. onclick = function () {}
//谁来触发事件 => oDiv =>这个事件的事件源就是 oDiv
//触发什么事件=> onclick =>这个事件类型就是click 
//触发之后做什么 => function () {} =>这个事件的处理 函数
。我们想要在点击div以后做什么事情，就把我们要做的事情写在事件处理函数里面
var oDiv = document . querySelector(' div')
oDiv. onc1ick = function () {
console.1og('你点击了div')

当我们点击div的时候，就会执行事件处理函数内部的代码
每点击一次，就会执行一次事件处理函数

六十五、事件解绑

    <button id="btn">抽奖</button>
    <script>
        btn.onclick = function(){
        console.log("谢谢惠顾")
        //console.log(this)
        this.disabled = "disabled"
        }
        //事件解绑-dom0 dom节点.onclick = null 
        //btn.onclick = function(){ 
        // console.log("谢谢惠顾")
        //
        // this.onclick = null
        // }
        //事件解绑dom2
        //function handler(){
        //console.log("谢谢惠顾")
        //this.removeEventListener("click",handler)
        // }
        // btn.addEventListener("click",handler)
        //btn.removeEventListener("click",handler)
        function handler(){
        console.log("谢谢惠顾" )
        btn.detachEvent("onclick",handler)
        }
        btn.attachEvent("onclick",handler)

    </script>

六十六、事件类型

    <script>
        //鼠标事件
        //click
        //dblclick
        btn.onclick = function(){
        console.log("单击执行")
        }
        btn.ondblclick = function(){ 
        console.log("双击执行")
        }
        //contextmenu 右键单击
        btn.oncontextmenu = function(){
        console.log("右键单击.自定义右键菜单")
        }

        //contextmenu右键单击
        document.oncontextmenu = function(){ 
        console.log("右键单击.自定义右键菜单") 
        }
        //mousedown mousemove mouseup
        box.onmousedown = function(){
        console.log("鼠标按下")
        }
        box.onmousemove =function(){
        console.log("鼠标移动")
        }




    </script>

六十七、事件对象

<body>
<input type= "text" id="username">
    <div id="box"></div>
<script>
    username.onkeyup = function(evt){ 
        console.log(evt.keyCode)
        if (evt.keyCode == 13){
            console.log("创建节点")
        }
    }
    box.onclick = function(evt){
    evt = evt||window.event
    console.log(evt)
    }
    //兼容ie 678 window.event
</script>

六十八、鼠标事件

    <style>
        *{margin: 0;
          padding: 0;
        }
        body{
            width: 2000px;
            height: 20000px;
        }
        div{
            width: 200px;
            height: 200px;
            hanging-punctuation: skyblue;
            margin: 100px;
        }
        p{
            width: 100px;
            height: 100px;
            margin: 30px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <p></p>
    </div>
    <script>
        box.onclick = function(evt){
            console.log(evt.clientX,evt.clientY)
            console.log(evt.pageX,evt.pageY)
            console.log(evt.offsetX,evt.offsetY)
        }
            //clientX clienty距离浏览器可视窗口的左上角的坐标值
            //pageXpageY距离页面文档流的左上角的坐标值
            //offsetx offsety|距离触发元素的左上角的坐标值

    </script>

六十九、DOM事件流

当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
就像上面的图片一样
点击在红色盒子上的时候，会触发红色盒子的点击事件
也是点击在了粉色的盒子上,也会触发粉色盒子的点击事件
也是点击在了body.上,也会触发body的点击事件
也是点击在了html上，也会触发html的点击事件

七十一、阻止事件传播

    <ul class="list"></ul>
    <script>
        var arr = ["111","2222","333"]

        for (var i=0;i<arr.length;i++){
            var oli = document.createElement("li")
            oli.innerHTML = arr[i]

            var obutton = document.createElement("button")
            obutton.innerHTML ="delete"
            obutton.onclick = handler
            oli.appendChild( obutton)

            oli.onclick = function(){
            location.href = "http://wWw.baidu.com"

            list.appendChild(oli)
        }

        function handler(evt){
        //阻止事件传播
        evt.stopPropagation()

        //ie
        // evt.cancelBubble = true
        // console.log(this.parentNode)
        this.parentNode.parentNode.removeChild(this. parentNode)
        }
    }

    
    </script>

七十二、自定义右键菜单

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 200px;
            padding: 10px;  
            border: 1px solid black;
            display: none;
        }
        ul li:hover{
            background: skyblue;
        }

    </style>
</head>
<body>
    <ul id="list">
        <li class="aaa">111</li>
        <li class="bbb">222</li>
        <li class="ccc">333</li>
    </ul>
    <script>
        document.addEventListener(" contextmenu" ,function(evt){
        evt.preventDefault()
        list.style.display = "block"
        var X = evt.clientX
        var y = evt.clientY
        if(x >= document.documentElement.clientWidth-list.
        offsetWidth )
        X = document.documentElement.clientWidth-list. offsetWidth 
        if(y >= document.documentElement.clientHeight-list.offsetHeigth)
        y = document.documentElement.clientHeight-list . offsetHeigth
        list.style.left = X + "px"
        list.style.top = y + "px"
        })

        document . addEventListener("click",()=>{
        list. style.display = "none"
        })
        
        list . onclick = function(){
        console. log("list")
        }

    </script>

七十三、事件委托

就是把我要做的事情委托给别人来做
因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
所以我们就可以把子元素的事件委托给父元素来做
事件触发
点击子元素的时候，不管子元素有没有点击事件，
只要父元素有点击事件,那么就可以触发父元素的点击事件

<body>
<u1>
<1i>1</1i>
<1i>2</1i>
<1i>3</1i>
</u1>
<script>
var ou1 = docuemnt. queryselector('ul')
ou1. addEventListener('click', function (e) {
console.1og('我是u1的点击事件，我被触发了') 
})
</script>
</body>