蓝斑.json (前端)

高级JavaScript。如何用JavaScript手撸一个富文本编辑器？

要素过多建议收藏

- 富文本编辑

基本的技术就是在空白 HTML 文件中嵌入一个

iframe 。通过 designMode 属性，可以将这个空白文档变成可以编辑的，实际编辑的则是元素

的 HTML 。 designMode 属性有两个可能的值： "off" （默认值）和 "on" 。设置为 "on" 时，整个文档

都会变成可以编辑的（显示插入光标），从而可以像使用文字处理程序一样编辑文本，通过键盘将文本

标记为粗体、斜体，等等。

作为 iframe 源的是一个非常简单的空白 HTML 页面。下面是一个例子：



	
		Blank Page for Rich Text Editing

这个页面会像其他任何页面一样加载到 iframe 里。为了可以编辑，必须将文档的 designMode 属

性设置为 "on" 。不过，只有在文档完全加载之后才可以设置。在这个包含页面内，需要使用 onload

事件处理程序在适当时机设置 designMode ，如下面的例子所示：

以上代码加载之后，可以在页面上看到一个类似文本框的区域。这个框的样式具有网页默认样式，

不过可以通过 CSS 调整。

- 使用 contenteditable

还有一种处理富文本的方式，也是 IE 最早实现的，即指定 contenteditable 属性。可以给页面

中的任何元素指定 contenteditable 属性，然后该元素会立即被用户编辑。这种方式更受欢迎，因为

不需要额外的 iframe 、空页面和 JavaScript ，只给元素添加一个 contenteditable 属性即可，比如：

contenteditable >

元素中包含的任何文本都会自动被编辑，元素本身类似于

