&Lik-

HTML+CSS+JS详解

Web概述

Web三要素：浏览器，服务器，HTTP协议

HTML工作原理：HTML是部署在服务器上的文本文件，根据HTTP协议浏览器发出请求给服务器，服务器做出响应给浏览器返回一个HTML，浏览器解释执行HTML，从而显示内容

什么是HTML？

HTML是超文本标记语言（Hyper Text Markup Language）,一种纯文本类型的语言，用来设计网页的标记语言，用该语言编写的文件以.html或者.htm为后缀，由浏览器解释执行，在HTML的页面上可以嵌套脚本语言编写程序段，如JavaScript

HTML标签

HTML标签通常也被称为HTML标记，HTML元素；HTML标签是由尖括号包围的关键字，比如，HTML标签通常是成对出现的,比如，标签对中的第一个标签为开始标签，第二个标签为结束标签，开始标签和结束标签也被称为开放标签和闭合标签

HTML注释：

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们

HTML文档类型：

声明：HTML由多个不同的版本，只有完全明白页面中的使用的确切HTML版本，浏览器才能完全正确的显示HTML页面，这就是的意义；

不是HTML的标签，它为浏览器提供一项信息，即HTML是用什么版本所写的

HTML标签：

定义：标签用于定义文档的头部，是所有头部元素的容器，中的元素可以引用脚本，指示浏览器在哪里找到样表式，提供元信息等等

文档的头部描述了文档的各种信息和属性，包括文档的标题，在web中的位置以及和其他文档的关系等，绝大多数文档的头部包含的数据都不会真正的作为内容显示给读者

