前端 一些小知识，技巧总结

前端资源：http://blog.csdn.net/yuwq123/article/details/62216235

小技巧：

[b]1.阻止input显示历史记录[/b]

　　如果不让浏览器保留表单输入的历史记录，只要在input标签里加入autocomplete="off "这个属性就行了：

　　即：

<input type="text"  autocomplete="off" / >

[b]2.一个div，在数字少的时候显示圆形，数字多就椭圆[/b]

　　


　　HTML:

<span class="box">1<span>

　　CSS:　　

.box{
　　　　text-align: center;
　　　　line-height: 18px;
　　　　font-size: 12px;
　　　　background: skyblue；
　　　　color: white;
　　　　//重要的样式
　　　　padding:2px;　　　　//只是为了不让里面的内容挨着边
　　　　display: inline-block;
　　　　border-radius:20px;　　//20px就够了，不能设置50%哟，数字多了就成长方形，50%会很丑滴
　　　　min-width: 18px;　　//这里是行高

　　}

[b]3.为table设置1像素的边框[/b]

　　css：

table{
　　　border-collapse:collapse;
}
table tr td,table tr th{
　　　border:1px solid black;
}

　　这样就OK了。

[b]4.mui真机调试查看对象属性[/b]

　　mui真机调试如果看不到对象具体的属性值，只是[object,object]，可以用JSON.stringify（对象）来输出看看。

[b]5.停止另一个函数的定时器[/b]

　　怎样停止另一个函数的定时器呢：a).在定时器函数里返回定时器即var time=setinterval（）然后return time.

　　　　　　　　　　　　　　　　b).另外函数里调用定时器函数之后设置一个变量获取定时器函数返回值，然后clearInterval

[b]6. 去所有空格[/b]

　　str.replace(/\s/g, "") 去掉str字符串所有的空格

[b]7.只中文[/b]

　　 /^[\u4e00-\u9fa5]+$/ 只匹配中文的正则表达式

[b]8.安卓或者ios拨号功能[/b]

<a href="tel:888,023"></a>：888转023

<a href="tel:11211211212"></a>：直接拨打手机号11211211212

[b]9.移动端问题解决[/b]

　　移动端一些页面问题解决方案：https://www.cnblogs.com/liulinjie/p/5663015.html

[b]10.点击空白蒙层消失[/b]

　　 除obj对象以外的其它地方点击之后蒙层消失：点击对象是蒙层，obj是蒙层里面的有内容的子元素

点击对象.click(function(){
　　　　var obj=$("有内容的对象");
　　　　if(!obj.is(e.target) && obj.has(e.target).length === 0){
　　　　　　//隐藏蒙层
　　　　}
})

[b]11.ie的img边框[/b]

　　IE中img标签有边框效果：设置img{border：none}就行了

[b]12.padding：0[/b]

　　使用*{padding：0}会导致table中的cellpadding设置失效：

　　解决办法：设置td的padding，也能达到同样的效果

[b]13.display:inline-block间隔解决[/b]

　　使用display:inline-block;会出现间隔，解决办法是：

　　在其父级添加：font-size:0

　　但是谷歌浏览器有默认最小字体限制，所以为了兼容还需加上-webkit-text-size-adjust:none 这一条

[b]14.小程序快速创建4个文件[/b]

　　微信快速创建4个文件即：.wxml js json wxss包括目录一起：

　　在app.json的page里面直接填入要加入的页面比如：“pages/addr/addr”

　　然后自动就在pages目录下创建了addr目录，下面并且也有标准的4个文件

[b]15.vertical-align[/b]

　　vertical-align这个属性需要在元素是inline或者inline-block的时候才起作用，比如div这种block块元素对它是无效的；

　 这就是为什么有时候设置div为display:table-cell，vertical-align会起作用。可以把table-cell理解为inline-block。

[b] 16.小程序隐藏或显示[/b]

　　微信小程序中让某个元素隐藏或者显示，可以使用wx:if="{{判断语句}}"。如果这是后想判断当前索引值可以使用index。例如： wx:if="{{ index > 3 }}" 判断索引大于三的元素使之显示

