SnailLoveTravel

HTML DOM全解和案例

一、HTML DOM 节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

二、HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

HTML DOM Tree 实例

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

请看下面的 HTML 片段：

DOM 教程

DOM 第一课

Hello world!

从上面的 HTML 中：

节点没有父节点；它是根节点
和的父节点是节点
文本节点 "Hello world!" 的父节点是
节点

并且：

节点拥有两个子节点：和
节点拥有一个子节点：节点</p></li> <li><p><title> 节点也拥有一个子节点：文本节点 "DOM 教程"</p></li> <li><p><h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点</p></li> </ul> <p>并且：</p> <ul class=" list-paddingleft-2"> <li><p><head> 元素是 <html> 元素的首个子节点</p></li> <li><p><body> 元素是 <html> 元素的最后一个子节点</p></li> <li><p><h1> 元素是 <body> 元素的首个子节点</p></li> <li><p><p> 元素是 <body> 元素的最后一个子节点</p></li> </ul> <hr> <h2>警告！</h2> <p>DOM 处理中的常见错误是希望元素节点包含文本。</p> <p>在本例中：<em><title>DOM 教程，元素节点，包含值为 "DOM 教程" 的<em>文本节点</em>。</p> <p>可通过节点的 <em>innerHTML</em> 属性来访问文本节点的值。</p> <p>您将在稍后的章节中学习更多有关 innerHTML 属性的知识。</p> <hr> <p><strong><span style="font-size: 24px;">三、HTML DOM 方法</span></strong></p> <p><strong><span style="font-size: 24px;"></span></strong></p> <hr> <p>方法是我们可以在节点（HTML 元素）上执行的动作。</p> <hr> <h2>编程接口</h2> <p>可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。</p> <p>所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。</p> <p>方法是您能够执行的动作（比如添加或修改元素）。</p> <p>属性是您能够获取或设置的值（比如节点的名称或内容）。</p> <hr> <h2>getElementById() 方法</h2> <p>getElementById() 方法返回带有指定 ID 的元素：</p> <pre>var element=document.getElementById("intro");</pre> <h3>例子</h3> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <p>本例演示 <b>getElementById</b> 方法！</p> <script> x=document.getElementById("intro"); document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>"); </script> </body> </html></pre> <hr> <h2>HTML DOM 对象 - 方法和属性</h2> <p>一些常用的 HTML DOM 方法：</p> <ul class=" list-paddingleft-2"> <li><p>getElementById(id) - 获取带有指定 id 的节点（元素）</p></li> <li><p>appendChild(node) - 插入新的子节点（元素）</p></li> <li><p>removeChild(node) - 删除子节点（元素）</p></li> </ul> <p>一些常用的 HTML DOM 属性：</p> <ul class=" list-paddingleft-2"> <li><p>innerHTML - 节点（元素）的文本值</p></li> <li><p>parentNode - 节点（元素）的父节点</p></li> <li><p>childNodes - 节点（元素）的子节点</p></li> <li><p>attributes - 节点（元素）的属性节点</p></li> </ul> <p>您将在本教程的下一章中学到更多有关属性的知识。</p> <hr> <h2>现实生活中的对象</h2> <p>某个人是一个对象。</p> <p>人的方法可能是 eat(), sleep(), work(), play() 等等。</p> <p>所有人都有这些方法，但会在不同时间执行它们。</p> <p>一个人的属性包括姓名、身高、体重、年龄、性别等等。</p> <p>所有人都有这些属性，但它们的值因人而异。</p> <hr> <h2>一些 DOM 对象方法</h2> <p>这里提供一些您将在本教程中学到的常用方法：</p> <table class="dataintable"> <tbody> <tr class="firstRow"> <th>方法</th> <th>描述</th> </tr> <tr> <td>getElementById()</td> <td>返回带有指定 ID 的元素。</td> </tr> <tr> <td>getElementsByTagName()</td> <td>返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。</td> </tr> <tr> <td>getElementsByClassName()</td> <td>返回包含带有指定类名的所有元素的节点列表。</td> </tr> <tr> <td>appendChild()</td> <td>把新的子节点添加到指定节点。</td> </tr> <tr> <td>removeChild()</td> <td>删除子节点。</td> </tr> <tr> <td>replaceChild()</td> <td>替换子节点。</td> </tr> <tr> <td>insertBefore()</td> <td>在指定的子节点前面插入新的子节点。</td> </tr> <tr> <td>createAttribute()</td> <td>创建属性节点。</td> </tr> <tr> <td>createElement()</td> <td>创建元素节点。</td> </tr> <tr> <td>createTextNode()</td> <td>创建文本节点。</td> </tr> <tr> <td>getAttribute()</td> <td>返回指定的属性值。</td> </tr> <tr> <td>setAttribute()</td> <td style="word-break: break-all;">把指定属性设置或修改为指定的值。</td> </tr> </tbody> </table> <hr> <h1>四、HTML DOM 属性</h1> <hr> <p>属性是节点（HTML 元素）的值，您能够获取或设置。</p> <hr> <h2>编程接口</h2> <p>可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。</p> <p>所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。</p> <p>方法是您能够执行的动作（比如添加或修改元素）。</p> <p>属性是您能够获取或设置的值（比如节点的名称或内容）。</p> <p><strong><span style="font-size: 24px;"></span></strong></p> <hr> <h2>innerHTML 属性</h2> <p>获取元素内容的最简单方法是使用 innerHTML 属性。</p> <p>innerHTML 属性对于获取或替换 HTML 元素的内容很有用。</p> <h3>实例</h3> <p>下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：</p> <h3>实例</h3> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <script> var txt=document.getElementById("intro").innerHTML; document.write(txt); </script> </body> </html></pre> <p><br></p> <hr> <p>在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。</p> <p>innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。</p> <hr> <h2>nodeName 属性</h2> <p>nodeName 属性规定节点的名称。</p> <ul class=" list-paddingleft-2"> <li><p>nodeName 是只读的</p></li> <li><p>元素节点的 nodeName 与标签名相同</p></li> <li><p>属性节点的 nodeName 与属性名相同</p></li> <li><p>文本节点的 nodeName 始终是 #text</p></li> <li><p>文档节点的 nodeName 始终是 #document</p></li> </ul> <p class="note">注释：nodeName 始终包含 HTML 元素的大写字母标签名。</p> <hr> <h2>nodeValue 属性</h2> <p>nodeValue 属性规定节点的值。</p> <ul class=" list-paddingleft-2"> <li><p>元素节点的 nodeValue 是 undefined 或 null</p></li> <li><p>文本节点的 nodeValue 是文本本身</p></li> <li><p>属性节点的 nodeValue 是属性值</p></li> </ul> <hr> <h2>获取元素的值</h2> <p>下面的例子会取回 <p id="intro"> 标签的文本节点值：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body> </html></pre> <hr> <h2>nodeType 属性</h2> <p>nodeType 属性返回节点的类型。nodeType 是只读的。</p> <p>比较重要的节点类型有：</p> <table class="dataintable" width="60"> <tbody> <tr class="firstRow"> <th>元素类型</th> <th>NodeType</th> </tr> <tr> <td style="word-break: break-all;">元素</td> <td>1</td> </tr> <tr> <td>属性</td> <td>2</td> </tr> <tr> <td>文本</td> <td>3</td> </tr> <tr> <td>注释</td> <td>8</td> </tr> <tr> <td style="word-break: break-all;">文档</td> <td>9</td> </tr> </tbody> </table> <hr> <strong><span style="font-size: 24px;">五、HTML DOM 访问</span></strong> <hr> <p>访问 HTML DOM - 查找 HTML 元素。</p> <hr> <h2>访问 HTML 元素（节点）</h2> <p>访问 HTML 元素等同于访问节点</p> <p>您能够以不同的方式来访问 HTML 元素：</p> <ul class=" list-paddingleft-2"> <li><p>通过使用 getElementById() 方法</p></li> <li><p>通过使用 getElementsByTagName() 方法</p></li> <li><p>通过使用 getElementsByClassName() 方法</p></li> </ul> <hr> <h2>getElementById() 方法</h2> <p>getElementById() 方法返回带有指定 ID 的元素：</p> <h3>语法</h3> <pre>node.getElementById("id");</pre> <p>下面的例子获取 id="intro" 的元素：</p> <h3>实例</h3> <pre>document.getElementById("intro");</pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <p>本例演示 <b>getElementById</b> 方法！</p> <script> x=document.getElementById("intro"); document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>"); </script> </body> </html></pre> <hr> <h2>getElementsByTagName() 方法</h2> <p>getElementsByTagName() 返回带有指定标签名的所有元素。</p> <h3>语法</h3> <pre>node.getElementsByTagName("tagname");</pre> <p>下面的例子返回包含文档中所有 <p> 元素的列表：</p> <h3>实例 1</h3> <pre>document.getElementsByTagName("p");</pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p>Hello World!</p> <p>DOM 很有用！</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> <script> x=document.getElementsByTagName("p"); document.write("第一段的文本: " + x[0].innerHTML); </script> </body> </html></pre> <p><strong><span style="font-size: 24px;"></span></strong></p> <p>下面的例子返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：</p> <h3>实例 2</h3> <pre>document.getElementById("main").getElementsByTagName("p");</pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p>Hello World!</p> <div id="main"> <p>DOM 很有用！</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> </div> <script> x=document.getElementById("main").getElementsByTagName("p"); document.write("div 中的第一段的文本: " + x[0].innerHTML); </script> </body> </html></pre> <hr> <h2>getElementsByClassName() 方法</h2> <p>如果您希望查找带有相同类名的所有 HTML 元素，请使用这个方法：</p> <pre>document.getElementsByClassName("intro");</pre> <p>上面的例子返回包含 class="intro" 的所有元素的一个列表：</p> <p class="note">注释：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。</p> <hr> <p><strong><span style="font-size: 24px;">六、HTML DOM - 修改</span></strong></p> <p><span style="font-size: 24px;"></span></p> <hr> <p>修改 HTML = 改变元素、属性、样式和事件。</p> <p><span style="font-size: 24px;"></span></p> <hr> <h2>修改 HTML 元素</h2> <p>修改 HTML DOM 意味着许多不同的方面：</p> <ul class=" list-paddingleft-2"> <li><p>改变 HTML 内容</p></li> <li><p>改变 CSS 样式</p></li> <li><p>改变 HTML 属性</p></li> <li><p>创建新的 HTML 元素</p></li> <li><p>删除已有的 HTML 元素</p></li> <li><p>改变事件（处理程序）</p></li> </ul> <p>在接下来的章节，我们会深入学习修改 HTML DOM 的常用方法。</p> <p><span style="font-size: 24px;"></span></p> <hr> <h2>创建 HTML 内容</h2> <p>改变元素内容的最简答的方法是使用 innerHTML 属性。</p> <p>下面的例子改变一个 <p> 元素的 HTML 内容：</p> <h3>实例</h3> <pre><!DOCTYPE html> <html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script> <p>上面的段落被一段脚本改变了。</p> </body> </html></pre> <p class="tip">提示：我们将在下面的章节为您解释例子中的细节。</p> <hr> <h2>改变 HTML 样式</h2> <p>通过 HTML DOM，您能够访问 HTML 元素的样式对象。</p> <p>下面的例子改变一个段落的 HTML 样式：</p> <h3>实例</h3> <pre><html> <body> <p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; </script> </body> </html></pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p id="p1">Hello world!</p> <p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script> </body> </html></pre> <hr> <h2>创建新的 HTML 元素</h2> <p>如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。</p> <h3>实例</h3> <pre><div id="d1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("d1"); element.appendChild(para); </script></pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html></pre> <p><span style="font-size: 24px;"></span></p> <hr> <h1>七、HTML DOM - 修改 HTML 内容</h1> <p><span style="font-size: 24px;"></span></p> <hr> <p>通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素。</p> <p><span style="font-size: 24px;"></span></p> <hr> <p><br></p> <h2>改变 HTML 内容</h2> <p>改变元素内容的最简答的方法是使用 innerHTML 属性。</p> <p>下面的例子更改 <p> 元素的 HTML 内容：</p> <h3>实例</h3> <pre><html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script> </body> </html></pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script> <p>上面的段落被一段脚本改变了。</p> </body> </html></pre> <hr> <h2>改变 HTML 样式</h2> <p>通过 HTML DOM，您能够访问 HTML 对象的样式对象。</p> <p>下面的例子更改段落的 HTML 样式：</p> <h3>实例</h3> <pre><html> <body> <p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; </script> </body> </html></pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p id="p1">Hello world!</p> <p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script> </body> </html></pre> <hr> <h2>使用事件</h2> <p>HTML DOM 允许您在事件发生时执行代码。</p> <p>当 HTML 元素”有事情发生“时，浏览器就会生成事件：</p> <ul class=" list-paddingleft-2"> <li><p>在元素上点击</p></li> <li><p>加载页面</p></li> <li><p>改变输入字段</p></li> </ul> <p>你可以在下一章学习更多有关事件的内容。</p> <p>下面两个例子在按钮被点击时改变 <body> 元素的背景色：</p> <h3>实例</h3> <pre><html> <body> <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color" /> </body> </html></pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="改变背景色"> </body> </html></pre> <p><span style="font-size: 24px;"></span></p> <p>在本例中，由函数执行相同的代码：</p> <h3>实例</h3> <pre><html> <body> <script> function ChangeBackground() { document.body.style.backgroundColor="lavender"; } </script> <input type="button" onclick="ChangeBackground()" value="Change background color" /> </body> </html></pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <script> function ChangeBackground() { document.body.style.backgroundColor="lavender"; } </script> <input type="button" onclick="ChangeBackground()" value="改变背景色" /> </body> </html></pre> <p>下面的例子在按钮被点击时改变 <p> 元素的文本：</p> <h3>实例</h3> <pre><html> <body> <p id="p1">Hello world!</p> <script> function ChangeText() { document.getElementById("p1").innerHTML="New text!"; } </script> <input type="button" onclick="ChangeText()" value="Change text"> </body> </html></pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p id="p1">Hello world!</p> <script> function ChangeText() { document.getElementById("p1").innerHTML="New text!"; } </script> <input type="button" onclick="ChangeText()" value="改变文本" /> </body> </html></pre> <hr> <p><strong><span style="font-size: 24px;">八、HTML DOM - 元素</span></strong></p> <p><strong><span style="font-size: 24px;"></span></strong></p> <hr> <p>添加、删除和替换 HTML 元素。</p> <p><strong><span style="font-size: 24px;"></span></strong></p> <hr> <h2>创建新的 HTML 元素 - appendChild()</h2> <p>如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。</p> <h3>实例</h3> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html></pre> <p><strong><span style="font-size: 24px;"></span></strong></p> <h3>例子解释</h3> <p>这段代码创建了一个新的 <p> 元素：</p> <pre>var para=document.createElement("p");</pre> <p>如需向 <p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：</p> <pre>var node=document.createTextNode("This is a new paragraph.");</pre> <p>然后您必须向 <p> 元素追加文本节点：</p> <pre>para.appendChild(node);</pre> <p>最后，您必须向已有元素追加这个新元素。</p> <p>这段代码查找到一个已有的元素：</p> <pre>var element=document.getElementById("div1");</pre> <p>这段代码向这个已存在的元素追加新元素：</p> <pre>element.appendChild(para);</pre> <h2>创建新的 HTML 元素 - insertBefore()</h2> <p>上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。</p> <p>如果不希望如此，您可以使用 insertBefore() 方法：</p> <h3>实例</h3> <pre><div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.insertBefore(para,child); </script></pre> <p>编写代码：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.insertBefore(para,child); </script> </body> </html></pre> <h2>删除已有的 HTML 元素</h2> <p>如需删除 HTML 元素，您必须清楚该元素的父元素：</p> <h3>实例</h3> <pre><div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script></pre> <p>编写代码：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script> </body> </html></pre> <h3>例子解释</h3> <p>这个 HTML 文档包含一个带有两个子节点（两个 <p> 元素）的 <div> 元素：</p> <pre><div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div></pre> <p>查找 id="div1" 的元素：</p> <pre>var parent=document.getElementById("div1");</pre> <p>查找 id="p1" 的 <p> 元素：</p> <pre>var child=document.getElementById("p1");</pre> <p>从父元素中删除子元素：</p> <pre>parent.removeChild(child);</pre> <p class="tip">提示：能否在不引用父元素的情况下删除某个元素？</p> <p>很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。</p> <p>这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：</p> <pre>var child=document.getElementById("p1"); child.parentNode.removeChild(child);</pre> <h2>替换 HTML 元素</h2> <p>如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：</p> <h3>实例</h3> <pre><div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.replaceChild(para,child); </script></pre> <p>编写代码：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); parent.replaceChild(para,child); </script> </body> </html></pre> <hr> <p><strong><span style="font-size: 24px;">九、HTML DOM - 事件</span></strong></p> <p><span style="font-size: 24px;"></span></p> <hr> <p>HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。</p> <hr> <h2>对事件作出反应</h2> <p>当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。</p> <p>如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：</p> <pre>onclick=JavaScript</pre> <p>HTML 事件的例子：</p> <ul class=" list-paddingleft-2"> <li><p>当用户点击鼠标时</p></li> <li><p>当网页已加载时</p></li> <li><p>当图片已加载时</p></li> <li><p>当鼠标移动到元素上时</p></li> <li><p>当输入字段被改变时</p></li> <li><p>当 HTML 表单被提交时</p></li> <li><p>当用户触发按键时</p></li> </ul> <p>在本例中，当用户点击时，会改变 <h1> 元素的内容：</p> <h3>实例</h3> <pre><!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1> </body> </html></pre> <p><span style="font-size: 24px;"></span>代码实现：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='hello!'">请点击这段文本！</h1> </body> </html></pre> <p>在本例中，会从事件处理程序中调用函数：</p> <h3>实例</h3> <pre><!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="hello!"; } </script> </head> <body> <h1 onclick="changetext(this)">请点击这段文本!</h1> </body> </html></pre> <p>代码实现：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="hello!"; } </script> </head> <body> <h1 onclick="changetext(this)">请点击这段文本！</h1> </body> </html></pre> <hr> <h2>HTML 事件属性</h2> <p>如需向 HTML 元素分配事件，您可以使用事件属性。</p> <h3>实例</h3> <p>向 button 元素分配一个 onclick 事件：</p> <pre><button onclick="displayDate()">试一试</button></pre> <p>代码实现：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p>点击按钮来执行 <b>displayDate()</b> 函数。</p> <button onclick="displayDate()">试一试</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html></pre> <p>在上面的例子中，当点击按钮时，会执行名为 displayDate 的函数。</p> <hr> <h2>使用 HTML DOM 来分配事件</h2> <p>HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：</p> <h3>实例</h3> <p>为 button 元素分配 onclick 事件：</p> <pre><script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script></pre> <p>代码实现：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> </head> <body> <p>点击按钮来执行 <b>displayDate()</b> 函数。</p> <button id="myBtn">试一试</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html></pre> <p>在上面的例子中，名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。</p> <p>当按钮被点击时，将执行函数。</p> <hr> <h2>onload 和 onunload 事件</h2> <p>当用户进入或离开页面时，会触发 onload 和 onunload 事件。</p> <p>onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。</p> <p>onload 和 onunload 事件可用于处理 cookies。</p> <h3>实例</h3> <pre><body onload="checkCookies()"></pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body onload="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("Cookies are enabled") } else { alert("Cookies are not enabled") } } </script> <p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p> </body> </html></pre> <hr> <h2>onchange 事件</h2> <p>onchange 事件常用于输入字段的验证。</p> <p>下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。</p> <h3>实例</h3> <pre><input type="text" id="fname" onchange="upperCase()"></pre> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script> function myFunction() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 请输入你的英文名：<input type="text" id="fname" onchange="myFunction()"> <p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p> </body> </html></pre> <hr> <h2>onmouseover 和 onmouseout 事件</h2> <p>onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。</p> <h3>实例</h3> <p>一个简单的 onmouseover-onmouseout 例子：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;"> Mouse Over Me </div> <script> function mOver(obj) { obj.innerHTML="谢谢你" } function mOut(obj) { obj.innerHTML="把鼠标指针移动到上面" } </script> </body> </html></pre> <hr> <h2>onmousedown、onmouseup 以及 onclick 事件</h2> <p>onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。</p> <h3>实例</h3> <p>一个简单的 onmousedown-onmouseup 实例：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;"> 点击这里 </div> <script> function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="松开鼠标" } function mUp(obj) { obj.style.backgroundColor="#D94A38"; obj.innerHTML="谢谢你" } </script> </body> </html></pre> <hr> <h1>十、HTML DOM - 导航</h1> <hr> <p>通过 HTML DOM，您能够使用节点关系在节点树中导航。</p> <h2>HTML DOM 节点列表</h2> <p>getElementsByTagName() 方法返回<em>节点列表</em>。节点列表是一个节点数组。</p> <p>下面的代码选取文档中的所有 <p> 节点：</p> <h3>实例</h3> <pre>var x=document.getElementsByTagName("p");</pre> <p>可以通过下标号访问这些节点。如需访问第二个 <p>，您可以这么写：</p> <pre>y=x[1];</pre> <p>代码实现：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p>Hello World!</p> <p>DOM 很有用！</p> <script> x=document.getElementsByTagName("p"); document.write("第二段的 innerHTML 是: " + x[1].innerHTML); </script> </body> </html></pre> <p class="note">注释：下标号从 0 开始。</p> <hr> <h2>HTML DOM 节点列表长度</h2> <p>length 属性定义节点列表中节点的数量。</p> <p>您可以使用 length 属性来循环节点列表：</p> <h3>实例</h3> <pre>x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br />"); }</pre> <p>代码实现：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p>Hello World!</p> <p>DOM 很有用！</p> <p>本例演示 <b>length</b> 属性。</p> <script> x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br>"); } </script> </body> </html></pre> <h3>例子解释：</h3> <ul class=" list-paddingleft-2"> <li><p>获取所有 <p> 元素节点</p></li> <li><p>输出每个 <p> 元素的文本节点的值</p></li> </ul> <hr> <h2>导航节点关系</h2> <p>您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。</p> <p>请看下面的 HTML 片段：</p> <pre><html> <body> <p>Hello World!</p> <div> <p>DOM 很有用!</p> <p>本例演示节点关系。</p> </div> </body> </html></pre> <ul class=" list-paddingleft-2"> <li><p>首个 <p> 元素是 <body> 元素的首个子元素（firstChild）</p></li> <li><p><div> 元素是 <body> 元素的最后一个子元素（lastChild）</p></li> <li><p><body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）</p></li> </ul> <p>firstChild 属性可用于访问元素的文本：</p> <h3>实例</h3> <pre><html> <body> <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body> </html></pre> <p>代码实现：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); </script> </body> </html></pre> <hr> <h2>DOM 根节点</h2> <p>这里有两个特殊的属性，可以访问全部文档：</p> <ul class=" list-paddingleft-2"> <li><p>document.documentElement - 全部文档</p></li> <li><p>document.body - 文档的主体</p></li> </ul> <h3>实例</h3> <pre><html> <body> <p>Hello World!</p> <div> <p>DOM 很有用!</p> <p>本例演示 <b>document.body</b> 属性。</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html></pre> <p>代码实现：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p>Hello World!</p> <div> <p>DOM 很有用！</p> <p>本例演示 <b>document.body</b> 属性。</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html></pre> <hr> <h2>childNodes 和 nodeValue</h2> <p>除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。</p> <p>下面的代码获取 id="intro" 的 <p> 元素的值：</p> <h3>实例</h3> <pre><html> <body> <p id="intro">Hello World!</p> <script> var txt=document.getElementById("intro").childNodes[0].nodeValue; document.write(txt); </script> </body> </html></pre> <p>代码实现：</p> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <p id="intro">Hello World!</p> <script> txt=document.getElementById("intro").childNodes[0].nodeValue; document.write(txt); </script> </body> </html></pre> <p>在上面的例子中，getElementById 是一个方法，而 childNodes 和 nodeValue 是属性。</p> <p>在本教程中，我们将使用 innerHTML 属性。不过，学习上面的方法有助于对 DOM 树结构和导航的理解。</p> <p><br></p> <p><br></p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1176765134035562496"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(HTML,DOM,JavaScript,window)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835513699826233344.htm" title="android系统selinux中添加新属性property" target="_blank">android系统selinux中添加新属性property</a> <span class="text-muted">辉色投像</span> <div>1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835508131489214464.htm" title="高级编程--XML+socket练习题" target="_blank">高级编程--XML+socket练习题</a> <span class="text-muted">masa010</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j</div> </li> <li><a href="/article/1835504596898902016.htm" title="linux sdl windows.h,Windows下的SDL安装" target="_blank">linux sdl windows.h,Windows下的SDL安装</a> <span class="text-muted">奔跑吧linux内核</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/sdl/1.htm">sdl</a><a class="tag" taget="_blank" href="/search/windows.h/1.htm">windows.h</a> <div>首先你要下载并安装SDL开发包。如果装在C盘下，路径为C:\SDL1.2.5如果在WINDOWS下。你可以按以下步骤：1.打开VC++，点击"Tools",Options2,点击directories选项3.选择"Includefiles"增加一个新的路径。"C:\SDL1.2.5\include"4，现在选择"Libaryfiles“增加"C:\SDL1.2.5\lib"现在你可以开始编写你的第</div> </li> <li><a href="/article/1835503712899002368.htm" title="linux中sdl的使用教程,sdl使用入门" target="_blank">linux中sdl的使用教程,sdl使用入门</a> <span class="text-muted">Melissa Corvinus</span> <a class="tag" taget="_blank" href="/search/linux%E4%B8%ADsdl%E7%9A%84%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/1.htm">linux中sdl的使用教程</a> <div>本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一</div> </li> <li><a href="/article/1835502705553010688.htm" title="LLM 词汇表" target="_blank">LLM 词汇表</a> <span class="text-muted">落难Coder</span> <a class="tag" taget="_blank" href="/search/LLMs/1.htm">LLMs</a><a class="tag" taget="_blank" href="/search/NLP/1.htm">NLP</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">大语言模型</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/llama/1.htm">llama</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数</div> </li> <li><a href="/article/1835502704827396096.htm" title="将cmd中命令输出保存为txt文本文件" target="_blank">将cmd中命令输出保存为txt文本文件</a> <span class="text-muted">落难Coder</span> <a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/window/1.htm">window</a> <div>最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再</div> </li> <li><a href="/article/1835502578050363392.htm" title="PHP环境搭建详细教程" target="_blank">PHP环境搭建详细教程</a> <span class="text-muted">好看资源平台</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835491859351302144.htm" title="Python 实现图片裁剪（附代码） | Python工具" target="_blank">Python 实现图片裁剪（附代码） | Python工具</a> <span class="text-muted">剑客阿良_ALiang</span> <div>前言本文提供将图片按照自定义尺寸进行裁剪的工具方法，一如既往的实用主义。环境依赖ffmpeg环境安装，可以参考我的另一篇文章：windowsffmpeg安装部署_阿良的博客-CSDN博客本文主要使用到的不是ffmpeg，而是ffprobe也在上面这篇文章中的zip包中。ffmpy安装：pipinstallffmpy-ihttps://pypi.douban.com/simple代码不废话了，上代码</div> </li> <li><a href="/article/1835463874560749568.htm" title="用Python实现简单的猜数字游戏" target="_blank">用Python实现简单的猜数字游戏</a> <span class="text-muted">程序媛了了</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>猜数字游戏代码：importrandomdefpythonit():a=random.randint(1,100)n=int(input("输入你猜想的数字："))whilen!=a:ifn>a:print("很遗憾，猜大了")n=int(input("请再次输入你猜想的数字："))elifna::如果玩家猜的数字n大于随机数字a，则输出"很遗憾，猜大了"，并提示玩家再次输入。elifn<a::如</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835448111909138432.htm" title="react-intl——react国际化使用方案" target="_blank">react-intl——react国际化使用方案</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf</div> </li> <li><a href="/article/1835440421300432896.htm" title="2023最详细的Python安装教程（Windows版本）" target="_blank">2023最详细的Python安装教程（Windows版本）</a> <span class="text-muted">程序员林哥</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>python安装是学习pyhon第一步，很多刚入门小白不清楚如何安装python，今天我来带大家完成python安装与配置，跟着我一步步来，很简单，你肯定能完成。第一部分：python安装（一）准备工作1、下载和安装python(认准官方网站)当然你不想去下载的话也可以分享给你，还有入门学习教程，点击下方卡片跳转进群领取（二）开始安装对于Windows操作系统，可以下载“executableins</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> <span class="text-muted">夜空_2cd3</span> <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835425043241332736.htm" title="windows下python opencv ffmpeg读取摄像头实现rtsp推流拉流" target="_blank">windows下python opencv ffmpeg读取摄像头实现rtsp推流拉流</a> <span class="text-muted">图像处理大大大大大牛啊</span> <a class="tag" taget="_blank" href="/search/opencv%E5%AE%9E%E6%88%98%E4%BB%A3%E7%A0%81%E8%AE%B2%E8%A7%A3/1.htm">opencv实战代码讲解</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E8%A7%89%E5%9B%BE%E5%83%8F%E9%A1%B9%E7%9B%AE/1.htm">视觉图像项目</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/opencv/1.htm">opencv</a> <div>windows下pythonopencvffmpeg读取摄像头实现rtsp推流拉流整体流程1.下载所需文件1.1下载rtsp推流服务器1.2下载ffmpeg2.开启RTSP服务器3.opencv读取摄像头并调用ffmpeg进行推流4.opencv进行拉流5.opencv异步拉流整体流程1.下载所需文件1.1下载rtsp推流服务器下载RTSP服务器下载页面https://github.com/blu</div> </li> <li><a href="/article/1835420248896008192.htm" title="使用由 Python 编写的 lxml 实现高性能 XML 解析" target="_blank">使用由 Python 编写的 lxml 实现高性能 XML 解析</a> <span class="text-muted">hunyxv</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>转载自：文章lxml简介Python从来不出现XML库短缺的情况。从2.0版本开始，它就附带了xml.dom.minidom和相关的pulldom以及SimpleAPIforXML(SAX)模块。从2.4开始，它附带了流行的ElementTreeAPI。此外，很多第三方库可以提供更高级别的或更具有python风格的接口。尽管任何XML库都足够处理简单的DocumentObjectModel(DOM</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> <span class="text-muted">hai40587</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> <span class="text-muted">和自己一起成长</span> <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835401975269781504.htm" title="vue render 函数详解 (配参数详解)" target="_blank">vue render 函数详解 (配参数详解)</a> <span class="text-muted">你的眼睛會笑</span> <a class="tag" taget="_blank" href="/search/vue2/1.htm">vue2</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> <span class="text-muted">清风怎不知意</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> <span class="text-muted">陈在天box</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/45.htm" title="安装数据库首次应用" target="_blank">安装数据库首次应用</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>可是为什么再一次失败之后就变成直接跳过那个要求 enter full pathname of java.exe的界面这个java.exe是你的Oracle 11g安装目录中例如：【F:\app\chen\product\11.2.0\dbhome_1\jdk\jre\bin】下的java.exe 。不是你的电脑安装的java jdk下的java.exe！注意第一次，使用SQL D</div> </li> <li><a href="/article/172.htm" title="Weblogic Server Console密码修改和遗忘解决方法" target="_blank">Weblogic Server Console密码修改和遗忘解决方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/Welogic/1.htm">Welogic</a> <div> 在工作中一同事将Weblogic的console的密码忘记了，通过网上查询资料解决，实践整理了一下。一.修改Console密码打开weblogic控制台，安全领域 --> myrealm -->&n</div> </li> <li><a href="/article/299.htm" title="IllegalStateException: Cannot forward a response that is already committed" target="_blank">IllegalStateException: Cannot forward a response that is already committed</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Servlets/1.htm">Servlets</a> <div>对于初学者来说，一个常见的误解是：当调用 forward() 或者 sendRedirect() 时控制流将会自动跳出原函数。标题所示错误通常是基于此误解而引起的。示例代码： protected void doPost() { if (someCondition) { sendRedirect(); } forward(); // Thi</div> </li> <li><a href="/article/426.htm" title="基于流的装饰设计模式" target="_blank">基于流的装饰设计模式</a> <span class="text-muted">木zi_鸣</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>当想要对已有类的对象进行功能增强时，可以定义一个类，将已有对象传入，基于已有的功能，并提供加强功能。自定义的类成为装饰类模仿BufferedReader，对Reader进行包装，体现装饰设计模式装饰类通常会通过构造方法接受被装饰的对象，并基于被装饰的对象功能，提供更强的功能。装饰模式比继承灵活，避免继承臃肿，降低了类与类之间的关系装饰类因为增强已有对象，具备的功能该</div> </li> <li><a href="/article/553.htm" title="Linux中的uniq命令" target="_blank">Linux中的uniq命令</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux命令uniq的作用是过滤重复部分显示文件内容，这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个及以后更多个重复行将被删去，行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中。输入文件和输出文件必须不同。如果输入文件用“- ”表示，则从标准输入读取。 AD： uniq [选项] 文件说明：这个命令读取输入文件，并比较相邻的行。在正常情况下，第二个</div> </li> <li><a href="/article/680.htm" title="正则表达式Pattern" target="_blank">正则表达式Pattern</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/Pattern/1.htm">Pattern</a> <div>正则表达式是符合一定规则的表达式，用来专门操作字符串，对字符创进行匹配，切割，替换，获取。例如，我们需要对QQ号码格式进行检验规则是长度6~12位不能0开头只能是数字，我们可以一位一位进行比较，利用parseLong进行判断，或者是用正则表达式来匹配[1-9][0-9]{4,14} 或者 [1-9]\d{4,14} &nbs</div> </li> <li><a href="/article/807.htm" title="Oracle高级查询之OVER (PARTITION BY ..)" target="_blank">Oracle高级查询之OVER (PARTITION BY ..)</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>一、rank()/dense_rank() over(partition by ...order by ...) 现在客户有这样一个需求，查询每个部门工资最高的雇员的信息，相信有一定oracle应用知识的同学都能写出下面的SQL语句： select e.ename, e.job, e.sal, e.deptno from scott.emp e, (se</div> </li> <li><a href="/article/934.htm" title="Python调试" target="_blank">Python调试</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pdb/1.htm">pdb</a> <div>原文地址： http://blog.csdn.net/xuyuefei1988/article/details/19399137 1、下面网上收罗的资料初学者应该够用了，但对比IBM的Python 代码调试技巧： IBM：包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试： http://www.ibm.com/d</div> </li> <li><a href="/article/1061.htm" title="webservice传递自定义对象时函数为空，以及boolean不对应的问题" target="_blank">webservice传递自定义对象时函数为空，以及boolean不对应的问题</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div>今天在客户端调用方法 NodeStatus status=iservice.getNodeStatus(). 结果NodeStatus的属性都是null。进行debug之后，发现服务器端返回的确实是有值的对象。后来发现原来是因为在客户端，NodeStatus的setter全部被我删除了。本来是因为逻辑上不需要在客户端使用setter，结果改了之后竟然不能获取带属性值的</div> </li> <li><a href="/article/1188.htm" title="java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针" target="_blank">java如何干掉指针，又如何巧妙的通过引用来操作指针————>说的就是java指针</a> <span class="text-muted">百合不是茶</span> <div>C语言的强大在于可以直接操作指针的地址，通过改变指针的地址指向来达到更改地址的目的,又是由于c语言的指针过于强大，初学者很难掌握， java的出现解决了c，c++中指针的问题 java将指针封装在底层，开发人员是不能够去操作指针的地址，但是可以通过引用来间接的操作：定义一个指针p来指向a的地址（&是地址符号）： </div> </li> <li><a href="/article/1315.htm" title="Eclipse打不开，提示“An error has occurred.See the log file ***/.log”" target="_blank">Eclipse打不开，提示“An error has occurred.See the log file ***/.log”</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>打开eclipse工作目录的\.metadata\.log文件，发现如下错误： !ENTRY org.eclipse.osgi 4 0 2012-09-10 09:28:57.139 !MESSAGE Application error !STACK 1 java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContai</div> </li> <li><a href="/article/1442.htm" title="spring aop实例annotation方法实现" target="_blank">spring aop实例annotation方法实现</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a><a class="tag" taget="_blank" href="/search/annotation/1.htm">annotation</a> <div> 在spring aop实例中我们通过配置xml文件来实现AOP，这里学习使用annotation来实现，使用annotation其实就是指明具体的aspect,pointcut和advice。1.申明一个切面(用一个类来实现)在这个切面里,包括了advice和pointcut AdviceMethods.jav</div> </li> <li><a href="/article/1569.htm" title="[Velocity一]Velocity语法基础入门" target="_blank">[Velocity一]Velocity语法基础入门</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a> <div>用户和开发人员参考文档 http://velocity.apache.org/engine/releases/velocity-1.7/developer-guide.html 注释 1.行级注释## 2.多行注释#* *# 变量定义使用$开头的字符串是变量定义，例如$var1, $var2, 赋值使用#set为变量赋值，例</div> </li> <li><a href="/article/1696.htm" title="【Kafka十一】关于Kafka的副本管理" target="_blank">【Kafka十一】关于Kafka的副本管理</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>1. 关于request.required.acks request.required.acks控制者Producer写请求的什么时候可以确认写成功，默认是0， 0表示即不进行确认即返回。 1表示Leader写成功即返回，此时还没有进行写数据同步到其它Follower Partition中 -1表示根据指定的最少Partition确认后才返回，这个在 Th</div> </li> <li><a href="/article/1823.htm" title="lua统计nginx内部变量数据" target="_blank">lua统计nginx内部变量数据</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lua+nginx%E3%80%80+%E7%BB%9F%E8%AE%A1/1.htm">lua nginx　统计</a> <div>server { listen 80; server_name photo.domain.com; location /{set $str $uri; content_by_lua ' local url = ngx.var.uri local res = ngx.location.capture(</div> </li> <li><a href="/article/1950.htm" title="java-11.二叉树中节点的最大距离" target="_blank">java-11.二叉树中节点的最大距离</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.List; public class MaxLenInBinTree { /* a. 1 / \ 2 3 / \ / \ 4 5 6 7 max=4 pass "root" </div> </li> <li><a href="/article/2077.htm" title="Netty源码学习-ReadTimeoutHandler" target="_blank">Netty源码学习-ReadTimeoutHandler</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div> ReadTimeoutHandler的实现思路：开启一个定时任务，如果在指定时间内没有接收到消息，则抛出ReadTimeoutException 这个异常的捕获，在开发中，交给跟在ReadTimeoutHandler后面的ChannelHandler，例如 private final ChannelHandler timeoutHandler = new ReadTim</div> </li> <li><a href="/article/2204.htm" title="jquery验证上传文件样式及大小(好用)" target="_blank">jquery验证上传文件样式及大小(好用)</a> <span class="text-muted">cngolon</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a><a class="tag" taget="_blank" href="/search/jquery%E9%AA%8C%E8%AF%81/1.htm">jquery验证</a> <div><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.</div> </li> <li><a href="/article/2331.htm" title="浏览器兼容【转】" target="_blank">浏览器兼容【转】</a> <span class="text-muted">cuishikuan</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/IE/1.htm">IE</a> <div>浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100% 解决方案：CSS里 *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设</div> </li> <li><a href="/article/2458.htm" title="Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数" target="_blank">Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%24%23/1.htm">$#</a><a class="tag" taget="_blank" href="/search/%24%3F/1.htm">$?</a><a class="tag" taget="_blank" href="/search/%E7%89%B9%E6%AE%8A%E5%8F%98%E9%87%8F/1.htm">特殊变量</a> <div>前面已经讲到，变量名只能包含数字、字母和下划线，因为某些包含其他字符的变量有特殊含义，这样的变量被称为特殊变量。例如，$ 表示当前Shell进程的ID，即pid，看下面的代码： $echo $$ 运行结果 29949 特殊变量列表变量含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数。n 是一个数字，表示第几个参数。例如，第一个</div> </li> <li><a href="/article/2585.htm" title="程序设计KISS 原则-------KEEP IT SIMPLE, STUPID!" target="_blank">程序设计KISS 原则-------KEEP IT SIMPLE, STUPID!</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div>翻到一本书，讲到编程一般原则是kiss：Keep It Simple, Stupid.对这个原则深有体会，其实不仅编程如此，而且系统架构也是如此。 KEEP IT SIMPLE, STUPID! 编写只做一件事情，并且要做好的程序；编写可以在一起工作的程序，编写处理文本流的程序，因为这是通用的接口。这就是UNIX哲学.所有的哲学真正的浓缩为一个铁一样的定律，高明的工程师的神圣的“KISS 原</div> </li> <li><a href="/article/2712.htm" title="android Activity间List传值" target="_blank">android Activity间List传值</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Activity/1.htm">Activity</a> <div>第一个Activity： import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import a</div> </li> <li><a href="/article/2839.htm" title="tomcat 设置java虚拟机内存" target="_blank">tomcat 设置java虚拟机内存</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/tomcat+%E5%86%85%E5%AD%98%E8%AE%BE%E7%BD%AE/1.htm">tomcat 内存设置</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2117772 http://eksliang.iteye.com/ 常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError: Java heap space ------------</div> </li> <li><a href="/article/2966.htm" title="Android 数据库事务处理" target="_blank">Android 数据库事务处理</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>使用SQLiteDatabase的beginTransaction()方法可以开启一个事务，程序执行到endTransaction() 方法时会检查事务的标志是否为成功，如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务，如果没有调用setTransactionSuccessful() 方法则回滚事务。事</div> </li> <li><a href="/article/3093.htm" title="Java 打开浏览器" target="_blank">Java 打开浏览器</a> <span class="text-muted">hw1287789687</span> <a class="tag" taget="_blank" href="/search/%E6%89%93%E5%BC%80%E7%BD%91%E5%9D%80/1.htm">打开网址</a><a class="tag" taget="_blank" href="/search/open%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">open浏览器</a><a class="tag" taget="_blank" href="/search/open+browser/1.htm">open browser</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%BC%80url/1.htm">打开url</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%BC%80%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">打开浏览器</a> <div>使用java 语言如何打开浏览器呢? 我们先研究下在cmd窗口中,如何打开网址使用IE 打开 D:\software\bin>cmd /c start iexplore http://hw1287789687.iteye.com/blog/2153709 使用火狐打开 D:\software\bin>cmd /c start firefox http://hw1287789</div> </li> <li><a href="/article/3220.htm" title="ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件" target="_blank">ReplaceGoogleCDN：将 Google CDN 替换为国内的 Chrome 插件</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/google+api/1.htm">google api</a><a class="tag" taget="_blank" href="/search/chrome%E6%8F%92%E4%BB%B6/1.htm">chrome插件</a> <div>Chrome Web Store 安装地址： https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice 由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。同样，通过script标记引用这些资源，让网站访问速度瞬间提速吧</div> </li> <li><a href="/article/3347.htm" title="进程VS.线程" target="_blank">进程VS.线程</a> <span class="text-muted">m635674608</span> <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a> <div>资料来源： http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397567993007df355a3394da48f0bf14960f0c78753f000 1、Apache最早就是采用多进程模式 2、IIS服务器默认采用多线程模式 3、多进程优缺点优点：多进程模式最大</div> </li> <li><a href="/article/3474.htm" title="Linux下安装MemCached" target="_blank">Linux下安装MemCached</a> <span class="text-muted">字符串</span> <a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a> <div>前提准备：1. MemCached目前最新版本为：1.4.22，可以从官网下载到。2. MemCached依赖libevent，因此在安装MemCached之前需要先安装libevent。2.1 运行下面命令，查看系统是否已安装libevent。[root@SecurityCheck ~]# rpm -qa|grep libevent libevent-headers-1.4.13-4.el6.n</div> </li> <li><a href="/article/3601.htm" title="java设计模式之--jdk动态代理（实现aop编程）" target="_blank">java设计模式之--jdk动态代理（实现aop编程）</a> <span class="text-muted">Supanccy2013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div> 与静态代理类对照的是动态代理类，动态代理类的字节码在程序运行时由Java反射机制动态生成，无需程序员手工编写它的源代码。动态代理类不仅简化了编程工作，而且提高了软件系统的可扩展性，因为Java 反射机制可以生成任意类型的动态代理类。java.lang.reflect 包中的Proxy类和InvocationHandler 接口提供了生成动态代理类的能力。 &</div> </li> <li><a href="/article/3728.htm" title="Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持" target="_blank">Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</a> <div>2.1 默认方法(default method) java8引入了一个default medthod; 用来扩展已有的接口,在对已有接口的使用不产生任何影响的情况下,添加扩展使用default关键字 Spring 4.2支持加载在默认方法里声明的bean 2.2 将要被声明成bean的类 public class DemoService { </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>