</span> <span style="color:#000000;">元素。通过设置 </span> 
    </div> 
    <div> <span style="color:#000000;">contentEditable </span> <span style="color:#000000;">属性，也可以随时切换元素的可编辑状态：</span> 
    </div> 
    <blockquote> 
     <div> 
      <div> <span style="color:#000000;">let div = document.getElementById("richedit"); </span> 
      </div> 
      <div> <span style="color:#000000;">richedit.contentEditable = "true"; </span> 
      </div> 
     </div> 
    </blockquote> 
    <div> <span style="color:#000000;">contentEditable </span> <span style="color:#000000;">属性有 </span> <span style="color:#000000;">3 </span> <span style="color:#000000;">个可能的值：</span> <span style="color:#000000;">"true"</span> <span style="color:#000000;">表示开启，</span> <span style="color:#000000;">"false"</span> <span style="color:#000000;">表示关闭，</span> <span style="color:#000000;">"inherit"</span> <span style="color:#000000;">表示 </span> 
    </div> 
    <div> <span style="color:#000000;">继承父元素的设置（因为在 </span> <span style="color:#000000;">contenteditable </span> <span style="color:#000000;">元素内部会创建和删除元素）。</span> <span style="color:#000000;">IE</span> <span style="color:#000000;">、</span> <span style="color:#000000;">Firefox</span> <span style="color:#000000;">、</span> <span style="color:#000000;">Chrome</span> <span style="color:#000000;">、 </span> 
    </div> 
    <div> <span style="color:#000000;">Safari </span> <span style="color:#000000;">和 </span> <span style="color:#000000;">Opera </span> <span style="color:#000000;">及所有主流移动浏览器都支持 </span> <span style="color:#000000;">contentEditable </span> <span style="color:#000000;">属性。</span> 
    </div> 
    <div> 
     <h2><span style="color:#000000;">- 与富文本交互</span></h2> 
     <div> <span style="color:#000000;">与富文本编辑器交互的主要方法是使用 </span> <span style="color:#000000;">document.execCommand()</span> <span style="color:#000000;">。这个方法在文档上执行既定 </span> 
     </div> 
     <div> <span style="color:#000000;">的命令，可以实现大多数格式化任务。</span> <span style="color:#000000;">document.execCommand()</span> <span style="color:#000000;">可以接收 </span> <span style="color:#000000;">3 </span> <span style="color:#000000;">个参数：要执行的命令、 </span> 
     </div> 
     <div> <span style="color:#000000;">表示浏览器是否为命令提供用户界面的布尔值和执行命令必需的值（如果不需要则为 </span> <span style="color:#000000;">null</span> <span style="color:#000000;">）。为跨浏览 </span> 
     </div> 
     <div> <span style="color:#000000;">器兼容，第二个参数应该始终为 </span> <span style="color:#000000;">false</span> <span style="color:#000000;">，因为 </span> <span style="color:#000000;">Firefox </span> <span style="color:#000000;">会在其为 </span> <span style="color:#000000;">true </span> <span style="color:#000000;">时抛出错误。 </span> 
     </div> 
     <div> <span style="color:#000000;">不同浏览器支持的命令也不一样。下表列出了最常用的命令。</span> 
     </div> 
     <div></div> 
     <blockquote> 
      <div> <a href="http://img.e-com-net.com/image/info8/29cf8066c055425086d7c295055436a1.jpg" target="_blank"><img alt="高级JavaScript。如何用JavaScript手撸一个富文本编辑器？_第1张图片" height="363" src="http://img.e-com-net.com/image/info8/29cf8066c055425086d7c295055436a1.jpg" width="650" style="border:1px solid black;"></a> 
      </div> 
      <div> <a href="http://img.e-com-net.com/image/info8/d32e961f709d4012a3a6c59ea9f79140.jpg" target="_blank"><img alt="高级JavaScript。如何用JavaScript手撸一个富文本编辑器？_第2张图片" height="285" src="http://img.e-com-net.com/image/info8/d32e961f709d4012a3a6c59ea9f79140.jpg" width="650" style="border:1px solid black;"></a> 
      </div> 
     </blockquote> 
    </div> 
   </div> 
  </div> 
  <p> </p> 
  <div> <span style="color:#000000;">剪贴板相关的命令与浏览器关系密切。虽然这些命令并不都可以通过 </span> <span style="color:#000000;">document.execCommand() </span> 
  </div> 
  <div> <span style="color:#000000;">使用，但相应的键盘快捷键都是可以用的。 </span> 
  </div> 
  <div> <span style="color:#000000;">这些命令可以用于修改内嵌窗格（</span> <span style="color:#000000;">iframe</span> <span style="color:#000000;">）中富文本区域的外观，如下面的例子所示：</span> 
  </div> 
  <blockquote> 
   <div> 
    <div> <span style="color:#000000;">// </span> <span style="color:#000000;">在内嵌窗格中切换粗体文本样式 </span> 
    </div> 
    <div> <span style="color:#000000;">frames["richedit"].document.execCommand("bold", false, null); </span> 
    </div> 
    <div> <span style="color:#000000;">// </span> <span style="color:#000000;">在内嵌窗格中切换斜体文本样式 </span> 
    </div> 
    <div> <span style="color:#000000;">frames["richedit"].document.execCommand("italic", false, null); </span> 
    </div> 
    <div> <span style="color:#000000;">// </span> <span style="color:#000000;">在内嵌窗格中创建指向 </span> <span style="color:#000000;">www.wrox.com </span> <span style="color:#000000;">的链接 </span> 
    </div> 
    <div> <span style="color:#000000;">frames["richedit"].document.execCommand("createlink", false, </span> 
    </div> 
    <div> <span style="color:#000000;">"http://www.wrox.com"); </span> 
    </div> 
    <div> <span style="color:#000000;">// </span> <span style="color:#000000;">在内嵌窗格中为内容添加</span> <span style="color:#000000;"><h1></span> <span style="color:#000000;">标签 </span> 
    </div> 
    <div> <span style="color:#000000;">frames["richedit"].document.execCommand("formatblock", false, "<h1>"); </span> 
    </div> 
   </div> 
  </blockquote> 
  <div> <span style="color:#000000;">同样的方法也可以用于页面中添加了 </span> <span style="color:#000000;">contenteditable </span> <span style="color:#000000;">属性的元素，只不过要使用当前窗口而不 </span> 
  </div> 
  <div> <span style="color:#000000;">是内嵌窗格中的 </span> <span style="color:#000000;">document </span> <span style="color:#000000;">对象：</span> 
  </div> 
  <blockquote> 
   <div> 
    <div> <span style="color:#000000;">// </span> <span style="color:#000000;">切换粗体文本样式 </span> 
    </div> 
    <div> <span style="color:#000000;">document.execCommand("bold", false, null); </span> 
    </div> 
    <div></div> 
    <div> <span style="color:#000000;">// </span> <span style="color:#000000;">切换斜体文本样式 </span> 
    </div> 
    <div> <span style="color:#000000;">document.execCommand("italic", false, null); </span> 
    </div> 
    <div></div> 
    <div> <span style="color:#000000;">// </span> <span style="color:#000000;">创建指向 </span> <span style="color:#000000;">www.wrox.com </span> <span style="color:#000000;">的链接 </span> 
    </div> 
    <div> <span style="color:#000000;">document.execCommand("createlink", false, "http://www.wrox.com"); </span> 
    </div> 
    <div></div> 
    <div> <span style="color:#000000;">// </span> <span style="color:#000000;">为内容添加</span> <span style="color:#000000;"><h1></span> <span style="color:#000000;">标签 </span> 
    </div> 
    <div> <span style="color:#000000;">document.execCommand("formatblock", false, "<h1>"); </span> 
    </div> 
   </div> 
  </blockquote> 
  <p> </p> 
  <div> <span style="color:#000000;">注意，即使命令是所有浏览器都支持的，命令生成的 </span> <span style="color:#000000;">HTML </span> <span style="color:#000000;">通常差别也很大。例如，为选中文本 </span> 
  </div> 
  <div> <span style="color:#000000;">应用 </span> <span style="color:#000000;">bold </span> <span style="color:#000000;">命令在 </span> <span style="color:#000000;">IE </span> <span style="color:#000000;">和 </span> <span style="color:#000000;">Opera </span> <span style="color:#000000;">中会使用</span> <span style="color:#000000;"><strong></span> <span style="color:#000000;">标签，在 </span> <span style="color:#000000;">Safari </span> <span style="color:#000000;">和 </span> <span style="color:#000000;">Chrome </span> <span style="color:#000000;">中会使用</span> <span style="color:#000000;"><b>标签，而在Firefox </span> <span style="color:#000000;">中会使用</span> <span style="color:#000000;"><span></span> <span style="color:#000000;">标签。在富文本编辑中，不能依赖浏览器生成的 </span> <span style="color:#000000;">HTML，因为命令实现和格式 转换都是通过 </span> <span style="color:#000000;">innerHTML </span> <span style="color:#000000;">完成的。</span> 
  </div> 
  <div> 
   <div> <span style="color:#000000;">还有与命令相关的其他一些方法。第一个方法是 </span> <span style="color:#000000;">queryCommandEnabled()</span> <span style="color:#000000;">，此方法用于确定对当 </span> 
   </div> 
   <div> <span style="color:#000000;">前选中文本或光标所在位置是否可以执行相关命令。它只接收一个参数，即要检查的命令名。如果可编 辑区可以执行该命令就返回 </span> <span style="color:#000000;">true</span> <span style="color:#000000;">，否则返回 </span> <span style="color:#000000;">false</span> <span style="color:#000000;">。来看下面的例子： </span> 
   </div> 
   <blockquote> 
    <div> <span style="color:#000000;">let result = frames["richedit"].document.queryCommandEnabled("bold"); </span> 
    </div> 
   </blockquote> 
   <div> <span style="color:#000000;">以上代码在当前选区可以执行</span> <span style="color:#000000;">"bold"</span> <span style="color:#000000;">命令时返回 </span> <span style="color:#000000;">true</span> <span style="color:#000000;">。不过要注意，</span> <span style="color:#000000;">queryCommandEnabled() </span> 
   </div> 
   <div> <span style="color:#000000;">返回 </span> <span style="color:#000000;">true </span> <span style="color:#000000;">并不代表允许执行相关命令，只代表当前选区适合执行相关命令。在 </span> <span style="color:#000000;">Firefox </span> <span style="color:#000000;">中， </span> 
   </div> 
   <div> <span style="color:#000000;">queryCommandEnabled("cut")</span> <span style="color:#000000;">即使默认不允许剪切也会返回 </span> <span style="color:#000000;">true</span> <span style="color:#000000;">。 </span> 
   </div> 
   <div></div> 
   <div> <span style="color:#000000;">另一个方法 </span> <span style="color:#000000;">queryCommandState()</span> <span style="color:#000000;">用于确定相关命令是否应用到了当前文本选区。例如，要确定 </span> 
   </div> 
   <div> <span style="color:#000000;">当前选区的文本是否为粗体，可以这样： </span> 
   </div> 
   <div></div> 
   <blockquote> 
    <div> <span style="color:#000000;">let isBold = frames["richedit"].document.queryCommandState("bold"); </span> 
    </div> 
   </blockquote> 
   <div> <span style="color:#000000;">如果之前给文本选区应用过</span> <span style="color:#000000;">"bold"</span> <span style="color:#000000;">命令，则以上代码返回 </span> <span style="color:#000000;">true</span> <span style="color:#000000;">。全功能富文本编辑器可以利用这 </span> 
   </div> 
   <div> <span style="color:#000000;">个方法更新粗体、斜体等按钮。 </span> 
   </div> 
   <div></div> 
   <div> <span style="color:#000000;">最后一个方法是 </span> <span style="color:#000000;">queryCommandValue()</span> <span style="color:#000000;">，此方法可以返回执行命令时使用的值（即前面示例的 </span> 
   </div> 
   <div> <span style="color:#000000;">execCommand()</span> <span style="color:#000000;">中的第三个参数）。如果对一段选中文本应用了值为 </span> <span style="color:#000000;">7 </span> <span style="color:#000000;">的</span> <span style="color:#000000;">"fontsize"命令，则如下代 码会返回 </span> <span style="color:#000000;">7</span> <span style="color:#000000;">：</span> 
   </div> 
   <blockquote> 
    <div> <span style="color:#000000;">let fontSize = frames["richedit"].document.queryCommandValue("fontsize"); </span> 
    </div> 
   </blockquote> 
  </div> 
  <div> <span style="color:#000000;">这个方法可用于确定如何将命令应用于文本选区，从而进一步决定是否需要执行下一个命令。</span> 
  </div> 
  <p></p> 
  <h2><span style="color:#000000;">- 富文件选择</span> </h2> 
  <div> <span style="color:#000000;">在内嵌窗格中使用 </span> <span style="color:#000000;">getSelection()</span> <span style="color:#000000;">方法，可以获得富文本编辑器的选区。这个方法暴露在 </span> 
  </div> 
  <div> <span style="color:#000000;">document </span> <span style="color:#000000;">和 </span> <span style="color:#000000;">window </span> <span style="color:#000000;">对象上，返回表示当前选中文本的 </span> <span style="color:#000000;">Selection </span> <span style="color:#000000;">对象。每个 </span> <span style="color:#000000;">Selection </span> <span style="color:#000000;">对象都拥 </span> 
  </div> 
  <div> <span style="color:#000000;">有以下属性。 </span> 
  </div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">anchorNode</span> <span style="color:#000000;">：选区开始的节点。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">anchorOffset</span> <span style="color:#000000;">：在 </span> <span style="color:#000000;">anchorNode </span> <span style="color:#000000;">中，从开头到选区开始跳过的字符数。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">focusNode</span> <span style="color:#000000;">：选区结束的节点。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">focusOffset</span> <span style="color:#000000;">：</span> <span style="color:#000000;">focusNode </span> <span style="color:#000000;">中包含在选区内的字符数。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">isCollapsed</span> <span style="color:#000000;">：布尔值，表示选区起点和终点是否在同一个地方。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">rangeCount</span> <span style="color:#000000;">：选区中包含的 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围数量。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;">Selection </span> <span style="color:#000000;">的属性并没有包含很多有用的信息。好在它的以下方法提供了更多信息，并允许操作 </span> 
  </div> 
  <div> <span style="color:#000000;">选区。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">addRange(</span> <span style="color:#000000;"><em>range</em></span> <span style="color:#000000;">)</span> <span style="color:#000000;">：把给定的 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围添加到选区。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">collapse(</span> <span style="color:#000000;"><em>node, offset</em></span> <span style="color:#000000;">)</span> <span style="color:#000000;">：将选区折叠到给定节点中给定的文本偏移处。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">collapseToEnd()</span> <span style="color:#000000;">：将选区折叠到终点。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">collapseToStart()</span> <span style="color:#000000;">：将选区折叠到起点。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">containsNode(</span> <span style="color:#000000;"><em>node</em></span> <span style="color:#000000;">)</span> <span style="color:#000000;">：确定给定节点是否包含在选区中。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">deleteFromDocument()</span> <span style="color:#000000;">：从文档中删除选区文本。与执行 </span> <span style="color:#000000;">execCommand("delete", false, </span> 
  </div> 
  <div> <span style="color:#000000;">null)</span> <span style="color:#000000;">命令结果相同。 </span> 
  </div> 
  <div></div> 
  <div> <span style="color:#000000;"> </span> <span style="color:#000000;">extend(</span> <span style="color:#000000;"><em>node, offset</em></span> <span style="color:#000000;">)</span> <span style="color:#000000;">：通过将 </span> <span style="color:#000000;">focusNode </span> <span style="color:#000000;">和 </span> <span style="color:#000000;">focusOffset </span> <span style="color:#000000;">移动到指定值来扩展选区。</span> 
  </div> 
  <div></div> 
  <div> 
   <div> <span style="color:#000000;"> </span> <span style="color:#000000;">getRangeAt(</span> <span style="color:#000000;"><em>index</em></span> <span style="color:#000000;">)</span> <span style="color:#000000;">：返回选区中指定索引处的 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围。 </span> 
   </div> 
   <div></div> 
   <div> <span style="color:#000000;"> </span> <span style="color:#000000;">removeAllRanges()</span> <span style="color:#000000;">：从选区中移除所有 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围。这实际上会移除选区，因为选区中至少 </span> 
   </div> 
   <div> <span style="color:#000000;">要包含一个范围。 </span> 
   </div> 
   <div></div> 
   <div> <span style="color:#000000;"> </span> <span style="color:#000000;">removeRange(</span> <span style="color:#000000;"><em>range</em></span> <span style="color:#000000;">)</span> <span style="color:#000000;">：从选区中移除指定的 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围。 </span> 
   </div> 
   <div></div> 
   <div> <span style="color:#000000;"> </span> <span style="color:#000000;">selectAllChildren(</span> <span style="color:#000000;"><em>node</em></span> <span style="color:#000000;">)</span> <span style="color:#000000;">：清除选区并选择给定节点的所有子节点。 </span> 
   </div> 
   <div></div> 
   <div> <span style="color:#000000;"> </span> <span style="color:#000000;">toString()</span> <span style="color:#000000;">：返回选区中的文本内容。 </span> 
   </div> 
   <div></div> 
   <div> <span style="color:#000000;">Selection </span> <span style="color:#000000;">对象的这个方法极其强大，充分利用了 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围来管理选区。操纵 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围可以实 </span> 
   </div> 
   <div> <span style="color:#000000;">现比 </span> <span style="color:#000000;">execCommand()</span> <span style="color:#000000;">更细粒度的控制，因为可以直接对选中文本的 </span> <span style="color:#000000;">DOM 内容进行操作。来看下面的 例子：</span> 
   </div> 
   <div> 
    <pre><code class="hljs">let selection = frames["richedit"].getSelection(); 
