蓝斑.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/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
                        <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div>
                    </li>
                    <li><a href="/article/1835508130608410624.htm"
                           title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a>
                        <span class="text-muted">某公司摸鱼前端</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div>
                    </li>
                    <li><a href="/article/1835499615491813376.htm"
                           title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
                        <span class="text-muted">彩云飘过</span>

<div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835495517774245888.htm"
                           title="python八股文面试题分享及解析(1)" target="_blank">python八股文面试题分享及解析(1)</a>
                        <span class="text-muted">Shawn________</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>#1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变</div>
                    </li>
                    <li><a href="/article/1835494257746604032.htm"
                           title="MYSQL面试系列-04" target="_blank">MYSQL面试系列-04</a>
                        <span class="text-muted">king01299</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的？innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时，如何处理未刷入（flush）的重做日志信息（redolog）。它</div>
                    </li>
                    <li><a href="/article/1835493753083752448.htm"
                           title="Kafka 消息丢失如何处理？" target="_blank">Kafka 消息丢失如何处理？</a>
                        <span class="text-muted">架构文摘JGWZ</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>今天给大家分享一个在面试中经常遇到的问题：Kafka消息丢失该如何处理？这个问题啊，看似简单，其实里面藏着很多“套路”。来，咱们先讲一个面试的“真实”案例。面试官问：“Kafka消息丢失如何处理？”小明一听，反问：“你是怎么发现消息丢失了？”面试官顿时一愣，沉默了片刻后，可能有点不耐烦，说道：“这个你不用管，反正现在发现消息丢失了，你就说如何处理。”小明一头雾水：“问题是都不知道怎么丢的，处理起来</div>
                    </li>
                    <li><a href="/article/1835493753557708800.htm"
                           title="每日算法&面试题，大厂特训二十八天——第二十天（树）" target="_blank">每日算法&面试题，大厂特训二十八天——第二十天（树）</a>
                        <span class="text-muted">肥学</span>
<a class="tag" taget="_blank" href="/search/%E2%9A%A1%E7%AE%97%E6%B3%95%E9%A2%98%E2%9A%A1%E9%9D%A2%E8%AF%95%E9%A2%98%E6%AF%8F%E6%97%A5%E7%B2%BE%E8%BF%9B/1.htm">⚡算法题⚡面试题每日精进</a><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%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
                        <div>目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章</div>
                    </li>
                    <li><a href="/article/1835492740536823808.htm"
                           title="node.js学习" target="_blank">node.js学习</a>
                        <span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                        <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
                    </li>
                    <li><a href="/article/1835491353451130880.htm"
                           title="【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库（4)</a>
                        <span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法</div>
                    </li>
                    <li><a href="/article/1835491354004779008.htm"
                           title="【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）" target="_blank">【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）</a>
                        <span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些</div>
                    </li>
                    <li><a href="/article/1835485681187647488.htm"
                           title="【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面" target="_blank">【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面</a>
                        <span class="text-muted">一个射手座的程序媛</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</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>最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获</div>
                    </li>
                    <li><a href="/article/1835483915071090688.htm"
                           title="【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库（1）</a>
                        <span class="text-muted">算法大师</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal</div>
                    </li>
                    <li><a href="/article/1835469672334585856.htm"
                           title="Java企业面试题3" target="_blank">Java企业面试题3</a>
                        <span class="text-muted">马龙强_</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分</div>
                    </li>
                    <li><a href="/article/1835464504918503424.htm"
                           title="Java面试题精选：消息队列(二)" target="_blank">Java面试题精选：消息队列(二)</a>
                        <span class="text-muted">芒果不是芒</span>
<a class="tag" taget="_blank" href="/search/Java%E9%9D%A2%E8%AF%95%E9%A2%98%E7%B2%BE%E9%80%89/1.htm">Java面试题精选</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a>
                        <div>一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会</div>
                    </li>
                    <li><a href="/article/1835460785443270656.htm"
                           title="2019考研 | 西交大软件工程" target="_blank">2019考研 | 西交大软件工程</a>
                        <span class="text-muted">笔者阿蓉</span>

<div>本科背景：某北京211学校电子信息工程互联网开发工作两年录取结果：全日制软件工程学院分数：初试350+复试笔试80+面试85+总排名：100+从五月份开始脱产学习，我主要说一下专业课和复试还有我对非全的一些看法。【数学100+】张宇，张宇，张宇。跟着张宇学习，入门视频刷一遍，真题刷两遍，错题刷三遍。书刷N多遍。从视频开始学习，是最快的学习方法。5-7月份把主要是数学学好，8-9月份开始给自己每个周</div>
                    </li>
                    <li><a href="/article/1835448239864770560.htm"
                           title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a>
                        <span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div>
                    </li>
                    <li><a href="/article/1835435506645692416.htm"
                           title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a>
                        <span class="text-muted">有一只柴犬</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div>
                    </li>
                    <li><a href="/article/1835435141535723520.htm"
                           title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a>
                        <span class="text-muted">夜空_2cd3</span>

<div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div>
                    </li>
                    <li><a href="/article/1835428948339683328.htm"
                           title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a>
                        <span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div>
                    </li>
                    <li><a href="/article/1835419870070665216.htm"
                           title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a>
                        <span class="text-muted">hai40587</span>
<a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div>
                    </li>
                    <li><a href="/article/1835413064636264448.htm"
                           title="Day_11" target="_blank">Day_11</a>
                        <span class="text-muted">ROC_bird..</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
                        <div>面试题16.15.珠玑妙算-力扣（LeetCode）/***Note:Thereturnedarraymustbemalloced,assumecallercallsfree().*///下标和对应位置的值都一样，answer[0]+1,对应位置的值猜对了，但是下标不对，answer[1]+1int*masterMind(char*solution,char*guess,int*returnSiz</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835403246865313792.htm"
                           title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a>
                        <span class="text-muted">和自己一起成长</span>

<div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div>
                    </li>
                    <li><a href="/article/1835395039572881408.htm"
                           title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a>
                        <span class="text-muted">清风怎不知意</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div>
                    </li>
                    <li><a href="/article/1835389111658180608.htm"
                           title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a>
                        <span class="text-muted">陈在天box</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div>
                    </li>
                    <li><a href="/article/1835387977480630272.htm"
                           title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a>
                        <span class="text-muted">Cavalier_01</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a>
                        <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</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>