JS高程：读书摘要（十二）表单

一、基础

在 JavaScript 中，表单有它自己独有的属性和方法。

acceptCharset:服务器能够处理的字符集;
action:接受请求的URL;
elements:表单中所有控件的集合(HTMLCollection)。
enctype:请求的编码类型;
length:表单中控件的数量。
method:要发送的 HTTP 请求类型，通常是"get"或"post";
name:表单的名称;。
reset():将所有表单域重置为默认值。
submit():提交表单。
target:用于发送请求和接收响应的窗口名称

通过document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或name值来取得特定的表单，也可以通过id、类名来获取。

提交表单

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单（textarea除外，在文本区中回车是换行），如果没有提交按钮，按回车键则不会提交表单。以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发onsubmit事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。调用prevetnDefault()方法阻止表单提交。一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。

在JavaScript 中，以编程方式调用submit()方法也可以提交表单。form.submit();，在以调用submit()方法的形式提交表单时，不会触发onsubmit 事件，因此要记得在调用此方法之前先验证表单数据。

为避免用户多次点击按钮重复提交表单，可以在第一次提交表单后就禁用提交按钮，或者利用onsubmit 事件处理程序取消后续的表单提交操作。

重置表单

在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值，用户单击重置按钮重置表单时，会触发onreset事件。也可以使用编程方式来重置表单form.reset()，与调用submit()方法不同，调用reset()方法会像单击重置按钮一样触发onreset事件。

表单字段

