JQUERY03

最新推荐文章于 2022-09-08 09:52:58 发布

Rouer_jia

最新推荐文章于 2022-09-08 09:52:58 发布

阅读量220

点赞数

分类专栏： WEB前端DOM+JQUERY 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/Rouer_jia/article/details/122969767

版权

WEB前端DOM+JQUERY 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQUERY03

克隆与替换

<!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">
      <img src="./images/p0.png" alt="" />
      <div>
        <img src="./images/p3.png" alt="" />
        <img src="./images/p4.png" alt="" />
        <img src="./images/p5.png" alt="" />
      </div>
    </div>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // 委托方式: 点击事件, 子元素中的img, 回调
      $('#box>div').on('click', 'img', function () {
        console.log(this)
        // replace: 替换    with:通过
        // clone: 克隆
        const $c = $(this).clone() //克隆一份
        $('#box>img').replaceWith($c)
      })
    </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>
  </head>
  <body>
    <ul>
      <li>亮亮</li>
      <li>亮亮</li>
      <li>亮亮</li>
      <li>亮亮</li>
      <li>亮亮</li>
    </ul>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      console.log($('li'))
      // odd:奇数   even:偶数
      $('li:odd').css({ color: 'red' })

      $('li:even').css({ color: 'green' })
    </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>
  </head>
  <body>
    <ul>
      <li>高达0</li>
      <li>高达1</li>
      <li>高达2</li>
      <li>高达3</li>
      <li>高达4</li>
      <li>高达5</li>
    </ul>

    <script src="./vendor/jquery-3.6.0.js"></script>
    <script>
      // eq: equal等于
      // lt: less than 小于
      // gt: greater than 大于
      $('li:eq(3)').css('border', '1px solid red')

      $('li:gt(3)').css('color', 'green')

      $('li:lt(3)').css('background-color', 'blue')
    </script>
  </body>
</html>

JQUERYUI

Rouer_jia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQUERY03

JQUERY03克隆与替换奇偶选择器序号相关选择器JQUERYUI克隆与替换<!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-widt
复制链接

扫一扫

专栏目录