使用 JS 操作 HTML 元素
myzbx 2024-12-02 22:36 29 浏览
文档对象模型(DOM)
JS 有很多地方让咱们吐槽，但没那么糟糕。作为一种在浏览器中运行的脚本语言，它对于处理web页面非常有用。在本中，我们将看到我们有哪些方法来交互和修改HTML文档及其元素。但首先让我们来揭开文档对象模型的神秘面纱。
文档对象模型是一个基本概念，它是咱们在浏览器中所做的一切工作的基础。但那到底是什么? 当咱们访问一个 web 页面时，浏览器会指出如何解释每个 HTML 元素。这样它就创建了 HTML 文档的虚拟表示，并保存在内存中。HTML 页面被转换成树状结构，每个 HTML 元素都变成一个叶子，连接到父分支。考虑这个简单的HTML 页面：
<!DOCTYPE html> <html lang="en"> <head> <title>A super simple title!</title> </head> <body> <h1>A super simple web page!</h1> </body> </html
当浏览器扫描上面的 HTML 时，它创建了一个文档对象模型，它是HTML结构的镜像。在这个结构的顶部有一个 document 也称为根元素，它包含另一个元素:html。html 元素包含一个 head，head 又有一个 title。然后是含有 h1的 body。每个 HTML 元素由特定类型(也称为接口)表示，并且可能包含文本或其他嵌套元素
document (HTMLDocument) | | --> html (HTMLHtmlElement) | | --> head (HtmlHeadElement) | | | | --> title (HtmlTitleElement) | | --> text: "A super simple title!" | | --> body (HtmlBodyElement) | | | | --> h1 (HTMLHeadingElement) | | --> text: "A super simple web page!"
每个 HTML 元素都是从 Element 派生而来的，但是它们中的很大一部分是进一步专门化的。咱们可以检查原型，以查明元素属于什么“种类”。例如，h1 元素是 HTMLHeadingElement
document.quertSelector('h1').__proto__
// 输出：HTMLHeadingElement
HTMLHeadingElement 又是 HTMLElement 的“后代”
document.querySelector('h1').__proto__.__proto__
// Output: HTMLElement
Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。
在这一点上(特别是对于初学者)，document 和 window 之间可能有些混淆。window 指的是浏览器，而 document 指的是当前的 HTML 页面。window 是一个全局对象，可以从浏览器中运行的任何 JS 代码直接访问它。它不是 JS 的“原生”对象，而是由浏览器本身公开的。window 有很多属性和方法，如下所示：
window.alert('Hello world'); // Shows an alert
window.setTimeout(callback, 3000); // Delays execution
window.fetch(someUrl); // makes XHR requests
window.open(); // Opens a new tab
window.location; // Browser location
window.history; // Browser history
window.navigator; // The actual device
window.document; // The current page
由于这些属性是全局属性，因此也可以省略 window：
alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delays execution
fetch(someUrl); // makes XHR requests
open(); // Opens a new tab
location; // Browser location
history; // Browser history
navigator; // The actual device
document; // The current page
你应该已经熟悉其中的一些方法，例如 setTimeout()或 window.navigator，它可以获取当前浏览器使用的语言：
if (window.navigator) {
var lang = window.navigator.language;
if (lang === "en-US") {
// show something
}
if (lang === "it-IT") {
// show something else
}
}
要了解更多 window 上的方法，请查看MDN文档。在下一节中，咱们深入地研究一下 DOM。
节点、元素 和DOM 操作
document 接口有许多实用的方法，比如 querySelector()，它是用于选择当前 HTML 页面内的任何 HTML 元素：
document.querySelector('h1');
window 表示当前窗口的浏览器，下面的指令与上面的相同：
window.document.querySelector('h1');
不管怎样，下面的语法更常见，在下一节中咱们将大量使用这种形式：
document.methodName();
除了 querySelector() 用于选择 HTML 元素之外，还有很多更有用的方法
// 返回单个元素
document.getElementById('testimonials');
// 返回一个 HTMLCollection
document.getElementsByTagName('p');
// 返回一个节点列表
document.querySelectorAll('p');
咱们不仅可以选 择HTML 元素，还可以交互和修改它们的内部状态。例如，希望读取或更改给定元素的内部内容：
// Read or write
document.querySelector('h1').innerHtml; // Read
document.querySelector('h1').innerHtml = ''; // Write! Ouch!
DOM 中的每个 HTML 元素也是一个“节点”，实际上咱们可以像这样检查节点类型：
document.querySelector('h1').nodeType;
上述结果返回 1，表示是 Element 类型的节点的标识符。咱们还可以检查节点名：
document.querySelector('h1').nodeName;
"H1"
这里，节点名以大写形式返回。通常我们处理 DOM 中的四种类型的节点
- document: 根节点(nodeType 9)
- 类型为Element的节点：实际的HTML标签（nodeType 1）,例如 <p> 和 <div>
- 类型属性的节点：每个HTML元素的属性（属性）
- Text 类型的节点:元素的实际文本内容(nodeType 3)
由于元素是节点，节点可以有属性(properties )(也称为attributes)，咱们可以检查和操作这些属性：
// 返回 true 或者 false
document.querySelector('a').hasAttribute('href');
// 返回属性文本内容，或 null
document.querySelector('a').getAttribute('href');
// 设置给定的属性
document.querySelector('a').setAttribute('href', 'someLink');
前面我们说过 DOM 是一个类似于树的结构。这种特性也反映在 HTML 元素上。每个元素都可能有父元素和子元素，我们可以通过检查元素的某些属性来查看它们:
// 返回一个 HTMLCollection
document.children;
// 返回一个节点列表
document.childNodes;
// 返回一个节点
document.querySelector('a').parentNode;
// 返回HTML元素
document.querySelector('a').parentElement;
了解了如何选择和查询 HTML 元素。那创建元素又是怎么样?为了创建 Element 类型的新节点，原生 DOM API 提供了 createElement 方法：
var heading = document.createElement('h1');
使用 createTextNode 创建文本节点：
var text = document.createTextNode('Hello world');
通过将 text 附加到新的 HTML 元素中，可以将这两个节点组合在一起。最后，还可以将heading元素附加到根文档中:
var heading = document.createElement('h1');
var text = document.createTextNode('Hello world');
heading.appendChild(text);
document.body.appendChild(heading);
还可以使用 remove() 方法从 DOM 中删除节点。在元素上调用方法，该节点将从页面中消失：
document.querySelector('h1').remove();
这些是咱们开始在浏览器中使用 JS 操作 DOM 所需要知道的全部内容。在下一节中，咱们将灵活地使用 DOM，但首先要绕个弯，因为咱们还需要讨论“DOM事件”。
DOM 和事件
DOM 元素是很智能的。它们不仅可以包含文本和其他 HTML 元素，还可以“发出”和响应“事件”。浏览任何网站并打开浏览器控制台。使用以下命令选择一个元素：
document.querySelector('p')
看看这个属性
document.querySelector('p').onclick
它是什么类型:
typeof document.querySelector('p').onclick // "object"
"object"! 为什么它被称为“onclick”? 凭一点直觉我们可以想象它是元素上的某种神奇属性，能够对点击做出反应? 完全正确。
如果你感兴趣，可以查看任何 HTML 元素的原型链。会发现每个元素也是一个 Element，而元素又是一个节点，而节点又是一个EventTarget。可以使用 instanceof 来验证这一点。
document.querySelector('p') instanceof EventTarget // true
我很乐意称 EventTarget 为所有 HTML 元素之父，但在JS中没有真正的继承，它更像是任何 HTML 元素都可以看到另一个连接对象的属性。因此，任何 HTML 元素都具有与 EventTarget相同的特性:发布事件的能力。
但事件到底是什么呢?以 HTML 按钮为例。如果你点击它，那就是一个事件。有了这个.onclick对象，咱们可以注册事件，只要元素被点击，它就会运行。传递给事件的函数称为“事件监听器”或“事件句柄”。
事件和监听
在 DOM 中注册事件监听器有三种方法。第一种形式比较陈旧，应该避免，因为它耦合了逻辑操作和标签
<!-- 不好的方式 -->
<button onclick="console.log('clicked')">喜欢，就点点我</button>
第二个选项依赖于以事件命名的对象。例如，咱们可以通过在对象.onclick上注册一个函数来监听click事件：
document.querySelector("button").onclick = handleClick;
function handleClick() {
console.log("Clicked!");
}
此语法更加简洁，是内联处理程序的不错替代方案。还有另一种基于addEventListener的现代形式：
document.querySelector("button").addEventListener("click", handleClick);
function handleClick() {
console.log("Clicked!");
}
就我个人而言，我更喜欢这种形式，但如果想争取最大限度的浏览器兼容性，请使用 .on 方式。现在咱们已经有了一 个 HTML 元素和一个事件监听器，接着进一步研究一下 DOM 事件。
事件对象、事件默认值和事件冒泡
作为事件处理程序传递的每个函数默认接收一个名为“event”的对象
var button = document.querySelector("button");
button.addEventListener("click", handleClick);
function handleClick() {
console.log(event);
}
它可以直接在函数体中使用，但是在我的代码中，我更喜欢将它显式地声明为参数：
function handleClick(event) {
console.log(event);
}
事件对象是“必须要有的”，因为咱们可以通过调用事件上的一些方法来控制事件的行为。事件实际上有特定的特征，尤其是“默认”和“冒泡”。考虑一 个HTML 链接。使用以下标签创建一个名为click-event.html的新HTML文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Click event</title> </head> <body> <div> <a href="/404.html">click me!</a> </div> </body> <script src="click-event.js"></script> </html>
在浏览器中运行该文件并尝试单击链接。它将跳转到一个404的界面。链接上单击事件的默认行为是转到href属性中指定的实际页面。但如果我告诉你有办法阻止默认值呢?输入preventDefault()，该方法可用于事件对象。使用以下代码创建一个名为click-event.js的新文件：
var button = document.querySelector("a");
button.addEventListener("click", handleClick);
function handleClick(event) {
event.preventDefault();
}
在浏览器中刷新页面并尝试现在单击链接:它不会跳转了。因为咱们阻止了浏览器的“事件默认” 链接不是默认操作的惟一HTML 元素，表单具有相同的特性。
当 HTML 元素嵌套在另一个元素中时，还会出现另一个有趣的特性。考虑以下 HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Nested events</title> </head> <body> <div id="outer"> I am the outer div <div id="inner"> I am the inner div </div> </div> </body> <script src="nested-events.js"></script> </html>
和下面的 JS 代码：
// nested-events.js
var outer = document.getElementById('inner');
var inner = document.getElementById('outer');
function handleClick(event){
console.log(event);
}
inner.addEventListener('click', handleClick);
outer.addEventListener('click', handleClick);
有两个事件监听器，一个用于外部 div，一个用于内部 div。准确地点击内部div，你会看到：
两个事件对象被打印。这就是事件冒泡在起作用。它看起来像是浏览器行为中的一个 bug，使用 stopPropagation() 方法可以禁用，这也是在事件对象上调用的
//
function handleClick(event) {
event.stopPropagation();
console.log(event);
}
///
尽管看起来实现效果很差，但在注册过多事件监听器确实对性能不利的情况下，冒泡还是会让人眼前一亮。考虑以下示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Event bubbling</title> </head> <body> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> </body> <script src="event-bubbling.js"></script> </html>
如果要兼听列表的点击事件，需要在列表中注册多少事件监听器?答案是:一个。只需要一个在ul上注册的侦听器就可以截获任何li上的所有单击:
// event-bubbling.js
var ul = document.getElementsByTagName("ul")[0];
function handleClick(event) {
console.log(event);
}
ul.addEventListener("click", handleClick);
可以看到，事件冒泡是提高性能的一种实用方法。实际上，对浏览器来说，注册事件监听器是一项昂贵的操作，而且在出现大量元素列表的情况下，可能会导致性能损失。
用 JS 生成表格
现在咱们开始编码。给定一个对象数组，希望动态生成一个HTML 表格。HTML 表格由 <table> 元素表示。每个表也可以有一个头部，由 <thead> 元素表示。头部可以有一个或多个行 <tr>，每个行都有一个单元格，由一个 <th>元 素表示。如下所示：
<table> <thead> <tr> <th>name</th> <th>height</th> <th>place</th> </tr> </thead> <!-- more stuff here! --> </table>
不止这样，大多数情况下，每个表都有一个主体，由 <tbody> 定义，而 <tbody> 又包含一组行<tr>。每一行都可以有包含实际数据的单元格。表单元格由<td>定义。完整如下所示：
<table> <thead> <tr> <th>name</th> <th>height</th> <th>place</th> </tr> </thead> <tbody> <tr> <td>Monte Falco</td> <td>1658</td> <td>Parco Foreste Casentinesi</td> </tr> <tr> <td>Monte Falterona</td> <td>1654</td> <td>Parco Foreste Casentinesi</td> </tr> </tbody> </table>
现在的任务是从 JS 对象数组开始生成表格。首先，创建一个名为build-table.html的新文件，内容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Build a table</title> </head> <body> <table> <!-- here goes our data! --> </table> </body> <script src="build-table.js"></script> </html>
在相同的文件夹中创建另一个名为build-table.js的文件，并使用以下数组开始：
"use strict";
var mountains = [
{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
{ name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
{ name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
{ name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
{ name: "Monte Amiata", height: 1738, place: "Siena" }
];
考虑这个表格。首先，咱们需要一个 <thead>：
document.createElement('thead')
这没有错，但是仔细查看MDN的表格文档会发现一个有趣的细节。<table> 是一个 HTMLTableElement，它还包含有趣方法。其中最有用的是HTMLTableElement.createTHead()，它可以帮助创建咱们需要的 <thead>。
首先，编写一个生成 thead 标签的函数 generateTableHead
function generateTableHead(table) {
var thead = table.createTHead();
}
该函数接受一个选择器并在给定的表上创建一个 <thead>:
function generateTableHead(table) {
var thead = table.createTHead();
}
var table = document.querySelector("table");
generateTableHead(table);
在浏览器中打开 build-table.html:什么都没有.但是，如果打开浏览器控制台，可以看到一个新的 <thead> 附加到表。
接着填充 header 内容。首先要在里面创建一行。还有另一个方法可以提供帮助:HTMLTableElement.insertRow()。有了这个，咱们就可以扩展方法了：
function generateTableHead (table) {
var thead = table,createThead();
var row = thead.insertRow();
}
此时，我们可以生成我们的行。通过查看源数组，可以看到其中的任何对象都有咱们需要信息：
var mountains = [
{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
{ name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
{ name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
{ name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
{ name: "Monte Amiata", height: 1738, place: "Siena" }
];
这意味着咱们可以将另一个参数传递给我们的函数:一个遍历以生成标题单元格的数组：
function generateTableHead(table, data) {
var thead = table.createTHead();
var row = thead.insertRow();
for (var i = 0; i < data.length; i++) {
var th = document.createElement("th");
var text = document.createTextNode(data[i]);
th.appendChild(text);
row.appendChild(th);
}
}
不幸的是，没有创建单元格的原生方法，因此求助于document.createElement("th")。同样值得注意的是，document.createTextNode(data[i])用于创建文本节点，appendChild()用于向每个标记添加新元素。
当以这种方式创建和操作元素时，我们称之为“命令式” DOM 操作。现代前端库通过支持“声明式”方法来解决这个问题。我们可以声明需要哪些 HTML 元素，而不是一步一步地命令浏览器，其余的由库处理。
回到我们的代码，可以像下面这样使用第一个函数
var table = document.querySelector("table");
var data = Object.keys(mountains[0]);
generateTableHead(table, data);
现在我们可以进一步生成实际表的数据。下一个函数将实现一个类似于generateTableHead的逻辑，但这一次咱们需要两个嵌套的for循环。在最内层的循环中，使用另一种原生方法来创建一系列td。方法是HTMLTableRowElement.insertCell()。在前面创建的文件中添加另一个名为generateTable的函数
function generateTable(table, data) {
for (var i = 0; i < data.length; i++) {
var row = table.insertRow();
for (var key in data[i]) {
var cell = row.insertCell();
var text = document.createTextNode(data[i][key]);
cell.appendChild(text);
}
}
}
调用上面的函数，将 HTML表 和对象数组作为参数传递：
generateTable(table, mountains);
咱们深入研究一下 generateTable 的逻辑。参数 data 是一个与 mountains 相对应的数组。最外层的 for 循环遍历数组并为每个元素创建一行：
function generateTable(table, data) {
for (var i = 0; i < data.length; i++) {
var row = table.insertRow();
// omitted for brevity
}
}
最内层的循环遍历任何给定对象的每个键，并为每个对象创建一个包含键值的文本节点
function generateTable(table, data) {
for (var i = 0; i < data.length; i++) {
var row = table.insertRow();
for (var key in data[i]) {
// inner loop
var cell = row.insertCell();
var text = document.createTextNode(data[i][key]);
cell.appendChild(text);
}
}
}
最终代码：
var mountains = [
{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
{ name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
{ name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
{ name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
{ name: "Monte Amiata", height: 1738, place: "Siena" }
];
function generateTableHead(table, data) {
var thead = table.createTHead();
var row = thead.insertRow();
for (var i = 0; i < data.length; i++) {
var th = document.createElement("th");
var text = document.createTextNode(data[i]);
th.appendChild(text);
row.appendChild(th);
}
}
function generateTable(table, data) {
for (var i = 0; i < data.length; i++) {
var row = table.insertRow();
for (var key in data[i]) {
var cell = row.insertCell();
var text = document.createTextNode(data[i][key]);
cell.appendChild(text);
}
}
}
其中调用：
var table = document.querySelector("table");
var data = Object.keys(mountains[0]);
generateTable(table, mountains);
generateTableHead(table, data);
执行结果：
当然，咱们的方法还可以该进，下个章节将介绍。
总结
DOM 是 web 浏览器保存在内存中的 web 页面的虚拟副本。DOM 操作是指从 DOM 中创建、修改和删除 HTML 元素的操作。在过去，咱们常常依赖 jQuery 来完成更简单的任务，但现在原生 API 已经足够成熟，可以让 jQuery 过时了。另一方面，jQuery 不会很快消失，但是每个 JS 开发人员都必须知道如何使用原生 API 操作 DOM。
这样做的理由有很多，额外的库增加了加载时间和 JS 应用程序的大小。更不用说 DOM 操作在面试中经常出现。
DOM 中每个可用的 HTML 元素都有一个接口，该接口公开一定数量的属性和方法。当你对使用何种方法有疑问时，参考MDN文档。操作 DOM 最常用的方法是 document.createElement()用于创建新的 HTML 元素，document.createTextNode() 用于在 DOM 中创建文本节点。最后但同样重要的是 .appendchild()，用于将新的 HTML 元素或文本节点附加到现有元素。
HTML 元素还能够发出事件，也称为DOM事件。值得注意的事件为“click”、“submit”、“drag”、“drop”等等。DOM 事件有一些特殊的行为，比如“默认”和冒泡。
JS 开发人员可以利用这些属性，特别是对于事件冒泡，这些属性对于加速 DOM 中的事件处理非常有用。虽然对原生 API 有很好的了解是件好事，但是现代前端库提供了不容置疑的好处。用 Angular、React 和 Vue 来构建一个大型的JS应用程序确实是可行的。
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文：https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter8.md
- 上一篇：初识CSS——元素的显示和隐藏
- 下一篇：获取 HTML 元素的位置坐标
相关推荐
- 砌体植筋拉拔试验检验值到底是6.0KN，还是10.2KN，如何计算确定
-
砌体拉结筋植筋养护完成后，需对所植钢筋进行拉拔试验，以检验植筋的锚固强度是否满足设计要求。检测时，按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013，以同品种、同...
- 柴油机功率如何计算?计算柴油机功率需要哪些参数?
-
在汽车领域，对于柴油机功率的计算是一项重要的工作，它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先，我们要了解计算柴油机功率常用的公式。在...
- 变压器短路阻抗的作用和计算方法（变压器短路阻抗的作用和计算方法是什么）
-
变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据，它是二次侧短接并流过额定电流时，一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢？其实变压器的阻抗电压乃是...
- 9.35m层高高支模支撑架计算书（支模架多高属于高支模）
-
某工厂新扩建的建筑面积为1989.2m^2，建筑物总体分为2层，但局部为4层。建筑物檐高19.4m，建筑物总高23m。建筑物呈长方形设置，长度为48.20m，宽度为23.88m，结构形式为框架结构...
- 吊篮(悬挂装置前梁加长)安全复核计算书
-
吊篮（悬挂装置前梁加长）安全复核计算书一种超常规搭设的高处作业吊篮，因使用要求将吊篮悬挂装置前梁加长设置，本计算书针对这种工况的校核，以作参考。计算依据：1、《高处作业吊篮》GB/T19155-...
- 电功率计算公式精编汇总（电功率计算视频讲解）
-
一、电功率计算公式：1在纯直流电路中：P=UIP=I2RP=U2/R式中：P---电功率（W），U---电压（V），I----电流（A），R---电阻（Ω)。2在单相交流电路中：P=UIcosφ...
- 灌注桩承载力检测方法及步骤（灌注桩承载力不够怎么办）
-
检测灌注桩的承载力是确保基础工程安全可靠的关键环节，检测结果的精细能准确为我们提供可靠的数据，让我们能准确判断桩基础的承载力，方便后续施工安排，同样也能让我们根据数据分辨出有问题桩基，采取可靠有效的措...
- 很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法
-
高中数学必看：向量叉乘，体积的神。大家都知道a、b的向量是什么意思，但是a、b的向量又是什么？很多同学都不知道，向量的向量在高中阶段非常有用，虽然它是大学的知识，在高中阶段可以干两件事。·第一件事，表...
- 施工升降机基础(设置在地库顶板回顶)计算书
-
施工升降机基础（设置在地库顶板回顶）计算书计算依据：1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...
- 剪力墙水平钢筋根数如何计算?（剪力墙水平钢筋绑扎搭接规范）
-
剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素，具体步骤如下及依据：1.基本计算公式水平钢筋根数计算公式为：根数=（墙高-起步距离）/间距（墙高-起步距离）/间距...
- 直流电路常用计算公式（直流电路常用计算公式有哪些）
-
1、电阻导体阻碍电流通过的能力叫做电阻，用字母R表示，单位欧(Ω)。R=ρl/s式中R-导体的电阻，欧(Ω)；ρ-导体的电阻率，欧·米(Ω·m)；l-导体的长度，米(m)；s-导体的截面积，平方米(m...
- 电气主电路图的绘制特点（电气原理图主电路）
-
1、电气主电路图中的电气设备、元件，如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制，而母线则水平绘制。电气主电路图除特殊情况外，几乎无一例外地画成单线图，并以母线为核心将各个项目(如...
- 中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)
-
中考物理专题：功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度，需满足两要素：作用在物体上的力、物体沿力方向移动距离。例如推箱子时，若箱子未移动，推力不做功；若箱子滑动，推力做...
- 40亿QQ号，不超过1G内存，如何去重?
-
分享一道网上很火的面试题：40亿QQ号，不超过1G的内存，如何去重？这是一个非常经典的海量数据去重问题，并且做了内存限制，最多只能1GB，本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...
- 填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!
-
今天分享下植筋间距及保护层要求：根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm，植筋为两根及以上时水平间距为不应小于5d（d为钢筋直径）。根据混凝土结构后锚固技...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)