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/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> <span class="text-muted">good2know</span> <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232781174927360.htm" title="15个小技巧，让我的Windows电脑更好用了！" target="_blank">15个小技巧，让我的Windows电脑更好用了！</a> <span class="text-muted">曹元_</span> <div>01.桌面及文档处理第一部分的技巧，主要是围绕桌面的一些基本操作，包括主题设置、常用文档文件快捷打开的多种方式等等。主题换色默认情况下，我们的Win界面可能就是白色的文档界面，天蓝色的图表背景，说不出哪里不好看，但是就是觉得不够高级。imageimage说到高级感，本能第一反应就会和暗色模式联想起来，如果我们将整个界面换成黑夜模式的话，它会是这样的。imageimage更改主题颜色及暗色模式，我们</div> </li> <li><a href="/article/1950232316408295424.htm" title="9、汇编语言编程入门：从环境搭建到简单程序实现" target="_blank">9、汇编语言编程入门：从环境搭建到简单程序实现</a> <span class="text-muted">神经网络酱</span> <a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80/1.htm">汇编语言</a><a class="tag" taget="_blank" href="/search/MEPIS/1.htm">MEPIS</a><a class="tag" taget="_blank" href="/search/GNU%E5%B7%A5%E5%85%B7%E9%93%BE/1.htm">GNU工具链</a> <div>汇编语言编程入门：从环境搭建到简单程序实现1.数据存储介质问题解决在处理数据存储时，若要使用MEPIS系统，需确保有其可访问的存储介质。目前，MEPIS无法向采用NTFS格式（常用于Windows2000和XP工作站）的硬盘写入数据。不过，若硬盘采用FAT32格式，MEPIS就能进行写入操作。此外，MEPIS还能将文件写入软盘和大多数USB闪存驱动器。若工作站连接到局域网，还可通过FTP协议或挂载</div> </li> <li><a href="/article/1950227023192453120.htm" title="MotionLCM 部署优化踩坑解决bug" target="_blank">MotionLCM 部署优化踩坑解决bug</a> <span class="text-muted">AI算法网奇</span> <a class="tag" taget="_blank" href="/search/aigc%E4%B8%8E%E6%95%B0%E5%AD%97%E4%BA%BA/1.htm">aigc与数字人</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0%E5%AE%9D%E5%85%B8/1.htm">深度学习宝典</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E7%94%9Fmotion/1.htm">文生motion</a> <div>目录依赖项windowstorchok：渲染黑白图问题解决：humanml3d：sentence-t5-large下载数据：报错：Nomodulenamed'sentence_transformers'继续报错：fromtransformers.integrationsimportCodeCarbonCallback解决方法：推理相关转mesh：module‘matplotlib.cm‘hasno</div> </li> <li><a href="/article/1950225785054883840.htm" title="Java | 多线程经典问题 - 售票" target="_blank">Java | 多线程经典问题 - 售票</a> <span class="text-muted">Ada54</span> <div>一、售票需求1）同一个票池2）多个窗口卖票，不能出售同一张票二、售票问题代码实现（线程与进程小总结，请戳：Java|线程和进程，创建线程）step1：定义SaleWindow类实现Runnable接口，覆盖run方法step2：实例化SaleWindow对象，创建Thread对象，将SaleWindow作为参数传给Thread类的构造函数，然后通过Thread.start()方法启动线程step3</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <span class="text-muted"></span> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950221589622616064.htm" title="EasyPlayer播放器系列开发计划2025" target="_blank">EasyPlayer播放器系列开发计划2025</a> <span class="text-muted">xiejiashu</span> <a class="tag" taget="_blank" href="/search/EasyPlayer/1.htm">EasyPlayer</a><a class="tag" taget="_blank" href="/search/EasyPlayer/1.htm">EasyPlayer</a><a class="tag" taget="_blank" href="/search/EasyPlayer%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">EasyPlayer播放器</a><a class="tag" taget="_blank" href="/search/RTSP%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">RTSP播放器</a><a class="tag" taget="_blank" href="/search/js%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">js播放器</a><a class="tag" taget="_blank" href="/search/Web%E6%92%AD%E6%94%BE%E5%99%A8/1.htm">Web播放器</a> <div>EasyPlayer系列产品发展至今，已经超过10年，从最早的EasyPlayerRTSP播放器，到如今维护的3条线：EasyPlayer-RTSP播放器：Windows、Android、iOS；EasyPlayerPro播放器：Windows、Android、iOS；EasyPlayer.js播放器：H5；这3个播放器各有各的应用场景，用户量也是巨大，像RTSP版本的播放器，到今天依然还有很多低</div> </li> <li><a href="/article/1950219166367674368.htm" title="包含日志获取webshell" target="_blank">包含日志获取webshell</a> <span class="text-muted">陈望_ning</span> <div>日志文件关闭：Apache目录下的httpd.conf文件#ErrorLog"logs/error.log"#CustomLog"logs/access.log"common加#号为注释不产生日志文件如果去掉#将会在Apache/logs/目录下产生日志文件linux:access_logerror_logwindows:access.logerror.logaccess_log每一行记录了一次网</div> </li> <li><a href="/article/1950218314064130048.htm" title="Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)" target="_blank">Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)</a> <span class="text-muted">bug菌¹</span> <a class="tag" taget="_blank" href="/search/Java%E5%AE%9E%E6%88%98%28%E8%BF%9B%E9%98%B6%E7%89%88%29/1.htm">Java实战(进阶版)</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Java%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/1.htm">Java零基础入门</a><a class="tag" taget="_blank" href="/search/Java%E5%B9%B6%E5%8F%91/1.htm">Java并发</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B%E7%AF%87/1.htm">多线程篇</a> <div>本文收录于「Java进阶实战」专栏，专业攻坚指数级提升，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows10+IntelliJIDEA2021.3.2+Jdk1.8本文目录前言摘要正文何为线程池？为什么需要线程池？线程池的好处线程池使用场景如何创建线程池？线程池的常见配置源码解析案例分享案例代码演示案例运行</div> </li> <li><a href="/article/1950214964396486656.htm" title="js操作样式" target="_blank">js操作样式</a> <span class="text-muted">郝加升</span> <div>DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> <span class="text-muted">小馋喵知识杂货铺</span> <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> <span class="text-muted">weixin_39607620</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> <span class="text-muted">峰谷皆平</span> <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> <span class="text-muted">TIM老师</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <span class="text-muted"></span> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> <span class="text-muted">浪子神剑</span> <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950190199627640832.htm" title="selenium 特殊场景处理" target="_blank">selenium 特殊场景处理</a> <span class="text-muted"></span> <div>文章目录前言一、windows的弹窗二、内嵌网页frame三、页签切换四、截图五、弹窗六、JS执行总结前言selenium处理web操作师，有很多特殊的情况需要处理，例如弹窗、内嵌网页，页签切换，js执行等，下面介绍一些可能会遇到的特殊场景一、windows的弹窗importwin32com.client'''创建了一个WScript.ShellCOM(ComponentObjectModel)对</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> <span class="text-muted">疯狂学习GIS</span> <div> 本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950180497007112192.htm" title="【MySQL】MySQL数据库如何改名" target="_blank">【MySQL】MySQL数据库如何改名</a> <span class="text-muted">武昌库里写JAVA</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://</div> </li> <li><a href="/article/1950175199089455104.htm" title="PDF转Markdown - Python 实现方案与代码" target="_blank">PDF转Markdown - Python 实现方案与代码</a> <span class="text-muted">Eiceblue</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/PDF/1.htm">PDF</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/vscode/1.htm">vscode</a> <div>PDF作为广泛使用的文档格式，转换为轻量级标记语言Markdown后，可无缝集成到技术文档、博客平台和版本控制系统中，提高内容的可编辑性和可访问性。本文将详细介绍如何使用国产Spire.PDFforPython库将PDF文档转换为Markdown格式。技术优势：精准保留原始文档结构（段落/列表/表格）完整提取文本和图像内容无需Adobe依赖的纯Python实现支持Linux/Windows/mac</div> </li> <li><a href="/article/1950170537007312896.htm" title=".net平台的跨平台桌面应用开发的技术方案总结对比" target="_blank">.net平台的跨平台桌面应用开发的技术方案总结对比</a> <span class="text-muted">yuanpan</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>目前，.NET平台提供了多种跨平台桌面应用开发的技术方案，主要包括.NETMAUI、AvaloniaUI、UnoPlatform、Eto.Forms等。以下是它们的核心特点及优缺点对比：1..NETMAUI（.NETMulti-platformAppUI）支持平台：Windows、macOS、iOS、Android核心特点：微软官方维护，继承自Xamarin.Forms，支持XAML和C#开发。提</div> </li> <li><a href="/article/1950170537426743296.htm" title="在Windows11上安装Linux操作系统的几种技术方案" target="_blank">在Windows11上安装Linux操作系统的几种技术方案</a> <span class="text-muted">yuanpan</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>在Windows11上安装Linux主要有以下几种技术方案，每种方案适用于不同的需求场景：1.WindowsSubsystemforLinux(WSL)适用场景：开发、命令行工具、轻量级Linux环境支持发行版：Ubuntu、Debian、KaliLinux、Fedora等优点：轻量级：无需虚拟机，直接在Windows上运行Linux命令行环境。无缝集成：可访问Windows文件系统，支持VSCo</div> </li> <li><a href="/article/1950169523193704448.htm" title="Claude Code 超详细完整指南（2025最新版）" target="_blank">Claude Code 超详细完整指南（2025最新版）</a> <span class="text-muted">笙囧同学</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>终端AI编程助手|高频使用点+生态工具+完整命令参考+最新MCP配置目录快速开始（5分钟上手）详细安装指南系统要求Windows安装（WSL方案）macOS安装Linux安装安装验证配置与认证首次认证环境变量配置代理配置⚡基础命令详解启动命令会话管理文件操作Think模式完全指南MCP服务器配置详解MCP基础概念添加MCP服务器10个必备MCP服务器MCP故障排除记忆系统详解高级使用技巧成本控制策</div> </li> <li><a href="/article/1950165349387268096.htm" title="2021-01-19" target="_blank">2021-01-19</a> <span class="text-muted">长孙俊明</span> <div>curl-H"Content-Type:application/json"-XPUT127.0.0.1:9200/_all/_settings-d'{"index.max_result_window":"5000000"}'</div> </li> <li><a href="/article/1950163093577330688.htm" title="Linux中Samba服务器安装与配置文件" target="_blank">Linux中Samba服务器安装与配置文件</a> <span class="text-muted">長樂.-</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>Samba简述27zkqsamba是一个基于TCP/IP协议的开源软件套件，可以在Linux、Windows、macOS等操作系统上运行。它允许不同操作系统的计算机之间实现文件和打印机共享。samba提供了一个服务，使得Windows操作系统可以像访问本地文件一样访问Linux、Mac等操作系统上的共享文件。实现跨平台的文件共享，提高办公环境的效率和便利性。samba也支持Windows网络邻居协</div> </li> <li><a href="/article/1950152629841620992.htm" title="ubuntu qt环境下出现No suitable kits found解决方案" target="_blank">ubuntu qt环境下出现No suitable kits found解决方案</a> <span class="text-muted"></span> <div>1.清理QtCreator缓存QtCreator会缓存项目配置、索引等数据，可能导致某些异常。清理方法：(1)删除QtCreator配置目录bashrm-rf~/.config/QtProject/（Ubuntu/Linux）或Windows：cmdrmdir/s/q"%APPDATA%\QtProject"(2)清除QtCreator的编译缓存bashrm-rf~/.cache/QtProjec</div> </li> <li><a href="/article/1950144218282389504.htm" title="为什么学习Web前端一定要掌握JavaScript？" target="_blank">为什么学习Web前端一定要掌握JavaScript？</a> <span class="text-muted">web前端学习指南</span> <div>为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。</div> </li> <li><a href="/article/1950130722157162496.htm" title="移动端适配rem方案" target="_blank">移动端适配rem方案</a> <span class="text-muted">简单的码农</span> <div>1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s</div> </li> <li><a href="/article/1950130692448907264.htm" title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</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/vue.js/1.htm">vue.js</a> <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div> </li> <li><a href="/article/1950127794931429376.htm" title="redis反弹shell时kali无法接收回弹的解决方法" target="_blank">redis反弹shell时kali无法接收回弹的解决方法</a> <span class="text-muted">显哥无敌</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta</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>