// 取得选中的文本
let selectedText = selection.toString(); 
// 取得表示选区的范围
let range = selection.getRangeAt(0); 
// 高亮选中的文本
let span = frames["richedit"].document.createElement("span"); 
span.style.backgroundColor = "yellow"; 
range.surroundContents(span);</code></pre> 
    <div> <span style="color:#000000;">以上代码会在富文本编辑器中给选中文本添加黄色高亮背景。实现方式是在默认选区使用 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范 </span> 
    </div> 
    <div> <span style="color:#000000;">围，用 </span> <span style="color:#000000;">surroundContents()</span> <span style="color:#000000;">方法给选中文本添加背景为黄色的</span> <span style="color:#000000;"><span></span> <span style="color:#000000;">标签。 </span> 
    </div> 
    <div> <span style="color:#000000;">getSelection()</span> <span style="color:#000000;">方法在 </span> <span style="color:#000000;">HTML5 </span> <span style="color:#000000;">中进行了标准化，</span> <span style="color:#000000;">IE9 </span> <span style="color:#000000;">以及 </span> <span style="color:#000000;">Firefox</span> <span style="color:#000000;">、</span> <span style="color:#000000;">Safari</span> <span style="color:#000000;">、</span> <span style="color:#000000;">Chrome </span> <span style="color:#000000;">和 </span> <span style="color:#000000;">Opera </span> <span style="color:#000000;">的所 </span> 
    </div> 
    <div> <span style="color:#000000;">有现代版本中都实现了这个方法。 </span> 
    </div> 
    <div></div> 
    <div> <span style="color:#000000;">IE8 </span> <span style="color:#000000;">及更早版本不支持 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围，不过它们允许通过专有的 </span> <span style="color:#000000;">selection </span> <span style="color:#000000;">对象操作选中的文本。如 </span> 
    </div> 
    <div> <span style="color:#000000;">本章前面所讨论的，这个 </span> <span style="color:#000000;">selection </span> <span style="color:#000000;">对象是 </span> <span style="color:#000000;">document 的属性。要取得富文本编辑器中选中的文本， 必须先创建一个文本范围，然后再访问其 </span> <span style="color:#000000;">text </span> <span style="color:#000000;">属性：</span> 
    </div> 
    <div> 
     <pre><code class="hljs">let range = frames["richedit"].document.selection.createRange(); 
