DOM扩展（DOM基本案例）

最新推荐文章于 2024-05-31 10:26:40 发布

阿駷

最新推荐文章于 2024-05-31 10:26:40 发布

阅读量113

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_49992474/article/details/121765009

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一，动态创建表格添加信息（带删除按钮）

知识点：queryselectorAll 属性选择器，通过字符串标签的形式给innerHTML中添加标签，使用this来访问祖先元素

<body>
    <div id="information">
        <div>
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="button" value="添加" style="cursor: pointer;">
        </div>
        <table>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>爱好</th>
                <th>电话号码</th>
                <th>操作</th>
            </tr>
        </table>
    </div>
    <script>
         //获取所有的input标签（使用queryselectAll）
        var aInput = document.querySelectorAll("input");
		//给添加按钮Tina及事件
        aInput[aInput.length-1].onclick = function(){
            // 用于判断输入不能为空
            for(var k = 0; k < aInput.length - 1;k++){
                if(aInput[k].value == ""){
                    alert("输入不能为空");
                    return;
                }
            }
            // 添加tr和循环添加td 给td赋值
            var tr = document.createElement("tr");
            for(var i = 0; i < aInput.length;i++){
                var d = document.createElement("td")
                d.innerHTML = aInput[i].value;
                //判断最后一个，给内容添加删除标签
                if(i == aInput.length-1){
                    d.innerHTML = "<span>删除</span>"
                }
                tr.appendChild(d);
            }
            // 声明第一个tr,使每个添加的tr都在之前的前面
            var first = document.querySelectorAll("tr")[1];
            document.querySelector("table>tbody").insertBefore(tr,first);
            // 给每个span按钮添加事件
            var aPan = document.querySelectorAll("span");
            for(var j = 0 ; j < aPan.length;j++){
                aPan[j].onclick = function(){
                    // 删除span的父元素的父元素
                    this.parentNode.parentNode.remove();
                }
            }
            //删除完毕后 清除输入框内的内容
            clear();
        }
		//封装一个清除事件
        function clear(){
            for(var i = 0; i < aInput.length - 1;i++){
                aInput[i].value = "";
            }
        }
    </script>
</body>

二、图片切换效果

知识点：1.排他思想（通过循环删除所有属性），循环完毕给自己添加属性

2.通过设置计数变量的方式判断你当前切换的图片

3.className添加类名 classname = “类名”，获取的标签.classlist.add(“类名”) 删除类名：classname = “”；获取的标签名.classlist.remove(“类名”)

<body>
    <div id="banner">
        <p></p>
        <div>
            <span class="left"><</span>
            <span class="right">></span>
            <ul>
                <li><img src="images/basketball1.jfif" alt=""></li>
                <li><img src="images/basketball2.jfif" alt=""></li>
                <li><img src="images/basketball3.jfif" alt=""></li>
                <li><img src="images/basketball4.jfif" alt=""></li>
            </ul>
        </div>
        <p></p>
    </div>
    <script>
        var aP = document.querySelectorAll("p");
        var aL = document.querySelectorAll("li");
        var left = document.querySelectorAll("span")[0];
        var right = document.querySelectorAll("span")[1];
		//通过数组的形式存放底部文字描述
        var arr1  = ["最美上篮照片","最美篮筐","最美篮球拖拽","最美篮球夕阳"];
		//声明一个变量计数；
        var count = 0;
        aP[0].innerHTML = (count+1)+"/4";
        aP[1].innerHTML = arr1[count];
		//给第一张图设置，一个类名，类名的属性为display：block
        aL[count].className = "gb";
		//给右侧按钮添加事件
        right.onclick = function(){
            //点击一次，计数自增一次
            count++;
            //判断当计数达到一个图片数量时，重新赋值
            if(count == 4){
                count = 0;
            }
            aP[0].innerHTML = (count+1)+"/4";
            aP[1].innerHTML = arr1[count];
            // 循环删除每张图片上的classname，（排他事件），清除所有，留下自己
            for(var i = 0; i < aL.length;i++){
                aL[i].className = ""
            }
            //给下一张图片设置class类名
            aL[count].className = "gb";
        }
		//给左侧按钮设置时间，思路同右侧
        left.onclick = function(){
            count--;
            if(count == -1){
                count = 3
            }
            aP[0].innerHTML = (count+1)+"/4";
            aP[1].innerHTML = arr1[count];
            for(var i = 0; i < aL.length;i++){
                aL[i].className = ""
            }
            aL[count].className = "gb";
        }
    </script>
</body>

三、选项卡的切换

知识点：设置自定义属性，在循环绑定事件，无法获取对应的下标值，所以在事件外部给每个按钮设置一个自定义属性，在事件内部通过this来获取该属性，为点击按钮和页面添加属性

<body>
    <div id="banner">
        <div>
            <span class="gb">按钮1</span>
            <span>按钮2</span>
            <span>按钮3</span>
            <span>按钮4</span>
        </div>
        <ul>
            <li class="cx">第一张图</li>
            <li>第二张图</li>
            <li>第三张图</li>
            <li>第四张图</li>
        </ul>
    </div>
    <script>
                </body>
		//获取对应标签
        var aSp = document.querySelectorAll("span");
        var aLi = document.querySelectorAll("li");
		//循环给每个标签添加事件
        for(var i = 0; i < aSp.length;i++){
            // 设置自定义属性，给每个按钮存入一个编码，让后面li标签可以对应使用
            aSp[i].setAttribute("index",i);
            aSp[i].onclick = function(){
                var index = this.getAttribute("index");
                //排他事件
                for(var j = 0; j < aSp.length;j++){
                    aSp[j].className = "";
                    aLi[j].className = "";
                }
                //设置显示类名
                this.className = "gb";
                aLi[index].className = "cx";
            }
        }
    </script>
</body>

阿駷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM扩展（DOM基本案例）

一，动态创建表格添加信息（带删除按钮）知识点：queryselectorAll 属性选择器，通过字符串标签的形式给innerHTML中添加标签，使用this来访问祖先元素<body> <div id="information"> <div> <input type="text"> <input type="text"> <input type
复制链接

扫一扫