每个表单都有elements 属性，该属性是表单中所有表单元素（字段）的集合，例如、</code>、<code><button></code>和<code><fieldset></code>，是一个有序列表（不包含非表单控件）。可以按照位置和<code>name</code>特性来访问它们。</p> <pre><code class="js">var form = document.getElementById("form1"); //取得表单中的第一个字段 var field1 = form.elements[0]; //取得名为"textbox1"的字段 var field2 = form.elements["textbox1"]; //取得表单中包含的字段的数量 var fieldCount = form.elements.length; </code></pre> <p>如果有多个表单控件都在使用一个<code>name</code>（如单选按钮），那么就会返回以该<code>name</code> 命名的一个<code>NodeList</code>。</p> <ul> <li> <p>表单字段属性</p> <ul> <li> <code>disabled</code>：布尔值，表示当前字段是否被禁用。</li> <li> <code>form</code>：指向当前字段所属表单的指针；只读。</li> <li> <code>name</code>：当前字段的名称。</li> <li> <code>readOnly</code>：布尔值，表示当前字段是否只读。</li> <li> <code>tabIndex</code>：表示当前字段的切换（<code>tab</code>）序号。</li> <li> <code>type</code>：当前字段的类型，如<code>"checkbox"</code>、<code>"radio"</code>，等等。</li> <li> <code>value</code>：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。</li> </ul> </li> </ul> <p>可以通过<code>JavaScrip</code> 动态修改属性。</p> <pre><code class="js">var form = document.getElementById("myForm"); var field = form.elements[0]; //修改value 属性 field.value = "Another value"; //检查form 属性的值 alert(field.form === form); //true //把焦点设置到当前字段 field.focus(); //禁用当前字段 field.disabled = true; //修改type 属性（不推荐，但对<input>来说是可行的） field.type = "checkbox"; </code></pre> <ul> <li> <p>表单字段方法</p> <ul> <li> <code>focus()</code>：用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。<code>HTML5</code> 为表单字段新增了一个<code>autofocus</code> 属性。在支持这个属性的浏览器中，只要设置这个属性，不用<code>JavaScript</code> 就能自动把焦点移动到相应字段。</li> <li> <code>blur()</code>：是从元素中移走焦点。在调用<code>blur()</code>方法时，并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的元素上面移走而已。</li> </ul> </li> <li> <p>表单字段事件</p> <ul> <li> <code>onfocus</code>：当前字段获得焦点时触发。</li> <li> <code>onblur</code>：当前字段失去焦点时触发。</li> <li> <code>onchange</code>：对于<code><input></code>和<code><textarea></code>元素，在它们<strong>失去焦点且<code>value</code>值改变时触发</strong>；对于<code><select></code>元素，在其选项改变时触发。</li> </ul> </li> </ul> <p>关于<code>blur</code> 和<code>change</code> 事件的关系，并没有严格的规定。在某些浏览器中，<code>blur</code>事件会先于<code>change</code>事件发生；而在其他浏览器中，则恰好相反。为此，不能假定这两个事件总会以某种顺序依次触发，这一点要特别注意。</p> <h4>二、文本框脚本</h4> <p>在<code>HTML</code> 中，有两种方式来表现文本框：一种是使用<code><input></code>元素的单行文本框（<code>type</code> 特性设置为<code>"text"</code>），另一种是使用<code><textarea></code>的多行文本框。</p> <p><code><input></code>：通过设置<code>size</code> 特性，可以指定文本框中能够显示的字符数。通过<code>value</code> 特性，可以设置文本框的初始值，而<code>maxlength</code> 特性则用于指定文本框可以接受的最大字符数。</p> <p><code><textarea></code>：要指定文本框的大小，可以使用<code>rows</code>和<code>cols</code> 特性。其中，<code>rows</code> 特性指定的是文本框的字符行数，而<code>cols</code> 特性指定的是文本框的字符列数。</p> <p>建议使用<code>xxx.value</code> 属性读取或设置文本框的值，不要使用<code>setAttribute()</code>设置<code><input></code>元素的<code>value</code> 特性，也不要去修改<code><textarea></code>元素的第一个子节点(文本节点)。原因很简单：对<code>value</code>属性所作的修改，不一定会反映在<code>DOM</code>中。因此，在处理文本框的值时，最好不要使用<code>DOM</code>方法。</p> <h5>选择文本</h5> <p>两种文本框都支持<code>select()</code>方法，这个方法用于选择文本框中的所有文本。在调用<code>select()</code>方法时<code>formElement.select();</code>，大多数浏览器（<code>Opera</code> 除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何时候被调用。(一般用于当文本框获得焦点，就会选择其中所有的文本)</p> <p><code>onselect</code>事件：在选择了文本框中的文本时，就会触发<code>onselect</code>事件。现代浏览器只有用户选择了文本（而且要释放鼠标），才会触发<code>onselect</code> 事件。</p> <p><code>HTML5</code> 通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。该规范采取的办法是添加两个属性：<code>selectionStart</code> 和<code>selectionEnd</code>。这两个属性中保存的是基于<code>0</code>的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。因此，要取得用户在文本框中选择的文本，可以使用如下代码。</p> <pre><code>function getSelectedText(textbox){ // if(typeof textbox.selectionStart == 'number') return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); // ie8之前版本不支持但是支持document.selection // if (document.selection){ // return document.selection.createRange().text; // } } </code></pre> <ul> <li>选择部分文本</li> </ul> <p>所有文本框都有一个<code>setSelectionRange()</code>方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。（包头不包尾）</p> <p><code>IE8</code> 及更早版本支持使用范围选择部分文本：</p> <p>1、首先使用<code>IE</code>在所有文本框上提供的<code>createTextRange()</code>方法创建一个范围，并将其放在恰当的位置上。<br> 2、使用<code>collapse()</code>将范围折叠到文本框的开始位置。<br> 3、再使用<code>moveStart()</code>和<code>moveEnd()</code>这两个范围方法将范围移动到位。<br> 4、最后一步，就是使用范围的<code>select()</code>方法选择文本。</p> <pre><code class="js">textbox.value = "Hello world!"; var range = textbox.createTextRange(); //选择所有文本 range.collapse(true); range.moveStart("character", 0); range.moveEnd("character", textbox.value.length); //"Hello world!" range.select(); //选择第4 到第6 个字符 range.collapse(true); range.moveStart("character", 4); range.moveEnd("character", 6); range.select(); //"o w" </code></pre> <h5>过滤输入</h5> <ul> <li>屏蔽字符</li> </ul> <p>响应向文本框中插入字符操作的是<code>keypress</code>事件。因此，可以通过阻止这个事件的默认行为来屏蔽此类字符。比如，下列代码只允许用户输入数值。</p> <pre><code class="js">textbox.addEventListener("keypress", function(e){ var target = e.target var charCode = e.charCode // charCode 属性，这个属性只有在发生keypress 事件时才包含值 // 而且这个值是按下的那个键所代表字符的ASCII 编码 // String.fromCharCode()接收一或多个字符编码，然后将它们转换成一个字符串。 if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){ e.preventDefault(); } }); </code></pre> <p>虽然理论上只应该在用户按下字符键时才触发<code>keypress</code> 事件，但有些浏览器也会对其他键触发此事件。<code>Firefox</code>和<code>Safari</code>（<code>3.1</code> 版本以前）会对向上键、向下键、退格键和删除键触发<code>keypress</code> 事件；<code>Safari 3.1</code> 及更新版本则不会对这些键触发<code>keypress</code> 事件。所以加上<code>charCode > 9</code>这个条件，因为在<code>Firefox</code> 中，所有由非字符键触发的<code>keypress</code> 事件对应的字符编码为<code>0</code>，而在<code>Safari 3</code>以前的版本中，对应的字符编码全部为<code>8</code>。也可以直接使用<code>e.key</code>（不再使用<code>e.charCode</code>）来获得用户键入的字符（无需多加判断）。</p> <ul> <li>操作剪贴板</li> </ul> <p>除<code>Opera</code>外，所有浏览器都支持通过<code>JavaScript</code> 访问剪贴板。<code>HTML 5</code> 后来也把剪贴板事件纳入了规范。下列就是6 个剪贴板事件。</p> <ul> <li> <code>beforecopy</code>：在发生复制操作前触发。</li> <li> <code>copy</code>：在发生复制操作时触发。</li> <li> <code>beforecut</code>：在发生剪切操作前触发。</li> <li> <code>cut</code>：在发生剪切操作时触发。</li> <li> <code>beforepaste</code>：在发生粘贴操作前触发。</li> <li> <code>paste</code>：在发生粘贴操作时触发。</li> </ul> <p>由于没有针对剪贴板操作的标准，这些事件及相关对象会因浏览器而异。在<code>Safari</code>、<code>Chrome</code> 和<code>Firefox</code>中，<code>beforecopy</code>、<code>beforecut</code> 和<code>beforepaste</code> 事件只会在显示<strong>针对文本框的上下文菜单</strong>（预期将发生剪贴板事件）的情况下触发。但是，<code>IE</code> 则会在触发<code>copy</code>、<code>cut</code> 和<code>paste</code> 事件之前先行触发这些事件。至于<code>copy</code>、<code>cut</code> 和<code>paste</code> 事件，只要是在上下文菜单中选择了相应选项，或者使用了相应的键盘组合键，所有浏览器都会触发它们。取消<code>"before事件"</code>并不会取消对剪贴板的操作——只有取消<code>copy</code>、<code>cut</code> 和<code>paste</code>事件，才能阻止相应操作发生。</p> <p>要访问剪贴板中的数据，可以使用<code>clipboardData</code>对象：在<code>IE</code> 中，这个对象是<code>window</code> 对象的属性，可以随时访问<code>clipboardData</code>对象；而在<code>Firefox 4+</code>、<code>Safari</code> 和<code>Chrome</code> 中，这个对象是相应<code>event</code>对象的属性，并且只有在处理剪贴板事件期间<code>clipboardData</code> 对象才有效。</p> <p><code>clipboardData</code> 对象有三个方法：<code>getData()</code>、<code>setData()</code>和<code>clearData()</code>。</p> <p><code>getData()</code>用于从剪贴板中取得数据，它接受一个参数，即要取得的数据的格式。在<code>IE</code>中，有两种数据格式：<code>"text"</code>和<code>"URL"</code>。在<code>Firefox</code>、<code>Safari</code> 和<code>Chrome</code> 中，这个参数是一种<code>MIME</code> 类型(多用途互联网邮箱扩展类型)；不过，可以用<code>"text"</code>代表<code>"text/plain"</code>。<strong><code>Firefox</code>、<code>Safari</code> 和<code>Chrome</code> 只允许在<code>onpaste</code> 事件处理程序中访问<code>getData()</code>方法。</strong></p> <p><code>setData()</code>方法的第一个参数也是数据类型，第二个参数是要放在剪贴板中的文本。对于第一个参数，<code>IE</code> 照样支持<code>"text"</code>和<code>"URL"</code>，而<code>Safari</code> 和<code>Chrome</code> 仍然只支持<code>MIME</code>类型。但是，与<code>getData()</code>方法不同的是，<code>Safari</code> 和<code>Chrome</code> 的<code>setData()</code>方法不能识别<code>"text"</code>类型。这两个浏览器在成功将文本放到剪贴板中后，都会返回<code>true</code>；否则，返回<code>false</code>。</p> <pre><code class="js">var EventUtil = { getClipboardText: function(event){ var clipboardData = (event.clipboardData || window.clipboardData); return clipboardData.getData("text"); }, setClipboardText: function(event, value){ if (event.clipboardData){ // safari \ chrome return event.clipboardData.setData("text/plain", value); } else if (window.clipboardData){ // IE return window.clipboardData.setData("text", value); } }, }; </code></pre> <p>在需要确保粘贴到文本框中的文本中包含某些字符，或者符合某种格式要求时，能够访问剪贴板是非常有用的。例如，如果一个文本框只接受数值，那么就必须检测粘贴过来的值，以确保有效。在<code>paste</code>事件中，可以确定剪贴板中的值是否有效，如果无效，则取消默认的行为。</p> <h5>自动切换焦点</h5> <p>通过比较用户输入的值与文本框的<code>maxlength</code> 特性，可以确定是否已经达到最大长度。如果这两个值相等（因为浏览器最终会强制它们相等，因此用户绝不会多输入字符），则需要查找表单字段集合，直至找到下一个文本框。找到下一个文本框之后，则将焦点切换到该文本框。然后，我们把这个函数指定为每个文本框的<code>onkeyup</code>事件处理程序。<strong>由于<code>keyup</code> 事件会在用户输入了新字符之后触发，所以此时是检测文本框中内容长度的最佳时机。</strong></p> <pre><code class="js">function tabForward(e){ var target = e.target if (target.value.length == target.maxLength){ var form = target.form; for (var i=0, len=form.elements.length; i < len; i++) { if (form.elements[i] == target) { if (form.elements[i+1]){ form.elements[i+1].focus(); } return; } } } } </code></pre> <h5>HTML5 约束验证API</h5> <p>为了在将表单提交到服务器之前验证数据，<code>HTML5</code> 新增了一些功能。有了这些功能，即便<code>JavaScript</code>被禁用或者由于种种原因未能加载，也可以确保基本的验证。浏览器自己会根据标记中的规则执行验证，然后自己显示适当的错误消息（完全不用<code>JavaScript</code>插手）只有在支持<code>HTML5</code>这部分内容的浏览器中才有效，这些浏览器有<code>Firefox 4+</code>、<code>Safari 5+</code>、<code>Chrome</code> 和<code>Opera 10+</code>。</p> <p>就是要在<code>HTML</code>标记中为特定的字段指定一些约束，然后浏览器才会自动执行表单验证。</p> <ul> <li>必填字段<code>required</code>属性：<code><input type="text" name="username" required></code> </li> </ul> <p>这个属性适用于<code><input></code>、<code><textarea></code>和<code><select></code>字段。在<code>JavaScript</code>中，通过对应的<code>required</code>属性，可以检查某个表单字段是否为必填字段。</p> <pre><code>var isUsernameRequired = document.forms[0].elements["username"].required; // boolean // 或测试浏览器是否支持 required属性检查创建的input元素是否存在required属性 var isRequiredSupported = "required" in document.createElement("input"); </code></pre> <p>对于空着的必填字段，不同浏览器有不同的处理方式。<code>Firefox 4</code> 和<code>Opera 11</code> 会阻止表单提交并在相应字段下方弹出帮助框，而<code>Safari（5 之前）</code>和<code>Chrome（9 之前）</code>则什么也不做，而且也不阻止表单提交。</p> <ul> <li>其他输入类型</li> </ul> <pre><code><input type="email" name ="email"> <input type="url" name="homepage"> </code></pre> <p><code>HTML5</code> 新增的<code>input</code>的<code>type</code>属性，<code>"email"</code>类型要求输入的文本必须符合电子邮件地址的模式，而<code>"url"</code>类型要求输入的文本必须符合<code>URL</code> 的模式。</p> <pre><code class="js">var input = document.createElement("input"); input.type = "email"; // 先设置后检查是否设置成功 var isEmailSupported = (input.type == "email"); // 不支持的浏览器会自动将未知的值设置为"text" </code></pre> <p>要注意的是，如果不设置<code>required</code> 属性，那么空文本框也会验证通过。另一方面，设置特定的输入类型并不能阻止用户输入无效的值，只是应用某些默认的验证而已。</p> <ul> <li>数值范围</li> </ul> <p><code>HTML5</code> 新增的<code>input</code>的<code>type</code>属性关于数值范围的有：<br> <code>"number"</code>、<code>"range"</code>、<code>"datetime"</code>、<code>"datetimelocal"</code>、<code>"date"</code>、<code>"month"</code>、<code>"week"</code>、<code>"time"</code></p> <p>对所有这些数值类型的输入元素，可以指定<code>min</code>属性（最小的可能值）、<code>max</code> 属性（最大的可能值）和<code>step</code> 属性（从<code>min</code> 到<code>max</code>的两个刻度间的差值）。</p> <pre><code class="js">// 想让用户只能输入0 到100 的值，而且这个值必须是5 的倍数 <input type="number" min="0" max="100" step="5" name="count"> </code></pre> <p>以上这些属性在<code>JavaScript</code>中都能通过对应的元素访问（或修改）。此外，还有两个方法：<code>stepUp()</code>和<code>stepDown()</code>，都接收一个可选的参数：要在当前值基础上加上或减去的数值。（默认是加或减<code>1</code>。）</p> <pre><code>input.stepUp(); //加1 input.stepUp(5); //加5 input.stepDown(); //减1 input.stepDown(10); //减10 </code></pre> <ul> <li>输入模式</li> </ul> <p><code>HTML5</code> 为文本字段新增了<code>pattern</code>属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。</p> <pre><code class="js">// 只允许输入数值 <input type="text" pattern="\d+" name="count"> // JavaScript 中可以通过pattern 属性访问 var pattern = document.forms[0].elements["count"].pattern; // 检测浏览器是否支持pattern 属性 var isPatternSupported = "pattern" in document.createElement("input"); </code></pre> <ul> <li>检测有效性</li> </ul> <p>使用<code>checkValidity()</code>方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如果字段的值有效，这个方法返回<code>true</code>，否则返回<code>false</code>。字段的值是否有效的判断依据是本节前面介绍过的那些约束。要检测整个表单是否有效，可以在表单自身调用<code>checkValidity()</code>方法。如果所有表单字段都有效，这个方法返回<code>true</code>；即使有一个字段无效，这个方法也会返回<code>false</code>。</p> <p>与<code>checkValidity()</code>方法简单地告诉你字段是否有效相比，<code>validity</code> 属性则会告诉你为什么字段有效或无效。这个对象中包含一系列属性，每个属性会返回一个布尔值。</p> <ul> <li> <code>customError</code> ：如果设置了<code>setCustomValidity()</code>，则为<code>true</code>，否则返回<code>false</code>。</li> <li> <code>patternMismatch</code>：如果值与指定的<code>pattern</code> 属性不匹配，返回<code>true</code>。</li> <li> <code>rangeOverflow</code>：如果值比<code>max</code> 值大，返回<code>true</code>。</li> <li> <code>rangeUnderflow</code>：如果值比<code>min</code> 值小，返回<code>true</code>。</li> <li> <code>stepMisMatch</code>：如果<code>min</code>和<code>max</code>之间的步长值不合理，返回<code>true</code>。</li> <li> <code>tooLong</code>：如果值的长度超过了<code>maxlength</code> 属性指定的长度，返回<code>true</code>。有的浏览器（如<code>Firefox 4</code>）会自动约束字符数量，因此这个值可能永远都返回<code>false</code>。</li> <li> <code>typeMismatch</code>：如果值不是<code>"email"</code>或<code>"url"</code>要求的格式，返回<code>true</code>。</li> <li> <code>valid</code>：如果这里的其他属性都是<code>false</code>，返回<code>true</code>。<code>checkValidity()</code>也要求相同的值。</li> <li> <code>valueMissing</code>：如果标注为<code>required</code> 的字段中没有值，返回<code>true</code>。</li> </ul> <pre><code class="js">if (input.validity && !input.validity.valid){ if (input.validity.valueMissing){ alert("Please specify a value.") } else if (input.validity.typeMismatch){ alert("Please enter an email address."); } else { alert("Value is invalid."); } } </code></pre> <ul> <li>禁用验证</li> </ul> <p>通过设置<code>novalidate</code> 属性，可以告诉表单不进行验证。</p> <pre><code class="html"><form method="post" action="signup.php" novalidate>  </form> </code></pre> <pre><code class="js">// 在JavaScript 中使用noValidate 属性可以取得或设置这个值 // 如果这个属性存在，值为true，如果不存在，值为false。 document.forms[0].noValidate = true; //禁用验证 </code></pre> <p>如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加 <code>formnovalidate</code> 属性。也可以使用<code>JavaScript</code>取得或设置这个属性。</p> <h4>三、选择框脚本</h4> <p>选择框是通过<code><select></code>和<code><option></code>元素创建的。为了方便与这个控件交互，除了所有表单字段共有的属性和方法外，<code>HTMLSelectElement</code> 类型还提供了下列属性和方法。</p> <ul> <li> <code>add(newOption, relOption)</code>:向控件中插入新<code><option></code>元素，其位置在相关项<code>(relOption)</code> 之前。</li> <li> <code>multiple</code>:布尔值，表示是否允许多项选择;</li> <li> <code>options</code>:控件中所有<code><option></code>元素的 <code>HTMLCollection</code>。</li> <li> <code>remove(index)</code>:移除给定位置的选项。</li> <li> <code>selectedIndex</code>:基于 0 的<strong>选中项的索引</strong>，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。</li> <li> <code>size</code>:选择框中可见的行数;</li> </ul> <p>选择框的 <code>type</code>属性不是<code>"select-one"</code>，就是<code>"select-multiple"</code>，这取决于 <code>HTML</code> 代码中有没有 <code>multiple</code> 特性。</p> <p><code><select></code>的<code>value</code>:如果没有选中的<code>options</code>，则<code>value</code>为空字符串，如果有选中的<code>options</code>，则<code>value</code>的值为被选中的<code>options</code>的<code>value</code>属性，如果被选中的<code>options</code>没有<code>value</code>属性，则为该<code>options</code>的文本值。可以通过 <code>option.attributes.value && option.attributes.value.specified</code> 来判断<code>option</code>元素是否定义了 <code>value</code>属性。</p> <p>每个<code><option></code>元素都有以下属性。</p> <ul> <li> <code>index</code>:当前选项在 <code>options</code> 集合中的索引。</li> <li> <code>label</code>:当前选项的标签;</li> <li> <code>selected</code>:布尔值，表示当前选项是否被选中。将这个属性设置为 <code>true</code> 可以选中当前选项。</li> <li> <code>text</code>:选项的文本。</li> <li> <code>value</code>:选项的值。</li> </ul> <p>建议使用属性访问，不建议使用<code>DOM</code>方法访问；其他表单字段的 <code>change</code> 事件是在值被修改且焦点离开当前字段时触发，而选择框的 <code>change</code> 事件只要选中了选项就会触发。在未指定 <code>value</code>特性的情况下，<code>IE8</code> 会返回空字符串，而 <code>IE9+</code>、<code>Safari</code>、<code>Firefox</code>、<code>Chrome</code> 和 <code>Opera</code> 则会返回与 <code>text</code> 特性相同的值。</p> <h5>选择选项</h5> <p>访问选中项的最简单方式，就是使用选择框的<code>selectedIndex</code> 属性，如下面的例子所示：</p> <p><code>var selectedOption = selectbox.options[selectbox.selectedIndex];</code></p> <p>对于可以选择多项的选择框，设置<code>selectedIndex</code>会导致取消以前的所有选项并选择指定的那一项，而读取<code>selectedIndex</code>则只会返回选中项中第一项的索引值。另一种选择选项的方式，就是取得对某一项的引用，然后将其<code>selected</code>属性设置为<code>true</code>。多选的情况下，可以将多个选项的<code>selected</code>值设置为<code>true</code>；而单选框，修改某个选项的<code>selected</code>属性为<code>true</code>，则会取消对其他选项的选择。</p> <h5>添加选项</h5> <ul> <li>DOM方法</li> </ul> <pre><code class="js">var newOption = document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value", "Option value"); selectbox.appendChild(newOption); </code></pre> <ul> <li>使用Option 构造函数</li> </ul> <pre><code class="js">// 这一步在兼容DOM的浏览器中会返回一个元素 var newOption = new Option("Option text", "Option value"); selectbox.appendChild(newOption); //在IE8 及之前版本中有问题 selectbox.add(newOption, undefined); //最佳方案 // add接受两个参数（要添加的新选项，相对选项），会将新选项添加到相对选项的前面 // 传值为null或是undefined则将插入到最后 // IE中第二个参数可选，兼容DOM的浏览器要求第二个参数必填。 </code></pre> <h5>移除选项</h5> <pre><code class="js">// `removeChild()` selectbox.removeChild(selectbox.options[0]); //移除第一个选项 // selectElement的`remove()`方法 selectbox.remove(0); // 这个函数每次只移除选择框中的第一个选项。 // 移除第一个选项后，所有后续选项都会自动向上移动一个位置 // 因此重复移除第一个选项就可以移除所有选项了。 </code></pre> <h5>移动和重排选项</h5> <p>如果为<code>appendChild()</code>方法传入一个文档中已有的元素，那么就会先从该元素的父节点中移除它，再把它添加到指定的位置，这样就可以将第一个选择框中的选项直接移动到第二个选择框中。移动选项与移除选项有一个共同之处，即会重置每一个选项的<code>index</code>属性。</p> <p>重排选项次序的过程也十分类似，最好的方式仍然是使用<code>DOM</code>方法。要将选择框中的某一项移动到特定位置，最合适的<code>DOM</code> 方法就是<code>insertBefore()</code>；</p> <pre><code class="js">// 在选择框中向前移动一个选项的位置 var optionToMove = selectbox.options[1]; selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]); // 将选择框中的选项向后移动一个位置。 var optionToMove = selectbox.options[1]; selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index+2]); // 如果只加1 相当于没移动 </code></pre> <h4>表单序列化</h4> <p>序列化即<code>url?key1=value1&key2=value2</code>。在<code>JavaScript</code>中，可以利用表单字段的<code>type</code>属性，连同<code>name</code>和<code>value</code>属性一起实现表单序列化。</p> <p>首先需要搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的。</p> <ul> <li>对表单字段的名称和值进行<code>URL</code>编码，使用<code>&</code>分隔。</li> <li>不发送禁用的表单字段。</li> <li>只发送勾选的复选框和单选按钮。</li> <li>不发送type 为"reset"和"button"的按钮。</li> <li>多选选择框中的每个选中的值单独一个条目。</li> <li>在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括<code>type</code>为<code>"image"</code>的<code><input></code>元素。</li> <li> <code><select></code>元素的值，就是选中的<code><option></code>元素的<code>value</code> 特性的值。如果<code><option></code>元素没有<code>value</code>特性，则是<code><option></code>元素的文本值。</li> </ul> <pre><code class="js">function serialize(form){ var parts = [], field = null, i, len, j, optLen, option, optValue; for (i=0, len=form.elements.length; i < len; i++){ field = form.elements[i]; switch(field.type){ case "select-one": case "select-multiple": if (field.name.length){ for (j=0, optLen = field.options.length; j < optLen; j++){ option = field.options[j]; if (option.selected){ // 判断options是否设置了value特性 if (option.hasAttribute){ // DOM兼容的浏览器 optValue = (option.hasAttribute("value") ? option.value : option.text); } else { // IE optValue = (option.attributes["value"].specified ? option.value : option.text); } parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue)); // encodeURIComponent主要用来编码search值 // encodeURI（只转换空格）主要用来编码整个url } } } break; case undefined: //字段集 case "file": //文件输入 case "submit": //提交按钮 case "reset": //重置按钮 case "button": //自定义按钮 break; case "radio": //单选按钮 case "checkbox": //复选框 if (!field.checked){ break; } /* 执行默认操作 */ default: //不包含没有名字的表单字段 if (field.name.length){ parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); } } } return parts.join("&"); } </code></pre> <h4>富文本编辑</h4> <p>富文本编辑，又称为<code>WYSIWYG</code>（<code>What You See Is What You Get</code>，所见即所得）。包含空<code>HTML</code>页面的<code>iframe</code>。通过设置<code>designMode</code>属性，这个空白的<code>HTML</code>页面可以被编辑，而编辑对象则是该页面<code><body></code>元素的<code>HTML</code>代码。</p> <p><code>designMode</code> 属性有两个可能的值：<code>"off"</code>（默认值）和<code>"on"</code>。在设置为<code>"on"</code>时，整个文档都会变得可以编辑（显示插入符号），然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜体，等等。</p> <pre><code class="html"><iframe name="richedit" style="height:200px;width:200px;" src="./frame.htm"></iframe>  <div class="editable" id="richedit1" contenteditable>1111</div> <script type="text/javascript"> window.onload= function () { // 不要在chrome的file环境下尝试会形成跨域问题。 frames["richedit"].document.designMode = "on"; console.log(frames["richedit"].document.designMode) } // iframe_node.contentDocument.designMode = "on"; var div = document.getElementById("richedit1"); div.contentEditable = "true"; // "true"表示打开、"false"表示关闭，"inherit"表示从父元素那里继承 </script> </code></pre> <h5>操作富文本</h5> <ul> <li><code>document.execCommand()</code></li> </ul> <p>该方法接受三个参数：</p> <p>1、要执行的命令名称。<br> 2、表示浏览器是否应该为当前命令提供用户界面的一个布尔值（为兼容浏览器，一般统一传<code>false</code>）<br> 3、执行命令必须的一个值（如果不需要值，则传递<code>null</code>）。</p> <table> <thead> <tr> <th style="text-align:center">命令</th> <th style="text-align:center">值（第三个参数）</th> <th style="text-align:center">说明</th> </tr> </thead> <tbody> <tr> <td style="text-align:center"><code>backcolor</code></td> <td style="text-align:center">颜色字符串</td> <td style="text-align:center">设置文档的背景颜色</td> </tr> <tr> <td style="text-align:center"><code>bold</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">将选择的文本转换为粗体</td> </tr> <tr> <td style="text-align:center"><code>createlink</code></td> <td style="text-align:center"> <code>URL</code>字符串</td> <td style="text-align:center">将选择的文本转换成一个链接，指向指定的<code>URL</code> </td> </tr> <tr> <td style="text-align:center"><code>cut</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">将选择的文本剪切到剪贴板</td> </tr> <tr> <td style="text-align:center"><code>delete</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">删除选择的文本</td> </tr> <tr> <td style="text-align:center"><code>fontname</code></td> <td style="text-align:center">字体名称</td> <td style="text-align:center">将选择的文本修改为指定字体</td> </tr> <tr> <td style="text-align:center"><code>fontsize</code></td> <td style="text-align:center">1～7</td> <td style="text-align:center">将选择的文本修改为指定字体大小</td> </tr> <tr> <td style="text-align:center"><code>forecolor</code></td> <td style="text-align:center">颜色字符串</td> <td style="text-align:center">将选择的文本修改为指定的颜色</td> </tr> <tr> <td style="text-align:center"><code>formatblock</code></td> <td style="text-align:center">要包围当前文本块的<code>HTML</code>标签；如<code><h1></code> </td> <td style="text-align:center">使用指定的<code>HTML</code>标签来格式化选择的文本块</td> </tr> <tr> <td style="text-align:center"><code>indent</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">缩进文本</td> </tr> <tr> <td style="text-align:center"><code>inserthorizontalrule</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">在插入字符处插入一个<code><hr></code>元素</td> </tr> <tr> <td style="text-align:center"><code>insertimage</code></td> <td style="text-align:center">图像的<code>URL</code> </td> <td style="text-align:center">在插入字符处插入一个图像</td> </tr> <tr> <td style="text-align:center"><code>insertorderedlist</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">在插入字符处插入一个<code><ol></code>元素</td> </tr> <tr> <td style="text-align:center"><code>insertunorderedlist</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">在插入字符处插入一个<code><ul></code>元素</td> </tr> <tr> <td style="text-align:center"><code>insertparagraph</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">在插入字符处插入一个<code><p></code>元素</td> </tr> <tr> <td style="text-align:center"><code>italic</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">将选择的文本转换成斜体</td> </tr> <tr> <td style="text-align:center"><code>justifycenter</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">将插入光标所在文本块居中对齐</td> </tr> <tr> <td style="text-align:center"><code>justifyleft</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">将插入光标所在文本块左对齐</td> </tr> <tr> <td style="text-align:center"><code>outdent</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">凸排文本（减少缩进）</td> </tr> <tr> <td style="text-align:center"><code>paste</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">将剪贴板中的文本粘贴到选择的文本</td> </tr> <tr> <td style="text-align:center"><code>removeformat</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">移除插入光标所在文本块的块级格式。这是撤销<code>formatblock</code>命令的操作</td> </tr> <tr> <td style="text-align:center"><code>selectall</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">选择文档中的所有文本</td> </tr> <tr> <td style="text-align:center"><code>underline</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">为选择的文本添加下划线</td> </tr> <tr> <td style="text-align:center"><code>unlink</code></td> <td style="text-align:center"><code>null</code></td> <td style="text-align:center">移除文本的链接。这是撤销<code>createlink</code>命令的操作</td> </tr> </tbody> </table> <p>可通过源码来查看具体使用场景。源码下载，14章，兼容浏览器的js在13章</p> <pre><code class="js">// 选择文本之后触发该js语句执行 // 转换粗体文本 frames["richedit"].document.execCommand("bold", false, null); //转换斜体文本 frames["richedit"].document.execCommand("italic", false, null); //创建指向www.wrox.com 的链接 frames["richedit"].document.execCommand("createlink", false, "http://www.wrox.com"); //格式化为1 级标题 frames["richedit"].document.execCommand("formatblock", false, "<h1>"); // ... ... // 同样的方法也适用于页面中contenteditable 属性为"true"的区块 // 只要把对框架的引用替换成当前窗口的document 对象即可。 //转换斜体文本 document.execCommand("italic", false, null); </code></pre> <ul> <li><code>queryCommandEnabled()</code></li> </ul> <p>可以用它来检测是否可以针对当前选择的文本，或者当前插入字符所在位置执行某个命令。这个方法接收一个参数，即要检测的命令。如果当前编辑区域允许执行传入的命令，这个方法返回<code>true</code>，否则返回<code>false</code>。</p> <pre><code class="js">var result = frames["richedit"].document.queryCommandEnabled("bold"); // 如果能够对当前选择的文本执行"bold"命令，以上代码会返回true。 // 需要注意的是返回true，并不意味着实际上就可以执行相应命令， // 而只能说明对当前选择的文本执行相应命令是否合适。 // 例如，Firefox 在默认情况下会禁用剪切操作，但执行queryCommandEnabled("cut")也可能会返回true </code></pre> <ul> <li><code>queryCommandState()</code></li> </ul> <p>用于确定是否已将指定命令应用到了选择的文本。</p> <pre><code class="js">var isBold = frames["richedit"].document.queryCommandState("bold"); // 如果此前已经对选择的文本执行了"bold"命令，那么上面的代码会返回true。 // 一些功能全面的富文本编辑器，正是利用这个方法来更新粗体、斜体等按钮的状态的。 </code></pre> <ul> <li><code>queryCommandValue()</code></li> </ul> <p>用于取得执行命令时传入的值（即前面例子中传给<code>document.execCommand()</code>的第三个参数）。</p> <pre><code class="js">var fontSize = frames["richedit"].document.queryCommandValue("fontsize"); // 在对一段文本应用"fontsize"命令时如果传入了7，那么这段代码就会返回"7" // 通过这个方法可以确定某个命令是怎样应用到选择的文本的，可以据以确定再对其应用后续命令是否合适。 </code></pre> <h5>富文本选区</h5> <p>在富文本编辑器中，使用框架（<code>iframe</code>）的<code>getSelection()</code>方法，可以确定实际选择的文本。这个方法是<code>window</code>对象和<code>document</code>对象的属性，调用它会返回一个表示当前选择文本的<code>Selection</code>对象。</p> <ul> <li> <p><code>Selection</code>对象属性</p> <ul> <li> <code>anchorNode</code>：选区起点所在的节点。</li> <li> <code>anchorOffset</code>：在到达选区起点位置之前跳过的<code>anchorNode</code>中的字符数量。</li> <li> <code>focusNode</code>：选区终点所在的节点。</li> <li> <code>focusOffset</code>：<code>focusNode</code>中包含在选区之内的字符数量。</li> <li> <code>isCollapsed</code>：布尔值，表示选区的起点和终点是否重合。</li> <li> <code>rangeCount</code>：选区中包含的<code>DOM</code>范围的数量。</li> </ul> </li> <li> <p><code>Selection</code>对象方法</p> <ul> <li> <code>addRange(range)</code>：将指定的<code>DOM</code>范围添加到选区中。</li> <li> <code>collapse(node, offset)</code>：将选区折叠到指定节点中的相应的文本偏移位置。</li> <li> <code>collapseToEnd()</code>：将选区折叠到终点位置。</li> <li> <code>collapseToStart()</code>：将选区折叠到起点位置。</li> <li> <code>containsNode(node)</code>：确定指定的节点是否包含在选区中。</li> <li> <code>deleteFromDocument()</code>：从文档中删除选区中的文本，与<code>document.execCommand("delete",false, null)</code>命令的结果相同。</li> <li> <code>extend(node, offset)</code>：通过将<code>focusNode</code>和<code>focusOffset</code>移动到指定的值来扩展选区。</li> <li> <code>getRangeAt(index)</code>：返回索引对应的选区中的<code>DOM</code>范围。</li> <li> <code>removeAllRanges()</code>：从选区中移除所有<code>DOM</code>范围。实际上，这样会移除选区，因为选区中至少要有一个范围。</li> <li> <code>reomveRange(range)</code>：从选区中移除指定的<code>DOM</code>范围。</li> <li> <code>selectAllChildren(node)</code>：清除选区并选择指定节点的所有子节点。</li> <li> <code>toString()</code>：返回选区所包含的文本内容。</li> </ul> </li> </ul> <pre><code class="js">var selection = frames["richedit"].getSelection(); //取得选择的文本 var selectedText = selection.toString(); //取得代表选区的范围 var range = selection.getRangeAt(0); //突出显示选择的文本 var span = frames["richedit"].document.createElement("span"); span.style.backgroundColor = "yellow"; range.surroundContents(span); // IE不支持 DOM 范围但我们可以通过它支持的 selection 对象操作选择的文本(range.text / range.htmlText)。 // IE 中的 selection 对象是 document 的属性 // 要取得富文本编辑器中选择的文本，首先必须创建一个文本范围 var range = frames["richedit"].document.selection.createRange(); range.pasteHTML("<span style=\"background-color:yellow\"> " + range.htmlText +"</span>"); </code></pre> <p>以上代码会为富文本编辑器中被选择的文本添加黄色的背景。这里使用了默认选区中的 <code>DOM</code>范围，通过 <code>surroundContents()</code>方法将选区添加到了带有黄色背景的<code><span></code>元素中。IE的代码通过<code>htmlText</code> 取得了当前选区中的 <code>HTML</code>，然后将其放在了一对<code><span></code>标签中，最后又使用 <code>pasteHTML()</code>将结果重新插入到了选区中。</p> <h5>表单与富文本</h5> <p>由于富文本编辑是使用<code>iframe</code> 而非表单控件实现的，因此从技术上说，富文本编辑器并不属于表单。富文本编辑器中的<code>HTML</code> 不会被自动提交给服务器，而需要我们手工来提取并提交 <code>HTML</code>。通常可以添加一个隐藏的表单字段，让它的值等于从 <code>iframe</code>中提取出的 <code>HTML</code>,来说，在提交表单之前，从 <code>iframe</code> 中提取出 <code>HTML</code>，并将其插入到隐藏的字段中。下面就是通过<strong>表单</strong>的<code>onsubmit</code>事件处理程序实现上述操作的代码。</p> <pre><code class="js">form.addEventListener('submit',function(e){ e.target.element["comments"].value = frames["richedit"].document.body.innerHTML; }) </code></pre> <p>取得了 <code>iframe</code> 中的 <code>HTML</code>，然后将其插入到了名为 <code>"comments"</code>的表单字段中。这样可以确保恰好在提交表单之前填充<code>"comments"</code>字段。对于<code>contenteditable</code>元素可以使用<code>document.getElementById("rechedit").innerHTML</code>来获取到<code>HTML</code></p> <p>富文本编辑功能是通过一个包含空 <code>HTML</code> 文档的<code>iframe</code> 元素来实现的。通过将空文档的 <code>designMode</code> 属性设置为<code>"on"</code>，就可以将该页面转换为可编辑状态，此时其表现如同字处理软件。另外，也可以将某个元素设置为 <code>contenteditable</code>。在默认情况下，可以将字体加粗或者将文本转换为斜体，还可以使用剪贴板。<code>avaScript</code> 通过使用 <code>execCommand()</code>方法也可以实现相同的一些功能。另外，使用<code>queryCommandEnabled()</code>、<code>queryCommandState()</code>和 <code>queryCommandValue()</code>方法则可以取得有关文本选区的信息。由于以这种方式构建的富文本编辑器并不是一个表单字段，因此在将其内容提交给服务器之前，必须将<code>iframe</code> 或 <code>contenteditable</code> 元素中的 <code>HTML</code>(富文本编辑中的html必然是一段文本字符串) 复制到一个表单字段中。</p> </article> </div> </div> </div>  <div id="SOHUCS" sid="1635337477893971968"></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">你可能感兴趣的:(JS高程：读书摘要（十二）表单)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835513701143244800.htm" title="铭刻于星（四十二）" target="_blank">铭刻于星（四十二）</a> <span class="text-muted">随风至</span> <div>69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但</div> </li> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835506489377255424.htm" title="每日一题——第八十二题" target="_blank">每日一题——第八十二题</a> <span class="text-muted">互联网打工人no1</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E6%AF%8F%E6%97%A5%E4%B8%80%E7%BB%83/1.htm">C语言程序设计每日一练</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>题目：将一个控制台输入的字符串中的所有元音字母复制到另一字符串中#include#include#include#include#defineMAX_INPUT1024boolisVowel(charp);intmain(){charinput[MAX_INPUT];charoutput[MAX_INPUT];printf("请输入一串字符串：\n");fgets(input,sizeof(inp</div> </li> <li><a href="/article/1835506236842405888.htm" title="C#中使用split分割字符串" target="_blank">C#中使用split分割字符串</a> <span class="text-muted">互联网打工人no1</span> <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a> <div>1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc</div> </li> <li><a href="/article/1835498547785592832.htm" title="【华为OD机试真题2023B卷 JAVA&JS】We Are A Team" target="_blank">【华为OD机试真题2023B卷 JAVA&JS】We Are A Team</a> <span class="text-muted">若博豆</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代</div> </li> <li><a href="/article/1835497074049773568.htm" title="数组去重" target="_blank">数组去重</a> <span class="text-muted">好奇的猫猫猫</span> <div>整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495551186071552.htm" title="读书||陶新华《教育中的积极心理学》1—28" target="_blank">读书||陶新华《教育中的积极心理学》1—28</a> <span class="text-muted">流水淙淙2022</span> <div>读一本好书，尤如和一位高尚者对话，亦能对人的精神进行洗礼。但是若不能和实践结合起来，也只能落到空读书的状态。读书摘要与感想1、塞利格曼在《持续的幸福》一书中提出了幸福2.0理论，提出幸福由5个元素决定——积极情绪、投入的工作和生活、目标和意义、和谐的人际关系、成就感。2、人的大脑皮层在进行智力活动时，都伴有皮下中枢活动，对这些活动进行体验请假，并由此产生了情感解读。人的情绪情感体验总是优先于大脑的</div> </li> <li><a href="/article/1835494258262503424.htm" title="【JS】执行时长(100分) |思路参考+代码解析（C++）" target="_blank">【JS】执行时长(100分) |思路参考+代码解析（C++）</a> <span class="text-muted">l939035548</span> <a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835485429059645440.htm" title="docker" target="_blank">docker</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/eureka/1.htm">eureka</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a> <div>Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息</div> </li> <li><a href="/article/1835480639814594560.htm" title="在Ubuntu中编译含有JSON的文件出现报错" target="_blank">在Ubuntu中编译含有JSON的文件出现报错</a> <span class="text-muted">芝麻糊76</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/kill_bug/1.htm">kill_bug</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"</div> </li> <li><a href="/article/1835478496810463232.htm" title="Xinference如何注册自定义模型" target="_blank">Xinference如何注册自定义模型</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/AI/1.htm">AI</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/Xinference/1.htm">Xinference</a> <div>环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model</div> </li> <li><a href="/article/1835474057974345728.htm" title="《太虚游》第六十二章。玄牝之威。" target="_blank">《太虚游》第六十二章。玄牝之威。</a> <span class="text-muted">古楼臭道士</span> <div>“好好好，流云这孩子深得我心，想必长爻知道是你的话定然会惊喜不已的。”白玄牝听得风流云应了下来，脸色慈和，伸手在他头顶轻轻抚了抚，如同抚在怀中九尾小狐一样自然，极其温柔。身后的四位青丘长老同时一怔，嘴角微动，似要开口劝阻。风流云只感到一道霞光瑞气如有实质一般顺着头顶百会大穴直沉在下丹田内，随后这股气息又逐渐凝聚，似乎给自己吃了什么东西一般。啊喔不好，这祖奶奶该不会是看中我这肉身，像人魔一样，要给她</div> </li> <li><a href="/article/1835455048277127168.htm" title="Python神器！WEB自动化测试集成工具 DrissionPage" target="_blank">Python神器！WEB自动化测试集成工具 DrissionPage</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> <div>一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率</div> </li> <li><a href="/article/1835447985601867776.htm" title="Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net" target="_blank">Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net</a> <span class="text-muted">佛一脚</span> <a class="tag" taget="_blank" href="/search/error/1.htm">error</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不</div> </li> <li><a href="/article/1835443569528238080.htm" title="Vue( ElementUI入门、vue-cli安装)" target="_blank">Vue( ElementUI入门、vue-cli安装)</a> <span class="text-muted">m0_l5z</span> <a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n</div> </li> <li><a href="/article/1835442886573912064.htm" title="2021-01-09 哥伦比亚《梦中的欢快葬礼和十二个异乡故事》加西亚·马尔克斯著罗秀译" target="_blank">2021-01-09 哥伦比亚《梦中的欢快葬礼和十二个异乡故事》加西亚·马尔克斯著罗秀译</a> <span class="text-muted">juneyale</span> <div>《梦中的欢快葬礼和十二个异乡故事》哥伦比亚加西亚·马尔克斯著罗秀译序《总统先生，一路走好！》“再给我一杯咖啡。”他用纯正的法语说。随即补充道：“要意式咖啡，能让人起死回生的那种。”并没有意识到话里的双关含义。当火车开始加速，荷马突然发现总统的手杖还在自己手中，于是跑到站台尽头，把手杖用力扔过去，希望总统能在半空中接住。但是手杖掉在了铁轨上，随即被碾得粉碎。那真是恐怖的一瞬。拉萨拉看到的最后一幕是那</div> </li> <li><a href="/article/1835440081733775360.htm" title="圣诞节后的人气又回来了？好丽友、特斯拉们的生意却不好做| 每周热点汇总" target="_blank">圣诞节后的人气又回来了？好丽友、特斯拉们的生意却不好做| 每周热点汇总</a> <span class="text-muted">饭Sir看天下</span> <div>新的一年来了大家好，今天是2022年12月26日，星期一，农历十二月初四。这个月，相信我们很多人都遇到了身体不适的情况，饭Sir上周也因为发烧不得不停更了一周，这几天才刚刚恢复，好在这一切最后都能过去。疫情之外，一些好消息也逐渐到来，例如北京等多座大城市在年底的圣诞节期间又恢复了生机，一些迹象也在预示着久违的热闹春节要回来了。但另一方面，明年不确定的经济形势又带来一些不利的消息，不禁让人有些担心。</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835436390200995840.htm" title="Table列表复现框实现【勾选-搜索-再勾选】" target="_blank">Table列表复现框实现【勾选-搜索-再勾选】</a> <span class="text-muted">～四时春～</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>Table列表复现框实现【勾选-搜索-再勾选】概要整体架构流程代码实现技术细节注意参考文献概要最近在开发时遇到一个问题，在进行表单渲染时，正常选中没有问题，单如果需要搜索选中时，一个是已选中的不会回填，二是在搜索的结果中进行选中，没有实现，经过排查，查找资料后实现。例如：整体架构流程具体的实现效果如下：代码实现{{scope.row.userName}}已选区{{userItem.userName</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835431726982197248.htm" title="vue 创建项目报错：command failed: npm install --loglevel error" target="_blank">vue 创建项目报错：command failed: npm install --loglevel error</a> <span class="text-muted">那鱼、会飞</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue-cli3/1.htm">vue-cli3</a> <div>这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/cli@3.12.1npminstall-g@vue/cli@3.12.1（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错</div> </li> <li><a href="/article/1835430719363575808.htm" title="更改npm镜像源为淘宝镜像" target="_blank">更改npm镜像源为淘宝镜像</a> <span class="text-muted">骆小骆</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8Enode.js/1.htm">基于node.js</a> <div>npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de</div> </li> <li><a href="/article/1835430340806668288.htm" title="COCO 格式的数据集转化为 YOLO 格式的数据集" target="_blank">COCO 格式的数据集转化为 YOLO 格式的数据集</a> <span class="text-muted">QYQY77</span> <a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>"""--json_path输入的json文件路径--save_path保存的文件夹名字，默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances</div> </li> <li><a href="/article/1835424412342513664.htm" title="ChatGPT 高效学习套路揭秘：让知识获取事半功倍的秘诀" target="_blank">ChatGPT 高效学习套路揭秘：让知识获取事半功倍的秘诀</a> <span class="text-muted">kkai人工智能</span> <a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AA%92%E4%BD%93/1.htm">媒体</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>最近这段时间，AI热潮因ChatGPT的火爆再次掀起。如今，网上大部分内容都在调侃AI，但很少有人探讨如何正经使用ChatGPT做事情。作为一名靠搜索引擎和GitHub自学编程的开发者，第一次和ChatGPT深度交流后，我就确信：ChatGPT能够极大提高程序员学习新技术的效率。使用ChatGPT一个月后，我越发感受到它的颠覆性。因此，我想从工作和学习的角度，分享它的优势及我的一些使用技巧，而非娱</div> </li> <li><a href="/article/1835415332345442304.htm" title="NPM私库搭建-verdaccio（Linux）" target="_blank">NPM私库搭建-verdaccio（Linux）</a> <span class="text-muted">Beam007</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1、安装nodelinux服务器安装nodea)、官网下载所需的node版本https://nodejs.org/dist/v14.21.0/b)、解压安装包若下载的是xxx.tar.xz文件，解压命令为tar-xvfxxx.tar.xzc)、修改环境变量修改：/etc/profile文件#SETPATHFORNODEJSexportNODE_HOME=NODEJS解压安装的路径exportPAT</div> </li> <li><a href="/article/1835406761692065792.htm" title="2025第十二届广州国际汽车零部件加工技术及汽车模具展览会" target="_blank">2025第十二届广州国际汽车零部件加工技术及汽车模具展览会</a> <span class="text-muted">ws201907</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%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%B1%BD%E8%BD%A6/1.htm">汽车</a> <div>2025第十二届广州国际汽车零部件加工技术及汽车模具展览会时间：2025年11月20日-22日地点：广州保利世贸博览馆(PWTCExpo)预计20000平方米展出面积；400多家参展商：20000多名观众；汇集了各种汽车零部件成品、汽车模具以及机床加工技术的行业盛会；聚集超过80家汽车主机厂以及3000家一二级零部件制造商参观展览会！展会简介：2025第十二届广州国际汽车零部件加工技术及汽车模具展</div> </li> <li><a href="/article/1835403376498667520.htm" title="《道德经》第七十二章民不畏威" target="_blank">《道德经》第七十二章民不畏威</a> <span class="text-muted">AleoR</span> <div>民不畏威，则大威至。无狭其所居，无厌其所生。夫唯不厌，是以不厌。是以圣人自知不自见，自爱不自责。故去彼取此。</div> </li> <li><a href="/article/107.htm" title="web报表工具FineReport常见的数据集报错错误代码和解释" target="_blank">web报表工具FineReport常见的数据集报错错误代码和解释</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8/1.htm">web报表</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a><a class="tag" taget="_blank" href="/search/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B7%A5%E5%85%B7/1.htm">可视化工具</a> <div>在使用finereport制作报表，若预览发生错误，很多朋友便手忙脚乱不知所措了，其实没什么，只要看懂报错代码和含义，可以很快的排除错误，这里我就分享一下finereport的数据集报错错误代码和解释，如果有说的不准确的地方，也请各位小伙伴纠正一下。 NS-war-remote=错误代码\:1117 压缩部署不支持远程设计 NS_LayerReport_MultiDs=错误代码</div> </li> <li><a href="/article/234.htm" title="Java的WeakReference与WeakHashMap" target="_blank">Java的WeakReference与WeakHashMap</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/%E5%BC%B1%E5%BC%95%E7%94%A8/1.htm">弱引用</a> <div>首先看看 WeakReference wiki 上 Weak reference 的一个例子： public class ReferenceTest { public static void main(String[] args) throws InterruptedException { WeakReference r = new Wea</div> </li> <li><a href="/article/361.htm" title="Linux——（hostname）主机名与ip的映射" target="_blank">Linux——（hostname）主机名与ip的映射</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/hostname/1.htm">hostname</a> <div>一、什么是主机名无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。但IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。域名类型 linuxsir.org 这样的；主机名是用于什么的呢？答：在一个局域网中，每台机器都有一个主</div> </li> <li><a href="/article/488.htm" title="oracle 常用技巧" target="_blank">oracle 常用技巧</a> <span class="text-muted">18289753290</span> <div>oracle常用技巧 ①复制表结构和数据 create table temp_clientloginUser as select distinct userid from tbusrtloginlog ②仅复制数据如果表结构一样 insert into mytable select * &nb</div> </li> <li><a href="/article/615.htm" title="使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException" target="_blank">使用c3p0数据库连接池时出现com.mchange.v2.resourcepool.TimeoutException</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a> <div>有一个线上环境使用的是c3p0数据库，为外部提供接口服务。最近访问压力增大后台tomcat的日志里面频繁出现 com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResou</div> </li> <li><a href="/article/742.htm" title="IT系统分析师如何学习大数据" target="_blank">IT系统分析师如何学习大数据</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> <div>我是一名从事大数据项目的IT系统分析师。在深入这个项目前需要了解些什么呢？学习大数据的最佳方法就是先从了解信息系统是如何工作着手，尤其是数据库和基础设施。同样在开始前还需要了解大数据工具，如Cloudera、Hadoop、Spark、Hive、Pig、Flume、Sqoop与Mesos。系统分析师需要明白如何组织、管理和保护数据。在市面上有几十款数据管理产品可以用于管理数据。你的大数据数据库可能</div> </li> <li><a href="/article/869.htm" title="spring学习——简介" target="_blank">spring学习——简介</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring是一个开源框架，是为了解决企业应用开发的复杂性而创建的。Spring使用基本的JavaBean来完成以前只能由EJB完成的事情。然而Spring的用途不仅限于服务器端的开发，从简单性，可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。其主要特征是依赖注入、AOP、持久化、事务、SpringMVC以及Acegi Security 为了降低Java开发的复杂性，</div> </li> <li><a href="/article/996.htm" title="自定义颜色的xml文件" target="_blank">自定义颜色的xml文件</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div><?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#FFFFFF</color> <color name="black">#000000</color> &</div> </li> <li><a href="/article/1123.htm" title="运营到底是做什么的？" target="_blank">运营到底是做什么的？</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E8%90%A5%E5%88%B0%E5%BA%95%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%9F/1.htm">运营到底是做什么的？</a> <div>文章来源：夏叔叔（微信号：woshixiashushu），欢迎大家关注！很久没有动笔写点东西，近些日子，由于爱狗团产品上线，不断面试，经常会被问道一个问题。问：爱狗团的运营主要做什么？答：带着用户一起嗨。为什么是带着用户玩起来呢？究竟什么是运营？运营到底是做什么的？那么，我们先来回答一个更简单的问题——互联网公司对运营考核什么？以爱狗团为例，绝大部分的移动互联网公司，对运营部门的考核分为三块——用</div> </li> <li><a href="/article/1250.htm" title="js面向对象类和对象" target="_blank">js面向对象类和对象</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E5%88%9B%E5%BB%BA%E7%B1%BB%E5%92%8C%E5%AF%B9%E8%B1%A1/1.htm">函数创建类和对象</a> <div>接触js已经有几个月了,但是对js的面向对象的一些概念根本就是模糊的,js是一种面向对象的语言但又不像java一样有class,js不是严格的面向对象语言 ,js在java web开发的地位和java不相上下 ,其中web的数据的反馈现在主流的使用json,json的语法和js的类和属性的创建相似下面介绍一些js的类和对象的创建的技术一:类和对</div> </li> <li><a href="/article/1377.htm" title="web.xml之资源管理对象配置 resource-env-ref" target="_blank">web.xml之资源管理对象配置 resource-env-ref</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/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>resource-env-ref元素来指定对管理对象的servlet引用的声明，该对象与servlet环境中的资源相关联 <resource-env-ref> <resource-env-ref-name>资源名</resource-env-ref-name> <resource-env-ref-type>查找资源时返回的资源类</div> </li> <li><a href="/article/1504.htm" title="Create a composite component with a custom namespace" target="_blank">Create a composite component with a custom namespace</a> <span class="text-muted">sunjing</span> <div>https://weblogs.java.net/blog/mriem/archive/2013/11/22/jsf-tip-45-create-composite-component-custom-namespace When you developed a composite component the namespace you would be seeing would </div> </li> <li><a href="/article/1631.htm" title="【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter" target="_blank">【MongoDB学习笔记十二】Mongo副本集服务器角色之Arbiter</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div> 一、复本集为什么要加入Arbiter这个角色回答这个问题，要从复本集的存活条件和Aribter服务器的特性两方面来说。什么是Artiber？ An arbiter does not have a copy of data set and cannot become a primary. Replica sets may have arbiters to add a </div> </li> <li><a href="/article/1758.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> 获取iframe内的元素通常我们使用window.frames["frameId"].document.getElementById("divId").innerHTML这样的形式来获取iframe内的元素，这种写法在IE、safari、chrome下都是通过的，唯独在fireforx下不通过。其实jquery的contents方法提供了对if</div> </li> <li><a href="/article/1885.htm" title="Web浏览器Chrome打开一段时间后，运行alert无效" target="_blank">Web浏览器Chrome打开一段时间后，运行alert无效</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/chorme/1.htm">chorme</a><a class="tag" taget="_blank" href="/search/alert/1.htm">alert</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E6%95%88/1.htm">无效</a> <div>今天在开发的时候，突然间发现alert在chrome浏览器就没法弹出了，很是怪异。试了试其他浏览器，发现都是没有问题的。开始想以为是chorme浏览器有啥机制导致的，就开始尝试各种代码让alert出来。尝试结果是仍然没有显示出来。这样开发的结果，如果客户在使用的时候没有提示，那会带来致命的体验。哎，没啥办法了就关闭浏览器重启。结果就好了，这也太怪异了。难道是cho</div> </li> <li><a href="/article/2012.htm" title="编程之美-高效地安排会议图着色问题贪心算法" target="_blank">编程之美-高效地安排会议图着色问题贪心算法</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Random; public class GraphColoringProblem { /**编程之美高效地安排会议图着色问题贪心算法 * 假设要用很多个教室对一组</div> </li> <li><a href="/article/2139.htm" title="机器学习相关概念和开发工具" target="_blank">机器学习相关概念和开发工具</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>基本概念：机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。它是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域，它主要使用归纳、综合而不是演绎。开发工具 M</div> </li> <li><a href="/article/2266.htm" title="[宇宙经济学]关于在太空建立永久定居点的可能性" target="_blank">[宇宙经济学]关于在太空建立永久定居点的可能性</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%BB%8F%E6%B5%8E/1.htm">经济</a> <div> 大家都知道,地球上的房地产都比较昂贵,而且土地证经常会因为新的政府的意志而变幻文本格式........ 所以,在地球议会尚不具有在太空行使法律和权力的力量之前,我们外太阳系统的友好联盟可以考虑在地月系的某些引力平衡点上面,修建规模较大的定居点</div> </li> <li><a href="/article/2393.htm" title="oracle 11g database control 证书错误" target="_blank">oracle 11g database control 证书错误</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E8%AF%81%E4%B9%A6%E9%94%99%E8%AF%AF/1.htm">证书错误</a><a class="tag" taget="_blank" href="/search/oracle+11G+%E5%AE%89%E8%A3%85/1.htm">oracle 11G 安装</a> <div>oracle 11g database control 证书错误 win7 安装完oracle11后打开 Database control 后，会打开em管理页面，提示证书错误，点“继续浏览此网站”，还是会继续停留在证书错误页面解决办法：是 KB2661254 这个更新补丁引起的，它限制了 RSA 密钥位长度少于 1024 位的证书的使用。具体可以看微软官方公告：</div> </li> <li><a href="/article/2520.htm" title="Java I/O之用FilenameFilter实现根据文件扩展名删除文件" target="_blank">Java I/O之用FilenameFilter实现根据文件扩展名删除文件</a> <span class="text-muted">游其是你</span> <a class="tag" taget="_blank" href="/search/FilenameFilter/1.htm">FilenameFilter</a> <div>在Java中，你可以通过实现FilenameFilter类并重写accept(File dir, String name) 方法实现文件过滤功能。在这个例子中，我们向你展示在“c:\\folder”路径下列出所有“.txt”格式的文件并删除。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </div> </li> <li><a href="/article/2647.htm" title="C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例" target="_blank">C语言数组的简单以及一维数组的简单排序算法示例，二维数组简单示例</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a> <div># include <stdio.h> int main(void) { int a[5] = {1, 2, 3, 4, 5}; //a 是数组的名字 5是表示数组元素的个数，并且这五个元素分别用a[0], a[1]...a[4] int i; for (i=0; i<5; ++i) printf("%d\n",</div> </li> <li><a href="/article/2774.htm" title="PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。就是唯一且不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引" target="_blank">PRIMARY, INDEX, UNIQUE 这3种是一类 PRIMARY 主键。就是唯一且不能为空。 INDEX 索引，普通的 UNIQUE 唯一索引</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/primary/1.htm">primary</a> <div>PRIMARY, INDEX, UNIQUE 这3种是一类PRIMARY 主键。就是唯一且不能为空。INDEX 索引，普通的UNIQUE 唯一索引。不允许有重复。FULLTEXT 是全文索引，用于在一篇文章中，检索文本信息的。举个例子来说，比如你在为某商场做一个会员卡的系统。这个系统有一个会员表有下列字段：会员编号 INT会员姓名 </div> </li> <li><a href="/article/2901.htm" title="java集合辅助类 Collections、Arrays" target="_blank">java集合辅助类 Collections、Arrays</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/Collections/1.htm">Collections</a><a class="tag" taget="_blank" href="/search/Arrays/1.htm">Arrays</a><a class="tag" taget="_blank" href="/search/HashCode/1.htm">HashCode</a> <div> Arrays、Collections 1 ）数组集合之间转换 public static <T> List<T> asList(T... a) { return new ArrayList<>(a); } a）Arrays.asL</div> </li> <li><a href="/article/3028.htm" title="Spring Security（10）——退出登录logout" target="_blank">Spring Security（10）——退出登录logout</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/logout/1.htm">logout</a><a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/%E9%80%80%E5%87%BA%E7%99%BB%E5%BD%95/1.htm">退出登录</a><a class="tag" taget="_blank" href="/search/logout-url/1.htm">logout-url</a><a class="tag" taget="_blank" href="/search/LogoutFilter/1.htm">LogoutFilter</a> <div> 要实现退出登录的功能我们需要在http元素下定义logout元素，这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain。当我们指定了http元素的auto-config属性为true时logout定义是会自动配置的，此时我们默认退出登录的URL为“/j_spring_secu</div> </li> <li><a href="/article/3155.htm" title="透过源码学前端之 Backbone 三 Model" target="_blank">透过源码学前端之 Backbone 三 Model</a> <span class="text-muted">逐行分析JS源代码</span> <a class="tag" taget="_blank" href="/search/backbone/1.htm">backbone</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/1.htm">源码分析</a><a class="tag" taget="_blank" href="/search/js%E5%AD%A6%E4%B9%A0/1.htm">js学习</a> <div>Backbone 分析第三部分 Model 概述： Model 提供了数据存储，将数据以JSON的形式保存在 Model的 attributes里，但重点功能在于其提供了一套功能强大，使用简单的存、取、删、改数据方法，并在不同的操作里加了相应的监听事件，如每次修改添加里都会触发 change，这在据模型变动来修改视图时很常用，并且与collection建立了关联。 </div> </li> <li><a href="/article/3282.htm" title="SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter" target="_blank">SpringMVC源码总结（七）mvc:annotation-driven中的HttpMessageConverter</a> <span class="text-muted">乒乓狂魔</span> <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>这一篇文章主要介绍下HttpMessageConverter整个注册过程包含自定义的HttpMessageConverter，然后对一些HttpMessageConverter进行具体介绍。 HttpMessageConverter接口介绍： public interface HttpMessageConverter<T> { /** * Indicate</div> </li> <li><a href="/article/3409.htm" title="分布式基础知识和算法理论" target="_blank">分布式基础知识和算法理论</a> <span class="text-muted">bluky999</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%87%B4%E6%80%A7%E5%93%88%E5%B8%8C/1.htm">一致性哈希</a><a class="tag" taget="_blank" href="/search/paxos/1.htm">paxos</a> <div> 分布式基础知识和算法理论 BY NODEXY@2014.8.12 本文永久链接：http://nodex.iteye.com/blog/2103218 在大数据的背景下，不管是做存储，做搜索，做数据分析，或者做产品或服务本身，面向互联网和移动互联网用户，已经不可避免地要面对分布式环境。笔者在此收录一些分布式相关的基础知识和算法理论介绍，在完善自我知识体系的同</div> </li> <li><a href="/article/3536.htm" title="Android Studio的.gitignore以及gitignore无效的解决" target="_blank">Android Studio的.gitignore以及gitignore无效的解决</a> <span class="text-muted">bell0901</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/gitignore/1.htm">gitignore</a> <div>　　github上.gitignore模板合集，里面有各种.gitignore ： https://github.com/github/gitignore 　　自己用的Android Studio下项目的.gitignore文件，对github上的android.gitignore添加了　　　　　　# OSX files　　　　　　//mac os下　　　　　　.DS_Store </div> </li> <li><a href="/article/3663.htm" title="成为高级程序员的10个步骤" target="_blank">成为高级程序员的10个步骤</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>What 软件工程师的职业生涯要历经以下几个阶段：初级、中级，最后才是高级。这篇文章主要是讲如何通过 10 个步骤助你成为一名高级软件工程师。 Why 得到更多的报酬！因为你的薪水会随着你水平的提高而增加提升你的职业生涯。成为了高级软件工程师之后，就可以朝着架构师、团队负责人、CTO 等职位前进历经更大的挑战。随着你的成长，各种影响力也会提高。 </div> </li> <li><a href="/article/3790.htm" title="mongdb在linux下的安装" target="_blank">mongdb在linux下的安装</a> <span class="text-muted">xtuhcy</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一、查询linux版本号： lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch:graphics-4.0-amd64:graphics-4.0-noarch:printing-4.0-amd64:printing-4.0-noa</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>