纯js实现轮播图过程中的个人疑难

最新推荐文章于 2022-04-08 12:33:27 发布

CathyLeeeee

最新推荐文章于 2022-04-08 12:33:27 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/CathyLeeeee/article/details/97822931

本文探讨了在纯JavaScript中实现轮播图时遇到的关键技术点，包括CSS3的nth-child选择器、背景图像的自适应设置、HTML5的自定义属性、querySelector与getElementBy系列方法的区别、className的运用、事件监听器的添加方式以及定时器的使用。同时，对比了let和var在变量声明上的差异，强调了let的块级作用域和防止变量提升的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.css3里面的nth-child（）选择器

:nth-child(n)选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字，或者一个公式。

2.background-image

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

这样就出现了没有自适应的问题。

解决办法：加上background-repeat:no-repeat;和background-size:100% 100%

3.html5l里面的data-*属性

<input type="button" value="按钮" data-index="10"data-index-color="red">

调用需用

var oBtn=document.querySelector('input');
console.log(oBtn.getAttribute('value'));            //按钮
console.log(oBtn.getAttribute('index'));            //10
console.log(oBtn.getAttribute('data-index'));        //10
console.log(oBtn.getAttribute('data-index-color'))

HTML5新增了个dataset 属性来存取 data-* 自定义属性的值

还有一点特别注意的是： data- 属性名如果包含了连字符，例如：data-index-color ，连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是：indexColor 。

方法如下

var oBtn=document.querySelector('input');
console.log(oBtn.dataset);                //DOMStringMap对象
console.log(oBtn.dataset.index);          //10
console.log(oBtn.dataset.indexColor);    //red
console.log(oBtn.index);                     //undefined

4.querySelector与getElementBy等的区别

querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。该方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素，需要使用querySelectorAll()方法替代．

DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能通过其来调用该方法

getElementsByTagName方法返回一个对象数组（准确的说是HTMLCollection集合）,返回元素的顺序是它们在文档中的顺序,传递给 getElementsByTagName() 方法的字符串可以不区分大小写

注意：getElementBy里面有个坑，如下

getElementsByTagName() 方法返回对应标签名的元素的一个动态集合, 只要document发生变化,就会自动更新对应的元素。

因此, 下面的代码实际上是一个死循环:

var divs = document.getElementsByTagName("div");
var i=0;

while(i < divs.length){
    document.body.appendChild(document.createElement("div"));
    i++;
}

死循环的原因是每次循环都会重新计算 divs.length. 每次迭代都会添加一个新的 <div>, 所以每次 i++ ,对应的 divs.length 也在增加, 所以 i 永远比divs.length小, 循环终止条件也就不会触发[例外情况是dom中没有div,不进入循环

最后再根据查询的资料总结一下：
query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变。

5.js里面className的用法

className可以用来改变标签元素的css类选择器，从而改变元素的样式

6.onclick和addEventListener的区别

addEventListener允许给一个事件注册多个监听器，即不会相互覆盖，onclick反之

eg：

onclick

window.onload = function() {
                var container = document.querySelector("#container");
                container.onclick = function() {
                    console.log("第一次onclick事件");
                }
                container.onclick = function() {
                    console.log("第二次onclick事件");
                }
            }　　　　　
            //运行结果：“第二次onclick事件”

addEVentListener

window.onload = function() {
                var container = document.querySelector("#container");
                container.addEventListener("click", function() {
                    console.log("第一个addEventListener事件");
                })
                container.addEventListener("click", function() {
                    console.log("第二个addEventListener事件");
                })
            }
            //运行结果：
            //"第一个addEventListener事件"
            //"第二个addEventListener事件"