【Day 18】jQuery DOM
何谓DOM?
DOM = Document Object Model（文件物件模型）
根据MDN表示，文件物件模型（Document Object Model, DOM）是 HTML、XML 和 SVG 文件的程序介面。
它提供了一个文件（树）的结构化表示法，并定义让程序可以存取并改变文件架构、风格和内容的方法。提供了文件以拥有属性与函式的节点与物件组成的结构化表示。节点也可以附加事件处理程序，一旦触发事件就会执行处理程序。 本质上，它将网页与脚本或程序语言连结在一起。
jQuery DOM 操作
说明 : 主要是用来操作 DOM 元素的新增、删除与修改等。
DOM Insertion, Around
.wrap() 把每个被选元素放置在指定的HTML 内容或元素中。
.unwrap() 删除被选元素的父元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>unwrap demo</title>
<style>
div {
border: 2px solid blue;
}
p {
background: yellow;
margin: 4px;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<button>wrap/unwrap</button>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
var pTags = $( "p" );
$( "button" ).click(function() {
if ( pTags.parent().is( "div" ) ) {
pTags.unwrap();
} else {
pTags.wrap( "<div></div>" );
}
});
</script>
</body>
</html>
DOM Insertion, Inside
.append() 在被选元素的结尾（仍然在内部）插入指定内容。
.appendTo() 与.append()定义相同，不同之处在於：内容的位置和选择器。
.html() 设置或返回所选元素的内容（包括HTML 标记）。
.prepend() 在被选元素的开头（仍位於内部）插入指定内容。
.prependTo() 差异在於语法：内容和选择器的位置，以及prepend() 能够使用函数来插入内容。
.text() 设置或返回所选元素的文本内容
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<style>
p {
margin: 8px;
font-size: 20px;
color: blue;
cursor: pointer;
}
b {
text-decoration: underline;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
<script>
$( "p" ).click(function() {
var htmlString = $( this ).html();
$( this ).text( htmlString );
});
</script>
</body>
</html>
DOM Insertion, Outside
.after() 在被选元素之後插入内容。
.before() 在被选元素之前插入内容。
.insertAfter() 在被选元素之後插入HTML 标记或已有的元素。
.insertBefore() 在指定的已有子节点之前插入新的子节点。
DOM Removal
.detach() 移除被选元素，包括所有文本和子节点。
.empty() 从被选元素中删除子元素
.remove() 删除被选元素（及其子元素）
.unwrap() 删除被选元素的父元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detach demo</title>
<style>
p {
background: yellow;
margin: 6px 0;
}
p.off {
background: black;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
</script>
</body>
</html>
DOM Replacement
.replaceWith() 用指定的HTML 内容或元素替换被选元素。
.replaceAll() 与.replaceWith()定义相同，不同之处在於：内容和选择器的位置，以及replaceWith() 能够使用函数进行替换。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>replaceWith demo</title>
<style>
button {
display: block;
margin: 3px;
color: red;
width: 200px;
}
div {
color: red;
border: 2px solid blue;
width: 200px;
margin: 3px;
text-align: center;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<button>First</button>
<button>Second</button>
<button>Third</button>
<script>
$( "button" ).click(function() {
$( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});
</script>
</body>
</html>
微聊 铁人赛 最终回
今天居然就是铁人赛的最後一天了，没想到！！没想到啊！！！！ 今天就来聊最後一回，这 30 天微人都经...
Leetcode: 785. Is Graph Bipartite?
这题目最一开始要做的事情就是，搞清楚什麽是bipartite？ 一张图具有bipartite的性质...
D14 - 用 Swift 和公开资讯，打造投资理财的 Apps { 加权指数K线图实作.2 }
制作 K 线的 Data Model，从前面文章 [加权指数K线图实作.2] 的 response ...
损失函数的演进--2
triplet loss 接下来的Loss function为triplet loss 是为2015...
【学习笔记-CSS】background 各属性
CSS-background各属性 共用的css 写在最上面 body { margin: 0; b...