千峰jquery进阶内容
封装选项卡：
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>Documenttitle>
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) => `
${item.title}`
)
.join(" ");
$(".header").html(oHeaderLI);
var oContentLI = list
.map(
(item) => `
${item.content}`
)
.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>Documenttitle>
<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++) {
$(`${arr[i]}
`).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 = $(`555 `);
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>Documenttitle>
head>
<script src="../jQuery/jQuery.min.js">script>
<body>
<div class="box">
<ul>
<li>nili>
<li>nili>
<li>nili>
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>Documenttitle>
<script src="../jQuery/jQuery.min.js">script>
head>
<body>
<div id="box">
000
<div id="box1">111div>
<span>qwuspan>
<span>qwuspan>
<span>qwuspan>
<div id="box2">222div>
div>
body>
<script>
// 删除自身 remove
// $("#box #box1").eq(0).remove();
//empty 清空内部
// $("#box").empty();
//或者内部赋值为空
// $("#box").html(" ");
// 替换
var odiv = $("hello");
$("#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>Documenttitle>
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>