以下这些标签可用在head部分：,<meta>,<link>,<style>,<script>,<base></p> <h3>文本元素：</h3> <p>**作用：**文本时网页上的重要组成部分，直接书写的文本会用浏览器默认的样式显示</p> <p>**文本元素列表：**是包含在文本元素中的文本，则会被显示为元素所拥有的样式</p> <h3>HTML标题：</h3> <p>标题是通过<h1>~<h6>标签进行定义的，目的是为了能够以醒目的方式显示，<h1>定义最大标题，<h6>定义最小标题</p> <p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H0qWULYZ-1613216632726)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192107880.png)]</p> <h3>HTML段落：</h3> <p>段落是通过<p>标签进行定义的，<p>元素提供了结构化文本的一种方式，<p>元素对中的文本会以单独的段落显示，与前后文本换行分开，添加一段额外的垂直空白距离，作为行间距</p> <h3>HTML列表：</h3> <p>列表是将具有相似特征或先后顺序的几行文字进行对齐排列，所有列表都是由列表类型和列表项组成</p> <p><strong>列表类型：</strong></p> <p>有序列表 <ol>：用于列出表面上有特定次序的一些项目，其中只能包含列表项<li></p> <p>无序列表 <ul>：用于列出页面上没有特定次序的一些项目，也只能包含具体列表项元素<li></p> <p>列表项：用来表示列表具体的内容 <li></p> <h3>HTML列表嵌套：将列表元素嵌套使用，可以建多层列表</h3> <p><strong>HTML分区元素</strong>：</p> <p>用于元素的一些分组，常用于页面布局，块分区元素<div></div>,行内分区元素<span></span></p> <p><strong>元素显示方式：</strong></p> <p> 块级元素：**默认情况下，块级元素独占一行，即元素前后都会自动换行，比如<p>,<div></p> <p> 行内元素：**不会换行,与其他行内元素位于同一行</p> <p> <span>元素是内联元素,可用作文本的容器，无特定的含义</p> <p> <i>元素定义斜体字</p> <p> <em>定义着重文字</p> <p> <del>用来定义带删除线的文字</p> <p> <u>用来定义带下划线的文字</p> <p> 空格折叠：**默认情况下，HTML中的多个空格，多个换行符会压缩成单个空格，即只显示一个空格</p> <p> 实体引用：**空格：；（小于号）<:< （大于号） >:>；</p> <h3>HTML图像：</h3> <p>使用<img>元素可以将图片添加到页面</p> <p><strong>语法</strong>：<img src=“url” ></p> <p><strong>常用属性</strong>：width,height</p> <p>src指的是"source",原属性的值是图像的URL地址，但是地址值分为绝对路径和相对路径</p> <p><strong>绝对路径</strong>：文件从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径后总能找到要连接的文件</p> <p><strong>相对路径</strong>：文件的位置是相对于当前的文件位置，包括目录名或指向一个可以从当前目录出发找到的文件</p> <h3>HTML超链接：<a href =“url”,target=""></h3> <p><strong>href属性</strong>：链接地址URL <strong>target属性</strong>：目标的打开方式</p> <p>**锚点：**文档中某行的一个记号，用于链接到文档中的某个位置</p> <p>**链接锚点：**在锚点前加 # <strong><a href ="#g1">内容</a></strong></p> <p><strong>定义锚点：<a name=“g1”>内容</a></strong></p> <p><strong>俩者需对应使用，前后呼应</strong></p> <h3>HTML表格</h3> <p>表格是由<table>标签来定义的，通常用来组织结构化信息，是被称作单元格的矩形框，按照从左到右，从上到下的顺序排列在一起而形成的，表格的数据保存在单元格里</p> <p> 创建表格：**<table></table></p> <p> 创建行：**<tr></tr></p> <p> 创建列：**<td></td></p> <p>**表格常用的属性：**border 边框 width/height 宽/高</p> <p> align 对齐方式</p> <p> padding 边框与文字之间的距离，内边距</p> <p> cellspacing：单元格之间的距离</p> <p> 跨行属性：rowspan 合并行 colspan 合并列</p> <p>**行分组：**表格看分为3个部分，分别为：表头，表主题，表尾</p> <pre><code class="prism language-HTML"><table>  <thead> <tr> <th></th> </tr> </thead>  <tbody> <tr> <td></td> </tr> </tbody>  <tfoot> <tr> <td></td> </tr> </tfoot> </table> </code></pre> <h3>HTML表单：</h3> <p>表单是用于显示收集信息并提交信息到服务器，表单是一个包含表单元素的区域</p> <p>俩要素：form元素，表单控件</p> <p>表单是从浏览器向服务器传输数据的手段</p> <p><strong>表单元素：</strong></p> <p>定义表单使用成对的<form>标记，表示要将此元素中所涵盖的控件中的数据传入到服务器</p> <p>主要属性：</p> <p> action：表单提交URL；method：数据提交方式；enctype：表单数据进行编码的方式</p> <p>**表单控件：**由许多不同类型的控件，其是一种HTML元素，是信息输入项，包含</p> <p>input元素（具有不同的外观）:文本框，密码框，单选框，按钮…</p> <p>其他元素：标签，文本域，下拉选</p> <p><strong>input元素</strong></p> <p> 文本框 <input type = “text”/></p> <p> 密码框：<input type = “password”/></p> <p> 主要属性：value：由访问者自由输入任何文本</p> <p>**Maxlength：**限制输入的字符数</p> <p>**Readonly：**设置文本控件的只读</p> <p> 单选框: <input type =“radio”/></p> <p> 复选框：<input type =“checkbox”/></p> <p> 属性：value：文本，当提交form时，选中单选按钮，则发送服务器</p> <p> Name：实现分组，一组单选框或者复选框名称必须相同</p> <p> Check：设置选中</p> <p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TbR5MTui-1613216632733)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192510057.png)]</p> <p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O2MVUjfi-1613216632735)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192521811.png)]</p> <p><strong>提交按钮：</strong><input type = "submit " value=“提交”/>传送表单数据给服务器</p> <p><strong>重置按钮：</strong><input type = “reset” value=“重置”/>清空内容，并设为最初默认状态</p> <p><strong>普通按钮：</strong><input type = “button” value=""/>执行客户端脚本</p> <p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U5s5lfzH-1613216632740)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192540715.png)]</p> <p><strong>隐藏域：</strong><input type = “hidden”/>表单中包含但不希望用户所见</p> <p><strong>文件选择框：</strong><input type = “file”/>选择上传的文件</p> <p><strong>其他元素：</strong></p> <p> 标签：表单中的文本用于给控件设置显示名称</p> <p> 语法：<label for=“控件ID”>文本</label></p> <p> 属性：<strong>for</strong>：设置该文本所关联的控件ID，关联后点击标签等同于点击控件</p> <p> 文本域：多行文本框</p> <p> 语法：<textrea></textrea></p> <p> 属性：cols:指定文本域的列数；rows：指定文本域的行数； readonly：该文本域只读</p> <p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b1qlNISs-1613216632744)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192605362.png)]</p> <p><strong>下拉选</strong></p> <p><strong>语法：</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BG5bF3xx-1613216632747)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192623052.png)]</p> <h2><strong>CSS概述</strong></h2> <h3>什么是CSS?</h3> <p>CSS是层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，样式通常储存在样式表中，CSS是HTML的化妆师</p> <h3>如何使用CSS？</h3> <p>内联样式：定义在单个HTML元素中</p> <p>内部样式表：定义在HTML的头元素中</p> <p>外部样式表：将样式定义在外部的CSS文件中（.css）,由HTML页面引用样式表文件</p> <p><strong>内联样式</strong>：定义在HTML元素的属性style里面</p> <p>css语法：只需要将分号隔开的一个或多个属性作为元素的style属性值，属性值之间用冒号（:）连接，多个属性值之间用分号（;）隔开</p> <p>**内部样式表：**在HTML的<head>元素内部添加<style>元素</p> <p>**外部样式表：**样式定义在独立的CSS文件中，一个纯文本文件，后缀为.css,该文件只包含样式规则</p> <p>使用方法：①**创建外部样式表文件</p> <p>②引用该样式文件</p> <p><code><link rel="stylesheet" type="text/css" href="文件地址值"\></code></p> <h3>CSS语法规范：</h3> <p>CSS规则由俩个部分构成：选择器，以及一条或多条样式声明</p> <p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-snIlbh1w-1613216632749)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192800256.png)]</p> <p>**CSS注释：**CSS注释以 “/*” 开始, 以 “*/” 结束,</p> <p> /*这是个注释*/</p> <h3><strong>CSS规则特性</strong></h3> <p><strong>优先级</strong>：同一个元素若存在多个CSS规则，对应冲突的声明以优先级高者为准（就近原则）</p> <p><strong>层叠性</strong>：同一个元素若存在多个CSS规则，对于不冲突的声明可以叠加</p> <p><strong>继承性</strong>：父元素的CSS声明可以被子元素继承，如字体，颜色</p> <h3><strong>CSS选择器</strong></h3> <p>**元素选择器：**能通过元素名来选择CSS作用的目标</p> <p>**类选择器：**能够附带class属性的元素都可以使用此样式声明，将元素的class属性设置为样式类名，可以将类选择器和元素选择器结合使用，以实现对某种元素的中不同样式的细分控制 (.class_name)</p> <p>**ID选择器：**以一种独立于文档元素的方式，它仅作用于id属性的值 (#id_name)</p> <p>**选择器组：**选择器声明为以逗号隔开的选择器列表，将一些相同的规则作用于多个元素</p> <p>**派生选择器：**用来选择子元素</p> <p>分类：后代选择器：选择某元素的后代（子孙）元素</p> <p>子元素选择器：选择某元素的所有子元素</p> <p>**伪类选择器：**用于设置同一个元素在不同状态下的样式</p> <p>常用伪类:</p> <p> :link向未被访问的超链接添加样式</p> <p> :visited 向已被访问的添加样式</p> <p> :active:向未激活的元素添加样式</p> <p> :hover:当鼠标悬停到元素上方时，添加样式</p> <p> :focus:当元素获取焦点时，向该元素添加样式</p> <p><strong>border</strong>：用来设置元素的边框</p> <p><strong>四边设置</strong>：border：width值 style值 color值</p> <p><strong>单边设置</strong>：border-left border-right border-top border-bottom</p> <p><strong>样式单位</strong>：%：百分比 in：英寸 cm：厘米</p> <p> mm:毫米 pt 磅（1pt=1/72 in）</p> <p> Px像素 1em 等于当前字体尺寸</p> <p> Overflow：当内容溢出元素边框时</p> <p> Visible 不裁剪内容，可显示在内容框外</p> <p> Hidden 裁剪内容，不提供滚动机制</p> <p> Scroll 裁剪内容，提供滚动机制</p> <p> Auto 如溢出，提供滚动</p> <h3>Box框模型：</h3> <p>元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。</p> <p>内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置</p> <ul> <li> <p><strong>Margin</strong> - 清除边框区域。Margin没有背景颜色，它是完全透明</p> </li> <li> <p><strong>Border -</strong> 边框周围的填充和内容。边框是受到盒子的背景颜色影响 `</p> </li> <li> <p><strong>Padding</strong> - 清除内容周围的区域。会受到框中填充的背景颜色影响</p> </li> <li> <p><strong>Content</strong> - 盒子的内容，显示文本和图像</p> </li> </ul> <h3>背景色：</h3> <h3>background-color：用于为元素设置背景色，可接受任何合法的颜色值</h3> <p><strong>背景图片：</strong></p> <p>background-image：设置背景图片，默认值为none，表示背景上没有放置任何图像，如需设置，则需要起始字符附带图像的url地址</p> <p>默认情况下，背景图片是在水平和垂直方向上重复出现的</p> <p> background-repeate：可控制背景图片的平铺效果</p> <p> repeate：在水平和垂直方向重复</p> <p> repeate-x：在水平方向重复</p> <p> repeate-y：在垂直方向重复</p> <p> no repeate：仅显示一次</p> <p> background-position：用于改变背景图片在元素中的位置</p> <h2>CSS文本格式化</h2> <h3>控制字体：</h3> <h3>font-family：value 1，value 2 指定字体</h3> <p>font-size：value 字体大小</p> <p>font-weight：normal/bold 字体加粗</p> <p>color：value 文本颜色</p> <p>Text-align：left/right/center 文本排列</p> <p>Line-height：value 行高</p> <p>Text-indent：value 首行文本缩进</p> <h2>表格样式：</h2> <h3><strong>常用属性</strong>：表格同样使用box模型（边框，内边距，宽，高）以及文本格式化属性</h3> <h3><strong>表格特有属性</strong>：如果设置了单元格边框，相邻单元格边框会单独显示，类似于双线边框</h3> <p>border-collapse：合并相邻的边框，设置是否将表格的边框合并为一个边框</p> <h3>显示方式：元素都有自己默认的选择方式</h3> <p>块元素：从上到下显示，可以设置宽高如：<P>,<div>,<h1></p> <p>行内元素：从左到右显示，不能设置宽高，如：<span>,<a></p> <p>行内块元素：从左到右显示，可以设置宽高，<input>,<img></p> <p>除了默认显示效果外，可以用display属性，修改元素的显示方式</p> <p><strong>具体修改方式</strong>:</p> <p> display：none 表示不显示该元素，释放其占用的空间</p> <p> display：block 表示将元素的显示方式设置为块</p> <p> display：inline 表示将元素的显示方式设置为行内元素</p> <p> display：inline-block：表示将元素的显示方式设置为行内块元素</p> <h2>定位：</h2> <p>定义元素框对于其正常位置应该出现的位置或相对于父元素另一个元素相对于浏览器窗口本身的位置</p> <p>**流定位：**页面中的块级元素从上到下依次排列，每一个块级元素都会出现在新的一行，元素框之间的垂直距离，由框的垂直外边距计算得出</p> <p>内联元素：在一行中从左到右，水平排列不需要换行，使用的是水平内边距，边框和外边距调整他们的间距</p> <p>**浮动定位：**将元素排除在普通流之外，将浮动元素放置在包含框的左边或者右边，浮动元素依旧包含于框之外，浮动框可以向左或者向右移动，直到外边缘碰到包含框或者另一个浮动框位为止，如需要设置框浮动在包含框的左边或者右边，可以通过float属性实现具体方向的移动</p> <p>任何元素都是可以移动的 float：none/left/right</p> <p>clear清除浮动所带来的影响：clear：none/left/right/both</p> <p>**相对定位：**元素原本所占的空间不释放，元素框会相对于原来的位置偏移某个距离，设置垂直或者水平，让元素相对于它的起点进行移动</p> <h3>首先需要设置position属性，其值为relative，然后使用left/right/top/bottom设置具体的偏移量</h3> <p>**绝对定位：**将元素的内容从当前定位中清除，释放空间，并使用偏移量来固定元素的位置，相对于最近的祖先元素，若偏移元素没有已定位的元素，那么它的位置就是相对于body元素的位置</p> <p> 首先设置position属性，其值为absolute，然后使用left/right/top/bottom设置具体的偏移量</p> <p>**固定定位：**将元素的内容固定在页面的某个位置，元素从普通流中完全移出，不占用页面空间，当用户将页面向下滚动时，元素看不随着移动</p> <p> 首先设置position属性，其值为fixed，然后使用left/right/bottom/top设置具体的偏移量</p> <p>**堆叠顺序：**一旦修改元素的定位方式，元素可能发生堆叠，可以使用z-index来控制有元素在框中出现的堆叠数值</p> <p> Z-index：value 数值越大，级别越高，越显示在前</p> <h2>列表样式：</h2> <p>List-style-type：用于控制列表中列表项标志的一个样式</p> <p>无序列表：出现在各列旁边的圆点</p> <p> 无需列表的取值：none：无标记；disc：实心圆（默认）；circle（空心圆）；square 实心方块</p> <p>有序列表：可能出现数字，字母或者其他用来排列计数</p> <p> 有序列表的取值：none：无标记；decimal：数字；</p> <p> lower-roman：小写罗马数字 upper-roman：大写罗马数字</p> <p> list-style-image：使用图像替换列表项，取值为url</p> <h2>JavaScript</h2> <p><strong>什么是javaScript？</strong></p> <p>嵌入在HTML中在浏览器中的脚本语言，具有与java和C语言类似的语言，一种网页的编程技术，用来向HTML页面添加交互行为，直接嵌入HTML页面，由浏览器解释执行代码，不进行预编译</p> <p> 特点：可以使用任何文本工具编译，由浏览器内置的JavaScript引擎执行代码</p> <p> 解析执行：事先不编译，逐行执行</p> <p> 基于对象：内置大量线程对象</p> <p>**使用：**客户端的数据计算，客户端表单合法性验证，浏览器事件触发，网页特殊显示效果制作，服务器的异常数据提交</p> <h3>JavaScript程序的用法：</h3> <p>事件定义式：在时间定义时，直接写JavaScript；</p> <p>嵌入式：在使用Script标签</p> <p>文件调用式:代码位于单独的(.js)文件中，html页面引用js文件，在script标签中添加文件的地址（src=""）</p> <h3>JavaScript代码错误：</h3> <p>解释性代码，代码错误则页面中无效果，可以打开网页的"检查""错误控制台"来查看错误</p> <h3>JavaScript语法规范：</h3> <p>**基本语法：**由Unicode字符集编写</p> <p>**注释：**单行：//注释内容多行：/*注释内容*/</p> <p>**语句：**表达式，关键字，运算符，大小写敏感，建议使用分号结尾一条语句</p> <p><strong>标识符和关键字：</strong></p> <p>标识符:不以数字开头的字母，数字，下划线和$组成</p> <p>关键字：查看js手册</p> <p>**变量：**使用关键字var声明变量，变量初始化使用"=="来赋值</p> <p>没有初始化的变量自动取值为：undefined</p> <p>变量无类型，统一使用var声明，变量所引用的数据有类型</p> <h3>JavaScript数据类型：</h3> <p>**特殊类型：**null：空 undefined：未定义</p> <p>**内置对象：**Number：数字 String：字符串 boolean：俩个值 true/false Array数组 function：函数</p> <p>**外部对象：**window：浏览器对象 document：文档对象</p> <p>**自定义对象：**Object：自定义对象</p> <p><strong>String类型:</strong></p> <p> 由Unicode字符，数字，标点符号组成的字符序列，直接量需要一对单/双引号括起</p> <p><strong>Number类型：</strong></p> <p> 在JavaScript中不区分整型数值和浮点型数值，整型直接量：默认的整数直接量为十进制</p> <p><strong>Boolean类型：</strong></p> <p> 仅有俩个值 true/false</p> <p><strong>数据类型转换：</strong></p> <p> ①数据类型之间隐式转换</p> <p> ②转换函数：</p> <p>**·toString：**所有数据类型均可以转换为String类型</p> <p>·<strong>parseInt（）</strong>：强制转换为整数，如不能转换则出现NaN;</p> <p>·<strong>parseFloat（）</strong>：强制转换为浮点数，不能转换会出现NaN;</p> <p>·**typeof：**查看当前类型，返回String/Number/boolean/object/Function/undefined</p> <p>·**isNaN（）：**判断被检测表达式转换后是否不是一个数，若不是数，则为true；否则为fasle</p> <p><strong>特殊数据类型：</strong></p> <p> Null：程序中无值/无对象，可以给一个变量赋值为null来清除内容</p> <p> Undefined：声明变量，单位赋值/对象属性不存在</p> <h3>运算符：</h3> <p><strong>算数运算</strong>：+，-，*，/，%，++（自增），–（自减）</p> <p><strong>关系运算</strong>：>，>=，<，<=，!=，==</p> <p> ===：全等：类型相同，数值相同</p> <p> ！==：不全等</p> <p><strong>逻辑运算</strong>：与：&&；或：||；非（！）</p> <p><strong>条件运算</strong>：三目运算：表达式？表达式1：表达式2</p> <p><strong>控制语句</strong>：任何复杂的程序都可以通过顺序结构，分支结构，循环结构三种基本程序执行，默认结构为顺序结构</p> <p><strong>分支结构</strong>：if语句；switch-case与break联合使用</p> <p><strong>循环结构</strong>：for循环，while循环，do-while循环</p> <h2>JavaScript对象概述</h2> <p>对象是JavaScript中最重要的API，其中包含最多种对象，比如：内置对象，外部对象（window对象，dom对象），自定义对象</p> <h3>如何使用对象？</h3> <p>对象包含属性和函数，</p> <blockquote> <p>访问对象的属性：对象.属性</p> <p>访问对象的方法：对象.方法名</p> </blockquote> <p><strong>常见内置对象：</strong></p> <h2>String对象：</h2> <p><strong>创建对象</strong>：var str = ‘‘hello’’; var str=new String (’‘hello’’);</p> <p>**String对象的属性:**length</p> <p>**常用方法：**大小写转换：x.tolowerCase ; x.toUpperCase()</p> <p>**获取指定字符：**x.charAt(index) 返回指定位置的字符</p> <p> X.charCodeAt(index):返回指定位置的字符的Unicode编码</p> <p>**查询指定字符串：**x.indexOf(findstr,[index]); x.lastindexOf(findstr,[index])</p> <p>使用说明：findstr：查找的字符串；index：开始查找的位置索引，可以省略，如果没有找到则返回-1；lastindexOf：从后面开始找起</p> <p>**获取子字符串：**x.substring(start,[end])</p> <p> 使用说明：start：开始位置；end：结束位置</p> <p>**替换子字符串：**X.replace（findstr，tostr）</p> <p> 使用说明：findstr：要找的子字符串；tostr：替换的字符串</p> <p>**拆分字符串：**x.split(bystr,[howmarny])</p> <p> 使用说明：bystr分割用的字符串；howmarny返回的数组最大长度</p> <h2>Number对象：</h2> <p>Number对象是数值对象，创建方法为var num=123；</p> <p><strong>常用方法</strong>：toFixed（num）转换为字符串，并保留小数点后一定位数</p> <h2>Array对象：</h2> <p>创建数组对象：</p> <pre><code class="prism language-javascript"><span class="token keyword">var</span> a1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span>（）；<span class="token keyword">var</span> a2 <span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Array</span>（<span class="token number">6</span>）； <span class="token keyword">var</span> a3 <span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Array</span>（<span class="token number">100</span>，<span class="token string">"a"</span><span class="token punctuation">,</span><span class="token boolean">true</span>）<span class="token punctuation">;</span> <span class="token keyword">var</span> a4 <span class="token operator">=</span> \<span class="token punctuation">[</span><span class="token number">100</span> <span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">,</span><span class="token number">300</span>\<span class="token punctuation">]</span><span class="token punctuation">;</span> </code></pre> <p>获取数组元素的个数：.length；</p> <p>数组长度可变；</p> <p><strong>数组的倒序与排序：</strong></p> <p>X.reverse（）反向数组，改变数组X中数值的顺序</p> <p>X.sort（sortfunc）数组排序：sortfunc：可选项，用来确定元素的函数名称</p> <h2>Math对象：</h2> <p>Math对象用于执行数学任务，无需创建，直接把math作为对象使用可以调用所有的属性和方法</p> <p>三角函数：Math.sin(x),Math.COS(X),math.tan(x)</p> <p>计算函数：Math.log(x)…</p> <p>数值比较函数：</p> <h2>Date对象：</h2> <p>用于处理日期和时间，封装了系统毫秒数</p> <p>创建方法：var now = new Date（）</p> <p>常用方法：读写时间毫秒数：getTime（）；setTime（）</p> <p>读写时间分量:getDate();getDay;setDate();setDay;toString…</p> <h2>RegExp对象</h2> <p>表示正则表达式 var rge = new RegExp（）；</p> <p>常用方法：</p> <p> x.replace（regexp，tostr）</p> <p> x.match(regexp)</p> <p> x.search(regexp)</p> <p> exec(str)检索字符串中指定的值，返回找到的值</p> <p> test(str)检索字符串中指定的值，返回true或false</p> <p>使用说明：</p> <p> regexp代表正则表达式或字符串</p> <p> replace返回替换后的结果</p> <p> match返回匹配字符串的数组</p> <p> search返回匹配字符串的首字符位置索引</p> <h2>Function对象</h2> <p>JS中函数就是Function对象，函数名就是指向Function对象的引用，使用函数名就可以访问函数对象</p> <p>函数的返回值：默认返回undefined，可以使用return返回具体的值</p> <p>函数的参数：JS的函数没有重载；调用时只要函数名一样，无论传入多少个参数，调用的都是同一个函数；没有接收的实参的参数值是undefined；所有的参数传递给arguments数组对象</p> <p>Arguments：是一特殊的对象，在函数代码中，表示函数的参数数组，在函数代码中可以使用arguments访问所有参数</p> <p>–arguments.length函数的参数个数</p> <p>–arguments[i]:第i个参数</p> <p>–可以使用arguments实现可变参数的函数</p> <p>使用Function对象创建函数：</p> <pre><code class="prism language-javascript"><span class="token keyword">var</span> abc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Function</span>（<span class="token string">"x"</span><span class="token punctuation">,</span><span class="token string">"y"</span><span class="token punctuation">,</span><span class="token string">"return(x+y)"</span>） <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">abc</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">Alert</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token comment">//5</span> <span class="token function">Alert</span><span class="token punctuation">(</span>abc<span class="token punctuation">)</span><span class="token comment">//Function（"x","y","return(x+y)"）</span> </code></pre> <p>匿名函数：</p> <p><code>Var func = Function（x，y）{return（x+y）}</code></p> <p>Eval函数</p> <p> Eval用于计算表达式字符串，或用于执行字符串中的JS代码</p> <p> 只接收原始字符串作为参数，如果参数中没有合法的表达式和语句，抛出异常</p> <p> var s1 = “2+3”; eval(s1) //5</p> <h2>外部对象概述</h2> <p>·BOM（Browser Object Model）：</p> <p> 浏览器对象模型，用来访问和操作浏览器窗口，是JavaScript有能力和浏览器"对话"，通过操作BOM，可以动窗口，更改状态栏文本，执行其他不与页面内容发生直接联系的操作</p> <p>·DOM（Document Object Model）</p> <p> 文档对象模型，用来操作文档，定义了访问和操作HTML文档的标准方法</p> <p>·WINDOW对象：表示浏览器窗口</p> <p>常用属性：</p> <p> Document：窗口中显示的HTML文档对象</p> <p> History：浏览器窗口的历史记录对象</p> <p> Location：窗口文件地址对象</p> <p> Screen：当前屏幕对象</p> <p> Navigator：浏览器相关信息</p> <p>常用方法：</p> <p> alert（）；confirm（）</p> <p> setTimeout（）；clearTimeout（）</p> <p> setInterval（）；clearInterval（）</p> <p><strong>对话框：</strong></p> <p> alert（str）提示对话框，显示str字符串内容</p> <p> confirm（str）确认对话框，显示str字符串内容，按"确定"按钮返回true，其他则返回false</p> <p><strong>定时器：</strong></p> <p> 多用于网页的动态时钟，制作倒计时，跑马灯效果等</p> <p> 周期性时钟：以一定的间隔执行代码，循环往复</p> <p> 一次性时钟：在一个设定的时间间隔之后执行代码，而不是在函数被调用后立即执行</p> <p><strong>周期性定时器：</strong></p> <p> setInterval（exp，time） exp：执行语句 time：时间间隔</p> <p> clearInterval（tID）停止启动的定时器</p> <p><strong>一次性定时器：</strong></p> <p> setTimeout（exp，time）exp：执行语句 time：时间间隔，返回已经启动的定时器</p> <p> clearTimeout（tID）停止启动的定时器</p> <p><strong>常用属性：</strong></p> <p>Screen对象：包含有关客户端显示屏幕的信息，常用于获取屏幕的分辨率和色彩 Width/height/availwidth/availHeight</p> <p><strong>History对象</strong>：包含用户访问过的URL</p> <p> length属性：浏览器历史记录列表中的URL数量</p> <p> back（）：等同于后退按钮</p> <p> forword（）：等同于前进按钮</p> <p> go（num）：等同于单机前后或后退num次</p> <p><strong>Location对象</strong>：</p> <p> Location对象包含有关当前的URL信息，常用于获取或改变当前浏览的网址</p> <p> href属性：当前窗口正在浏览器的网页地址</p> <p> reload（）：重新载入当前网址，等同于刷新按钮</p> <p><strong>Navigator对象</strong>:</p> <p> 包含有关浏览器的信息，常用于获取客户端浏览器和操作系统信息</p> <h2>DOM概述</h2> <p>DOM（document object model）文档对象模型</p> <p>当网页被加载时，浏览器会创建页面的文档对象模型，通过可编程的对象模型。javaScript获得了足够的能力来创建动态的HTML，JavaScript可以改变页面中的所有HTML元素，属性，CSS样式以及对页面中的所有事件做出反应</p> <p><strong>DOM节点树</strong>：DOM模型被构造为对象的数，这棵树的根就是document对象</p> <p><strong>DOM操作包括</strong>：查找节点，读取节点信息，修改节点信息，创建新节点，删除节点</p> <p>读取，修改节点信息：</p> <p> nodeName：节点名称</p> <p> 元素节点和属性节点：标签或属性的名称</p> <p> 文本节点：永远是text</p> <p> 文档节点：永远的document</p> <p>nodeType：节点类型</p> <p> 返回数值：若是元素节点，返回1；属性节点：2；</p> <p> 文本节点：3；注解节点：8；文档节点：9</p> <p><strong>元素节点的内容</strong>：</p> <p> innerText：设置或获取位于对象起始和结束标签内的文本</p> <p> innerHTML：设置或获取位于对象起始和结束标签内的HTML</p> <p>节点属性：</p> <p> getAttribute（）方法，根据属性名称获取属性的值</p> <p> SetAttribute（）方法</p> <p> RemoveAttribute（）</p> <p> 将HTML标记，属性和CSS都对象化</p> <p><strong>元素节点的样式</strong>：</p> <p> style属性：node.style.color;node.style.fontsize</p> <p> className属性：动态绑定样式</p> <h2>查询</h2> <p><strong>查询节点</strong>：</p> <p> 如果需要操作HTML元素，必须首先找到该元素，查询节点的方式有</p> <ol> <li> <p>通过id查询</p> </li> <li> <p>通过层次（节点关系）查询</p> </li> <li> <p>通过标签名称查询</p> </li> <li> <p>通过name属性查询</p> <p><strong>根据元素的id查询节点：</strong></p> <p><code>document.getElementById();</code></p> <p>通过指定的id来返回元素节点，查询整个HTML文档中的任何HTML元素，如果id值错误，返回null</p> </li> </ol> <p><strong>根据层次查询：</strong></p> <p> parentNode：遵循文档的上下层次结构，查找单个父节点</p> <p> childNodes：遵顼文档的上下层次结构，查找多个子节点</p> <p>根据标签名查询：</p> <p> getElementByTagName（）根据指定的标签名返回所有元素，查找整个HTML文档的所有元素，如果标签名错误，返回长度为0的节点列表</p> <p> 若返回一个节点列表（数组），使用节点列表的length属性获取个数，[index]:定位具体的元素</p> <p><strong>根据name属性查询：</strong></p> <p> document.getElementByName（）：根据标签的name属性的值进行查询</p> <h2>增加</h2> <p>创建新节点：document.createElement(name) name:要创建元素的标签名称，返回新创建的节点</p> <p>添加新节点：parentNode.appendChild(newNode)</p> <p>newNode:新节点作为父节点的最后一个子节点进行添加</p> <p>parentNode.insertBefore(newNode,refNode) refNode是参考节点，新节点位于此节点之前添加</p> <h2>删除</h2> <p>删除节点： node.removeChild(childNode):删除某个子节点，childNode必须是node的子节点</p> <h2>事件</h2> <p>概述：指页面元素状态改变，用户在操作鼠标或者键盘时触发的动作，具体包括：鼠标事件，键盘事件，状态改变事件…</p> <p>Event：事件触发后会产生一个event对象</p> <p>事件属性：</p> <p>鼠标事件：onclick 单击事件 ondblclick 双击事件</p> <p>onmouseover：鼠标移入事件 onmouseout：鼠标移出事件 onmousedown：鼠标点击事件 onmouseup：鼠标松开事件</p> <p>event对象：</p> <p> 任何事件触发后会产生一个event对象，event对象记录事件发生时的鼠标位置，键盘按键状态和触发对象等信息</p> <h2>JQuery</h2> <p>JQuery是一个优秀的JavaScript框架，一个轻量级的JS库，它封装了JS,CSS,DOM提供了一致的，简洁的API,使用户更加方便的处理HTML，实现动画效果，并且方便为网站提供Ajax交互模型，使用户的HTML页面保持代码和HTML内容分离</p> <h3>使用JQuery</h3> <p>JQuery的使用步骤：</p> <ol> <li> <p>引入JQuery的js文件</p> </li> <li> <p>使用选择器定位操作节点</p> </li> <li> <p>调用JQuery的方法进行操作</p> <p>什么是JQuery对象？</p> <p>JQuery对象本质上是一个DOM对象数组，它在该数组上扩展了一些操作数组中元素的方法</p> <p>Obj.length:获取数组的长度</p> <p>Obj.get(index):获取数组中的某一个DOM对象</p> <p>Obj[index]:等价于obj.get(index)</p> <p>DOM对象转换为JQuery对象：$(DOM对象)</p> </li> </ol> <h3>JQuery选择器：</h3> <p>JQuery选择器类似于CSS选择器（定位元素），能够实现定位元素，添加行为，使用JQuery选择器能够将内容与行为分离</p> <p>选择器的分类：基本选择器，层次选择器，过滤选择器，表单选择器</p> <p><strong>基本选择器：</strong></p> <p> 元素选择器：根据标签来定位元素 $(“标签名”)</p> <p> 类选择器：根据class属性定位元素 $(".class属性名")</p> <p> Id选择器：根据id属性定位元素 $("#id属性名")</p> <p> 选择器组：定位一组选择器所对应的所有元素 $("#id,name")</p> <p><strong>层次选择器：</strong></p> <p> 在select1元素下，选中所有满足select2的子孙（后代）元素 $(“select1 select2”)</p> <p> 在select1元素下，选择所有满足select2的子元素</p> <p> $(“select1>select2”)</p> <p><strong>过滤选择器：</strong></p> <p>根据元素的基本特征定位元素，常用于表格和列表</p> <p> first：第一个元素；last：最后一个元素</p> <p> not（selector）把selector排除在外</p> <p> even 挑选偶数行 odd 挑选奇数行</p> <p> eq（index）下标等于index元素</p> <p> gt（index）下标大于index的元素</p> <p> lt（index）下标小于index的元素</p> <p><strong>内容过滤选择器：</strong></p> <p>根据文本内容定位元素</p> <p> contains（text）匹配包含给定文本的元素</p> <p> empty 匹配所有不包含子元素或文本的空元素</p> <p><strong>可见性过滤选择器：</strong></p> <p> hidden：匹配所有不可见元素</p> <p> visible：匹配所有的可见元素</p> <p><strong>属性过滤选择器：</strong></p> <p> 根据属性定位元素</p> <p> [attribute]匹配具有attribute属性的元素</p> <p><strong>状态过滤选择器</strong>：</p> <p> 根据状态定位元素</p> <p><strong>表单选择器</strong>：</p> <p> 包括：text：匹配文本框 password：匹配密码框…</p> <p><strong>读写节点</strong>：</p> <p>读写节点的HTML内容：</p> <p> 读入：obj.html() 写出：obj.html(“写出内容”)</p> <p>读写节点的文本内容：</p> <p> 读入：obj.text() 写出：obj.text(“写出内容”)</p> <p>读写节点的value属性值：</p> <p> 读入：obj.val() 写出：obj.val(“写出内容”)</p> <p>读写节点的属性值：</p> <p> 读入：obj.attr(“属性名”) 写出：obj.attr(“属性名”，“属性值”)</p> <p><strong>增删节点</strong>：</p> <p>创建DOM节点：$(’‘节点内容’’)</p> <p>插入DOM节点：</p> <p> parent.append(obj) 作为最后一个子节点添加</p> <p> parent.prepend(obj) 作为第一个子节点添加</p> <p>删除DOM节点：</p> <p> Obj.remove() 删除节点</p> <p> Obj.remove(selector) 只删除满足selector的节点</p> <p> Obj.empty() 清空节点</p> <p><strong>样式：</strong></p> <p> addClass（" "）追加样式</p> <p> removeClass（" "）移出指定样式</p> <p> removeClass() 移出所有样式</p> <p> toggleClass（" "）切换样式</p> <p> hasClass（""）判断是否有这个样式</p> <p> css（""）读取css的值</p> <p> css（"",""）设置多个样式</p> <p><strong>遍历节点：</strong></p> <p>children（）取得一个包含匹配的元素集合中的每一个元素的所有子元素的元素集合</p> <p>parent（）父节点</p> <p><strong>事件处理：参考手册</strong></p> <p><strong>等待页面加载完毕后执行：$(function(){…})</strong></p> <p>获得事件对象event</p> <p>只需要对事件处理函数传递一个参数如：$obj.click(function(e){…}); e 就是事件对象，已经经过了JQuery的底层事件对象的封装，封装后的事件对象可以方便的兼容各浏览器</p> <p>事件的常用属性：</p> <p> 获取事件源：e.target 返回值就是DOM对象</p> <p>：匹配所有的可见元素</p> <p><strong>属性过滤选择器：</strong></p> <p> 根据属性定位元素</p> <p> [attribute]匹配具有attribute属性的元素</p> <p><strong>状态过滤选择器</strong>：</p> <p> 根据状态定位元素</p> <p><strong>表单选择器</strong>：</p> <p> 包括：text：匹配文本框 password：匹配密码框…</p> <p><strong>读写节点</strong>：</p> <p>读写节点的HTML内容：</p> <p> 读入：obj.html() 写出：obj.html(“写出内容”)</p> <p>读写节点的文本内容：</p> <p> 读入：obj.text() 写出：obj.text(“写出内容”)</p> <p>读写节点的value属性值：</p> <p> 读入：obj.val() 写出：obj.val(“写出内容”)</p> <p>读写节点的属性值：</p> <p> 读入：obj.attr(“属性名”) 写出：obj.attr(“属性名”，“属性值”)</p> <p><strong>增删节点</strong>：</p> <p>创建DOM节点：$(’‘节点内容’’)</p> <p>插入DOM节点：</p> <p> parent.append(obj) 作为最后一个子节点添加</p> <p> parent.prepend(obj) 作为第一个子节点添加</p> <p>删除DOM节点：</p> <p> Obj.remove() 删除节点</p> <p> Obj.remove(selector) 只删除满足selector的节点</p> <p> Obj.empty() 清空节点</p> <p><strong>样式：</strong></p> <p> addClass（" "）追加样式</p> <p> removeClass（" "）移出指定样式</p> <p> removeClass() 移出所有样式</p> <p> toggleClass（" "）切换样式</p> <p> hasClass（""）判断是否有这个样式</p> <p> css（""）读取css的值</p> <p> css（"",""）设置多个样式</p> <p><strong>遍历节点：</strong></p> <p>children（）取得一个包含匹配的元素集合中的每一个元素的所有子元素的元素集合</p> <p>parent（）父节点</p> <p><strong>事件处理：参考手册</strong></p> <p><strong>等待页面加载完毕后执行：$(function(){…})</strong></p> <p>获得事件对象event</p> <p>只需要对事件处理函数传递一个参数如：$obj.click(function(e){…}); e 就是事件对象，已经经过了JQuery的底层事件对象的封装，封装后的事件对象可以方便的兼容各浏览器</p> <p>事件的常用属性：</p> <p> 获取事件源：e.target 返回值就是DOM对象</p> <p> 获取鼠标点击的坐标 e.pageX e.pageY</p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1360780801330929664"></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">你可能感兴趣的:(自我总结,html,js,css,javascript,jquery)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <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/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/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/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/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/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/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</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/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/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/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/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/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> <span class="text-muted">夜空_2cd3</span> <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/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/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> <span class="text-muted">hai40587</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/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/98.htm" title="微信开发者验证接口开发" target="_blank">微信开发者验证接口开发</a> <span class="text-muted">362217990</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1+%E5%BC%80%E5%8F%91%E8%80%85+token+%E9%AA%8C%E8%AF%81/1.htm">微信开发者 token 验证</a> <div>微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置第二步：验证服务器地址的有效性第三步：依据接口文档实现业务逻辑这里主要讲第二步验证服务器有效性。建一个</div> </li> <li><a href="/article/225.htm" title="一个小编程题-类似约瑟夫环问题" target="_blank">一个小编程题-类似约瑟夫环问题</a> <span class="text-muted">BrokenDreams</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div> 今天群友出了一题：一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。 &</div> </li> <li><a href="/article/352.htm" title="linux复习笔记之bash shell (5) 关于减号-的作用" target="_blank">linux复习笔记之bash shell (5) 关于减号-的作用</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E5%87%8F%E5%8F%B7%E2%80%9C-%E2%80%9D%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">linux关于减号“-”的含义</a><a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E5%87%8F%E5%8F%B7%E2%80%9C-%E2%80%9D%E7%9A%84%E7%94%A8%E9%80%94/1.htm">linux关于减号“-”的用途</a><a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E2%80%9C-%E2%80%9D%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">linux关于“-”的含义</a><a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E5%87%8F%E5%8F%B7%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">linux关于减号的含义</a> <div> 转载请出自出处： http://eksliang.iteye.com/blog/2105677 管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有</div> </li> <li><a href="/article/479.htm" title="Unix(3)" target="_blank">Unix(3)</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/unix+ksh/1.htm">unix ksh</a> <div>1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and ||代表or&nbs</div> </li> <li><a href="/article/606.htm" title="关于ListView中性能优化中图片加载问题" target="_blank">关于ListView中性能优化中图片加载问题</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/ListView/1.htm">ListView</a> <div>ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594 如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。现在想出一个方法就是每次都添加一个标识，然后设置图</div> </li> <li><a href="/article/733.htm" title="德国总理默多克：给国人的一堂“震撼教育”课" target="_blank">德国总理默多克：给国人的一堂“震撼教育”课</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/%E6%95%99%E8%82%B2/1.htm">教育</a> <div>http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂</div> </li> <li><a href="/article/860.htm" title="关于Java继承的一个小问题。。。" target="_blank">关于Java继承的一个小问题。。。</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr</div> </li> <li><a href="/article/987.htm" title="23种基本的设计模式" target="_blank">23种基本的设计模式</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。　　Builder：将一个复杂对象的构建与它的表示分离，使得同</div> </li> <li><a href="/article/1114.htm" title="《周鸿祎自述：我的互联网方法论》读书笔记" target="_blank">《周鸿祎自述：我的互联网方法论》读书笔记</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品. 商业模式不是赚钱模式一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链. 商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求</div> </li> <li><a href="/article/1241.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/style%E5%B1%9E%E6%80%A7/1.htm">style属性</a><a class="tag" taget="_blank" href="/search/ClassName%E5%B1%9E%E6%80%A7/1.htm">ClassName属性</a> <div> 一:style属性格式: HTML元素.style.样式属性="值"; 创建菜单:在html标签中创建或者在head标签中用数组创建 <html> <head> <title>style改变样式</title> </head> &l</div> </li> <li><a href="/article/1368.htm" title="jQuery的deferred对象详解" target="_blank">jQuery的deferred对象详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/deferred%E5%AF%B9%E8%B1%A1/1.htm">deferred对象</a> <div> jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。 &nb</div> </li> <li><a href="/article/1495.htm" title="淘宝开放平台TOP" target="_blank">淘宝开放平台TOP</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E6%B5%81/1.htm">物流</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div>淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform，是淘宝合作伙伴开发、发布、交易其服务的平台。支撑TOP的三条主线为： 1.开放数据和业务流程 * 以API数据形式开放商品、交易、物流等业务； &</div> </li> <li><a href="/article/1622.htm" title="【大型网站架构一】大型网站架构概述" target="_blank">【大型网站架构一】大型网站架构概述</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E6%9E%B6%E6%9E%84/1.htm">网站架构</a> <div>大型互联网特点面对海量用户、海量数据大型互联网架构的关键指标高并发高性能高可用高可扩展性线性伸缩性安全性大型互联网技术要点前端优化 CDN缓存反向代理 KV缓存消息系统分布式存储 NoSQL数据库搜索监控安全想到的问题： 1.对于订单系统这种事务型系统，如</div> </li> <li><a href="/article/1749.htm" title="eclipse插件hibernate tools安装" target="_blank">eclipse插件hibernate tools安装</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool</div> </li> <li><a href="/article/1876.htm" title="Jquery easyui Form表单提交注意事项" target="_blank">Jquery easyui Form表单提交注意事项</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/jquery+easyui/1.htm">jquery easyui</a> <div>jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下： 1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要</div> </li> <li><a href="/article/2003.htm" title="Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量" target="_blank">Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a> <div> import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna</div> </li> <li><a href="/article/2130.htm" title="html css 鼠标形状样式汇总" target="_blank">html css 鼠标形状样式汇总</a> <span class="text-muted">chenbowen00</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>css鼠标手型cursor中hand与pointer Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/> Example：CSS鼠标手型效果 <a href="#" style=&qu</div> </li> <li><a href="/article/2257.htm" title="[IT与投资]IT投资的几个原则" target="_blank">[IT与投资]IT投资的几个原则</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/it/1.htm">it</a> <div> 无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的...... </div> </li> <li><a href="/article/2384.htm" title="oracle with语句详解" target="_blank">oracle with语句详解</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/with/1.htm">with</a><a class="tag" taget="_blank" href="/search/with+as/1.htm">with as</a> <div>oracle with语句详解转在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用例子:注意，这是sql语句，不是pl/sql语句，可以直接放到jdbc执行的 ----------------------------------------------------------------</div> </li> <li><a href="/article/2511.htm" title="hbase的简单操作" target="_blank">hbase的简单操作</a> <span class="text-muted">deng520159</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表 # 语法：create <table>, {NAME => <family&g</div> </li> <li><a href="/article/2638.htm" title="C语言scanf继续学习、算术运算符学习和逻辑运算符" target="_blank">C语言scanf继续学习、算术运算符学习和逻辑运算符</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>/* 2013年3月11日20:37:32 地点：北京潘家园功能：完成用户格式化输入多个值目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用</div> </li> <li><a href="/article/2765.htm" title="2015越来越好" target="_blank">2015越来越好</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E6%AD%8C%E6%9B%B2/1.htm">歌曲</a> <div>越来越好房子大了电话小了感觉越来越好假期多了收入高了工作越来越好商品精了价格活了心情越来越好天更蓝了水更清了环境越来越好活得有奔头人会步步高想做到你要努力去做到幸福的笑容天天挂眉梢越来越好婆媳和了家庭暖了生活越来越好孩子高了懂事多了学习越来越好朋友多了心相通了大家越来越好道路宽了心气顺了日子越来越好活的有精神人就不显</div> </li> <li><a href="/article/2892.htm" title="java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim" target="_blank">java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim</a> <span class="text-muted">feiteyizu</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date java.sql.SQLException: Valu</div> </li> <li><a href="/article/3019.htm" title="Ehcache（07）——Ehcache对并发的支持" target="_blank">Ehcache（07）——Ehcache对并发的支持</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%E9%94%81/1.htm">锁</a><a class="tag" taget="_blank" href="/search/ReadLock/1.htm">ReadLock</a><a class="tag" taget="_blank" href="/search/WriteLock/1.htm">WriteLock</a> <div>Ehcache对并发的支持在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同</div> </li> <li><a href="/article/3146.htm" title="mysql中blob,text字段的合成索引" target="_blank">mysql中blob,text字段的合成索引</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能，但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找则速度快比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep</div> </li> <li><a href="/article/3273.htm" title="逻辑运算与移位运算" target="_blank">逻辑运算与移位运算</a> <span class="text-muted">latty</span> <a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97/1.htm">逻辑运算</a> <div>源码：正数的补码与原码相同例+7 源码：00000111 补码：00000111 （用8位二进制表示一个数）负数的补码：符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。 -7 源码： 10000111 ，其绝对值为00000111 取反加一：11111001 为-7补码已知一个数的补码，求原码的操作分两种情况：</div> </li> <li><a href="/article/3400.htm" title="利用XSD 验证XML文件" target="_blank">利用XSD 验证XML文件</a> <span class="text-muted">newerdragon</span> <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/xsd/1.htm">xsd</a> <div>XSD文件（XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类可以实现对XSD验证的支持，使用起来也很方便。以下代码可用在J</div> </li> <li><a href="/article/3527.htm" title="搭建 CentOS 6 服务器(12) - Samba" target="_blank">搭建 CentOS 6 服务器(12) - Samba</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>（1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc</div> </li> <li><a href="/article/3654.htm" title="Learn Nodejs 01" target="_blank">Learn Nodejs 01</a> <span class="text-muted">toknowme</span> <a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>（1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载（2）安装nodejs 安装的方式比较多，请baidu下我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本（1）上传服务器（2）解压 tar -zxvf node-v0.12.</div> </li> <li><a href="/article/3781.htm" title="jquery控制自动刷新的代码举例" target="_blank">jquery控制自动刷新的代码举例</a> <span class="text-muted">xp9802</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>1、html内容部分复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option</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>