前端常用属性/方法/命令积累

lastSeries 发布于2019-08-02 14:02 / 2951人阅读

摘要：定义表格中的表注内容脚注样式节标签描述属性定义文档的样式信息。原始值是由从对象下来的所有对象继承的。方法通常由在后台自动进行调用，而不是显式地处于代码中。

HTML常用标签

其实在w3school上都有详细的总结和描述，写在这里是为了理清自己的思路，整理比较常用的标签。
原地址：http://www.w3school.com.cn/ta...




   


   //tag

基础标签

标签	描述
	定义文档类型。
	定义 HTML 文档。
</td> <td>定义文档的标题。</td> </tr> <tr> <td><body></td> <td>定义文档的主体。</td> </tr> <tr> <td><h1> to <h6></td> <td>定义 HTML 标题，块级元素。</td> </tr> <tr> <td>p</td> <td>定义段落，块级元素。</td> </tr> <tr> <td>br</td> <td>定义简单的折行。</td> </tr> <tr> <td>hr</td> <td>定义水平线。</td> </tr> <tr> <td><!--...--></td> <td>定义注释。</td> </tr> </tbody> </table> <b>格式标签</b> <table> <thead><tr> <th>标签</th> <th>描述</th> </tr></thead> <tbody> <tr> <td>b</td> <td>文本加粗</td> </tr> <tr> <td>strong</td> <td>语义化，文本加粗</td> </tr> <tr> <td>i</td> <td>文本倾斜</td> </tr> <tr> <td>em</td> <td>语义化，文本倾斜</td> </tr> <tr> <td>s</td> <td>文本添加删除线（不赞成）</td> </tr> <tr> <td>del</td> <td>文本添加删除线</td> </tr> <tr> <td>u</td> <td>文本添加下划线（不赞成）</td> </tr> <tr> <td><ins></td> <td>文本添加下划线</td> </tr> <tr> <td>center</td> <td>定义居中文本（不赞成）</td> </tr> <tr> <td>font</td> <td>定义文本的字体、颜色、尺寸（不建议）</td> </tr> <tr> <td>sup</td> <td>上标文本</td> </tr> <tr> <td>sub</td> <td>下标文本</td> </tr> </tbody> </table> <b>表单标签</b> <p>说明：标签后面带，说明是单标签</p> <table> <thead><tr> <th>标签</th> <th>描述</th> <th>属性</th> </tr></thead> <tbody> <tr> <td>form</td> <td>为用户输入创建HTML表单，用于向服务器传输数据，块级元素</td> <td>action/method</td> </tr> <tr> <td>input</td> <td>文本输入框，行内块</td> <td>type(text/button/checkbox/password/radio/submit)/value</td> </tr> <tr> <td>textarea</td> <td>多行文本输入框</td> <td>rows/cols</td> </tr> <tr> <td>button</td> <td>按钮</td> <td>type="button"/value</td> </tr> <tr> <td>select</td> <td>下拉选择列表，内嵌option标签</td> <td>/</td> </tr> <tr> <td>option</td> <td>select选择列表中的选项</td> <td>value</td> </tr> <tr> <td>optgroup</td> <td>选择列表中选项的组合，不能选中，内嵌option标签</td> <td>label="华北"</td> </tr> <tr> <td>label</td> <td>为input元素定义标记</td> <td>for(类似id)</td> </tr> <tr> <td>fieldset</td> <td>在form中，定义围绕表单中元素的边框，可分类打包</td> <td>/</td> </tr> <tr> <td>legend</td> <td>为fieldset元素定义标题</td> <td>/</td> </tr> </tbody> </table> <b>框架标签</b> <table> <thead><tr> <th>标签</th> <th>描述</th> <th>属性</th> </tr></thead> <tbody> <tr> <td>frameset</td> <td>框架集，内嵌frame</td> <td>rows/cols</td> </tr> <tr> <td>frame</td> <td>框架</td> <td>src</td> </tr> <tr> <td>noframes</td> <td>在frameset中添加非frame标签，用于在浏览器不支持frame的时候显示文本，包括在body标签内部</td> <td>/</td> </tr> <tr> <td>iframe</td> <td>创建包含另外一个文档的内联框架（即行内框架</td> <td>src/scrolling/width/height</td> </tr> </tbody> </table> <b>图像标签</b> <table> <thead><tr> <th>标签</th> <th>描述</th> <th>属性</th> </tr></thead> <tbody> <tr> <td>img</td> <td>图像，行内块</td> <td>src/alt(替代文本)</td> </tr> <tr> <td>canvas</td> <td>图形容器，必须用JS脚本来绘制图形</td> <td>width/height</td> </tr> </tbody> </table> <b>音频/视频</b> <table> <thead><tr> <th>标签</th> <th>描述</th> <th>属性</th> </tr></thead> <tbody> <tr> <td>audio</td> <td>音频</td> <td>src/controls(显示控件)</td> </tr> <tr> <td>source</td> <td>内嵌于<audio controls>，定义多个媒介资源，由浏览器自动选择支持的类型</td> <td>src/type</td> </tr> <tr> <td>video</td> <td>视频</td> <td>src/controls(显示控件)</td> </tr> </tbody> </table> <b>链接</b> <table> <thead><tr> <th>标签</th> <th>描述</th> <th>属性</th> </tr></thead> <tbody> <tr> <td>a</td> <td>超链接，行元素</td> <td>href</td> </tr> <tr> <td>link</td> <td>链接外部样式</td> <td>rel="stylesheet"/type="text/css"/href="main.css"</td> </tr> <tr> <td>nav</td> <td>导航链接，内嵌a标签</td> <td>/</td> </tr> </tbody> </table> <b>列表</b> <table> <thead><tr> <th>标签</th> <th>描述</th> <th>属性</th> </tr></thead> <tbody> <tr> <td>ul-li</td> <td>无序列表</td> <td>/</td> </tr> <tr> <td>ol-li</td> <td>有序列表</td> <td>/</td> </tr> <tr> <td>dl-dt-dd</td> <td>自定义列表</td> <td>/</td> </tr> </tbody> </table> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbmUG8?w=175&h=164");</script></p> <b>表格</b> <table> <thead><tr> <th>标签</th> <th>描述</th> </tr></thead> <tbody> <tr> <td><table></td> <td>定义表格</td> </tr> <tr> <td><caption></td> <td>定义表格标题。</td> </tr> <tr> <td><th></td> <td>定义表格中的表头单元格。</td> </tr> <tr> <td><tr></td> <td>定义表格中的行。</td> </tr> <tr> <td><td></td> <td>定义表格中的单元。</td> </tr> <tr> <td><thead></td> <td>定义表格中的表头内容。</td> </tr> <tr> <td><tbody></td> <td>定义表格中的主体内容。</td> </tr> <tr> <td><tfoot></td> <td>定义表格中的表注内容（脚注）</td> </tr> </tbody> </table> <pre> <table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> </tr> </tfoot> </table></pre> <b>样式/节</b> <table> <thead><tr> <th>标签</th> <th>描述</th> <th>属性</th> </tr></thead> <tbody> <tr> <td><style></td> <td>定义文档的样式信息。</td> <td>type="text/css"</td> </tr> <tr> <td><div></td> <td>定义文档中的节。</td> <td> </td> </tr> <tr> <td><span></td> <td>定义文档中的节,组合行内元素</td> <td> </td> </tr> <tr> <td><header></td> <td>定义 section 或 page 的页眉。</td> <td> </td> </tr> <tr> <td><footer></td> <td>定义 section 或 page 的页脚。</td> <td> </td> </tr> <tr> <td><section></td> <td>定义 section。</td> <td> </td> </tr> <tr> <td><article></td> <td>定义文章。</td> <td> </td> </tr> </tbody> </table> <b>元信息</b> <table> <thead><tr> <th>标签</th> <th>描述</th> <th>属性</th> </tr></thead> <tbody><tr> <td>meta</td> <td>页面的元信息</td> <td>content(必须,http-equiv、name)/http-equiv/name</td> </tr></tbody> </table> <pre><meta name="keywords" content="Java培训，web前端">//给SEO搜索引擎看的 <meta name="description" content="我们是正规的培训机构XXX">//给用户搜索看的简介 <meta name="http-equiv" content="5;http://www.baidu.com">//网页重定向</pre> <b>编程</b> <table> <thead><tr> <th>标签</th> <th>描述</th> <th>属性</th> </tr></thead> <tbody><tr> <td><script></td> <td>客户端脚本</td> <td>type="text/javascript"</td> </tr></tbody> </table> <b>CSS常用属性</b> <b>背景属性</b> <pre>body { background: #00FF00 url(bgimage.gif) no-repeat fixed top;//简写属性，可设置background-color，background-image，background-repeat，background-attachment，background-position背景属性 }</pre> <pre>body { background-image: url(bgimage.gif);//背景图像 background-attachment: fixed;//背景图像是否固定/随着页面其他部分滚动 background-repeat:no-repeat;//水平或垂直方向重复方式：repeat/repeat-x/repeat-y/no-repeat background-position:center;//背景图像起始位置，top left center bottom right中的两个组合，如果只规定一个，另一个默认为center background-size:80px 60px;//背景图像宽度和高度，不设置则默认为auto }</pre> <pre>body { background-color:yellow;//颜色名称 } h1 { background-color:#00ff00;//十六进制 } p { background-color:rgb(255,0,255);//rgb代码 } div { background-color:transparent;//默认值，透明 }</pre> <b>边框属性</b> <pre>p { border:5px solid red;//简写属性，顺序：border-width border-style border-color }</pre> <pre>border-radius:25px;//四个角的形状，也可以设置某个角的形状，栗子：border-top-left-radius</pre> <pre>div { box-shadow: 10px 10px 5px #888888;//添加阴影 } //box-shadow: h-shadow v-shadow blur spread color inset; //水平阴影，垂直隐形，（模糊距离），（阴影尺寸），（阴影颜色），（）</pre> <pre>border-top/right/bottom/left:;//可以设置多带带边框的属性</pre> <pre>div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 / -o-border-image:url(border.png) 30 30 round; / Opera / border-image:url(border.png) 30 30 round; //border-image-source/slice/width/outset/repeat }</pre> <b>CSS字体属性</b> <pre>font: font-style font-weight font-size/line-height font-family;//文字大小和字体为必写项</pre> <pre>font-weight:normal(400)\|bold(700)\|bolder\|lighter\|100-900</pre> <b>CSS 外边距属性（Margin）</b> <pre>margin: top right bottom left; margin: top left/right bottom; margin: top/bottom left/right;</pre> <b>CSS 内边距属性（Padding）</b> <pre>padding: top right bottom left; padding: top left/right bottom; padding: top/bottom left/right;</pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbmUVj?w=752&h=475");</script></p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbmUVl?w=573&h=572");</script></p> <b>transform</b> <pre>div { transform:rotate(7deg); -ms-transform:rotate(7deg); / IE 9 / -moz-transform:rotate(7deg); / Firefox / -webkit-transform:rotate(7deg); / Safari 和 Chrome / -o-transform:rotate(7deg); / Opera / }</pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbmUVr?w=284&h=158");</script></p> <b>JS</b> <b>String</b> <b>属性</b> <p><strong>legth</strong></p> <pre>var str = "123"; str.length;//3</pre> <b>方法</b> <p><strong>substring()</strong></p> <pre>stringObject.substring(start,stop) //提取子字符串，从 start 处到 stop-1 处的所有字符 //如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数 //不接受负的参数 var str="How are you doing today?" str.substring(2,3);//"ow"</pre> <p><strong>slice()</strong></p> <pre>stringObject.slice(start,end) //从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符 //如果start/end是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。 var str="How are you doing today?" str.slice(-3,-1)//"ay" //(-1,-3)返回的时"" </pre> <p><strong>split()</strong></p> <pre>stringObject.split(separator,howmany) //返回一个字符串数组，从参数separator指定的地方分割 stringObject //如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）</pre> <p>注释：String.split() 执行的操作与 Array.join 执行的操作是相反的</p> <p><strong>indexOf()</strong></p> <pre>stringObject.indexOf(searchvalue,fromindex) //检索指定的字符串值searchvalue在字符串中首次出现的位置，fromindex指的是开始检索的位置 //不存在的时候返回-1</pre> <p><strong>lastindexOf()</strong></p> <pre>stringObject.lastIndexOf(searchvalue,fromindex) //返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。</pre> <p><strong>charAt()</strong></p> <pre>stringObject.charAt(index) //返回指定位置的字符</pre> <p><strong>contact()</strong></p> <pre>stringObject.concat(stringX,stringX,...,stringX) //连接两个或多个字符串</pre> <p><strong>match()</strong></p> <pre>stringObject.match(searchvalue) stringObject.match(regexp) //在字符串内检索指定的值，或找到一个或多个正则表达式的匹配. //与indexOf()不同，match返回的是匹配到的值，而indexOf返回的是位置</pre> <p><strong>replace()</strong></p> <pre>stringObject.replace(regexp/substr,replacement) //在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串 //对大小写不敏感</pre> <p><strong>search()</strong></p> <pre>stringObject.search(regexp) //返回stringObject 中第一个与 regexp 相匹配的子串的起始位置 //从字符串的开始进行检索</pre> <p><strong>valueOf()</strong></p> <pre>stringObject.valueOf() //valueOf() 方法可返回 String 对象的原始值。 //原始值是由从 String 对象下来的所有对象继承的。 //valueOf() 方法通常由 JavaScript 在后台自动进行调用，而不是显式地处于代码中。</pre> <p><strong>toString()</strong></p> <pre>stringObject.toString() //返回原始字符串值</pre> <p>今日头条面试题：<br>www.baidu.com.cn==>cn.com.baidu.www</p> <pre>var arry = str.split(".")-->var newArry = arry.reverse()-->newArry.join(".")</pre> <b>Array</b> <p>(2019.1.7更)</p> <b>创建数组的方法</b> <p><strong>数组字面量法</strong></p> <pre>var array = [1,2,3];</pre> <p><strong>构造函数法</strong></p> <pre>var array = new Array(/n/1,2,3);</pre> <b>属性</b> <p><strong>length</strong></p> <pre>array.length;</pre> <b>方法</b> <p><strong>concat()</strong></p> <pre>arrayObject.concat(arrayX,arrayX,......,arrayX) //在arrayObject后面连接两个或多个数组，返回一个新数组 //不改变现有数组</pre> <p><strong>join()</strong></p> <pre>arrayObject.join(separator) //以separator作为分隔符，把数组中的元素放入字符串 //与String对象的split()方法相反</pre> <p><strong>pop()</strong></p> <pre>arrayObject.pop() //删除数组的最后一个元素，并返回该元素</pre> <p><strong>shift()</strong></p> <pre>arrayObject.shift() //删除数组的第一个元素，并返回该元素</pre> <p><strong>push()</strong></p> <pre>arrayObject.push(newelement1,newelement2,....,newelementX) //添加一个或更多元素到数组的末尾，并返回新的数组长度</pre> <p><strong>unshift()</strong></p> <pre>arrayObject.unshift(newelement1,newelement2,....,newelementX) //添加一个或更多元素到数组的开头，并返回新的数组长度</pre> <p><strong>reverse()</strong></p> <pre>arrayObject.reverse() //反转数组 //注意：改变的是原来的数组，不会创建新数组</pre> <p><strong>slice()</strong></p> <pre>arrayObject.slice(start,end) //返回已有数组从start到end（不包括）的元素 //返回一个子数组，不改变原数组</pre> <p><strong>splice()</strong></p> <pre>arrayObject.splice(index,howmany,item1,.....,itemX) //删除从index开始的howmany（可以为0）个元素，并从删除的位置开始添加新的元素到原数组 //返回数组，改变原数组</pre> <p><strong>sort()</strong></p> <pre>arrayObject.sort(sortby) //对数组元素排序，在原数组上进行 //默认按照字母顺序进行排序</pre> <p>如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：</p> <pre>- 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。 - 若 a 等于 b，则返回 0。 - 若 a 大于 b，则返回一个大于 0 的值。</pre> <pre>function sortNum(a,b) { return a - b;//升序 //return b - a;//降序 } array.sort(sortNum);//数值字符串数组按照数值的大小对数字排序</pre> <p><strong>toString()</strong></p> <pre>array.toString() //把数组转换为字符串，并返回该字符串</pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbmQha?w=209&h=92");</script><br><strong>valueOf()</strong></p> <pre>array.valueOf() //返回数组对象的原始值</pre> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbmQjf?w=238&h=140");</script><br><script type="text/javascript">showImg("https://segmentfault.com/img/bVbmQhL?w=204&h=110");</script></p> <b>对比String和Array</b> <table> <thead><tr> <th>String</th> <th>Array</th> </tr></thead> <tbody> <tr> <td>slice</td> <td>slice</td> </tr> <tr> <td>split</td> <td>join</td> </tr> <tr> <td>concat</td> <td>concat</td> </tr> </tbody> </table> <p>注意：Array里面slice和splice的区别——slice返回子数组，且不会改变原数组；splice从某个位置删除数组内元素，并添加新元素，改变原数组。</p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a> <a style="width:120px;" title="属性定义方法" href="https://www.ucloud.cn/yun/tag/shuxingdingyifangfa/">属性定义方法</a> <a style="width:120px;" title="linux常用常用命令" href="https://www.ucloud.cn/yun/tag/linuxchangyongchangyongmingling/">linux常用常用命令</a> <a style="width:120px;" title="方法属性 java" href="https://www.ucloud.cn/yun/tag/fangfashuxing java/">方法属性 java</a> <a style="width:120px;" title="linux命令常用命令" href="https://www.ucloud.cn/yun/tag/linuxminglingchangyongmingling/">linux命令常用命令</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p> <p>转载请注明本文地址：https://www.ucloud.cn/yun/53530.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/53529.html">上一篇：quicklink解析</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/53531.html">下一篇：从“雅虎军规”看性能优化</a></li> </ul> </div> <div class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/117184.html"><b><em>前端</em><em>常用</em><em>属性</em>/<em>方法</em>/<em>命令</em><em>积累</em></b></a></h2> <p class="ellipsis2 good">摘要：定义表格中的表注内容脚注样式节标签描述属性定义文档的样式信息。原始值是由从对象下来的所有对象继承的。方法通常由在后台自动进行调用，而不是显式地处于代码中。 HTML常用标签其实在w3school上都有详细的总结和描述，写在这里是为了理清自己的思路，整理比较常用的标签。原地址：http://www.w3school.com.cn/ta... //tag 基础...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-760.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/07/small_000000760.jpg" alt=""><span class="layui-hide64">wupengyu</span></a> <time datetime="">2019-08-30 15:55</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/100742.html"><b><em>前端</em><em>常用</em><em>属性</em>/<em>方法</em>/<em>命令</em><em>积累</em></b></a></h2> <p class="ellipsis2 good">摘要：定义表格中的表注内容脚注样式节标签描述属性定义文档的样式信息。原始值是由从对象下来的所有对象继承的。方法通常由在后台自动进行调用，而不是显式地处于代码中。 HTML常用标签其实在w3school上都有详细的总结和描述，写在这里是为了理清自己的思路，整理比较常用的标签。原地址：http://www.w3school.com.cn/ta... //tag 基础...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-657.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/06/small_000000657.jpg" alt=""><span class="layui-hide64">xcold</span></a> <time datetime="">2019-08-23 14:31</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/97721.html"><b><em>前端</em><em>常用</em>函数<em>积累</em></b></a></h2> <p class="ellipsis2 good">摘要：参数对象数组，需要排序的目标要按排序的对象属性名称排序的方向，为从小到大是否使用模式，默认为，注意，使用该参数时前面的必须传入。使用场景想要排列一个对象数组，条件是根据这些对象中的某个属性。 cdd-lib 个人常用库积累说明本库是完全的es2015模块语法，也使用了ts源码。所以使用commonjs方式导致不可用。路径和引用说明 /index.js 根路径的index.js文件...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-863.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/08/small_000000863.jpg" alt=""><span class="layui-hide64">ACb0y</span></a> <time datetime="">2019-08-23 11:57</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/115635.html"><b><em>常用</em><em>前端</em>知识<em>积累</em></b></a></h2> <p class="ellipsis2 good">摘要：闭包的理解使用闭包主要是为了设计私有的方法和变量。只在中存放不敏感数据，即使被盗也不会有重大损失。每个最多只能有条，每个长度不能超过，否则会被截掉。有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。闭包的理解使用闭包主要是为了设计私有的方法和变量。优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1678.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/16/small_000001678.jpg" alt=""><span class="layui-hide64">B0B0</span></a> <time datetime="">2019-08-30 13:55</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/107180.html"><b><em>常用</em><em>前端</em>知识<em>积累</em></b></a></h2> <p class="ellipsis2 good">摘要：闭包的理解使用闭包主要是为了设计私有的方法和变量。只在中存放不敏感数据，即使被盗也不会有重大损失。每个最多只能有条，每个长度不能超过，否则会被截掉。有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。闭包的理解使用闭包主要是为了设计私有的方法和变量。优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1036.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001036.jpg" alt=""><span class="layui-hide64">haobowd</span></a> <time datetime="">2019-08-26 11:35</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-136.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/01/small_000000136.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-136.html" rel="nofollow">lastSeries</a></h3> <h6>男<span>\|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(136)" id="attenttouser_136" class="grad follow-btn notfollow attention">我要关注</a> <a href="javascript:login()" title="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-136.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/130750.html">tensorflow1.x</a></h3> <p>阅读 3758<span>·</span>2023-04-25 20:00</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/120322.html">主机域名是什么意思-主机域名是哪个？</a></h3> <p>阅读 3108<span>·</span>2021-09-22 15:09</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/118462.html">Virtono：€23.7/年KVM-2GB/25GB/2TB/洛杉矶&a</a></h3> <p>阅读 504<span>·</span>2021-08-25 09:40</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117722.html">腾讯云星星海SA2云服务器上线1.2折起,100%CPU性能,3.3GHz高频,2核4G6M,173</a></h3> <p>阅读 3411<span>·</span>2021-07-26 23:38</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/116636.html">前端学习整理资料（未完待续）</a></h3> <p>阅读 2200<span>·</span>2019-08-30 15:53</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115539.html">浏览器默认值汇总</a></h3> <p>阅读 1096<span>·</span>2019-08-30 13:46</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113941.html">Slog63_项目上线之ArthurSlog个人网站上线2</a></h3> <p>阅读 2788<span>·</span>2019-08-29 16:44</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113389.html">如何找到所有 HTML select 标签的选中项</a></h3> <p>阅读 2042<span>·</span>2019-08-29 15:32</p></li> </ul> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/gpu.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服务器"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href='style-49037e4d27.css']").remove(); $("LINK[href='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付费阅读", shadeClose: true, content: $('#payread') }); } // 举报 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加载评论 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("评论内容不能为空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人赞"); } }); }else{ alert("您已经赞过"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"https://www.ucloud.cn/yun/favorite/topicadd.html", //提交的数据 data:{tid:_tid,rs:_rs}, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend:function(){}, //成功返回之后调用的函数 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6> <p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt \|\| []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer \|\| []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> </body> <script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict ,.site-content-answer-body ,.site-body-depict ").css("max-width","100%"); </script> </html>

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

前端常用属性/方法/命令积累