JavaScript—this和找到当前点击按钮下标

    this概念:只要封装函数,任何一个函数系统都会内置一个叫做this的变量。
    this变量存储的是地址,是当前函数主人的地址

    【注】this永远指向当前函数的主人,函数的主人要通过当前上下文去判断
    this类似于现实生活中,用到的“我”
    <script>
        var person = {
            username: "眼前",
            sex:"男",
            show : function(){
                alert(person.username);
                alert(this.username);
            }
        };
        person.show();
    </script>

请添加图片描述
请添加图片描述
点击按钮,输出当前按钮的下标

<!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>
    <script>
        window.onload = function(){
            var aBtns = document.getElementsByTagName("button");

            for(var i = 0;i < aBtns.length; i++){
                //给每一个按钮添加一个自定义属性
                aBtns[i].index = i;
                aBtns[i].onclick = function(){
                    alert(this.index);
                }
            }
            alert("循环结束了: "+ i);
        }
    </script>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

请添加图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用jQuery编写的轮播图的完整代码: HTML代码: ``` <div class="slider"> <ul class="slides"> <li><img src="img1.jpg"></li> <li><img src="img2.jpg"></li> <li><img src="img3.jpg"></li> </ul> <div class="nav"> <span class="prev">Prev</span> <ul class="dots"> <li class="dot active"></li> <li class="dot"></li> <li class="dot"></li> </ul> <span class="next">Next</span> </div> </div> ``` CSS代码: ``` .slider { position: relative; overflow: hidden; } .slides { list-style: none; margin: 0; padding: 0; position: relative; } .slides li { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .slides li.active { opacity: 1; } .nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .prev, .next { display: inline-block; margin-right: 10px; padding: 10px; border: 1px solid #ccc; cursor: pointer; } .dots { display: inline-block; margin: 0; padding: 0; } .dot { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: #ccc; border-radius: 50%; cursor: pointer; } .dot.active { background-color: #000; } ``` JavaScript代码: ``` $(document).ready(function() { // 初始化 var currentSlide = 0; var slider = $('.slider'); var slides = slider.find('.slides li'); var dots = slider.find('.dots li'); var interval; // 自动播放 function startSlider() { interval = setInterval(function() { goToSlide(currentSlide + 1); }, 5000); } function stopSlider() { clearInterval(interval); } function goToSlide(index) { if (index >= slides.length) { index = 0; } else if (index < 0) { index = slides.length - 1; } slides.removeClass('active').eq(index).addClass('active'); dots.removeClass('active').eq(index).addClass('active'); currentSlide = index; } // 手动切换 slider.on('click', '.prev', function() { goToSlide(currentSlide - 1); }); slider.on('click', '.next', function() { goToSlide(currentSlide + 1); }); // 轮播点导航 dots.on('click', function() { var index = $(this).index(); goToSlide(index); }); // 开始自动播放 startSlider(); // 停止自动播放 slider.on('mouseenter', function() { stopSlider(); }); slider.on('mouseleave', function() { startSlider(); }); }); ``` 注意:需要在页面中引入jQuery库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值