　　在用wx:for="{{ }}"列表渲染时，需加上wx:key=""，可消除警告

[b]17.border颜色渐变[/b]

　　如果想border颜色有渐变的效果，可使用css3border-image属性。例如：border-image: linear-gradient( red 10%, blue 60%) 30 30; 当然，设置这个的时候，border要有宽度，为了兼容还需要加上浏览器前缀。

[b]18.div嵌套，margin-top无效果[/b]

　　html结构：<div class=“out”>

　　　　　　　　　//content

　　　　　　　　<div class=“in”></div>

　　　　　　</div>

　　如果给in这个div设置margin-top，这时候in这个div并不会出现margin-top的效果，而是out这个div出现margin-top的效果。

　　但是如果out中有content等内容的时候，又不会出现这种问题。

　　如果不要content又要实现margin-top的效果，那么可以设置out这个div：overflow：hidden这个属性或者display：inline-block/table-cell

　　

小知识点：

[b]1. split（）[/b]

　　String.split(str,num)把一个字符串分割成数组，

　　　　str是必须的参数，可为字符串，也可以是正则表达式；num非必须参数，该参数可指定返回的数组的最大长度，换句话来说就是每次拆分返回的字符长度

　　　　如果split（“ ”）里面是空，那么，字符串里的每个字符都会被拆分

[b] 2.join（）[/b]

　　 Array.join(str)把数组中所有元素整合成一个字符串

[b]3.img等为什么可以设置宽高[/b]

　　为什么<img>、<input>、<textarea>、<select>、<object>等行内元素（也叫内联元素）能设置宽高

　　行内元素特点：不能设置宽高及行高，不能设置margin的上下部分。

　　那为啥能设置宽高捏？因为这些标签是浏览器根据其标签的元素与属性来判断显示具体的内容，属于替换元素。反正你把它理解为行内块元素即display:inline-block就行了。

[b]4.伪元素不能绑定点击事件[/b]

　　：after和：before这样的伪元素是不能绑定点击事件的。原因是：它们不是真正的DOM，所以无法绑定，js无法获取它们。

[b]5. ::selection[/b]

　　css的 ::selection 被用户选取的部分进行样式设置。比如选取之后颜色改变都可以使用这个。IE9+以上，Firefox 支持替代的 ::-moz-selection。

[b]6.echart 雷达图[/b]

　　echarts2 雷达图不一定只有6个点，可有多个或者1个，根据indicator的数据来增加或减少。一个就是一个点，两个为一条线，三个及以上就成多边形了

[b]7. meta手机端[/b]

　　 <meta name="apple-mobile-web-app-capable" content="no"> 的作用：删除默认的苹果工具栏和菜单栏。默认是显示的即yes，所以如果不想显示，在这meta里面 content就设置为“no”；

　 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 的作用：在web app状态下屏幕最顶部即信号那一栏的背景颜色，默认为default（白色），可选：black（黑色），black-translucent（黑色半透明）；

[b]8.meta总结[/b]

　　网站meta的总结：http://blog.csdn.net/kongjiea/article/details/17092413

[b]9.微信小程序背景图片[/b]

　　小程序 背景图片：background-image只能用网络url或者base64，本地图片要用image才行。在线生成base64位图片的网站http://base64.xpcha.com/indexie.php

[b]10. 目录[/b]

　　/是根目录，属于绝对路径

　　./是当前目录，是相对路径

　　../是上一层目录即父级目录，是相对路径

[b]11.读取对象属性[/b]

　　读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符。当一个对象的key值是字符串或者数字的时候，就需要用[ ]方括号运算符了，例如：a={ b.c:x,1:3 }，要想获取x或者是3，就需要a["b.c"]或者a["1"]这样操作；

　　对象的所有键名都是字符串，所以加不加引号都可以。如果键名是数值，会被自动转为字符串

　　这看起来很像访问一个数组的元素，从根本上来说是一回事儿，你使用了关联了值的名字，而不是索引去选择元素。难怪对象有时被称之为关联数组(associative array)了——对象做了字符串到值的映射，而数组做的是数字到值的映射。