javaScript常見問題總結

時間 2019-12-04

原文原文鏈接

1.本地緩存

將對象轉換成json
JSON.stringify(response.data.data);
存儲對象
localStorage.setItem("pro_list",a);
獲取對象的全部內容（對象格式）
var b = JSON.parse(localStorage.getItem("pro_list"));
獲取對象的內容（數組格式）
var b = localStorage.getItem("pro_list");
清除緩存
localStorage.removeItem('userinfo');
複製代碼

2.axios.ajax

//有參數
axios.post(API_URL2)
//無參數
axios.post(API_URL2,{
	type:a,
	page:page,
	num:num
})
.then(function (response) {
	成功了顯示
})
.catch(function (error) {
	不成功顯示
	console.log(error);
});
複製代碼

3.事件句柄

事件句柄是指事件發生時要進行的操做。每個事件均對應一個事件句柄，在程序執行時，將相應的函數或語句指定給事件句柄，則在該事件發生時，瀏覽器便執行指定的函數或語句，從而實現網頁內容與用戶操做的交互。當瀏覽器檢測到某事件發生時，便查找該事件對應的事件句柄有沒有被賦值，若是有，則執行該事件句柄。 www.runoob.com/jsref/met-e…html

4.js設置元素屬性

設置屬性：
		目標元素.setAttribute（‘屬性’，值）
獲取屬性：
		目標元素.getAttribute（「屬性」）
複製代碼

5.js設置更換url地址

window.location.href=url;  //物理返回會有地址痕跡
window.location.repeat(url)；//物理返回無地址痕跡
複製代碼

6.將字符串的某些元素替換成另外一個

目標元素.replace(/原字符串/g,'新的字符串'); 
複製代碼

7.獲取url後面的參數

window.location.href="pro_details.html?rel="+rel;
/***********獲取url後面的參數開始***********/
var url = location.search; 
var theRequest = new Object();
if ( url.indexOf( "?" ) != -1 ) {
  var str = url.substr( 1 ); //substr()方法返回從參數值開始到結束的字符串；
  var strs = str.split( "&" );
  for ( var i = 0; i < strs.length; i++ ) {
    theRequest[ strs[ i ].split( "=" )[ 0 ] ] = ( strs[ i ].split( "=" )[ 1 ] );
  }
}
console.log(theRequest.rel); //此時的theRequest就是咱們須要的參數；
/***********獲取url後面的參數結束***********/
複製代碼

8.保留2位小數，2後面補上00.即2.00

function toDecimal2(x) { 
    var f = parseFloat(x); 
    if (isNaN(f)) { 
		return false; 
    } 
    var f = Math.round(x*100)/100; 
    var s = f.toString(); 
    var rs = s.indexOf('.'); 
    if (rs < 0) { 
        rs = s.length; 
        s += '.'; 
    } 
    while (s.length <= rs + 2) { 
    	s += '0'; 
    } 
    return s; 
}
複製代碼

9.原生js在原生的內部的後面添加元素

var parent = document.getElementsByClassName("目標元素")[0];
var div = document.createElement("div");
div.setAttribute("class", "mui-indicator");
parent.appendChild(div);

複製代碼

10.時間戳轉換成時間

function getLocalTime(nS) {
   return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
}

複製代碼

11.原生js操做類名添加刪除類名，獲取元素

爲 <div> 元素添加 class:
document.getElementById("myDIV").classList.add("mystyle");
爲 <div> 元素添加多個類:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
爲 <div> 元素移除一個類:
document.getElementById("myDIV").classList.remove("mystyle");
爲 <div> 元素移除多個類:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");
檢查是否含有某個CSS類
myDiv.classList.contains('myCssClass'); //return true or false
window.getComputedStyle(目標元素).width
#得到點擊元素的前一個元素
e.currentTarget.previousElementSibling.innerHTML
 #得到點擊元素的第一個子元素
 e.currentTarget.firstElementChild
#得到點擊元素的下一個元素
 e.currentTarget.nextElementSibling
#得到點擊元素中id爲string的元素
 e.currentTarget.getElementById("string")
#得到點擊元素的string屬性
e.currentTarget.getAttributeNode('string')
#得到點擊元素的父級元素
e.currentTarget.parentElement
#得到點擊元素的前一個元素的第一個子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML

複製代碼

12.獲取元素的高度

//document.documentElement.offsetHeight 文檔高度
//document.documentElement.scrollTop 元素離頂部高度
//document.documentElement.clientHeight 展現區域高度

複製代碼

13.js數組對象與 js 字符串互換

Js字符串 = JSON.stringify(數組對象);
數組對象 = JSON.parse(js字符串);

複製代碼

14.刪除數組某一個元素

數組名.splice(下標,1);

複製代碼

15.input上傳圖片文本圖標

<label>
	<input 
		style="position:absolute;opacity:0;" 
		type="file"
		name="file"
	  	id="Album_img" 
		accept="image/gif,image/jpeg,image/x-png" 
		capture="camera" />
	<img style="width: 60px;height: 60px;" src="/public/images/add-button.jpg"> 
 </label> 

複製代碼

16.input圖片上傳獲取 64 Hb

var input = document.getElementById("file_input");
var input = document.getElementById("file_input");
var result,div;
if(typeof FileReader==='undefined'){
	   result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader";
	   input.setAttribute('disabled','disabled');
}else{
	   input.addEventListener('change',readFile,false);
}
function readFile(){
    if(!input['value'].match(/.jpg|.gif|.png|.bmp/i)){&emsp;
		//判斷上傳文件格式
      	return alert("上傳的圖片格式不正確，請從新選擇")&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
  	 }
  	 var reader = new FileReader();
   	 reader.readAsDataURL(this.files[0]);
  	 reader.onload = function(e){
        console.log(reader.result);
	 }
}

複製代碼

17.圖片顯示不出來顯示的圖片

onerror="this.src='images/bai.jpg'"

複製代碼

18.原生js刪除本身

//獲取須要刪除的元素
var delli = even.currentTarget.parentElement.parentElement.parentElement;
//找到父元素刪除本身
delli.parentNode.removeChild(delli);

複製代碼

19.判斷設備是ios仍是安卓

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
isAndroid爲 true，則爲安卓客戶端； isIOS爲true，則爲ios客戶端

複製代碼