jquey实现页数指示点

最新推荐文章于 2024-05-24 23:45:01 发布

记忆怪 bug

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量63

点赞数

分类专栏： jquery 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_66051368/article/details/123218896

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

认识jquery

技巧1: e封n装 's- 用h{}封装代u码复用

技巧2: 函数重载 - 参数数量/类型不同, 完成不同的逻辑

<!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>
  </head>
  <body>
    <div id="box">
      <span>1111</span>
      <p>222</p>
      <b>3333</b>
      <div>44444</div>
    </div>

    <!-- 使用第三方, 需要先引入脚本 -->
    <script src="./vendor/jquery-3.6.0.min.js"></script>
    <script>
      // 选择器:
      // 原生DOM中提供了大量选择器: 例如 固定元素, 按照特征, 按照关系查找, 按照css选择器查找的
      // jQuery封装了最万能的 css选择器 查找方式
      // 即: querySelectorAll
      // 原生: document.querySelectorAll('div')
      //
      // 固定规则: 利用jQuery的 $()方式查找到的结果, 保存到变量中时, 要求此变量用 $ 开头 -- 这是一个非严格的规范
      // 让其他程序员看到名字 就知道他是 JQ读取的
      const $divs = $('div')
      // $(): 这是一个函数调用, $是函数名, 具体原理详见 01
      console.log($divs)
      // jQuery对象的原型中 封装了大量的方法, 可以对查询出来的元素进行各种操作
      // 具体原理参考: 01
    </script>
  </body>
</html>

指示点样式实现：

<!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>
  <style>
    .btn {
      margin-top: 50px;
    }

    .box {
      width: 100px;
      height: 100px;
      margin-top: 10px;
      transition: 0.3s;
    }

    .danger {
      background-color: red;
      border-radius: 50%;
    }

    .indicator {
      padding: 10px;
      width: 200px;
      background-color: lightblue;
      text-align: center;
      user-select: none;
    }

    .indicator>span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: white;
      display: inline-block;
    }

    .indicator>span.cur {
      background-color: deepskyblue;
    }
  </style>
</head>

<body>
  <!-- 内联样式设定 -->
  <div class="color">
    <div>啊啊啊啊啊啊啊啊啊啊啊</div>
    <div>啵啵啵啵啵啵啵啵啵宝宝</div>
    <div>草草草草草草草草草草</div>
    <button>ddddddddddddd</button>
  </div>
  <!-- 页数指示点 -->
  <div class="indicator">
    <span class="cur"></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <!--class -->
  <div class="btn">
    <button>添加</button>
    <button>删除</button>
    <button>切换</button>
    <div class="box danger"></div>
  </div>
  <script src="./vendor/jquery-3.6.0.js"></script>
  <script>
    // css(属性名, 值): 用来给 style.属性名=值
    // 自动对查询出来的元素, 进行遍历修改: 原理见01
    $('div').css('color', 'red')
    // 得益于函数重载机制: 如果仅有1参数,认为是读操作
    console.log($('div').css('color'))
    // 参数可以是对象类型, 同时设置多个属性
    $('div').css({
      border: '1px solid gray',
      padding: '10px',
      marginTop: '3px',
    })

    const $a = $('button').css('color', 'yellow')
    console.log($a);
    //  ——————————————————————————————————————————————————————————————————————

    $('.indicator>span').mouseover(function () {
      //JQ底层会自动遍历,为每个选择到的元素添加事件
      console.log('this:', this)
      // this是原生的DOM元素, 必须封装成 JQ 对象, 才能用JQ的原型方法
      // $(DOM元素): 就可以把DOM元素封装成JQ对象
      // 函数重载机制: 参数是字符串,则认为是css选择器; 参数是DOM元素类型, 则认为是做封装操作
      console.log('$(this):', $(this))
      // siblings: 兄弟姐妹们
      // siblings(): 可以读取当前元素的 所有兄弟元素
      $(this).addClass('cur').siblings().removeClass('cur')
    })

    // ————————————————————————————————————————————————————
    const $btns = $('.btn>button')
    console.log($btns);
    // eq: equal等于
    // eq(0): 获取 $btns[0] 的元素, 再次封装成JQ对象
    console.log('序号0的:', $btns.eq(0))

    // $btns[0]: 获取的是序号0的原生DOM元素, 没有JQ方法
    console.log('$btns[0]:', $btns[0])

    // 就是原生的: 元素.classList.add('danger')
    $btns.eq(0).click(function () {
      $('.box').addClass('danger')
    })
    $btns.eq(0).click(function () {
      $('.box').addClass('danger')
    })
    // 删除
    $btns.eq(1).click(function () {
      $('.box').removeClass('danger')
    })
    // 切换: 有则删,无则加
    $btns.eq(2).click(function () {
      $('.box').toggleClass('danger')
    })
  </script>
</body>

</html>

记忆怪 bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquey实现页数指示点

认识jquery技巧1: e封n装 's-用h{}封装代u码复用技巧2:函数重载-参数数量/类型不同,完成不同的逻辑<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewpo...
复制链接

扫一扫