let selectedText = range.text;</code></pre> 
     <div> <span style="color:#000000;">使用 </span> <span style="color:#000000;">IE </span> <span style="color:#000000;">文本范围执行 </span> <span style="color:#000000;">HTML </span> <span style="color:#000000;">操作不像使用 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围那么可靠，不过也是可以做到的。要实现与 </span> 
     </div> 
     <div> <span style="color:#000000;">使用 </span> <span style="color:#000000;">DOM </span> <span style="color:#000000;">范围一样的高亮效果，可以组合使用 </span> <span style="color:#000000;">htmlText </span> <span style="color:#000000;">属性和 </span> <span style="color:#000000;">pasteHTML()</span> <span style="color:#000000;">方法：</span> 
     </div> 
     <div></div> 
     <div> 
      <pre><code class="hljs">let range = frames["richedit"].document.selection.createRange(); 
range.pasteHTML( 
 '<span style="background-color:yellow">${range.htmlText}</span>');</code></pre> 
      <div> <span style="color:#000000;">以上代码使用 </span> <span style="color:#000000;">htmlText </span> <span style="color:#000000;">取得了当前选区的 </span> <span style="color:#000000;">HTML</span> <span style="color:#000000;">，然后用一个</span> <span style="color:#000000;"><span></span> <span style="color:#000000;">标签将其包围起来并通过 </span> 
      </div> 
      <div> <span style="color:#000000;">pasteHTML()</span> <span style="color:#000000;">再把它插入选区中。</span> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="SOHUCS" sid="1746400815142158336"></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">你可能感兴趣的:(javascript,面试,HTML,javascript,开发语言,ecmascript)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1773569718641295360.htm"
                           title="uni-app实现 步骤条" target="_blank">uni-app实现 步骤条</a>
                        <span class="text-muted">夏夏的码农</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st</div>
                    </li>
                    <li><a href="/article/1773519786463002624.htm"
                           title="家长们的福音：教师对书面作业全批全改，学校不得考试选拔学生" target="_blank">家长们的福音：教师对书面作业全批全改，学校不得考试选拔学生</a>
                        <span class="text-muted">丝雨润春风</span>

<div>年前年后教育部门公布了不少措施，来减轻学生负担，维护学生的身心健康成长，随后各地教育局也陆陆续续颁布了各种新政策，这不最近山东教育厅也起草了《山东普通中小学规范办学十五条规定》。在这15条规定内容之中包括了：教师对书面作业全批全改，不给家长布置作业或要求家长评改作业；义务教育学校不得以考试、面试、评测等名义选拔学生；保障学生每天睡眠时间，高中生不少于8个小时。毋庸置疑这个规定的初衷非常得好，是对学</div>
                    </li>
                    <li><a href="/article/1773495574226599936.htm"
                           title="3、JavaWeb-Ajax/Axios-前端工程化-Element" target="_blank">3、JavaWeb-Ajax/Axios-前端工程化-Element</a>
                        <span class="text-muted">所谓远行Misnearch</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
                        <div>P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名</div>
                    </li>
                    <li><a href="/article/1773460076456116224.htm"
                           title="2.5 项目讲解流程" target="_blank">2.5 项目讲解流程</a>
                        <span class="text-muted">王守谦26</span>
