【selection】 学习光标API并实现编辑区插入表情图片的功能

---

场景介绍

在写web版聊天器时，遇到一个需求：

聊天时用户可以在编辑区加入表情图片，并且表情图片要插入在光标位置。

// *web版聊天器地址：
http://81.68.151.74/ (开发中，欢迎讨论)

就像这样：

刚开始没考虑这块内容，所以用的</code>标签，</p> <p>而在该标签内，是无法<code>显示</code>出插入表情图片的。</p> <p>这就需要用到<code>HTML</code>中的<code>contenteditable="true"</code>属性，来创建一个自定义编辑区。</p> <p>就像这样：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">contenteditable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>然后对该自定义编辑区进行加工。</p> <p>此过程中，需要根据用户点击的位置（即光标显示的位置）来显示插入的图片，</p> <p>这就需要用到光标的控制。</p> <hr> <h2>selection介绍</h2> <p>光标控制的<code>API</code>分为两块内容：<code>selection</code>选区和<code>range</code>片段。</p> <p>根据官方介绍，<code>selection</code> 对象所对应的是用户所选择的<code> ranges</code>（区域），俗称<code>拖蓝</code>。</p> <p>默认情况下，该函数只针对一个区域。</p> <p>因为一般情况下，用拖动鼠标只能同时选中一块区域。</p> <p>在使用<code>js</code>脚本的情况下，<code>range</code>可能会出现多个。</p> <p>因此，后者可以认为是前者的一部分，选区包含若干片段，一般是一个。</p> <p>本篇就梳理下两者的常用<code>API</code>，理清操作流程。</p> <hr> <h2>selection API</h2> <p><code>selection</code> 对象表示用户选择的文本范围或插入符号的当前位置。</p> <p>它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。</p> <p>获取<code>selection</code>：</p> <pre><code class="prism language-js"><span class="token keyword">var</span> selection <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/99fdd350d2af4da8be495698d06d3805.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/99fdd350d2af4da8be495698d06d3805.jpg" alt="【selection】 学习光标API并实现编辑区插入表情图片的功能_第2张图片" width="650" height="270" style="border:1px solid black;"></a></p> <p>下面依次介绍<code>selection</code>的相关属性和方法。</p> <hr> <p>首先需要注意的是，以下内容提到的<code>起点</code>和<code>终点</code>，并不是固定的。</p> <p>这和鼠标<code>从左往右</code>选择还是<code>从右往左</code>选择有关系。</p> <p>先从哪里开始，哪里就是起点。</p> <hr> <pre><code class="prism language-html"><span class="token comment"><!--属性--></span> 1. selection.anchorNode 只读属性，用于返回选区开始位置所属的节点。 2. selection.anchorOffset 只读属性，返回选区的锚节点（ Selection.anchorNode）起点偏移量的数字。 返回值从零开始计数，如果选区从锚节点（Selection.anchorNode）的第一个字符开始， 返回值为 0。 3. selection.focusNode 只读属性，返回所选内容的结束位置部分所属的节点。 4. selection.focusOffset 返回选区终点（鼠标松开瞬间所记录的那个点）在焦点（Selection.focusNode）中的偏移量。 返回值从零开始计数，如果选区（Selection）在焦点（Selection.focusNode）的第一个字符前结束， 返回值为 0。 5. selection.isCollapsed 返回一个布尔值，用于描述选区的起始点和终止点是否位于一个位置，即是否框选了。 6. selection.rangeCount 只读属性。用于返回选区 (selection) 中 range 对象数量 一般rangeCount总是为1，因为拖动鼠标只能选择一个区域。 7. selection.type 只读属性，用于描述当前选区的选择类型。 结果有三个值: - `None` 当前没有选择。 - `Caret`: 选区已折叠（即 光标在字符之间，并未处于选中状态）。 - `Range`: 选择的是一个范围。即框选了内容。 <span class="token comment"><!--方法--></span> 1. selection.addRange(range) 向选区（Selection）中添加一个区域（Range） 2. selection.collapse(node, offset) 设置光标在选区内的位置。 node是光标所落在的目标节点 offset是落在节点的偏移量 3. selection.collapseToEnd() 取消当前选区，并把光标定位在原选区的最末尾处。无参数 4. selection.collapseToStart() 取消当前选区，并把光标定位在原选区的最开始处。无参数 5. selection.containsNode(node,isPartlyContained) node是要被判断的节点 isPartlyContained表示node节点是否被包含 isPartlyContained为true时，就是要判断选区是否包含node，（此时包含一部分或者全部，都算被包含） isPartlyContained为false时，就是要判断选区是否包含node的全部 6. selection.deleteFromDocument() 删除选区 7. selection.extend(node, offset) 移动选中区的焦点到指定的点。选中区的锚点不会移动。选中区将从锚点开始到新的焦点，不管方向。 node是表示焦点会被移动到node节点内 offset 可选参数，默认为0.表示偏移量 8. var range = selection.getRangeAt(index) 返回一个包含当前选区内容的区域对象 index表示区域编号，从0开始。index永远要小于rangeCount rangeCount一般为1，所以index一般是0 9. selection.modify(alter, direction, granularity) 通过简单的文本命令来改变当前选区或光标位置。 alter 改变类型。传入 "move" 来移动光标位置，或者 "extend" 来扩展当前选区。 direction 调整选区的方向。forward backward left right granularity 调整的距离颗粒度。一次是移动一个字的举例，还是一个字符的距离等。 10. selection.removeAllRanges() 从当前 selection 对象中移除所有的 range 对象， 取消所有的选择只 留下anchorNode 和focusNode属性并将其设置为 null 无参数。 11. selection.removeRange(range) 将一个区域从选区中移除。 range 表示要被移除的区域 12. selection.selectAllChildren(parentNode) 所有 parentNode 元素的子元素会被设为选中区域， 并取消之前的选中区域，parentNode 本身除外。 13. selection.setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset) 用来选中并设置在两个特定的 DOM 节点中文本选中的范围， 并且选中的任何内容都位于两个节点之间。 anchorNode 锚节点 - 选中内容的开始节点 anchorOffset 选中范围内起点位置在锚节点下第几个子节点的位置。 例如，如果是值为 0 的话，整个节点都是被选中的。 如果值为 1 的话，那么至少整个节点至少有一个子节点被选中。以此类推。 focusNode 焦点节点 - 选中内容的结尾节点 focusOffset 选中范围内结束位置在焦点节点下第几个子节点的位置。 例如，如果是值为 0 的话，整个节点都是被选中的。 如果值为 1 的话，那么至少整个节点至少有一个子节点被选中。以此类推 </code></pre> <hr> <h2>range 介绍</h2> <p><code>range</code>表示一部分文档片段。</p> <p>可以通过多种方法创建或获取：</p> <pre><code class="prism language-js"><span class="token comment">// 第一种 从selection中获取</span> <span class="token keyword">var</span> range <span class="token operator">=</span> selection<span class="token punctuation">.</span><span class="token function">getRangeAt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 第二种 通过Range创建</span> <span class="token keyword">var</span> range <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Range</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 第三种 create创建</span> <span class="token keyword">var</span> range <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createRange</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 注意：</span> <span class="token comment">// 如果是创建的range，在使用他的大多数方法之前需要去设置他的临界点。</span> <span class="token comment">// 也就是要确定光标</span> </code></pre> <hr> <h2>range API</h2> <pre><code class="prism language-html"><span class="token comment"><!--属性--></span> 1. range.collapsed 返回一个布尔值。表示是否起始点和结束点是同一个位置 如果返回true,就表示起始点和结束点重合。 如果返回false，就表示起始点和结束点没重合。 2. range.endContainer 它会返回Range对象结束的Node 3. range.endOffset 返回代表 Range 结束位置在 Range.endContainer 中的偏移值的数字 4. range.startContainer 返回 Range 开始的节点 5. range.startOffset 用于返回一个表示 Range 在 startContainer 中的起始位置的数字 <span class="token comment"><!--方法--></span> 1. range.cloneContents() 克隆一个区域的所有节点。 节点的id属性也会被克隆，这点需要注意。 另外，节点的监听事件不会被克隆 2. range.cloneRange() 克隆一个和原有range无关的range对象 3. range.collapse(toStart) 用于折叠边界点。也就是 是否让光标重合 toStart为true，表示让光标重合，并在range的起始点出现 toStart为false，表示让光标重合，并在range的结束点出现 4. range.insertNode(newNode); 在Range的起始位置插入节点 newNode是要插入的节点 5. range.intersectsNode(node) 用来判断给定的节点node是否与range相交，返回一个布尔值 6. range.selectNode(node); 将 Range 设置为包含整个 node 及其内容。 Range 的起始和结束节点的父节点与 node 的父节点相同。 7. range.selectNodeContents(referenceNode); 用于设置 Range，使其包含一个 Node 的内容 8. range.setEnd(endNode, endOffset); 设置光标的结束点 9. range.setEndAfter(referenceNode) 设置光标的结束点在node节点之后 10. range.setEndBefore(referenceNode) 设置光标的结束点在node节点之前 11. range.setStart(startNode, startOffset); 设置 Range的开始位置 12. range.setStartAfter(referenceNode) 设置range的开始位置在node节点之后 13. range.setStartBefore(referenceNode) 设置range的开始位置在node节点之前 14. range.surroundContents(newParent); 将 Range 对象的内容移动到一个新的节点，并将新节点放到这个范围的起始处。 </code></pre> <hr> <h2>实现编辑区插入表情图片</h2> <p><code>index.html</code></p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">*</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.wrap</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">overflow-y</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f2a5a5<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.wrap .box</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 28px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.show</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #000<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 28px<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.box[contenteditable]</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.box img, .show img</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 28px<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.btn, .show_btn</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span> <span class="token attr-name">contenteditable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>插入表情<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>show_btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>显示内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./index.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <hr> <p><code>index.js</code></p> <pre><code class="prism language-js"><span class="token keyword">var</span> wrap <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.wrap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 编辑框的外层</span> <span class="token keyword">var</span> box <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.box'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 编辑框</span> <span class="token keyword">var</span> sendEmoji <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.btn'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 发送按钮</span> <span class="token keyword">var</span> img <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 要插入的表情img</span> img<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">' https://www.kktv5.com/images/facepic/good.gif'</span><span class="token punctuation">;</span> <span class="token keyword">var</span> currentRange<span class="token punctuation">;</span> <span class="token comment">// 记录光标位置</span> <span class="token comment">// 点击编辑框时，记录下光标位置</span> box<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> selection <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> currentRange <span class="token operator">=</span> selection<span class="token punctuation">.</span><span class="token function">getRangeAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// 上下左右键 enter 输入的内容等键也会改变光标位置，也要记录下来</span> box<span class="token punctuation">.</span><span class="token function-variable function">onkeyup</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> selection <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> currentRange <span class="token operator">=</span> selection<span class="token punctuation">.</span><span class="token function">getRangeAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// 插入表情</span> sendEmoji<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> box<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 创建一个新的选区</span> <span class="token keyword">var</span> selection <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 如果光标位置原来就存在，就用原来的。</span> <span class="token comment">// 原来不存在，就重新创建一个</span> <span class="token keyword">var</span> range <span class="token operator">=</span> currentRange <span class="token operator">??</span> selection<span class="token punctuation">.</span><span class="token function">getRangeAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 插入表情图标</span> range<span class="token punctuation">.</span><span class="token function">insertNode</span><span class="token punctuation">(</span>img<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 插入后，光标显示在表情图片后面</span> range<span class="token punctuation">.</span><span class="token function">collapse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 移除其他的区域</span> selection<span class="token punctuation">.</span><span class="token function">removeAllRanges</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 把带有表情图片的区域插入到选区内</span> selection<span class="token punctuation">.</span><span class="token function">addRange</span><span class="token punctuation">(</span>range<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> show <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.show'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> show_btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.show_btn'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> show_btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 把编辑区的内容展示到另一个地方</span> <span class="token comment">// 这里是用来模拟的接收人看到的结果</span> show<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> box<span class="token punctuation">.</span>innerHTML<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// 用一层wrap包裹住编辑区，目的是解决光标无法自动捕捉表情图片的问题</span> <span class="token comment">// 这里点击wrap，让光标也能识别表情图片</span> wrap<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> selection <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>currentRange<span class="token punctuation">)</span> <span class="token punctuation">{</span> selection<span class="token punctuation">.</span><span class="token function">removeAllRanges</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> selection<span class="token punctuation">.</span><span class="token function">addRange</span><span class="token punctuation">(</span>currentRange<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> selection<span class="token punctuation">.</span><span class="token function">selectAllChildren</span><span class="token punctuation">(</span>box<span class="token punctuation">)</span><span class="token punctuation">;</span> selection<span class="token punctuation">.</span><span class="token function">collapseToEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <hr> <h2>参考资料</h2> <ul> <li><code>section</code></li> </ul> <pre><code class="prism language-html">https://developer.mozilla.org/zh-CN/docs/Web/API/Selection </code></pre> <ul> <li><code>range</code></li> </ul> <pre><code class="prism language-html">https://developer.mozilla.org/zh-CN/docs/Web/API/Range </code></pre> <hr> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1740168663970889728"></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"> <!-- 文章页-右侧1 动态广告位 --> <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> <!-- 文章页-右侧2 动态广告位 --> <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> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(浏览器,学习,html,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1886110887241117696.htm" title="从System Prompt来看Claude3、Kimi和ChatGLM4之间的差距" target="_blank">从System Prompt来看Claude3、Kimi和ChatGLM4之间的差距</a> <span class="text-muted">herosunly</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/system/1.htm">system</a><a class="tag" taget="_blank" href="/search/prompt/1.htm">prompt</a><a class="tag" taget="_blank" href="/search/gpt4/1.htm">gpt4</a><a class="tag" taget="_blank" href="/search/claude/1.htm">claude</a><a class="tag" taget="_blank" href="/search/kimi/1.htm">kimi</a><a class="tag" taget="_blank" href="/search/ChatGLM4/1.htm">ChatGLM4</a> <div>  大家好，我是herosunly。985院校硕士毕业，现担任算法t研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法行业就业。希望和大家一起成长进步。  本文主要介绍了从SystemPrompt来看Claude3、Kimi和ChatGLM</div> </li> <li><a href="/article/1886110381726822400.htm" title="DeepSeek-R1,DeepSeek-V3,DeepSeek-VL,DeepSeek-V2,DeepSeek-R1-Zero各个模型区别" target="_blank">DeepSeek-R1,DeepSeek-V3,DeepSeek-VL,DeepSeek-V2,DeepSeek-R1-Zero各个模型区别</a> <span class="text-muted">fpga和matlab</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E8%A8%80%E6%8A%80%E6%9C%AF%E6%B1%87%E9%9B%86/1.htm">前言技术汇集</a><a class="tag" taget="_blank" href="/search/%23/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/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/DeepSeek/1.htm">DeepSeek</a> <div>目录1.各个模型架构2.训练方式3.模型参数与规模4.应用场景5.性能表现6.发布时间7.价格1.各个模型架构DeepSeek-R1：未明确有特殊架构说明，但属于推理模型，可能在Transformer架构基础上针对推理做了优化，通过强化学习训练实现大量反思和验证。DeepSeek-V3：是混合专家（MoE）语言模型，采用Transformer架构。DeepSeek-VL：整体上是decoder-o</div> </li> <li><a href="/article/1886104575555989504.htm" title="Python能否实现股票的自动买卖？需要具备哪些技术和条件" target="_blank">Python能否实现股票的自动买卖？需要具备哪些技术和条件</a> <span class="text-muted">股票程序化交易接口</span> <a class="tag" taget="_blank" href="/search/%E9%87%8F%E5%8C%96%E4%BA%A4%E6%98%93/1.htm">量化交易</a><a class="tag" taget="_blank" href="/search/%E8%82%A1%E7%A5%A8API%E6%8E%A5%E5%8F%A3/1.htm">股票API接口</a><a class="tag" taget="_blank" href="/search/Python%E8%82%A1%E7%A5%A8%E9%87%8F%E5%8C%96%E4%BA%A4%E6%98%93/1.htm">Python股票量化交易</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%82%A1%E7%A5%A8%E8%87%AA%E5%8A%A8%E4%B9%B0%E5%8D%96/1.htm">股票自动买卖</a><a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%9D%A1%E4%BB%B6/1.htm">技术条件</a><a class="tag" taget="_blank" href="/search/%E5%88%B8%E5%95%86%E6%8E%A5%E5%8F%A3/1.htm">券商接口</a><a class="tag" taget="_blank" href="/search/%E8%82%A1%E7%A5%A8%E9%87%8F%E5%8C%96%E6%8E%A5%E5%8F%A3/1.htm">股票量化接口</a><a class="tag" taget="_blank" href="/search/%E8%82%A1%E7%A5%A8API%E6%8E%A5%E5%8F%A3/1.htm">股票API接口</a> <div>Python股票接口实现查询账户，提交订单，自动交易（1）Python股票程序交易接口查账，提交订单，自动交易（2）股票量化，Python炒股，CSDN交流社区>>>Python在股票交易中的基础Python是一种高级编程语言，在股票交易中有诸多优势。它具有简洁的语法，易于学习和编写代码。使用几行简单的Python代码就可以实现数据的读取和初步分析。其丰富的库，如pandas用于数据处理，nump</div> </li> <li><a href="/article/1886102308664700928.htm" title="首度揭秘：这款GitHub 3400星的播放器是如何开发出来的" target="_blank">首度揭秘：这款GitHub 3400星的播放器是如何开发出来的</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%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8/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%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91/1.htm">软件开发</a> <div>在字节跳动，有这样一支技术团队：他们开源的项目在GitHub摘得3400多颗星，除了字节跳动，不少其他互联网公司也在用他们的产品；他们经历过不少极限操作，《囧妈》2020年春节期间网络首播的一套技术解决方案，他们在36小时内就完成了；他们拥有交叉领域稀有技能，据说是「前端里最懂多媒体的，多媒体里最懂前端的」。他们，就是字节跳动的web多媒体团队。GitHub3400星的前端开源播放器Web多媒体团</div> </li> <li><a href="/article/1886102309365149696.htm" title="基于face_recognition的人脸识别" target="_blank">基于face_recognition的人脸识别</a> <span class="text-muted">#北极星star</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E8%84%B8%E8%AF%86%E5%88%AB/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/opencv/1.htm">opencv</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89/1.htm">计算机视觉</a> <div>目录一.简要介绍二.相关函数三.算法流程四.代码实现五.效果展示一.简要介绍face_recognition是一个基于Python的开源人脸识别库，它使用dlib库中的深度学习模型来实现人脸识别功能。这个库以其简洁的API和高效的性能而广受欢迎，成为许多开发者和研究者的首选工具。face_recognition库的主要功能包括：1.人脸检测：识别图像中所有的人脸并返回其位置信息。2.人脸编码：将检</div> </li> <li><a href="/article/1886098652867391488.htm" title="solr 的admin.html 详细使用讲解" target="_blank">solr 的admin.html 详细使用讲解</a> <span class="text-muted">qq_37300675</span> <a class="tag" taget="_blank" href="/search/solr/1.htm">solr</a> <div>爱雨轩真正的爱情，就像花朵，开放的地方越贫瘠，越是美丽动人！目录视图摘要视图订阅征文|从高考，到程序员深度学习与TensorFlow入门一课搞定！每周荐书|Web扫描、HTML5、Python（评论送书）solr管理界面详解标签：solrsolr管理界面solrqueryanalysis2016-08-0210:425117人阅读评论(0)收藏举报本文章已收录于：分类：Solr（8）作者同类文章X</div> </li> <li><a href="/article/1886098145964781568.htm" title="uniapp安卓端后台定时任务不能触发问题" target="_blank">uniapp安卓端后台定时任务不能触发问题</a> <span class="text-muted">张小勇</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>如果用vue界面就会导致这个问题,因为实际上是加载了一个浏览器内核,有的手机一旦退出到后台就会停止运行js代码而用nvue则用原生技术实现,就能有一定的后台运行能力尤其是app.vue里面如果有全局定时任务的时候,要把app.vue改为app.nvue</div> </li> <li><a href="/article/1886097514885607424.htm" title="Web 开发入门：从前端到后端的全栈开发探索" target="_blank">Web 开发入门：从前端到后端的全栈开发探索</a> <span class="text-muted">HelloZheQ</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web开发是指创建和维护通过网络浏览器访问的应用程序。Web开发涉及到的领域非常广泛，涵盖了前端、后端、数据库等多个技术栈。在这篇文章中，我们将详细介绍Web开发的基本概念、前端和后端的技术、全栈开发的特点以及如何开始从事Web开发。1.Web开发简介Web开发是构建和维护网站或Web应用程序的过程，分为前端开发、后端开发和全栈开发。前端开发负责用户界面和交互体验，后端开发负责服务器端的逻辑处理、</div> </li> <li><a href="/article/1886096882174849024.htm" title="【数据结构】顺序表的实现——动态分配" target="_blank">【数据结构】顺序表的实现——动态分配</a> <span class="text-muted">豌豆射手^</span> <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%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>个人主页：豌豆射手^欢迎点赞✍评论⭐收藏收录专栏：数据结构希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、交流进步！【数据结构】顺序表的实现——动态分配引言一动态分配内存的概念1.1概念1.2类比二动态分配的步骤2.1工作步骤2.2类比三顺序表的动态分配概念3.1概念3.2类比四顺序表动态分配的具体步骤总结引言在数据结构的领域中，顺序表作为一种基础的线性数据结构，其实现方</div> </li> <li><a href="/article/1886096504108675072.htm" title="requests模块-timeout参数" target="_blank">requests模块-timeout参数</a> <span class="text-muted">李乾星</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E8%87%AA%E5%AD%A6%E7%AC%94%E8%AE%B0/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><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/1.htm">网络爬虫</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a> <div>超时参数timeout的重要性与使用方法在进行网上冲浪或爬虫项目开发时，我们常常会遇到网络波动和请求处理时间过长的情况。长时间等待一个请求可能仍然没有结果，导致整个项目效率低下。为了解决这个问题，我们可以使用超时参数timeout来强制要求请求在特定时间内返回结果，否则将抛出异常。使用超时参数timeout的方法在学习爬虫和request模块的过程中，我们会频繁使用requests.get(url</div> </li> <li><a href="/article/1886095117002010624.htm" title="探究Fingerprintjs：了解浏览器指纹技术的原理和应用" target="_blank">探究Fingerprintjs：了解浏览器指纹技术的原理和应用</a> <span class="text-muted">Bj陈默</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、什么是FingerprintjsFingerprintjs是一个用于生成浏览器指纹的JavaScript库。浏览器指纹是一种通过收集浏览器的各种信息来识别用户设备的技术。它类似于人的指纹，具有一定的独特性，可以用于区分不同的用户设备。二、浏览器指纹技术的原理（一）基本信息收集用户代理（UserAgent）用户代理字符串包含了浏览器的类型、版本、操作系统等信息。例如，一个典型的用户代理字符串可能</div> </li> <li><a href="/article/1886094108582277120.htm" title="人工智能导论--第1章-知识点与学习笔记" target="_blank">人工智能导论--第1章-知识点与学习笔记</a> <span class="text-muted">想拿高薪的韭菜</span> <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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>请根据教材内容，完成进行下面的作业任务。必须包含有教材的具体内容，不能是生成式AI系统的生成内容。参考教材1.1节的内容介绍，谈谈你对“智能”的认识。思维能力是智能的重要特征之一，结合教材1.1.2节内容，从思维的定义、分类及其特点等角度，阐述思维的含义。参考教材1.1.3节的内容介绍，名词解析“人工智能”。参考教材1.2节的内容介绍，介绍人工智能的发展简史。参考教材1.3节的内容介绍，人工智能作</div> </li> <li><a href="/article/1886090957284241408.htm" title="高效构建仓库AGV管理系统：基于Python的路径规划与货架管理" target="_blank">高效构建仓库AGV管理系统：基于Python的路径规划与货架管理</a> <span class="text-muted">机器懒得学习</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E5%BE%84%E8%A7%84%E5%88%92/1.htm">路径规划</a><a class="tag" taget="_blank" href="/search/AGV/1.htm">AGV</a> <div>在现代化仓储中，高效管理自动引导车辆（AGV）是提升生产力和管理效率的关键。作为一种智能仓储设备，AGV可以自主完成物料的搬运，但如何实现AGV的路径规划和货架管理？本篇博客将通过一个Python项目，带你深度了解如何实现一个具备路径规划与货架管理功能的仓库管理系统（WMS）。在此过程中，你将学习到AGV的路径规划、图像可视化、节拍管理等核心技术。无论你是对物流技术感兴趣，还是对Python项目管</div> </li> <li><a href="/article/1886088438130733056.htm" title="微前端框架qiankun剖析" target="_blank">微前端框架qiankun剖析</a> <span class="text-muted">浮游本尊</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</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>一、single-spa简介要了解qiankun的实现机制，那我们不得不从其底层依赖的single-spa说起。随着微前端的发展，我们看到在这个领域之中出现了各式各样的工具包和框架来帮助我们方便快捷的实现自己的微前端应用。在发展早期，single-spa可以说是独树一帜，为我们提供了一种简便的微前端路由工具，大大降低了实现一个微前端应用的成本。我们来看一下一个典型single-spa微前端应用的架</div> </li> <li><a href="/article/1886083899398877184.htm" title="react中关于组件的一些概念(有无状态组件、组件封装与继承 、高阶组件)" target="_blank">react中关于组件的一些概念(有无状态组件、组件封装与继承 、高阶组件)</a> <span class="text-muted">不能懒鸭</span> <a class="tag" taget="_blank" href="/search/react%E5%9F%BA%E7%A1%80/1.htm">react基础</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>怎么理解“在react中，一切皆为组件”句话react采用组件化的思想，最小的组件单位就是原生HTML元素，采用JSX语法组件声明调用react的虚拟dom，就是一个大的组件树，从父组件层到子组件，在react-routerv4版开始，路由本身也是组件各个库提供的hoc返回也是组件，如withRouter、connectreact中的基础数据stateprops的传递也是以组件为基础1.什么是组件</div> </li> <li><a href="/article/1886076834605494272.htm" title="Qt MDI和Ribbon界面集成实践教程" target="_blank">Qt MDI和Ribbon界面集成实践教程</a> <span class="text-muted">Pella732</span> <div>本文还有配套的精品资源，点击获取简介：本文深入介绍了基于Qt的RibbonMDIDemo项目，该项目展示了一个具有MicrosoftOffice风格的RibbonBar的多文档界面应用程序。通过一个完整的示例工程，读者可以学习如何在Qt环境中构建Ribbon风格的用户界面以及多文档界面（MDI）的应用程序。教程覆盖了RibbonBar的设计、MDIArea的管理、菜单和工具栏的整合，以及文档和视图</div> </li> <li><a href="/article/1886075196138385408.htm" title="Node+puppeteer学习笔记（九）--使用-Python3 + Pyppeteer" target="_blank">Node+puppeteer学习笔记（九）--使用-Python3 + Pyppeteer</a> <span class="text-muted">温柔夏目</span> <a class="tag" taget="_blank" href="/search/Puppeteer/1.htm">Puppeteer</a> <div>因为我是Python流，自动化都是基于Python的，所以一直在关注Puppeteer这个包是否会被Python支持，然后我就在官网上找到了Pyppeteer这个包，因为修改了第二个字母，差点没认出来，这个包其实就是根据Puppeteer实现的地址如下：官方GitHub仓库：https://github.com/miyakogi/pyppeteer.官方API地址：https://miyakogi</div> </li> <li><a href="/article/1886074944039743488.htm" title="基于Spring Boot的校园志愿者服务网站" target="_blank">基于Spring Boot的校园志愿者服务网站</a> <span class="text-muted">超级无敌暴龙战士塔塔开</span> <a class="tag" taget="_blank" href="/search/Java%E8%AF%BE%E8%AE%BE%E4%B8%8E%E6%AF%95%E8%AE%BE%E8%B5%84%E6%BA%90/1.htm">Java课设与毕设资源</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>文章目录项目介绍主要功能截图：登录个人中心志愿者管理活动类型管理活动报名管理活动心得部分代码展示设计总结项目获取方式作者主页：Java韩立简介：Java领域优质创作者、简历模板、学习资料、面试题库【关注我，都给你】文末获取源码联系项目介绍校园志愿者服务网站，java项目，springboot项目。eclipse和idea都能打开运行。推荐环境配置：eclipse/ideajdk1.8mavenmy</div> </li> <li><a href="/article/1886074817791193088.htm" title="Java学习教程，从入门到精通，JDBC中WHERE子句的语法知识点及案例代码（107）" target="_blank">Java学习教程，从入门到精通，JDBC中WHERE子句的语法知识点及案例代码（107）</a> <span class="text-muted">知识分享小能手</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><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/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/JDBC/1.htm">JDBC</a><a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a> <div>JDBC中WHERE子句的语法知识点及案例代码JDBCWHERE子句语法知识点WHERE子句用于在SQL查询中对数据进行筛选，它可以根据指定的条件过滤数据行。在JDBC中，WHERE子句通常用于SELECT、UPDATE和DELETE语句中。常见的WHERE子句条件比较运算符=：等于：大于=：大于等于18ANDscore>=80";try{//加载数据库驱动Class.forName("com.m</div> </li> <li><a href="/article/1886072928303378432.htm" title="PYH与MAC的桥梁MII/MIIM" target="_blank">PYH与MAC的桥梁MII/MIIM</a> <span class="text-muted">辣椒卷二王</span> <a class="tag" taget="_blank" href="/search/%E8%BD%A6%E8%BD%BD%E7%B3%BB%E7%BB%9F/1.htm">车载系统</a><a class="tag" taget="_blank" href="/search/%E8%BD%A6%E8%BD%BD%E4%BA%92%E8%81%94%E7%BD%91/1.htm">车载互联网</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E7%90%86%E5%B1%82/1.htm">物理层</a> <div>在学习车载互联网时，看到了一句话，Processor通过DMA直接存储访问与MAC之间进行数据的交互，MAC通过MII介质无关接口与PHY之间进行数据的交互。常见的以太网硬件结构是，将MAC集成进Processor芯片，将PHY留在Processor片外，做成单独的收发器芯片。但是他并没有讲解MII使用的具体流程。本篇博客将聚焦MII与MIIM讲述PYH与MAC以及MAC与Processor是如何</div> </li> <li><a href="/article/1886072424420667392.htm" title="基于天地图的应用服务系统设计开发—以甘肃高校招生服务为例" target="_blank">基于天地图的应用服务系统设计开发—以甘肃高校招生服务为例</a> <span class="text-muted">刘一哥GIS</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A9%E5%9C%B0%E5%9B%BE/1.htm">天地图</a><a class="tag" taget="_blank" href="/search/SQL/1.htm">SQL</a><a class="tag" taget="_blank" href="/search/server/1.htm">server</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1/1.htm">服务</a><a class="tag" taget="_blank" href="/search/%E6%8B%9B%E7%94%9F/1.htm">招生</a><a class="tag" taget="_blank" href="/search/VS%E7%BD%91%E7%AB%99/1.htm">VS网站</a> <div>“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。它是“数字中国”的重要组成部分，是国家地理信息公共服务平台的公众版。“天地图”的目的在于促进地理信息资源共享和高效利用，提高测绘地理信息公共服务能力和水平，改进测绘地理信息成果的服务方式，更好地满足国家信息化建设的需要，为社会公众的工作和生活提供方便。本文基于天地图提供的位置服务，采用B/S（浏览器/服务器）的系统设计开发模式，以用户的实际</div> </li> <li><a href="/article/1886065365117628416.htm" title="Python从0到100（八十一）：神经网络-Fashion MNIST数据集取得最高的识别准确率" target="_blank">Python从0到100（八十一）：神经网络-Fashion MNIST数据集取得最高的识别准确率</a> <span class="text-muted">是Dream呀</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/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>前言：零基础学Python：Python从0到100最新最全教程。想做这件事情很久了，这次我更新了自己所写过的所有博客，汇集成了Python从0到100，共一百节课，帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、计算机视觉、机器学习、神经网络以及人工智能相关知识，成为学习学习和学业的先行者！欢迎大家订阅专栏：零基础学Python：Python从0到100最新</div> </li> <li><a href="/article/1886064984341934080.htm" title="HTML基础与进阶技术指南" target="_blank">HTML基础与进阶技术指南</a> <span class="text-muted">王奥雷</span> <div>本文还有配套的精品资源，点击获取简介：HTML是构建网页的基础语言，负责定义网页的内容结构和样式。初学者需要掌握HTML元素、属性、结构等基础知识，并了解HTML5新增的语义化标签，表单元素的使用，布局与定位技术，响应式设计原则，以及如何与JavaScript交互。此外，学习SEO优化和无障碍性设计也是提高网页质量和可访问性的关键。本指南旨在引导初学者从基础到高级技巧，逐步深入理解并实践网页开发。</div> </li> <li><a href="/article/1886062966323867648.htm" title="C语言程序执行全流程" target="_blank">C语言程序执行全流程</a> <span class="text-muted">柠檬鲨_</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>其实下面的步骤知道大概就行了~不用每个都详细了解（OS：你就算只知道编辑编译链接执行这四个阶段都不影响学习的）C语言程序的执行过程涉及多个步骤，在编译前主要有编辑阶段。以下是C语言程序从编写到执行的完整顺序及各阶段的详细介绍：编辑阶段文本编写：程序员使用文本编辑器（如VisualStudioCode、SublimeText、Vim等）编写C语言代码，将算法和逻辑以文本形式输入到源文件中，源文件通常</div> </li> <li><a href="/article/1886061576658677760.htm" title="PWN基础15：GOT表 和 PLT表" target="_blank">PWN基础15：GOT表 和 PLT表</a> <span class="text-muted">prettyX</span> <a class="tag" taget="_blank" href="/search/PWN/1.htm">PWN</a> <div>在学习总结GOT、PLT表的相关知识，下面是我参考的文章和视频，每条资源都互有补充感谢各位作者的分享精神https://zhuanlan.zhihu.com/p/130271689https://blog.csdn.net/qq_18661257/article/details/54694748https://blog.csdn.net/linuxheik/article/details/8850</div> </li> <li><a href="/article/1886059059526823936.htm" title="深度学习-笔记2" target="_blank">深度学习-笔记2</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C/1.htm">深度学习神经网络</a> <div>paddlepaddle安装(使用cpu)：dockerpullregistry.baidubce.com/paddlepaddle/paddle:2.6.2查看下paddlepaddle的镜像层次和安装目录结构(没有看到dockerbuild文件，先感受一下目录结构吧)：dockerinspectregistry.baidubce.com/paddlepaddle/paddle:2.6.2|gr</div> </li> <li><a href="/article/1886058551013601280.htm" title="强化学习中的关键模型与算法：从Actor-Critic到GRPO" target="_blank">强化学习中的关键模型与算法：从Actor-Critic到GRPO</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>强化学习中的关键模型与算法：从Actor-Critic到GRPO强化学习中的Actor-Critic模型是什么？这与生成对抗网络（GANs）十分相似。在生成对抗网络中，生成器和判别器模型在整个训练过程中相互对抗。在强化学习的Actor-Critic模型中，也存在类似的概念：Actor-Critic（A2C、A3C）是一种流行的强化学习架构，它结合了两个组件：Actor（行动者）——学习策略（$\p</div> </li> <li><a href="/article/1886057922107076608.htm" title="第26节课：内容安全策略（CSP）—构建安全网页的防御盾" target="_blank">第26节课：内容安全策略（CSP）—构建安全网页的防御盾</a> <span class="text-muted">学问小小谢</span> <a class="tag" taget="_blank" href="/search/HTML%E5%AD%A6%E4%B9%A0/1.htm">HTML学习</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>目录CSP基础CSP的作用CSP的主要属性配置CSP通过响应头配置CSP通过HTML``标签配置CSP属性设置详解指定多个来源配置示例说明常见错误配置实践：CSP与XSS防护示例1：防止内联脚本和样式说明示例2：限制图片来源说明限制与注意事项结语在现代Web开发中，内容安全策略（CSP）是一种强大的工具，用于帮助开发者防止多种安全漏洞，尤其是跨站脚本（XSS）攻击。本节课将详细介绍CSP的基础知识</div> </li> <li><a href="/article/1886055654616002560.htm" title="【Go语言圣经】第二节：程序结构" target="_blank">【Go语言圣经】第二节：程序结构</a> <span class="text-muted">YGGP</span> <a class="tag" taget="_blank" href="/search/Golang/1.htm">Golang</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a> <div>二.程序结构上个月我跟随Golang开发实战项目快速过了一遍Golang的基础语法，感觉学习的不是非常深入，不如之前学C++时直接啃C++Primer的效果好，因此打算重新利用《Go语言圣经》这个非常好的开源资源重新系统地回顾一下Golang的基础语法（也算是为春天即将开始找实习准备一下八股了）。这里我跳过了第一章入门，实际上《Go语言圣经》我半年前已经看过一小部分了，感觉第一章的内容偏向于若干个</div> </li> <li><a href="/article/1886055276679852032.htm" title="前端调试技巧：从 Console 到 Chrome DevTools 的进阶指南" target="_blank">前端调试技巧：从 Console 到 Chrome DevTools 的进阶指南</a> <span class="text-muted">技术出海录</span> <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/React/1.htm">React</a> <div>作为前端开发者，你可能每天都在和Bug打交道。有时候一个简单的问题可能会耗费几个小时，而掌握正确的调试技巧可以大大提高解决问题的效率。今天，我就来分享一些在实际工作中常用的调试技巧。Console的高级用法除了常见的console.log，Console还有很多强大的功能：//1.使用console.table展示数组或对象constusers=[{id:1,name:'Alice',role:'</div> </li> <li><a href="/article/50.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/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/encapsulatopn/1.htm">encapsulatopn</a> <div>       最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。     1、final关键字       译为：最终的        &</div> </li> <li><a href="/article/177.htm" title="F5与集群的区别" target="_blank">F5与集群的区别</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a> <div>        http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。         F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似</div> </li> <li><a href="/article/304.htm" title="LeetCode[Math] - #7 Reverse Integer" target="_blank">LeetCode[Math] - #7 Reverse Integer</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>原题链接：#7 Reverse Integer   要求： 按位反转输入的数字 例1： 输入 x = 123, 返回 321 例2： 输入 x = -123, 返回 -321   难度：简单   分析： 对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但</div> </li> <li><a href="/article/431.htm" title="BufferedOutputStream" target="_blank">BufferedOutputStream</a> <span class="text-muted">周凡杨</span> <div>     首先说一下这个大批量，是指有上千万的数据量。      例子：      有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！      select t.msisd</div> </li> <li><a href="/article/558.htm" title="linux下模拟按键输入和鼠标" target="_blank">linux下模拟按键输入和鼠标</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键 模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in</div> </li> <li><a href="/article/685.htm" title="ContentProvider初体验" target="_blank">ContentProvider初体验</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/ContentProvider/1.htm">ContentProvider</a> <div>ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。 在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。 如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte</div> </li> <li><a href="/article/812.htm" title="关于Spring MVC项目（maven）中通过fileupload上传文件" target="_blank">关于Spring MVC项目（maven）中通过fileupload上传文件</a> <span class="text-muted">843977358</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a><a class="tag" taget="_blank" href="/search/%E4%BF%AE%E6%94%B9%E5%A4%B4%E5%83%8F/1.htm">修改头像</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a><a class="tag" taget="_blank" href="/search/upload/1.htm">upload</a> <div>Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。   1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） <!-- 文件上传 start by zhangyd-c --&g</div> </li> <li><a href="/article/939.htm" title="使用svnkit api，纯java操作svn，实现svn提交，更新等操作" target="_blank">使用svnkit api，纯java操作svn，实现svn提交，更新等操作</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/svnkit/1.htm">svnkit</a> <div> 原文：http://blog.csdn.net/hardwin/article/details/7963318   import java.io.File; import org.apache.log4j.Logger; import org.tmatesoft.svn.core.SVNCommitInfo; import org.tmateso</div> </li> <li><a href="/article/1066.htm" title="对比浏览器，casperjs，httpclient的Header信息" target="_blank">对比浏览器，casperjs，httpclient的Header信息</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/crawler/1.htm">crawler</a><a class="tag" taget="_blank" href="/search/header/1.htm">header</a> <div> @Override protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String type=req.getParameter("type"); Enumeration es=re</div> </li> <li><a href="/article/1193.htm" title="java.io操作 DataInputStream和DataOutputStream基本数据流" target="_blank">java.io操作 DataInputStream和DataOutputStream基本数据流</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/%E6%B5%81/1.htm">流</a> <div>1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象  先将类实例化  后面的文章将详细写到     2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。</div> </li> <li><a href="/article/1320.htm" title="车辆保险理赔案例" target="_blank">车辆保险理赔案例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E8%BD%A6%E9%99%A9/1.htm">车险</a> <div>理赔案例： 一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。 赔付建议和方案： 客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”； 如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业</div> </li> <li><a href="/article/1447.htm" title="学习Spring必学的Java基础知识(5)—注解" target="_blank">学习Spring必学的Java基础知识(5)—注解</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> <div>        文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。           有必要对</div> </li> <li><a href="/article/1574.htm" title="【Struts2一】Struts2 Hello World" target="_blank">【Struts2一】Struts2 Hello World</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Hello+world/1.htm">Hello world</a> <div>Struts2 Hello World应用的基本步骤 创建Struts2的Hello World应用，包括如下几步： 1.配置web.xml 2.创建Action 3.创建struts.xml，配置Action 4.启动web server，通过浏览器访问   配置web.xml <?xml version="1.0" encoding="</div> </li> <li><a href="/article/1701.htm" title="【Avro二】Avro RPC框架" target="_blank">【Avro二】Avro RPC框架</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a> <div>1. Avro RPC简介 1.1. RPC RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包 从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R</div> </li> <li><a href="/article/1828.htm" title="lua　set get cookie" target="_blank">lua　set get cookie</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lua+cookie/1.htm">lua cookie</a> <div>lua: local access_token = ngx.var.cookie_SGAccessToken if access_token then ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000" end</div> </li> <li><a href="/article/1955.htm" title="java-打印不大于N的质数" target="_blank">java-打印不大于N的质数</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class PrimeNumber { /** * 寻找不大于N的质数 */ public static void main(String[] args) { int n=100; PrimeNumber pn=new PrimeNumber(); pn.printPrimeNumber(n); System.out.print</div> </li> <li><a href="/article/2082.htm" title="Spring源码学习-PropertyPlaceholderHelper" target="_blank">Spring源码学习-PropertyPlaceholderHelper</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/spring/1.htm">spring</a> <div>今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复： 详见： http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug </div> </li> <li><a href="/article/2209.htm" title="[逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么?" target="_blank">[逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么?</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E6%8B%93%E6%89%91/1.htm">拓扑</a> <div>    如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢?    是否可以形成一种新的模糊语言识别和处理模型呢?  大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成</div> </li> <li><a href="/article/2336.htm" title="ITEYE 都换百度推广了" target="_blank">ITEYE 都换百度推广了</a> <span class="text-muted">cuisuqiang</span> <a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/AdSense/1.htm">AdSense</a><a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6%E6%8E%A8%E5%B9%BF/1.htm">百度推广</a><a class="tag" taget="_blank" href="/search/%E5%B9%BF%E5%91%8A/1.htm">广告</a><a class="tag" taget="_blank" href="/search/%E5%A4%96%E5%BF%AB/1.htm">外快</a> <div>以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。   为什么个人博客设置里面还是Google AdSense呢？   都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。   什么时候能从ITEYE上来点外快，哪怕少点</div> </li> <li><a href="/article/2463.htm" title="新浪微博技术架构分析" target="_blank">新浪微博技术架构分析</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A/1.htm">新浪微博</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第</div> </li> <li><a href="/article/2590.htm" title="玩转ARP攻击" target="_blank">玩转ARP攻击</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/r/1.htm">r</a> <div>我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。 网上关于ARP的资料已经很多了，就不用我都说了。 用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。 以下讨论的机子有 一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98</div> </li> <li><a href="/article/2717.htm" title="PHP编码规范" target="_blank">PHP编码规范</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83/1.htm">编码规范</a> <div>一、文件格式 1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例</div> </li> <li><a href="/article/2844.htm" title="linux 脱机管理（nohup）" target="_blank">linux 脱机管理（nohup）</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux+nohup/1.htm">linux nohup</a><a class="tag" taget="_blank" href="/search/nohup/1.htm">nohup</a> <div>脱机管理 nohup 转载请出自出处：http://eksliang.iteye.com/blog/2166699 nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 nohup [命令与参数] --在终端机前台工作 nohup [命令与参数] & --在终端机后台工作   但是这个命令需要注意的是，nohup并不支持bash的内置命令，所</div> </li> <li><a href="/article/2971.htm" title="BusinessObjects Enterprise Java SDK" target="_blank">BusinessObjects Enterprise Java SDK</a> <span class="text-muted">greemranqq</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a><a class="tag" taget="_blank" href="/search/SAP/1.htm">SAP</a><a class="tag" taget="_blank" href="/search/Crystal+Reports/1.htm">Crystal Reports</a> <div>最近项目用到oracle_ADF  从SAP/BO 上调用 水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手 提供更多的便利。   首先，我是尝试用JAVA JSP 去访问的。   官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja</div> </li> <li><a href="/article/3098.htm" title="系统负载剧变下的管控策略" target="_blank">系统负载剧变下的管控策略</a> <span class="text-muted">iamzhongyong</span> <a class="tag" taget="_blank" href="/search/%E9%AB%98%E5%B9%B6%E5%8F%91/1.htm">高并发</a> <div>假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 1、水平扩展 这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 2、系统分组 假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组</div> </li> <li><a href="/article/3225.htm" title="BitTorrent DHT 协议中文翻译" target="_blank">BitTorrent DHT 协议中文翻译</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/bit/1.htm">bit</a> <div>前言 做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070</div> </li> <li><a href="/article/3352.htm" title="Ubuntu下Java环境的搭建" target="_blank">Ubuntu下Java环境的搭建</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a> <div>配置命令： 　　$sudo apt-get install ubuntu-restricted-extras 　　再运行如下命令： 　　$sudo apt-get install sun-java6-jdk 　　待安装完毕后选择默认Java. 　　$sudo update- alternatives --config java 　　安装过程提示选择，输入“2”即可，然后按回车键确定。 </div> </li> <li><a href="/article/3479.htm" title="js字符串转日期（兼容IE所有版本）" target="_blank">js字符串转日期（兼容IE所有版本）</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/TO/1.htm">TO</a><a class="tag" taget="_blank" href="/search/Date/1.htm">Date</a><a class="tag" taget="_blank" href="/search/String/1.htm">String</a><a class="tag" taget="_blank" href="/search/IE/1.htm">IE</a> <div> /** * 字符串转时间（yyyy-MM-dd HH:mm:ss） * result （分钟） */ stringToDate : function(fDate){ var fullDate = fDate.split(" ")[0].split("-"); var fullTime = fDate.split("</div> </li> <li><a href="/article/3606.htm" title="【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析" target="_blank">【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a><a class="tag" taget="_blank" href="/search/%E5%85%B3%E8%81%94%E8%A7%84%E5%88%99/1.htm">关联规则</a> <div>关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。 关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。 例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%] 支持度3%：意味3%顾客同时购买牛奶和面包。 置信度40%：意味购买牛奶的顾客40%也购买面包。 规则的支持度和置信度是两个规则兴</div> </li> <li><a href="/article/3733.htm" title="Spring 5.0 的系统需求，期待你的反馈" target="_blank">Spring 5.0 的系统需求，期待你的反馈</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>               Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。          Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。  </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. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </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>