deniro_li

说说 JavaScript 表单脚本之文本框

在 HTML 中，有两种方式表现文本框：

使用元素表现单行文本框。
使用 </code> 元素表现多行文本框。</li> </ol> <p>必须将 <code><input></code> 元素的 type 属性设置为 “text”，才能表现为文本框。它的 size 属性指定这个文本框能够显示的字符数；value 属性用于设置文本框的初始值；maxlength 属性指定文本框可以接受的最大字符数：</p> <p><code><input type="text" size="25" maxlength="50" value="initial value"></code></p> <p><code><textarea></code> 元素的 rows 属性指定文本框的字符行数，cols 属性指定文本框的字符列数。它的初始值必须放在 <code><textarea></code> 与 <code> 之间：

初始值

注意，不能给 </code> 元素设置最大字符数！</p> <p>这两种文本框都会将用户输入的内容保存在 value 属性中，可以通过这个属性读取和写入文本框的值：</p> <pre class="prettyprint"><code class=" hljs avrasm">var textbox = document<span class="hljs-preprocessor">.forms</span>[<span class="hljs-number">0</span>]<span class="hljs-preprocessor">.elements</span>[<span class="hljs-string">"textbox1"</span>]<span class="hljs-comment">;</span> console<span class="hljs-preprocessor">.log</span>(textbox<span class="hljs-preprocessor">.value</span>)<span class="hljs-comment">;</span> textbox<span class="hljs-preprocessor">.value</span> = <span class="hljs-string">"新值"</span><span class="hljs-comment">;</span></code></pre> <p>不建议使用标准的 DOM 方法，因为使用标准的 DOM 方法对 value 属性所做的更改，不一定会反映在 DOM 中！</p> <h2 id="11-选择文本">1.1 选择文本</h2> <p>这两种文本都支持 select() 方法，这可以选择文本框中的所有文本。调用 select() 方法时，除了 Opera 之外，其他的浏览器都会将焦点设置到文本框中。</p> <p>一般情况下，在文本框获得焦点时选择所有的文本内容，这会提高用户体验，特别是文本框包含默认值时，这样用户就不需要一个一个地删除文本咯：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.getElementById(<span class="hljs-string">"deniro"</span>); EventUtil.addHandler(textbox, <span class="hljs-string">"focus"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> target = EventUtil.getTarget(event); target.select(); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <h3 id="111-select-事件">1.1.1 select 事件</h3> <p>选择了文本框中的文本时，会触发 select 事件。至于什么时候触发，会因浏览器而异。IE9+、Opera、Firefox、Chrome 和 Safari 中，只要用户选择了文本并释放鼠标，才会触发 select 事件。IE8 及早期版本，只要用户选择了一个字符，就会触发select 事件：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.forms[<span class="hljs-number">0</span>].elements[<span class="hljs-string">"textbox1"</span>]; EventUtil.addHandler(textbox, <span class="hljs-string">"select"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(<span class="hljs-string">"Text selected"</span> + textbox.value); }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <h3 id="112-取得选择的文本">1.1.2 取得选择的文本</h3> <p>HTML5 添加了两个属性：selectionStart 和 selectionEnd。它们保存的是基于 0 的数值，表示所选择文本的范围（文本选区开头与结尾的偏移量）。 IE8 及更早版本不支持这两个属性，它用的是 document.selection 对象：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getSelectedText</span><span class="hljs-params">(textbox)</span> {</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> textbox.selectionStart == <span class="hljs-string">"number"</span>) { <span class="hljs-keyword">return</span> textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (document.selection) { <span class="hljs-keyword">return</span> document.selection.createRange().text; } } <span class="hljs-keyword">var</span> textbox = document.forms[<span class="hljs-number">0</span>].elements[<span class="hljs-string">"textbox1"</span>]; EventUtil.addHandler(textbox, <span class="hljs-string">"select"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(getSelectedText(textbox)); }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <h3 id="113-取得选择的部分文本">1.1.3 取得选择的部分文本</h3> <p>HTML5 使用 setSelectionRange() 方法，它接收两个参数：要选择的第一个字符的索引以及最后要选择的最后一个字符之后的字符索引，而 IE8 及更早版本是使用范围来选择部分文本的，所以跨浏览器的方案是：</p> <pre class="prettyprint"><code class=" hljs scala"><script <span class="hljs-keyword">type</span>=<span class="hljs-string">"text/javascript"</span>> <span class="hljs-javadoc">/** * * <span class="hljs-javadoctag">@param</span> textbox 要操作的文本框 * <span class="hljs-javadoctag">@param</span> startIndex 要选择文本中的第一个字符的索引 * <span class="hljs-javadoctag">@param</span> stopIndex 要选择文本中的最后一个字符之后的索引 */</span> function selectText(textbox, startIndex, stopIndex) { <span class="hljs-keyword">if</span> (textbox.setSelectionRange) { textbox.setSelectionRange(startIndex, stopIndex); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (textbox.createTextRange) { <span class="hljs-keyword">var</span> range = textbox.createTextRange(); range.collapse(<span class="hljs-keyword">true</span>); range.moveStart(<span class="hljs-string">"character"</span>, startIndex); range.moveEnd(<span class="hljs-string">"character"</span>, stopIndex - startIndex); range.select(); } textbox.focus(); } <span class="hljs-keyword">var</span> textbox = document.forms[<span class="hljs-number">0</span>].elements[<span class="hljs-string">"textbox1"</span>]; textbox.value = <span class="hljs-string">"Hello world!"</span>; <span class="hljs-comment">//选择所有文本</span> selectText(textbox, <span class="hljs-number">0</span>, textbox.value.length); <span class="hljs-comment">//选择前 3 个字符</span> selectText(textbox, <span class="hljs-number">0</span>, <span class="hljs-number">3</span>);<span class="hljs-comment">//"Hel"</span> <span class="hljs-comment">//选择第 4 到第 6 个字符</span> selectText(textbox, <span class="hljs-number">4</span>, <span class="hljs-number">7</span>);<span class="hljs-comment">//"o w"</span> </script></code></pre> <p>这种技术一般用于根据输入提供建议的自动完成文本框中，是不是很厉害呀O(∩_∩)O~</p> <h1 id="2-过滤输入">2 过滤输入</h1> <p>综合使用事件和 DOM，就可以将普通的文本框转换为能够理解用户输入的数据的智能型文本框！</p> <h2 id="21-屏蔽字符">2.1 屏蔽字符</h2> <p>有时候，需要确保用户输入的文本中包含某些字符或者不包含某些字符。可以通过 keypress 事件（需要阻止默认行为）来屏蔽这些字符：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.forms[<span class="hljs-number">0</span>].elements[<span class="hljs-string">"textbox1"</span>]; EventUtil.addHandler(textbox, <span class="hljs-string">"keypress"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-comment">// var target = EventUtil.getTarget(event);</span> <span class="hljs-keyword">var</span> charCode = EventUtil.getCharCode(event); <span class="hljs-keyword">if</span> (!<span class="hljs-regexp">/\d/</span>.test(<span class="hljs-built_in">String</span>.fromCharCode(charCode)) && charCode > <span class="hljs-number">9</span> && !event.ctrlKey) { EventUtil.preventDefault(event); } }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>上面的代码屏蔽了非数字字符（但无法阻止输入法写入的字符）。</p> <h2 id="22-操作剪贴板">2.2 操作剪贴板</h2> <p>HTML5 定义了 6 个剪贴板事件：</p> <table> <thead> <tr> <th align="center">事件</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="center">beforecopy</td> <td>发生复制操作前触发。</td> </tr> <tr> <td align="center">copy</td> <td>发生复制操作时触发。</td> </tr> <tr> <td align="center">beforecut</td> <td>发生剪切操作前触发。</td> </tr> <tr> <td align="center">cut</td> <td>发生剪切操作时触发。</td> </tr> <tr> <td align="center">beforepaste</td> <td>发生粘贴操作前触发。</td> </tr> <tr> <td align="center">paste</td> <td>发生粘贴操作时触发。</td> </tr> </tbody> </table> <hr> <p>这些事件和对象会因浏览器而异，所以我们在 EventUtil 中添加了以下方法：</p> <pre class="prettyprint"><code class=" hljs scala"><span class="hljs-javadoc">/** * 获取剪贴板数据 * <span class="hljs-javadoctag">@param</span> event * <span class="hljs-javadoctag">@returns</span> {string} */</span> getClipboardText: function (event) { <span class="hljs-keyword">var</span> clipboardData = (event.clipboardData || window.clipboardData); <span class="hljs-keyword">return</span> clipboardData.getData(<span class="hljs-string">"text"</span>); }, <span class="hljs-javadoc">/** * 设置剪贴板数据 * <span class="hljs-javadoctag">@param</span> event * <span class="hljs-javadoctag">@param</span> value 数据 * <span class="hljs-javadoctag">@returns</span> {boolean} */</span> setClipboardText: function (event, value) { <span class="hljs-keyword">if</span> (event.clipboardData) { <span class="hljs-keyword">return</span> event.clipboardData.setData(<span class="hljs-string">"text/plain"</span>, value); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (window.clipboardData) {<span class="hljs-comment">//IE</span> <span class="hljs-keyword">return</span> window.clipboardData.setData(<span class="hljs-string">"text"</span>, value); } }</code></pre> <p>为了确保文本框中的内容符合某个格式要求，从剪切板中粘贴过来的数据也必须符合这种格式要求，我们可以在 paste 事件中来实现：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.getElementById(<span class="hljs-string">"textbox1"</span>); EventUtil.addHandler(textbox, <span class="hljs-string">"paste"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> text = EventUtil.getClipboardText(event); <span class="hljs-keyword">if</span> (!<span class="hljs-regexp">/^\d*$/</span>.test(text)) { EventUtil.preventDefault(event); } }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>Firefox、Safari 和 Chrome 只允许在 onpaste 事件中使用 getData() 方法。</p> <p>因为并非所有浏览器都支持访问剪切板，所以也可以屏蔽这些剪切板操作。只要在支持 copy、cut 和 paste 事件的浏览器中阻止这些事件的默认行为即可！</p> <h1 id="3-自动切换焦点">3 自动切换焦点</h1> <p>用户填写完当前字段后，自动将焦点切换到下一个字段，这样可以增强表单的易用性。一般情况下，必须知道用户已经输入了既定长度的数据（比如手机号码）时，才能切换焦点。我们可以把手机号码分为三个部分，形如：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">form</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"tel1"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"txtTel1"</span> <span class="hljs-attribute">maxlength</span>=<span class="hljs-value">"3"</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"tel2"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"txtTel2"</span> <span class="hljs-attribute">maxlength</span>=<span class="hljs-value">"3"</span>></span> <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"tel3"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"txtTel3"</span> <span class="hljs-attribute">maxlength</span>=<span class="hljs-value">"4"</span>></span> <span class="hljs-tag"></<span class="hljs-title">form</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">tabForward</span><span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> target = EventUtil.getTarget(event); <span class="hljs-keyword">if</span> (target.value.length == target.maxLength) { <span class="hljs-keyword">var</span> form = target.form; <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>, len = form.elements.length; i < len; i++) { <span class="hljs-keyword">if</span> (form.elements[i] == target) { <span class="hljs-keyword">if</span> (form.elements[i + <span class="hljs-number">1</span>]) { form.elements[i + <span class="hljs-number">1</span>].focus(); } <span class="hljs-keyword">return</span>; } } } } <span class="hljs-keyword">var</span> textbox1 = document.getElementById(<span class="hljs-string">"txtTel1"</span>); <span class="hljs-keyword">var</span> textbox2 = document.getElementById(<span class="hljs-string">"txtTel2"</span>); <span class="hljs-keyword">var</span> textbox3 = document.getElementById(<span class="hljs-string">"txtTel3"</span>); EventUtil.addHandler(textbox1, <span class="hljs-string">"keyup"</span>, tabForward); EventUtil.addHandler(textbox2, <span class="hljs-string">"keyup"</span>, tabForward); EventUtil.addHandler(textbox3, <span class="hljs-string">"keyup"</span>, tabForward); })(); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>注意：这段代码只考虑给出的 <code><input></code> 标记，实际应用时还要考虑隐藏字段。</p> <h1 id="4-html5-验证-api">4 HTML5 验证 API</h1> <p>支持HTML5 验证 API 的浏览器有 Firefox 4+、Safari 5+、Chrome 和 Opera 10+。</p> <h2 id="41-必填字段">4.1 必填字段</h2> <p>在表单字段中指定 required 属性：</p> <p><code><input type="text" name="username"" required></code></p> <p>这个属性适用于 <code><input></code>、<code><textarea></code>、<code><select></code> 字段。在 JavaScript 中，通过对应元素的 required 属性，可以检查某个字段是否为必填字段：</p> <p><code>var isUsernameRequired = document.forms[0].elements["username"].required;</code></p> <p>可以这样检测浏览器是否支持 required 属性：</p> <p><code>var isRequiredSupported = "required" in document.createElement("input");</code></p> <p>对于空的必填字段，不同的浏览器有不同的处理方式。所以在标准还未统一之前，最好不要使用！</p> <h2 id="42-其他输入类型">4.2 其他输入类型</h2> <p>HTML5 为 <code><input></code> 元素的 type 属性新增了一些类型（email 和 url），这些类型还提供默认的验证功能。但在不同的浏览器中也有不同的处理方式。</p> <p>不支持它们的浏览器会自动将未知的值设置为 text，可以这样检测：</p> <pre class="prettyprint"><code class=" hljs scala"><span class="hljs-keyword">var</span> isEmailSupported = (input.<span class="hljs-keyword">type</span> == <span class="hljs-string">"email"</span>);</code></pre> <h2 id="43-数值范围">4.3 数值范围</h2> <p>HTML5 还定义了一些跟数字有关的类型，比如 number、range、datetime 等等。浏览器对这些类型的支持情况不好，所以最好先别用！</p> <h2 id="44-输入模式">4.4 输入模式</h2> <p>文本字段新增了 pattern 属性，它是一个正则表达式，用于验证文本字段的内容是否符合要求：</p> <pre class="prettyprint"><code class=" hljs rust"><input <span class="hljs-keyword">type</span>=<span class="hljs-string">"text"</span> pattern=<span class="hljs-string">"\d+"</span> name=<span class="hljs-string">"count"</span>></code></pre> <p>注意，模式的开头和结尾不需要加 <code>^</code> 和 <code>$</code>，默认在内部已经自动加上咯O(∩_∩)O~</p> <p>可以在 JavaScript 中通过 pattern 属性进行访问。</p> <p>这样检测浏览器是否支持 pattern 属性：</p> <pre class="prettyprint"><code class=" hljs coffeescript"><span class="hljs-reserved">var</span> isPatternSupported = <span class="hljs-string">"pattern"</span> <span class="hljs-keyword">in</span> <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"input"</span>);</code></pre> <h2 id="45-检测有效性">4.5 检测有效性</h2> <p>使用 checkValidity() 来检测表单中的某个字段是否有效。表单中的每一个字段都有这个方法：</p> <pre class="prettyprint"><code class=" hljs cs"><span class="hljs-keyword">if</span> (document.forms[<span class="hljs-number">0</span>].elements[<span class="hljs-number">0</span>].checkValidity()){ <span class="hljs-comment">//有效</span> }<span class="hljs-keyword">else</span>{ <span class="hljs-comment">//无效</span> }</code></pre> <p>也可以检测整个表单是否有效（即表单中的所有字段都有效才算有效）：</p> <pre class="prettyprint"><code class=" hljs cs"><span class="hljs-keyword">if</span> (document.forms[<span class="hljs-number">0</span>].checkValidity()){ <span class="hljs-comment">//有效</span> }<span class="hljs-keyword">else</span>{ <span class="hljs-comment">//无效</span> }</code></pre> <p>input 还有一个 validity 对象，它包含这些属性：</p> <table> <thead> <tr> <th align="center">属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="center">customError</td> <td>如果设置了 setCustomValidity()，则返回 true。</td> </tr> <tr> <td align="center">patternMismatch</td> <td>值与指定的 pattern 不匹配，则返回 true。</td> </tr> <tr> <td align="center">rangeOverflow</td> <td>值比 max 的值大，则返回 true。</td> </tr> <tr> <td align="center">rangeUnderflow</td> <td>值比 min 的值小，则返回 true。</td> </tr> <tr> <td align="center">stepMisMatch</td> <td>min 和 max 之间的步长不合理，返回 true。</td> </tr> <tr> <td align="center">tooLong</td> <td>长度超过 maxlength 属性指定的长度，返回 true。Firefox4 会自动约束字符数量，所以这个值可能永远都是 false。</td> </tr> <tr> <td align="center">typeMismatch</td> <td>如果不是 type 类型（比如 mail）所默认的格式，返回 true。</td> </tr> <tr> <td align="center">valid</td> <td>如果其他所有属性都是 false，那么返回 true。</td> </tr> <tr> <td align="center">valueMissing</td> <td>如果设置了 required 的字段没有值，则返回 true。</td> </tr> </tbody> </table> <hr> <p>因此可以这样检测：</p> <pre class="prettyprint"><code class=" hljs avrasm">if (input<span class="hljs-preprocessor">.validity</span> && !input<span class="hljs-preprocessor">.validity</span><span class="hljs-preprocessor">.valid</span>){ if (input<span class="hljs-preprocessor">.validity</span><span class="hljs-preprocessor">.valueMissing</span>){ console<span class="hljs-preprocessor">.log</span>(<span class="hljs-string">"Please specify a value."</span>)<span class="hljs-comment">;</span> }else if(input<span class="hljs-preprocessor">.validity</span><span class="hljs-preprocessor">.typeMismatch</span>){ console<span class="hljs-preprocessor">.log</span>(<span class="hljs-string">"Please enter an email address."</span>)<span class="hljs-comment">;</span> }else{ console<span class="hljs-preprocessor">.log</span>(<span class="hljs-string">"Value is invalid."</span>)<span class="hljs-comment">;</span> } }</code></pre> <h2 id="46-禁用验证">4.6 禁用验证</h2> <p>使用 novalidate 属性，可以让表单不参与验证：</p> <pre class="prettyprint"><code class=" hljs r"><form method=<span class="hljs-string">"post"</span> action=<span class="hljs-string">"xxx"</span> novalidate> <span class="hljs-keyword">...</span> </form></code></pre> <p>在 JavaScript 中也可以使用 novalidate 属性进行获取或设置操作。</p> <p>如果一个表单有多个提交按钮，那么可以指定某个提交按钮不进行表单验证（formnovalidate 属性）：</p> <pre class="prettyprint"><code class=" hljs ocaml"><form <span class="hljs-keyword">method</span>=<span class="hljs-string">"post"</span> action=<span class="hljs-string">"xxx"</span>> <input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"submit"</span> <span class="hljs-keyword">value</span>=<span class="hljs-string">"标准提交"</span>> <input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"submit"</span> <span class="hljs-keyword">value</span>=<span class="hljs-string">"不验证提交"</span> formnovalidate> </form></code></pre> <p>使用 JavaScript 也可以设置这个属性：</p> <pre class="prettyprint"><code class=" hljs avrasm">document<span class="hljs-preprocessor">.forms</span>[<span class="hljs-number">0</span>]<span class="hljs-preprocessor">.elements</span>[<span class="hljs-string">"btnNoValidate"</span>]<span class="hljs-preprocessor">.fromNoValidate</span> = true<span class="hljs-comment">;</span></code></pre> <p>注意这里的大小写与 html 中的不同！</p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1187728114311077888"></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)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902507194079834112.htm" title="什么是 XSS（跨站脚本攻击）？" target="_blank">什么是 XSS（跨站脚本攻击）？</a> <span class="text-muted">Aishenyanying33</span> <a class="tag" taget="_blank" href="/search/web%E6%BC%8F%E6%B4%9E/1.htm">web漏洞</a><a class="tag" taget="_blank" href="/search/owastop10/1.htm">owastop10</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/xss%E6%BC%8F%E6%B4%9E/1.htm">xss漏洞</a> <div>XSS（Cross-SiteScripting）是黑客通过在网页中注入恶意JavaScript代码，让受害者的浏览器执行这些代码的攻击方式。常见攻击场景XSS攻击通常发生在网站允许用户提交内容的地方，例如：论坛、留言板（黑客发布恶意评论）博客文章（黑客在评论区插入恶意代码）搜索框（黑客让受害者访问特定链接）XSS实战演示1️⃣漏洞场景：不安全的留言板假设一个网站vulnerable.com允许用户</div> </li> <li><a href="/article/1902489774606839808.htm" title="JavaScript typeof 运算符详解" target="_blank">JavaScript typeof 运算符详解</a> <span class="text-muted">wjs2024</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScripttypeof运算符详解概述在JavaScript中，typeof是一个一元运算符，用于检测给定变量的数据类型。它是JavaScript中最常用的类型检查方法之一。本文将详细解释typeof运算符的用法、返回值以及其局限性。typeof运算符的用法typeof运算符后面跟一个要检查类型的变量或表达式。它不区分大小写，以下是其基本用法：leta=10;console.log(typ</div> </li> <li><a href="/article/1902485114839953408.htm" title="如何实现一个apply函数？" target="_blank">如何实现一个apply函数？</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/apply/1.htm">apply</a> <div>在JavaScript中，apply是一个非常有用的方法，它允许你调用一个函数，并显式地指定该函数内部的this值。与call方法不同，apply方法接受参数的方式是一个数组或类数组对象。我们将手动实现一个类似apply的函数，以深入理解其工作原理。实现步骤1.定义myApply方法首先，我们需要在Function.prototype上定义一个新的方法myApply，这样所有的函数都可以调用它。F</div> </li> <li><a href="/article/1902425845188849664.htm" title="JavaScript基础-事件基础" target="_blank">JavaScript基础-事件基础</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在现代Web开发中，交互性是网站用户体验的重要组成部分。通过使用JavaScript，我们可以捕获用户的操作并作出响应，实现动态网页效果。这一切都离不开事件（Events）的概念。本文将介绍JavaScript中事件的基础知识，包括事件类型、如何绑定事件处理器以及一些常见的实践技巧。一、什么是事件？在浏览器环境中，事件是由浏览器生成的通知，表明某种情况已经发生。这些情况可能是用户交互（如点击按钮）</div> </li> <li><a href="/article/1902418566444019712.htm" title="在Ubuntu上安装MEAN Stack的4个步骤" target="_blank">在Ubuntu上安装MEAN Stack的4个步骤</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a> <div>在Ubuntu上安装MEANStack的4个步骤为：1.安装MEAN；2.安装MongoDB；3.安装NodeJS，Git和NPM；4.安装剩余的依赖项。什么是MEANStack？平均堆栈一直在很大程度上升高为基于稳健的基于JavaScript的开发堆栈。名称的意思是指其组件;MongoDB，ExpressJS，Angularjs和NodeJS。第1步：安装MEAN对于此安装，我们将在本指南中使用</div> </li> <li><a href="/article/1902408180764307456.htm" title="初探 Threejs 物理引擎CANNON，解锁 3D 动态魅力" target="_blank">初探 Threejs 物理引擎CANNON，解锁 3D 动态魅力</a> <span class="text-muted">伶俜Monster</span> <a class="tag" taget="_blank" href="/search/Threejs/1.htm">Threejs</a><a class="tag" taget="_blank" href="/search/webgl/1.htm">webgl</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a><a class="tag" taget="_blank" href="/search/threejs/1.htm">threejs</a><a class="tag" taget="_blank" href="/search/cannon.js/1.htm">cannon.js</a> <div>简介Cannon.js是一个基于JavaScript的物理引擎，它可以在浏览器中模拟物理效果。它支持碰撞检测、刚体动力学、约束等物理效果，可以用于创建逼真的物理场景和交互。参考文档官方示例原理Cannon.js使用了欧拉角来表示物体的旋转，而不是四元数。这使得它在处理旋转时更加直观和易于理解。Cannon.js还支持多种碰撞检测算法，包括离散碰撞检测和连续碰撞检测。Cannon.js还支持多种约束</div> </li> <li><a href="/article/1902381186840326144.htm" title="vue3+springboot电影院售票选座管理系统" target="_blank">vue3+springboot电影院售票选座管理系统</a> <span class="text-muted">qq_3166678367</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示：文章底部获取博主联系方式！！！！本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现：在Java的开发过程中，可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻</div> </li> <li><a href="/article/1902353197326987264.htm" title="深入理解 TypeScript 中的迭代器（Iterators）与生成器（Generators）" target="_blank">深入理解 TypeScript 中的迭代器（Iterators）与生成器（Generators）</a> <span class="text-muted">念九_ysl</span> <a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a> <div>一、为什么需要迭代协议？在现代JavaScript/TypeScript开发中，我们经常需要处理各种集合型数据：数组、Map、Set甚至是自定义数据结构。ES6引入的迭代协议（IterationProtocols）正是为了解决统一遍历机制的问题。通过迭代器模式，我们可以：为不同的数据结构提供统一的访问接口实现惰性计算（LazyEvaluation）支持现代语言特性（for...of,扩展运算符等）</div> </li> <li><a href="/article/1902326726910865408.htm" title="deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师..." target="_blank">deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师...</a> <span class="text-muted">CoderBin_</span> <a class="tag" taget="_blank" href="/search/%E4%B8%8Edeepseek%E7%9A%84%E5%AF%B9%E8%AF%9D/1.htm">与deepseek的对话</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）</div> </li> <li><a href="/article/1902322310598160384.htm" title="【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用" target="_blank">【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用</a> <span class="text-muted">金枝玉叶9</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%871/1.htm">程序员知识储备1</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%872/1.htm">程序员知识储备2</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%873/1.htm">程序员知识储备3</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>《一起学Rust|Tauri2.0框架》是一个结合Rust语言与Tauri框架开发跨平台应用的教程。Tauri2.0是一个非常适合构建跨平台桌面应用的框架，它让开发者可以使用Web技术（如HTML、CSS、JavaScript）来创建前端，同时利用Rust编写后端逻辑，确保应用运行高效且轻量。在这个教程中，开发者可以学习如何使用Rust与Tauri2.0框架实现一个跨平台二维码扫描应用。具体步骤可</div> </li> <li><a href="/article/1902294944190623744.htm" title="使用AI python实现将前端angularjs工程转换成vue工程案例" target="_blank">使用AI python实现将前端angularjs工程转换成vue工程案例</a> <span class="text-muted">银行金融科技</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>以下是一个结合Python和AI技术实现AngularJS到Vue工程迁移的完整案例，包含关键转换策略和代码实现：案例背景目标：将使用AngularJS1.x的电商后台管理系统转换为Vue3工程，主要转换以下部分：模板语法控制器逻辑服务依赖路由配置状态管理原始AngularJS代码片段：javascript//app.jsangular.module('app',['ui.router']).co</div> </li> <li><a href="/article/1902289650798620672.htm" title="python爬虫 Selenium库安装与使用" target="_blank">python爬虫 Selenium库安装与使用</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/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a> <div>Selenium是一个强大的自动化测试工具，它也可以用来进行网页抓取。与传统的请求库（如requests）不同，Selenium可以模拟真实用户的行为，比如点击按钮、填写表单等，这对于那些依赖于JavaScript动态加载内容的网站来说非常有用。安装Selenium首先确保你的环境中已经安装了Python和pip。然后通过pip安装Selenium：pipinstallselenium如果你使用的</div> </li> <li><a href="/article/1902247906400858112.htm" title="在Ubuntu上安装MEAN Stack的4个步骤" target="_blank">在Ubuntu上安装MEAN Stack的4个步骤</a> <span class="text-muted">Kaede6</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0-Linux%E6%9C%8D%E5%8A%A1%E9%83%A8%E7%BD%B2/1.htm">技术文章-Linux服务部署</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>在Ubuntu上安装MEANStack的4个步骤为：1.安装MEAN；2.安装MongoDB；3.安装NodeJS，Git和NPM；4.安装剩余的依赖项。什么是MEANStack？平均堆栈一直在很大程度上升高为基于稳健的基于JavaScript的开发堆栈。名称的意思是指其组件;MongoDB，ExpressJS，Angularjs和NodeJS。第1步：安装MEAN对于此安装，我们将在本指南中使用</div> </li> <li><a href="/article/1902246518333698048.htm" title="TypeScript语言的网络编程" target="_blank">TypeScript语言的网络编程</a> <span class="text-muted">俞嫦曦</span> <a class="tag" taget="_blank" href="/search/%E5%8C%85%E7%BD%97%E4%B8%87%E8%B1%A1/1.htm">包罗万象</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>TypeScript语言的网络编程引言随着现代网络应用程序的不断发展，对编程语言的需求也在不断提高。JavaScript作为前端开发的主要语言，凭借其动态特性和广泛的应用，成为了Web开发的中坚力量。而TypeScript作为JavaScript的超集，逐渐在开发社区中获得了越来越多的关注。其静态类型的特性使得开发者在编写大型应用程序时能够更加得心应手。尤其是在网络编程方面，TypeScript展</div> </li> <li><a href="/article/1902237061046398976.htm" title="深度解析ECharts.js：构建现代化数据可视化的利器" target="_blank">深度解析ECharts.js：构建现代化数据可视化的利器</a> <span class="text-muted">斯~内克</span> <a class="tag" taget="_blank" href="/search/WebGL/1.htm">WebGL</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>引言：数据可视化的新时代挑战在数字化转型浪潮中，数据可视化已成为企业决策和用户体验的关键环节。面对海量数据的呈现需求，传统表格已无法满足用户对直观洞察的渴求。作为百度开源的JavaScript可视化库，ECharts.js凭借其强大的功能和灵活的扩展性，正在成为前端开发者的首选工具。本文将从核心技术解析、实践指南到性能优化，带您全面掌握这个可视化利器。一、ECharts核心技术架构剖析1.1分层渲</div> </li> <li><a href="/article/1902223322012250112.htm" title="三分钟让你搞懂云计算中的CDN是什么？" target="_blank">三分钟让你搞懂云计算中的CDN是什么？</a> <span class="text-muted">云上的阿七</span> <a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a> <div>随着互联网的快速发展，网站的访问速度和稳定性越来越受到重视。而在众多提升网站性能的技术中，CDN（内容分发网络）无疑是一个非常重要的工具。今天，我们就来聊聊云计算中的CDN是什么，以及它是如何为网站带来显著好处的。CDN是什么？CDN，全称ContentDeliveryNetwork，翻译过来就是“内容分发网络”。它是一种分布式的网络架构，通过将网站的静态资源（如图片、视频、JavaScript文</div> </li> <li><a href="/article/1902196073552736256.htm" title="Java XML与JSON相互转换详解" target="_blank">Java XML与JSON相互转换详解</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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</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/%E5%90%8E%E7%AB%AF/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>目录一、为什么需要XML与JSON转换二、使用Jackson库进行转换1.添加依赖2.XML转JSON3.JSON转XML三、注意事项在现代软件开发中，数据格式的转换是一项常见的任务，特别是在处理不同系统或服务之间的数据交换时。XML（可扩展标记语言）和JSON（JavaScript对象表示法）是两种广泛使用的数据格式。本文将深入探讨如何在Java中实现XML与JSON之间的相互转换，并提供完整的</div> </li> <li><a href="/article/1902192286062669824.htm" title="当 Selenium 的 click() /send_keys()等方法失效时：JavaScript 在 UI 自动化测试中的神奇用法" target="_blank">当 Selenium 的 click() /send_keys()等方法失效时：JavaScript 在 UI 自动化测试中的神奇用法</a> <span class="text-muted">做测试的小薄</span> <a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E9%AB%98%E9%98%B6/1.htm">测试高阶</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">自动化测试</a> <div>引言在使用Selenium进行WebUI自动化测试时，我们通常依赖Selenium提供的原生方法（如click()、send_keys()等）来操作页面元素。然而，在某些复杂场景下，这些方法可能会失效。例如：元素被遮挡或隐藏。页面加载延迟导致元素无法正常交互。某些特殊的动态行为无法通过Selenium原生方法触发。这时，JavaScript就成为了我们的“救星”。通过driver.execute_</div> </li> <li><a href="/article/1902182319356178432.htm" title="超全Java入门学习路线指南" target="_blank">超全Java入门学习路线指南</a> <span class="text-muted">Javaaaaaaaaaaa13</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</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/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>Java基础入门Java高级阶段数据库和JDBCHtml&JavascriptJsp&ServletStruts2框架讲解Spring框架讲解Hibernate框架讲解流行技术学习1、Java基础入门1、Java入门基础如果你没有任何的编程基础，那么本栏目的内容对你来说是至关重要的。打好基础，以后学习就会一帆风顺了。我们会先讲解了Java程序的开发环境的搭建、编写流程、工作原理等内容，接着学习有关</div> </li> <li><a href="/article/1902174997636509696.htm" title="JavaScript 性能优化实战【详细指南】" target="_blank">JavaScript 性能优化实战【详细指南】</a> <span class="text-muted">AI筑梦师</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/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性能优化实战#JavaScript性能优化实战JavaScript作为现代Web开发的核心技术，其性能优化涉及多个层面，包括计算效率、DOM操作、异步处理、内存管理、网络请求优化等。随着Web发展，越来越多的新技术（如WebAssembly、OffscreenCanvas、StreamsAPI、V8TurboFan优化等）正在提升JavaScript的性能。本指南涵盖从基础优</div> </li> <li><a href="/article/1902082144612708352.htm" title="基于 ArkTS 的混合式开发示例：静态页面与本地数据交互" target="_blank">基于 ArkTS 的混合式开发示例：静态页面与本地数据交互</a> <span class="text-muted">qq_55376032</span> <a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99/1.htm">鸿蒙</a> <div>一、实现效果1、H5段混合式开发效果图2、静态页面与本地数据交互效果图二、技术栈分析ArkTS：用于构建页面结构和逻辑，支持声明式UI和组件化开发。WebView：通过@ohos.web.webview调用H5页面，支持JavaScript交互。资源管理：使用@kit.ArkTS的util模块读取并解析本地JSON文件。自定义对话框：通过@CustomDialog实现自定义弹窗，支持动态数据加载。</div> </li> <li><a href="/article/1902058317690236928.htm" title="JavaScript基础-获取元素" target="_blank">JavaScript基础-获取元素</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在Web开发中，使用JavaScript动态地访问和操作网页上的元素是一项基本技能。通过获取页面上的特定元素，我们可以对其进行各种操作，比如修改内容、样式或属性等。本文将详细介绍几种获取DOM元素的方法，并探讨它们的特点及适用场景。一、为什么需要获取元素？在现代Web应用中，交互性是关键。无论是响应用户的输入、更新页面内容还是实现动画效果，首先都需要定位到相关的HTML元素。掌握不同的获取元素的方</div> </li> <li><a href="/article/1902051760147591168.htm" title="让人感到疑惑的const" target="_blank">让人感到疑惑的const</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%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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>const关键字在不同的编程语言中有着不同的含义和限制，但通常它被用来声明一个常量或只读变量。然而，在JavaScript中，const的行为有时可能会让人感到困惑，因为它并不总是意味着“不可变”（immutable）。让我们详细探讨一下这个问题。JavaScript中的const在JavaScript中，当你使用const声明一个变量时，你实际上是创建了一个不能重新赋值的绑定。这意味着一旦给这个</div> </li> <li><a href="/article/1902044444702601216.htm" title="JavaScript 性能优化实战：数据结构选择对性能的影响" target="_blank">JavaScript 性能优化实战：数据结构选择对性能的影响</a> <span class="text-muted">deying0865423</span> <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/javascript/1.htm">javascript</a> <div>目录数组（Array）特点与适用场景性能短板链表（LinkedList）特点与适用场景性能短板集合（Set）特点与适用场景性能短板映射（Map）特点与适用场景性能短板栈（Stack）与队列（Queue）特点与适用场景性能短板在JavaScript开发中，数据结构的选择如同搭建房屋时选择合适的建筑材料，对程序性能起着决定性作用。合理的数据结构能显著提升代码执行效率，减少资源消耗，反之则可能导致性能瓶</div> </li> <li><a href="/article/1902044318311444480.htm" title="JavaScript 性能优化实战：优化 DOM 操作提升交互响应" target="_blank">JavaScript 性能优化实战：优化 DOM 操作提升交互响应</a> <span class="text-muted">deying0865423</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>目录一、理解DOM操作的性能损耗二、减少DOM操作次数（一）批量操作DOM（二）缓存DOM查询结果三、优化DOM查询（一）使用更高效的查询方法（二）利用事件委托四、减少回流与重绘（一）批量修改样式（二）使用requestAnimationFrame在现代Web应用开发中，JavaScript与DOM（文档对象模型）的交互极为频繁。无论是创建动态界面、响应用户操作，还是更新页面内容，DOM操作都扮演</div> </li> <li><a href="/article/1902034984961634304.htm" title="JavaScript基础-DOM 简介" target="_blank">JavaScript基础-DOM 简介</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在现代Web开发中，JavaScript与HTML和CSS一起构成了网页的核心技术。而在这三者之中，DOM（DocumentObjectModel，文档对象模型）作为浏览器处理网页内容的一种接口，扮演着至关重要的角色。通过DOM，JavaScript能够动态地访问和操作网页的内容、结构以及样式。本文将介绍DOM的基本概念、核心组成部分以及如何使用JavaScript来操作DOM。一、什么是DOM？</div> </li> <li><a href="/article/1902016331360825344.htm" title="JavaScript 浏览器对象实例" target="_blank">JavaScript 浏览器对象实例</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript浏览器对象实例引言JavaScript作为一种广泛应用于网页开发的脚本语言，提供了丰富的浏览器对象模型（BrowserObjectModel，简称BOM）。BOM使得JavaScript能够与浏览器环境进行交互，从而实现各种动态效果和交互功能。本文将详细介绍JavaScript中的浏览器对象实例，包括其概念、常用对象及其使用方法。一、浏览器对象模型概述浏览器对象模型是JavaS</div> </li> <li><a href="/article/1902008139692175360.htm" title="JavaScript执行机制" target="_blank">JavaScript执行机制</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>大纲1、场景分析2、执行机制相关知识点3、以实例来说明JavaScript的执行机制4、相关概念场景分析/*以下这段代码的执行结果是什么？如果依照：js是按照语句出现的顺序执行这个理念，那么代码执行的结果应该是：//"定时器开始啦"//"马上执行for循环啦"//"执行then函数啦"//"代码执行结束"但结果并不是这样的，得到的结果是：//"马上执行for循环啦"//"代码执行结束"//"执行t</div> </li> <li><a href="/article/1902003352133234688.htm" title="JavaScript 高频面试题" target="_blank">JavaScript 高频面试题</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/javascript/1.htm">javascript</a> <div>文章目录JavaScript手写防抖和节流CommonJS和ES6模块的区别this指向问题，如何修改this指向引申1:模拟bind引申2：为什么多次绑定，只指向第一次绑定的obj对象?有没有解决办法？引申3:一般函数和箭头函数的区别数据类型有哪些引申1:如何判断数据类型new操作的原理引申1:什么是闭包？引申2:内存泄露和内存溢出引申3:作用域和作用域链？JS实现数组扁平化深拷贝与浅拷贝的区别</div> </li> <li><a href="/article/1901995408301813760.htm" title="JavaScript相关面试题" target="_blank">JavaScript相关面试题</a> <span class="text-muted">努力的搬砖人.</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>以下是150道JavaScript相关面试题及详细答案：JavaScript基础1.JavaScript是什么？JavaScript是一种直译式脚本语言，主要用于网页开发，也可用于服务器端开发（如Node.js）。它是一种动态类型、弱类型、基于原型的语言，支持函数式编程和面向对象编程。2.JavaScript的基本数据类型有哪些？包括Undefined、Null、Boolean、Number、St</div> </li> <li><a href="/article/28.htm" title="如何用ruby来写hadoop的mapreduce并生成jar包" target="_blank">如何用ruby来写hadoop的mapreduce并生成jar包</a> <span class="text-muted">wudixiaotie</span> <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a> <div>ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：不说了网上有 2.安装ruby：由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby： rvm install jruby然后等待安</div> </li> <li><a href="/article/155.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/%E8%AE%BF%E9%97%AE%E6%8E%A7%E5%88%B6%E6%9D%83%E9%99%90/1.htm">访问控制权限</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问一:包访问权限; 自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用</div> </li> <li><a href="/article/282.htm" title="[生物与医学]请审慎食用小龙虾" target="_blank">[生物与医学]请审慎食用小龙虾</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a> <div> 现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡..... 所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质 </div> </li> <li><a href="/article/409.htm" title="org.apache.jasper.JasperException: Unable to compile class for JSP:" target="_blank">org.apache.jasper.JasperException: Unable to compile class for JSP:</a> <span class="text-muted">商人shang</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/2.2/1.htm">2.2</a><a class="tag" taget="_blank" href="/search/jdk1.8/1.htm">jdk1.8</a> <div>环境： jdk1.8 maven tomcat7-maven-plugin 2.0 原因： tomcat7-maven-plugin 2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin 2.2就行，即 <plugin> </div> </li> <li><a href="/article/536.htm" title="你的垃圾你处理掉了吗?GC" target="_blank">你的垃圾你处理掉了吗?GC</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/GC/1.htm">GC</a> <div>前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别</div> </li> <li><a href="/article/663.htm" title="shiro 和 SESSSION" target="_blank">shiro 和 SESSSION</a> <span class="text-muted">杨白白</span> <a class="tag" taget="_blank" href="/search/shiro/1.htm">shiro</a> <div>shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此</div> </li> <li><a href="/article/790.htm" title="移动互联网终端淘宝客如何实现盈利" target="_blank">移动互联网终端淘宝客如何实现盈利</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8B%95%E5%AE%A2%E6%88%B6%E7%AB%AF/1.htm">移動客戶端</a><a class="tag" taget="_blank" href="/search/%E6%B7%98%E5%AE%A2/1.htm">淘客</a><a class="tag" taget="_blank" href="/search/%E6%B7%98%E5%AF%B6App/1.htm">淘寶App</a> <div> 2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛</div> </li> <li><a href="/article/917.htm" title="wordpress小工具制作" target="_blank">wordpress小工具制作</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/wordpress/1.htm">wordpress</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E5%B7%A5%E5%85%B7/1.htm">小工具</a> <div>wordpress 使用侧边栏的小工具，很方便调整页面结构小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi</div> </li> <li><a href="/article/1044.htm" title="JS微信分享" target="_blank">JS微信分享</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>// 所有功能必须包含在 WeixinApi.ready 中进行 WeixinApi.ready(function(Api) { // 微信分享的数据 var wxData = { &nb</div> </li> <li><a href="/article/1171.htm" title="封装探讨" target="_blank">封装探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1+%E5%B0%81%E8%A3%85/1.htm">JAVA面向对象封装</a> <div>//封装属性方法将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用例如 1： //属性将其设为私有姓名 name 可以公开 </div> </li> <li><a href="/article/1298.htm" title="jquery radio/checkbox change事件不能触发的问题" target="_blank">jquery radio/checkbox change事件不能触发的问题</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>我想让radio来控制当前我选择的是机动车还是特种车，如下所示： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><</div> </li> <li><a href="/article/1425.htm" title="AngularJS中安全性措施" target="_blank">AngularJS中安全性措施</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8%E6%80%A7/1.htm">安全性</a><a class="tag" taget="_blank" href="/search/XSRF/1.htm">XSRF</a><a class="tag" taget="_blank" href="/search/JSON%E6%BC%8F%E6%B4%9E/1.htm">JSON漏洞</a> <div> 在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。一.JSON漏洞当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，</div> </li> <li><a href="/article/1552.htm" title="[Maven学习笔记九]Maven发布web项目" target="_blank">[Maven学习笔记九]Maven发布web项目</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>基于Maven的web项目的标准项目结构 user-project user-core user-service user-web src </div> </li> <li><a href="/article/1679.htm" title="【Hive七】Hive用户自定义聚合函数(UDAF)" target="_blank">【Hive七】Hive用户自定义聚合函数(UDAF)</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div>用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？ Double evaluate(Double a, Double b) </div> </li> <li><a href="/article/1806.htm" title="通过 nginx-lua 给 Nginx 增加 OAuth 支持" target="_blank">通过 nginx-lua 给 Nginx 增加 OAuth 支持</a> <span class="text-muted">ronin47</span> <div>前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n</div> </li> <li><a href="/article/1933.htm" title="利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法" target="_blank">利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法</a> <span class="text-muted">bsr1983</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu</div> </li> <li><a href="/article/2060.htm" title="《代码大全》表驱动法-Table Driven Approach-1" target="_blank">《代码大全》表驱动法-Table Driven Approach-1</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/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public </div> </li> <li><a href="/article/2187.htm" title="Sybase封锁原理" target="_blank">Sybase封锁原理</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/Sybase/1.htm">Sybase</a> <div> 昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的</div> </li> <li><a href="/article/2314.htm" title="java异常处理机制" target="_blank">java异常处理机制</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try： Opening exception-handling statement. catch： Captures the exception. finally： Runs its code before terminating</div> </li> <li><a href="/article/2441.htm" title="hive 数据插入DML语法汇总" target="_blank">hive 数据插入DML语法汇总</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/DML/1.htm">DML</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8F%92%E5%85%A5/1.htm">数据插入</a> <div>Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l</div> </li> <li><a href="/article/2568.htm" title="工厂设计模式" target="_blank">工厂设计模式</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div> 使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。工厂模式工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ </div> </li> <li><a href="/article/2695.htm" title="mysql字符串查找函数" target="_blank">mysql字符串查找函数</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则 FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st</div> </li> <li><a href="/article/2822.htm" title="jvm内存管理" target="_blank">jvm内存管理</a> <span class="text-muted">easterfly</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a> <div>一、JVM堆内存的划分分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中；年老代满了之后会执行major gc，这个是stop the word模式，执行</div> </li> <li><a href="/article/2949.htm" title="CentOS-6.3安装配置JDK-8" target="_blank">CentOS-6.3安装配置JDK-8</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME</div> </li> <li><a href="/article/3076.htm" title="【转】关于web路径的获取方法" target="_blank">【转】关于web路径的获取方法</a> <span class="text-muted">huangyc1210</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E5%BE%84/1.htm">路径</a> <div>假定你的web application 名称为news,你在浏览器中输入请求路径： http://localhost:8080/news/main/list.jsp 则执行下面向行代码后打印出如下结果： 1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项</div> </li> <li><a href="/article/3203.htm" title="php里获取第一个中文首字母并排序" target="_blank">php里获取第一个中文首字母并排序</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/PHP/1.htm">PHP</a> <div>很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g</div> </li> <li><a href="/article/3330.htm" title="java内部类" target="_blank">java内部类</a> <span class="text-muted">hm4123660</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">内部类</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">匿名内部类</a><a class="tag" taget="_blank" href="/search/%E6%88%90%E5%91%98%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">成员内部类</a><a class="tag" taget="_blank" href="/search/%E6%96%B9%E6%B3%95%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">方法内部类</a> <div> 　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。 &nb</div> </li> <li><a href="/article/3457.htm" title="Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten" target="_blank">Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten</a> <span class="text-muted">zhb8015</span> <div>maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。 maven pom: <dependency> <groupId>org.hibernate</groupId> <ar</div> </li> <li><a href="/article/3584.htm" title="Spark 性能相关参数配置详解－任务调度篇" target="_blank">Spark 性能相关参数配置详解－任务调度篇</a> <span class="text-muted">Stark_Summer</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/cpu/1.htm">cpu</a><a class="tag" taget="_blank" href="/search/%E4%BB%BB%E5%8A%A1%E8%B0%83%E5%BA%A6/1.htm">任务调度</a><a class="tag" taget="_blank" href="/search/yarn/1.htm">yarn</a> <div>随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便</div> </li> <li><a href="/article/3711.htm" title="css3滤镜" target="_blank">css3滤镜</a> <span class="text-muted">wangkeheng</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> <div>经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc</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>