<a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E8%B5%84%E6%96%99/1.htm">项目资料</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>一、项目讲解1、自我介绍2、项目流程-===============================二、自我介绍（一）、学员自我介绍，讲解存在的问题比如：讲解年份、卡顿、重点学历、忘记（二）自我规则内容1、开场白：礼貌用语2、时间：自我介绍1-2分钟以内3、内容：姓名、籍贯、毕业院校、（拉进面试官距离）4、技能：功能测试、接口测试、自动化测试、app测试、性能测试、安全测试黑盒测试、白盒测试、灰盒</div>
                    </li>
                    <li><a href="/article/1773457306437091328.htm"
                           title="MyBatis高级面试题-2024" target="_blank">MyBatis高级面试题-2024</a>
                        <span class="text-muted">my_styles</span>
<a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</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/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a>
                        <div>MyBatis的核心组件有哪些？首先第一个是，SqlSessionFactory，它就像是一个会话工厂。它的任务是创建SqlSession对象，这个对象是我们与数据库交互的主要途径。SqlSessionFactory的作用很重要，因为它可以帮我们配置数据库连接信息和事务管理等。一旦这个工厂被建立起来，它就会加载一些必要的配置和映射文件，为后续的数据库操作提供一个可靠的基础。第二个是SqlSessi</div>
                    </li>
                    <li><a href="/article/1773450885851054080.htm"
                           title="python转码" target="_blank">python转码</a>
                        <span class="text-muted">Desamond</span>
<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>
                        <div>转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，</div>
                    </li>
                    <li><a href="/article/1773444718840053760.htm"
                           title="排序算法太多？常用排序都在这了，一篇文章总结和实现所有面试会考的排序算法（基于Python实现）" target="_blank">排序算法太多？常用排序都在这了，一篇文章总结和实现所有面试会考的排序算法（基于Python实现）</a>
                        <span class="text-muted">宇宙之一粟</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%8D%E5%BD%92%E8%B7%AF%E4%B9%8BPython/1.htm">不归路之Python</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/IT%E9%9D%A2%E8%AF%95%E9%A2%98%E6%94%B6%E9%9B%86%E4%B8%8E%E6%80%BB%E7%BB%93/1.htm">IT面试题收集与总结</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/1.htm">排序算法</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>文章目录排序算法1.常见的排序算法1.1选择排序1.1.1思想1.1.2实现**1.1.3选择排序分析**1.2冒泡排序**1.2.1思想****1.2.2实现****1.2.3冒泡排序分析**1.3插入排序**1.3.1思想****1.3.2实现****1.3.3插入排序分析**1.4归并排序☆☆★**1.4.1思想****1.4.2实现****1.4.3归并排序分析**1.5快速排序☆★★**</div>
                    </li>
                    <li><a href="/article/1773403175781466112.htm"
                           title="Python dict字符串转json对象，小数精度丢失问题" target="_blank">Python dict字符串转json对象，小数精度丢失问题</a>
                        <span class="text-muted">朝如青丝 暮成雪</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print</div>
                    </li>
                    <li><a href="/article/1773397763799711744.htm"
                           title="15：00面试，15：06就出来了，问的问题有点变态。。。" target="_blank">15：00面试，15：06就出来了，问的问题有点变态。。。</a>
                        <span class="text-muted">爱学习的执念</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95%E9%9D%A2%E8%AF%95/1.htm">软件测试面试</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
                        <div>从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到9月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%,这下搞的饭都吃不起了。还在有个朋友内推我去了一家互联网公司，兴冲冲见面试官，没想到一道题把我给问死了：如果模块请求http改为了https,测试方案应该如何制定，修改?感觉好简单的题，硬是没有答出来，早知道好好</div>
                    </li>
                    <li><a href="/article/1773349094748651520.htm"
                           title="工资高压力大工资低休息多你怎么选择" target="_blank">工资高压力大工资低休息多你怎么选择</a>
                        <span class="text-muted">绿蘋果</span>

<div>人总是面临很多选择，不久前自己刚刚放弃一份薪水还不错的工作，为了能多点时间陪陪孩子，也适当的让自己放松放松，运气好，离职后赶上疫情，对于没有人依赖的我，瞬间压力好大，本来是准备休息陪陪孩子出去走走的，这门还没出呢，就不能出门了。我承认自己有些心慌了，需要赶紧找工作了，在家休息一个月不到，我又开始赶急赶忙的找工作，一年已经过半，开始找只能网上投投简历，一直也没回复，后边终于收到面试电话了，对于来之不</div>
                    </li>
                    <li><a href="/article/1773347920293199872.htm"
                           title="Vue 常见面试题(一)" target="_blank">Vue 常见面试题(一)</a>
                        <span class="text-muted">安生生申</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）</div>
                    </li>
                    <li><a href="/article/1773347793847517184.htm"
                           title="UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS" target="_blank">UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS</a>
                        <span class="text-muted">liferecords</span>
<a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a>
                        <div>UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调</div>
                    </li>
                    <li><a href="/article/1773340995031728128.htm"
                           title="Java回溯知识点（含面试大厂题和源码）" target="_blank">Java回溯知识点（含面试大厂题和源码）</a>
                        <span class="text-muted">一成码农</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/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>回溯算法是一种通过遍历所有可能的候选解来寻找所有解的算法，如果候选解被确认不是一个解（或至少不是最后一个解），回溯算法会通过在上一步进行一些变化来丢弃这个解，即“回溯”并尝试另一个候选解。回溯法通常用递归方法来实现，在解决排列、组合、选择问题时非常有效。回溯算法的核心要点：路径：也就是已经做出的选择。选择列表：也就是你当前可以做的选择。结束条件：也就是到达决策树底层，无法再做出选择的条件。回溯算法</div>
                    </li>
                    <li><a href="/article/1773326395645165568.htm"
                           title="java基础相关面试题详细总结" target="_blank">java基础相关面试题详细总结</a>
                        <span class="text-muted">。。。。。96</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.Java中的数据类型有哪些？答：Java中的数据类型包括基本数据类型（如整数、浮点数、字符等）和引用数据类型（如类、接口、数组等）。2.什么是面向对象编程（OOP）？答：面向对象编程是一种编程范式，它将数据和对数据的操作封装在一起，形成对象。通过对象之间的交互来实现程序的功能。3.解释类和对象的关系。答：类是对象的抽象描述，而对象是类的具体实例。一个类可以创建多个对象，每个对象都具有类中定义的</div>
                    </li>
                    <li><a href="/article/1773308900838277120.htm"
                           title="Web前端Html的表单" target="_blank">Web前端Html的表单</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/html/1.htm">html</a>
                        <div>表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单</div>
                    </li>
                    <li><a href="/article/1773256158274977792.htm"
                           title="javascript 日期转换为时间戳，时间戳转换为日期的函数" target="_blank">javascript 日期转换为时间戳，时间戳转换为日期的函数</a>
                        <span class="text-muted">cdcdhj</span>
