jQuery的复习（1）-CSDN博客

本文链接：https://blog.csdn.net/weixin_46013619/article/details/103584554

1.多Tab点击切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_多Tab点击切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #tab li {
      float: left;
      list-style: none;
      width: 80px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      text-align: center;
    }

    #container {
      position: relative;
    }

    #content1, #content2, #content3 {
      width: 300px;
      height: 100px;
      padding: 30px;
      position: absolute;
      top: 40px;
      left: 0;
    }

    #tab1, #content1 {
      background-color: #ffcc00;
    }

    #tab2, #content2 {
      background-color: #ff00cc;
    }

    #tab3, #content3 {
      background-color: #00ccff;
    }
  </style>
</head>
<body>
<h2>多Tab点击切换</h2>

<ul id="tab">
  <li id="tab1" value="1">10元套餐</li>
  <li id="tab2" value="2">30元套餐</li>
  <li id="tab3" value="3">50元包月</li>
</ul>

<div id="container">
  <div id="content1">
    10元套餐详情：<br/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
  </div>
  <div id="content2" style="display: none">
    30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
  </div>
  <div id="content3" style="display: none">
    50元包月详情：<br/>&nbsp;每月无限量随心打
  </div>
</div>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
	var $container = $('#container>div')
	index = 0 
	$('ul>li').click(function(){
		$($container[index]).css('display','none')
		currentIndex = $(this).index()
		$container[currentIndex].style.display = 'block'
//		$($container[currentIndex]).css('display','block')
		index = currentIndex
	})
</script>
</body>
</html>

在这里插入图片描述

2.回到顶部（这里有超多可以说的东西）
先说出现的问题，我在当时的学习中没有发现错误，现在回顾自己写了一遍，突然出现了很多错误，如下：
1.我要获取到滚动条的当前位置
我不能用$(‘html,body’).scrollTop(),去获得
var distance = $(‘html’).scrollTop() + $(‘body’).scrollTop()
或者
var distance = $ (document.documentElement).scrollTop()+$(document.body).scrollTop()
或者
$(‘html,body’).scrollTop()都可以在ie和chrome中运行
写第二种最好，比较正规
2.这里我出现了一个问题，我把var 的一些变量，全部放到了点击click的外面了，导致了显示的错误，这里想不懂，所以问了老师，解释如下：不在按钮的点击回调里边，你能获取值么，是能看到distance，但是一进页面就去获取了，拿到的是0.（仔细一想是这样的，可能是今天学闭包学的，脑袋有点乱了，压力有点大，有点笨）
3.在定时器里的distance，是始终减去那一小段距离么，还是减去一段距离，去把值赋给上面的distance，然后在减，
我通过把console.log（distance）加在了定时器外面，发现这个值始终是上面滚动条的当前位置，不是定时器减到0的distance，这里有很多思考的东西，也就是说定时器中的distance开始减一段距离，那么这个distance始终就在定时器中循环减到0，不会影响到外面的distance，开始我觉得有点像js（3）第一个我写的一样，后来发现我错了，这里是异步执行，代码走了一遍，定时器还在走！！！
4.定时器中的distance和外面的distance，算是形成了闭包么？答案是不是的，跟闭包没关系，闭包是外部引用函数内部的变量，这里算是定义域的问题，因为今天做了很多闭包，所以蒙了，看谁都像闭包

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>03_回到顶部</title>
  <style>
    #to_top {
      width: 30px;
      height: 40px;
      font: 14px/20px arial;
      text-align: center;
      background: #06c;
      position: fixed;
      cursor: pointer;
      color: #fff;
      left: 1050px;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">

<div id="to_top">返回顶部</div>

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  $('#to_top').click(function () {
    // 瞬间滚到顶部
    //$('html,body').scrollTop(0)

    // 平滑滚到顶部
      // 总距离
    var $page = $('html,body')
    var distance = $('html').scrollTop() + $('body').scrollTop()
      // 总时间
    var time = 500
      // 间隔时间
    var intervalTime = 50
    var itemDistance = distance/(time/intervalTime)
      // 使用循环定时器不断滚动
    var intervalId = setInterval(function () {
      distance -= itemDistance
      // 到达顶部, 停止定时器
      if(distance<=0) {
        distance = 0 //修正
        clearInterval(intervalId)
      }
      $page.scrollTop(distance)
    }, intervalTime)

  })
</script>
</body>

</html>