js 基础

发布于:2022-11-09 ⋅ 阅读:(11) ⋅ 点赞:(0) ⋅ 评论:(0)
<body>
    <input type='text'>
    <button>按钮</button>
    <ul class="fruit-list li">
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>鸭梨</li>
    </ul>
    <script>
        //创建元素的节点:createElement
        //创建文本节点: createTexNode
        //创建添加节点:appendChild
        //创建删除节点:removeChild
        //制作水果列表的添加与删除

        let btn = document.querySelector("button");
        let ul = document.querySelector("ul");
        let inp = document.querySelector("input");
        let list = document.querySelectorAll(".fruit-list li")
        btn.onclick = function () {
            let value = inp.value;
            let li = document.createElement("li");
            let text = document.createTextNode(value);
            ul.appendChild(li);
            li.appendChild(text);
        }

        for (let i in list){
            list[i].onclick = function() {
                // console.log(i);
                ul.removeChild(this);
                
            }
        }



        //事件对象
        // 事件监听函数的形参可以获取事件对象
        // 通过事件对象可以获取鼠标坐标。
        // 1,获取x坐标:e.clientx;
        // 2,获取y坐标:e.clienty;

<!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>Document</title>

    <style>

        /* .box {

            width: 200px;

            height: 200px;

            background-color: red;

        } */

        .picture-list img{

            width: 320px;

            height: 160px;

        }

        .big-picture img{

            width: 640px;

            height: 320px ;

        }

        .big-picture{

            position: absolute;

        }

    </style>

</head>

<body>

    <!-- <div class=" box"></div> -->

    <div class=" picture-list">

        <img src = "images/a.jpg"  alt="">

        <img src = "images/a1.jpg" alt="">

        <img src = "images/a3.jpg" alt="">

    </div>

    <div class = "big-picture"></div>

    <script>

        // 事件对象的基本概念

        //鼠标点击坐标显示想XY轴对应的数字

        // let box = document.querySelector(".box");

        // box.onclick = function (event) {

        //     console.log(event.clientX);

        //     console.log(event.clientY);

        // }

    // 鼠标移动时会放大

        // 移入移出

        let imgList = document.querySelectorAll('.picture-list img');

        let bigPicture = document.querySelector('.big-picture');

        let picture = document.querySelector('.picture-list');

        for(let i in imgList){

            imgList[i].onmouseenter = function(){

                // console.log(this.src);

                bigPicture.innerHTML = `<img src='${this.src}'}>`

            }

            imgList[i].onmouseleave = function () {

                bigPicture.innerHTML = ""

            }

        }

        picture.onmousemove = function(e){

            let x = e.clientX;

            let y = e.clientY;

            bigPicture.style.top = y + 10  + "px";

            bigPicture.style.left = x + 10 + "px";

            // console.log(`x坐标是${x},y坐标是${y}`);

        }

    </script>

</body>