<a class="tag" taget="_blank" href="/search/javascript%E5%AD%A6%E4%B9%A0%E6%97%A5%E8%AE%B0/1.htm">javascript学习日记</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>日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-</div>
                    </li>
                    <li><a href="/article/1773255151038038016.htm"
                           title="Java面试题：解释JVM的内存结构，并描述堆、栈、方法区在内存结构中的角色和作用，Java中的多线程是如何实现的，Java垃圾回收机制的基本原理，并讨论常见的垃圾回收算法" target="_blank">Java面试题：解释JVM的内存结构，并描述堆、栈、方法区在内存结构中的角色和作用，Java中的多线程是如何实现的，Java垃圾回收机制的基本原理，并讨论常见的垃圾回收算法</a>
                        <span class="text-muted">杰哥在此</span>
<a class="tag" taget="_blank" href="/search/Java%E7%B3%BB%E5%88%97/1.htm">Java系列</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>Java内存模型与多线程的深入探讨在Java的世界里，内存模型和多线程是开发者必须掌握的核心知识点。它们不仅关系到程序的性能和稳定性，还直接影响到系统的可扩展性和可靠性。下面，我将通过三个面试题，带领大家深入理解Java内存模型、多线程以及并发编程的相关原理和实践。面试题一：请解释JVM的内存结构，并描述堆、栈、方法区在内存结构中的角色和作用。关注点：JVM内存结构的基本组成堆、栈、方法区的功能和</div>
                    </li>
                    <li><a href="/article/1773198631940194304.htm"
                           title="COMP315 JavaScript Cloud Computing for E Commerce" target="_blank">COMP315 JavaScript Cloud Computing for E Commerce</a>
                        <span class="text-muted">zhuyu0206girl</span>
<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>Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform</div>
                    </li>
                    <li><a href="/article/1773191331473063936.htm"
                           title="JSON与AJAX：网页交互的利器" target="_blank">JSON与AJAX：网页交互的利器</a>
                        <span class="text-muted">入冉心</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据</div>
                    </li>
                    <li><a href="/article/1772738346825613312.htm"
                           title="javascript的数据类型及转换" target="_blank">javascript的数据类型及转换</a>
                        <span class="text-muted">田小田txt</span>

<div>一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa</div>
                    </li>
                    <li><a href="/article/1772709062681624576.htm"
                           title="html版本号 webpack_html-webpack-plugin详解" target="_blank">html版本号 webpack_html-webpack-plugin详解</a>
                        <span class="text-muted">weixin_39994949</span>
<a class="tag" taget="_blank" href="/search/html%E7%89%88%E6%9C%AC%E5%8F%B7/1.htm">html版本号</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a>
                        <div>引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面</div>
                    </li>
                    <li><a href="/article/1772700000292241408.htm"
                           title="HTML语言剖析" target="_blank">HTML语言剖析</a>
                        <span class="text-muted">混沌破晓</span>

<div>HTML语言剖析Html简介-目录全写：HyperTextMark-upLanguage译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1.Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签</div>
                    </li>
                    <li><a href="/article/1772672178613977088.htm"
                           title="C++面试题" target="_blank">C++面试题</a>
                        <span class="text-muted">虾仁A</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a>
                        <div>目录一、堆和栈的区别二、C++中new、delte和malloc的区别三、什么是源对象四、C++有哪些设计模式五，你使用过C++哪些类型的指针一、堆和栈的区别特性堆栈申请方式由程序员显式申请和释放由系统自动分配和释放分配方式动态分配自动分配分配效率相对较慢，需要遍历内存链表寻找合适空间相对较快，系统直接分配内存地址不连续的内存区域连续的内存区域大小限制大小灵活，上限取决于虚拟内存大小固定，通常较小</div>
                    </li>
                    <li><a href="/article/1772654174425645056.htm"
                           title="基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java" target="_blank">基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java</a>
                        <span class="text-muted">计算机程序老哥</span>

<div>作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个</div>
                    </li>
                    <li><a href="/article/1772647114975805440.htm"
                           title="CDH 启停使用HiveServer2" target="_blank">CDH 启停使用HiveServer2</a>
                        <span class="text-muted">金刚_30bf</span>

<div>翻译：https://www.cloudera.com/documentation/enterprise/latest/topics/cdh_ig_hiveserver2_start_stop.html版本：5.14.2HiveServer2是HiveServer的改进版本，支持Kerberos身份验证和多客户端并发访问。您可以使用Beeline客户端访问HiveServer2。警告：如果以远程模</div>
                    </li>
                    <li><a href="/article/1772631263593693184.htm"
                           title="javascript实现SM2加密解密" target="_blank">javascript实现SM2加密解密</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
                        <div>前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu</div>
                    </li>
                    <li><a href="/article/1772618299398488064.htm"
                           title="Vue：为什么要使用v-cloak" target="_blank">Vue：为什么要使用v-cloak</a>
                        <span class="text-muted">刻刻帝的海角</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu</div>
                    </li>
                    <li><a href="/article/1772617543765262336.htm"
                           title="HTML背景带视频的个人炫酷引导页源码" target="_blank">HTML背景带视频的个人炫酷引导页源码</a>
                        <span class="text-muted">erthre</span>
<a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a>
                        <div>正文:一款简洁大气得个人团队引导HTML单页，非常不错，LOGO支持自行更改替换，可以拿来做为团队官网也可以个人，只是单页没有后台。程序:wwhtxs.lanzouq.com/if6oE0i26ohi图片:</div>
                    </li>
                    <li><a href="/article/1772604956243722240.htm"
                           title="15：00面试，15：06就出来了，问的问题有点变态。。。" target="_blank">15：00面试，15：06就出来了，问的问题有点变态。。。</a>
                        <span class="text-muted">程序员油条</span>
