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

前端资源

小技巧：

1.阻止input显示历史记录

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

　　即：

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

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

　　

　　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;　　//这里是行高

　　}

3.为table设置1像素的边框

　　css：

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

　　这样就OK了。

4.mui真机调试查看对象属性

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

5.停止另一个函数的定时器

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

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

6. 正则表达式---去所有空格

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

7.正则表达式---只中文

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

8.安卓或者ios拨号功能

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

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

9.移动端问题解决

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

10.点击空白蒙层消失

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

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

　　另外中方法是：父级设置点击消失，然后子级设置阻止冒泡的js，即e.stopPropagation()

11.ie的img边框

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

12.padding：0

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

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

13.display:inline-block间隔解决

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

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

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

14.小程序快速创建4个文件

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

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

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

15.vertical-align

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

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

 16.小程序隐藏或显示

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

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

17.border颜色渐变

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

18.div嵌套，margin-top无效果

　　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

19.mui底部导航栏的a标签不能跳转的问题：

　　mui('body').on('tap','a',function(){document.location.href=this.href;});加上这句代码就可以了　　

 20.fixed定位的元素相对父级而不是整个页面

　　设置fixed的元素默认是相对于浏览器窗口而言的，那么，怎样让它相对于指定的父级fixed定位呢。

　　解决方法是：给设置fixed元素的父级设置relative定位，设置fixed的改为absolute，网上说可以给父级设置transform：translate(0,0)，fixed不改变也能实现，那是因为transform影响了fixed 的 containing block

21.微信小程序，在需要在video上覆盖内容时，需要使用cover-view标签

 

22.如果在safari浏览器中使用display:inline-block时导致有间隙，导致平均分配的子元素并不能在一行显示的时候，可以把display:inline-block替换成display:table-cell。完美解决

23.如果想实现两端对齐的方式，可以使用下面的方法：

 

box{
    text-align: justify; 
}
box:after{
    display: inline-block;
    width: 100%;
    content: '';
}

 

　　或者是在box里面添加一个标签，样式和上面的after一样，也能达到效果。而且兼容性很好

 

 24. :before/:after 与 ::before/::after的区别是前面的兼容性比后面的兼容性好，都是伪元素

 

 25. :before这种伪元素必须要有content , 而这个content有个 attr（）函数，可以获取某元素的data-xx属性。

　　例：<p data-tip='猪'></p>   在css中 p:after{ content:attr(data-tip) } 这样这个after伪元素的内容就是 猪 了。

---

 

 

小知识点：

1. split（）

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

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

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

 2.join（）

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

3.img等为什么可以设置宽高

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

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

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

4.伪元素不能绑定点击事件

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

5. ::selection

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

6.echart 雷达图

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

7. meta手机端

　　 <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（黑色半透明）；

8.meta总结

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

9.微信小程序背景图片

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

10. 目录

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

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

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

 11.读取对象属性

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

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

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