千峰jquery进阶内容

news2025/2/28 0:18:49

封装选项卡：
在这里插入图片描述
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>
  <script src="../jQuery/jQuery.min.js"></script>
  <link rel="stylesheet" href="tabs.css" />
  <body>
    <div id="container">
      <ul class="header"></ul>
      <ul class="box1"></ul>
    </div>
  </body>
  <script src="tabs.js"></script>
  <script>
    //动态获取数据 创建节点
    // 初始化
    var list = [
      {
        title: "qqq",
        content: "qqq内容",
      },
      {
        title: "qq1q",
        content: "qq1q内容",
      },
      {
        title: "qq2q",
        content: "qq2q内容",
      },
      {
        title: "qq3q",
        content: "qq3q内容",
      },
    ];
    var oHeaderLI = list
      .map(
        (item) => `
<li>${item.title}</li>`
      )
      .join(" ");
    $(".header").html(oHeaderLI);

    var oContentLI = list
      .map(
        (item) => `
<li>${item.content}</li>`
      )
      .join(" ");
    $(".box1").html(oContentLI);
    $("#container").tabs(1);
  </script>
</html>

CSS部分：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul li {
  list-style: none;
}
.header {
  display: flex;
  width: 360px;
  height: 50px;
}
.header li {
  flex: 1;
  height: 50px;
  text-align: center;
  border: 2px solid black;
  cursor: pointer;
}
.header .active {
  background-color: #bb1890;
}

.box1 li {
  left: 0;
  top: 0;
  width: 360px;
  height: 150px;
  background-color: aquamarine;
  border: 1px solid yellow;
  display: none;
}
.box1 .active {
  display: block;
}

JS部分：


    // 封装到一个方法中：
    $.fn.extend({
      tabs: function (index) {
        var oli = this.find(".header li");
        var obox = this.find(".box1 li");
        oli.eq(index).addClass("active");
        obox.eq(index).addClass("active");

        oli.click(function () {
          $(this).addClass("active").siblings().removeClass("active");
          //获取索引值，赋给下面的的
          //   console.log($(this).index());
          var index = $(this).index();
          //   obox.eq(index).addClass("active").siblings().removeClass("active");
          obox.removeClass("active").eq(index).addClass("active");
        });
      },
    });
    $("#container").tabs(1);

动态删除：

在这里插入图片描述

<!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 src="../jQuery/jQuery.min.js"></script>
  </head>

  <body>
    <ul id="list"></ul>
  </body>
  <script>
    // 用JS创建一个列表,列表里面放入按钮,再把列表放入HTML中
    var arr = ["111", "222", "333", "444"];
    for (var i = 0; i < arr.length; i++) {
      $(`<li>${arr[i]}
        <button id="btn">删除</button>
        </li>`).appendTo($("#list"));
    }

    // 这种方法去绑定现有button,不会对后来添加的button生效
    // $("#list #btn").click(function () {
    //   //   $("#btn").parent().remove();
    //   //注意，这里面是this
    //   $(this).parent().remove();
    // });

    // 因此,使用事件委托,是一个好方法
    $("#list").on("click", "button", function () {
      $(this).parent().remove();
    });
    var li = $(`<li>555<button id="btn">删除</button></li>`);
    li.appendTo("#list");
  </script>
</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>
  <script src="../jQuery/jQuery.min.js"></script>
  <body>
    <div class="box">
      <ul>
        <li>ni</li>
        <li>ni</li>
        <li>ni</li>
      </ul>
    </div>
    <div class="center">
      <hr />
    </div>
  </body>
  <script>
    $(".box")
      //clone 里面传入参数true代表把绑定的事件也一起克隆过来
      .clone()
      .prop("id", "box2")
      .insertAfter(".center")
      .css("color", "yellow")
      .css("background", "red");
  </script>
</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>
    <script src="../jQuery/jQuery.min.js"></script>
  </head>
  <body>
    <div id="box">
      000
      <div id="box1">111</div>
      <span>qwu</span>
      <span>qwu</span>
      <span>qwu</span>
      <div id="box2">222</div>
    </div>
  </body>
  <script>
    // 删除自身 remove
    // $("#box #box1").eq(0).remove();

    //empty 清空内部
    // $("#box").empty();
    //或者内部赋值为空
    // $("#box").html(" ");

    // 替换
    var odiv = $("<div>hello</div>");
    $("#box span").replaceWith(odiv);
    //另一种写法：
    // odiv.replaceAll($("#box span"));
  </script>
</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>
  <script src="../jQuery/jQuery.min.js"></script>
  <body></body>
  <script>
    var obj1 = {
      name: "heFan",
      location: {
        city: "nanYang",
        province: "XinYe",
        a: { b: { c: 1 } },
        hobby: ["打球", "看美女", "旅游"],
      },
    };
    var obj2 = {};
    // $.extend(obj2, obj1);
    // // 注意,浅拷贝改值另一个也会跟着改
    // obj2.location.city = "郑州";
    // console.log(obj2);
    // console.log(obj1);

    // 深拷贝
    $.extend(true, obj2, obj1);
    // 加上参数true就实现了深拷贝,改值不影响另一个
    obj2.location.city = "洛阳";
    obj1.location.city = "武汉";
    console.log(obj2);
    console.log(obj1);
  </script>
</html>