<a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">自动化测试</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
                        <div>从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到9月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%,这下搞的饭都吃不起了。还在有个朋友内推我去了一家互联网公司，兴冲冲见面试官，没想到一道题把我给问死了：如果模块请求http改为了https,测试方案应该如何制定，修改?感觉好简单的题，硬是没有答出来，早知道好好</div>
                    </li>
                    <li><a href="/article/1772602816364347392.htm"
                           title="Github 2024-03-26 开源项目日报 Top10" target="_blank">Github 2024-03-26 开源项目日报 Top10</a>
                        <span class="text-muted">老孙正经胡说</span>
<a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/Github%E8%B6%8B%E5%8A%BF%E5%88%86%E6%9E%90/1.htm">Github趋势分析</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/1.htm">开源项目</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/Golang/1.htm">Golang</a>
                        <div>根据GithubTrendings的统计，今日(2024-03-26统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目3TypeScript项目3JupyterNotebook项目2C++项目1GDScript项目1Lua项目1Solidity项目1OpenInterpreter:本地代码运行和自然语言界面创建周期：254天开发语言：Python协议</div>
                    </li>
                                <li><a href="/article/44.htm"
                                       title="Enum 枚举" target="_blank">Enum 枚举</a>
                                    <span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a>
                                    <div>原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 
于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： 
public static final int APPLE_FUJI = 0</div>
                                </li>
                                <li><a href="/article/171.htm"
                                       title="Java8简明教程" target="_blank">Java8简明教程</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/jdk1.8/1.htm">jdk1.8</a>
                                    <div>        Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  
一.允许在接口中有默认方法实现 
        Java 8 允许我们使用default关键字，为接口声明添</div>
                                </li>
                                <li><a href="/article/298.htm"
                                       title="Oracle表维护 快速备份删除数据" target="_blank">Oracle表维护 快速备份删除数据</a>
                                    <span class="text-muted">cuisuqiang</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E9%80%9F/1.htm">快速</a><a class="tag" taget="_blank" href="/search/%E5%A4%87%E4%BB%BD/1.htm">备份</a><a class="tag" taget="_blank" href="/search/%E5%88%A0%E9%99%A4/1.htm">删除</a>
                                    <div>我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 
当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 
为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 
为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备</div>
                                </li>
                                <li><a href="/article/425.htm"
                                       title="java多态内存分析" target="_blank">java多态内存分析</a>
                                    <span class="text-muted">麦田的设计者</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98%E5%88%86%E6%9E%90/1.htm">内存分析</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E6%80%81%E5%8E%9F%E7%90%86/1.htm">多态原理</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3%E5%92%8C%E6%8A%BD%E8%B1%A1%E7%B1%BB/1.htm">接口和抽象类</a>
                                    <div>      “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。 
      但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心</div>
                                </li>
                                <li><a href="/article/552.htm"
                                       title="Xshell实现Windows上传文件到Linux主机" target="_blank">Xshell实现Windows上传文件到Linux主机</a>
                                    <span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a>
                                    <div>经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 
我是怎么操作的： 
1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo</div>
                                </li>
                                <li><a href="/article/679.htm"
                                       title="类的加载ClassLoader" target="_blank">类的加载ClassLoader</a>
                                    <span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/ClassLoader/1.htm">ClassLoader</a>
                                    <div>类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。 
  
其中重要的方法为findClass(String name)。 
  
如何写一个自己的类加载器呢？ 
首先写一个便于测试的类Student</div>
                                </li>
                                <li><a href="/article/806.htm"
                                       title="html5写的玫瑰花" target="_blank">html5写的玫瑰花</a>
                                    <span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                                    <div><html>  
<head>  
<title>I Love You!</title>  
<meta charset="utf-8" />  
</head>  
<body>  
<canvas id="c"></canvas>  
</div>
                                </li>
                                <li><a href="/article/933.htm"
                                       title="google的ConcurrentLinkedHashmap源代码解析" target="_blank">google的ConcurrentLinkedHashmap源代码解析</a>
                                    <span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/LRU/1.htm">LRU</a>
                                    <div>原文地址： 
http://janeky.iteye.com/blog/1534352 
简述 
ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 
 
ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 
 
http://code.google.com/p/concurrentlinke</div>
                                </li>
                                <li><a href="/article/1060.htm"
                                       title="webservice获取访问服务的ip地址" target="_blank">webservice获取访问服务的ip地址</a>
                                    <span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a>
                                    <div>1. 首先注入javax.xml.ws.WebServiceContext, 
@Resource 
 private WebServiceContext context; 
 
 
2. 在方法中获取交换请求的对象。 
 
 
javax.xml.ws.handler.MessageContext mc=context.getMessageContext();
com.sun.net.http</div>
                                </li>
                                <li><a href="/article/1187.htm"
                                       title="菜鸟的java基础提升之道——————>是否值得拥有" target="_blank">菜鸟的java基础提升之道——————>是否值得拥有</a>
                                    <span class="text-muted">百合不是茶</span>

<div>1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员 
  
  
 java组成：</div>
                                </li>
                                <li><a href="/article/1314.htm"
                                       title="通过修改Linux服务自动启动指定应用程序" target="_blank">通过修改Linux服务自动启动指定应用程序</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下:  chkconfig

功能说明：检查，设置系统的各种服务。

语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN></div>
                                </li>
                                <li><a href="/article/1441.htm"
                                       title="spring拦截器的一个简单实例" target="_blank">spring拦截器的一个简单实例</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/%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">拦截器</a><a class="tag" taget="_blank" href="/search/Interceptor/1.htm">Interceptor</a>
                                    <div>Purview接口 
package aop;

public interface Purview {
    void checkLogin();
} 
Purview接口的实现类PurviesImpl.java 
package aop;

public class PurviewImpl implements Purview {
	
    public void check</div>
                                </li>
                                <li><a href="/article/1568.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>什么是Velocity指令 
在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令 
  自定义指令(Directive)的一般步骤 
&nbs</div>
                                </li>
                                <li><a href="/article/1695.htm"
                                       title="【Hive十】Programming Hive学习笔记" target="_blank">【Hive十】Programming Hive学习笔记</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/programming/1.htm">programming</a>
                                    <div> 第二章 Getting Started 
1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.</div>
                                </li>
                                <li><a href="/article/1822.htm"
                                       title="nginx有选择性进行限制" target="_blank">nginx有选择性进行限制</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+%E5%8A%A8%E9%9D%99%E3%80%80%E9%99%90%E5%88%B6/1.htm">nginx 动静　限制</a>
                                    <div>http {
    limit_conn_zone $binary_remote_addr zone=addr:10m;
    limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;...

server {...
       location ~.*\.(gif|png|css|js|icon)$ {
   </div>
                                </li>
                                <li><a href="/article/1949.htm"
                                       title="java-4.-在二元树中找出和为某一值的所有路径 ." target="_blank">java-4.-在二元树中找出和为某一值的所有路径 .</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>
/*
	 * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it.
	 * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
</div>
                                </li>
                                <li><a href="/article/2076.htm"
                                       title="Netty学习笔记" target="_blank">Netty学习笔记</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>本文是阅读以下两篇文章时： 
 
http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html 
 
http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 
我的一些笔记 
 
===</div>
                                </li>
                                <li><a href="/article/2203.htm"
                                       title="js获取项目路径" target="_blank">js获取项目路径</a>
                                    <span class="text-muted">cngolon</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
                                    <div>//js获取项目根路径，如： http://localhost:8083/uimcardprj 
function getRootPath(){ 
    //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp 
    var curWwwPath=window.document.locati</div>
                                </li>
                                <li><a href="/article/2330.htm"
                                       title="oracle 的性能优化" target="_blank">oracle 的性能优化</a>
                                    <span class="text-muted">cuishikuan</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a>
                                    <div>   在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。 
    1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！</div>
                                </li>
                                <li><a href="/article/2457.htm"
                                       title="Shell变量和数组使用详解" target="_blank">Shell变量和数组使用详解</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F/1.htm">变量</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a>
                                    <div>Shell 变量 
定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： 
your_name="w3cschool.cc" 
注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 
 
 首个字符必须为字母（a-z，A-Z）。 
 中间不能有空格，可以使用下划线（_）。 
 不能使用标点符号。 
 不能使用ba</div>
                                </li>
                                <li><a href="/article/2584.htm"
                                       title="编程中的一些概念，KISS、DRY、MVC、OOP、REST" target="_blank">编程中的一些概念，KISS、DRY、MVC、OOP、REST</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a>
                                    <div>KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie</div>
                                </li>
                                <li><a href="/article/2711.htm"
                                       title="[Android]设置Activity为全屏显示的两种方法" target="_blank">[Android]设置Activity为全屏显示的两种方法</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Activity/1.htm">Activity</a>
                                    <div>1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      </div>
                                </li>
                                <li><a href="/article/2838.htm"
                                       title="solrcloud 部署方式比较" target="_blank">solrcloud 部署方式比较</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/solrCloud/1.htm">solrCloud</a>
                                    <div>solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理 
  
谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo</div>
                                </li>
                                <li><a href="/article/2965.htm"
                                       title="Java synchronized关键字详解" target="_blank">Java synchronized关键字详解</a>
                                    <span class="text-muted">gqdy365</span>
<a class="tag" taget="_blank" href="/search/synchronized/1.htm">synchronized</a>
                                    <div>转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 
 
多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 
同步机制可以使用synchronized关键字实现。 
当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 
当s</div>
                                </li>
                                <li><a href="/article/3092.htm"
                                       title="js实现登录时记住用户名" target="_blank">js实现登录时记住用户名</a>
                                    <span class="text-muted">hw1287789687</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E6%88%91/1.htm">记住我</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E5%AF%86%E7%A0%81/1.htm">记住密码</a><a class="tag" taget="_blank" href="/search/cookie/1.htm">cookie</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E7%94%A8%E6%88%B7%E5%90%8D/1.htm">记住用户名</a><a class="tag" taget="_blank" href="/search/%E8%AE%B0%E4%BD%8F%E8%B4%A6%E5%8F%B7/1.htm">记住账号</a>
                                    <div>在页面中如何获取cookie值呢? 
如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 
参考:http://hw1287789687.iteye.com/blog/2050040 
如果要求登录页面是html呢?html页面中如何获取cookie呢? 
直接上代码了 
页面:loginInput.html 
代码: 
<!DOCTYPE html PUB</div>
                                </li>
                                <li><a href="/article/3219.htm"
                                       title="开发者必备的 Chrome 扩展" target="_blank">开发者必备的 Chrome 扩展</a>
                                    <span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a>
                                    <div>Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench 
ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl</div>
                                </li>
                                <li><a href="/article/3346.htm"
                                       title="算法机试题" target="_blank">算法机试题</a>
                                    <span class="text-muted">李亚飞</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E8%AF%95%E9%A2%98/1.htm">机试题</a>
                                    <div>       在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。 
       这道题大致意思是：输入一个数，比如4,。这时会输出： 
          &n</div>
                                </li>
                                <li><a href="/article/3473.htm"
                                       title="正确配置Linux系统ulimit值" target="_blank">正确配置Linux系统ulimit值</a>
                                    <span class="text-muted">字符串</span>
<a class="tag" taget="_blank" href="/search/ulimit/1.htm">ulimit</a>
                                    <div>在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进</div>
                                </li>
                                <li><a href="/article/3600.htm"
                                       title="hibernate调用返回游标的存储过程" target="_blank">hibernate调用返回游标的存储过程</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/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a>
                                    <div>注：原创作品，转载请注明出处。 
 
 
    上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。 
    此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 
 
1，创建oracle中的包，并在该包中创建的游标类型。 
 
---创建oracle的程</div>
                                </li>
                                <li><a href="/article/3727.htm"
                                       title="Spring 4.2新特性-更简单的Application Event" target="_blank">Spring 4.2新特性-更简单的Application Event</a>
                                    <span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/application/1.htm">application</a>
                                    <div>1.1 Application Event 
 
  Spring 4.1的写法请参考10点睛Spring4.1-Application Event  
  请对比10点睛Spring4.1-Application Event  
  使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低;  
  
1.2 示例 
 
 包依赖 
  
<p</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>