前端 一些小知識，技巧總結

前端資源

小技巧：

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.移動端問題解決

　　移動端一些頁面問題解決方案：http://www.javashuo.com/article/p-hygmdkhp-ho.html

10.點擊空白蒙層消失

　　 除obj對象之外的其它地方點擊以後蒙層消失：點擊對象是蒙層，obj是蒙層裏面的有內容的子元素

1 點擊對象.click(function(){
2 　　　　var obj=$("有內容的對象");
3 　　　　if(!obj.is(e.target) && obj.has(e.target).length === 0){
4 　　　　　　//隱藏蒙層
5 　　　　}
6 })

　　另外中方法是：父級設置點擊消失，而後子級設置阻止冒泡的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)了——對象作了字符串到值的映射，而數組作的是數字到值的映射。