使用原生JavaScript实现网页定位导航

本文介绍了如何使用原生JavaScript来实现网页定位导航。通过getElementsByClassName获取元素,结合hasClass、remove、addClass方法操作class。同时讲解了在页面加载和滚动时如何触发事件,利用scrollTop和offsetTop属性判断滚动位置。最后提到在实际开发中可以结合jQuery和JavaScript提高熟练度。
摘要由CSDN通过智能技术生成
上一节我们通过jQuery实现了简单的网页定位导航,这一节使用JavaScript来实现。或许有人在想jQuery实现已经那么简便了怎么还要用JavaScript,但是作为一名合格的前端工程师,对底层的js也要有一定认识和掌握。
这一节我们需要使用的知识有,学会将经常使用到的方法进行封装,方便在实验中的调用,jQuery和js获取元素的不同实现方法,还有正则表达式的使用等等。现在就让我们进入正题。
网页的结构和表现CSS样式跟上一节的都一样,我们可以使用之前写过的代码,然后就是定位的实现。在jQuery中可以很快地利用选择器实现根据id或类名获取元素,移除元素,在js中我们可以对这些经常使用的方法进行封装。

根据类名获取元素getByClassName(obj,cls)

function getByClassName(obj, cls) {
   
                var elements = obj.getElementsByTagName("*");
                var result = [];
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].className == cls) {
                        result.push(elements[i]);
                    }
                }
                return result;
            }

判断对

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值