一丟丟前端經常使用的小技巧

獲取DOM節點:

• document.getElementById(): 只能運用到document上, 返回找到的元素節點, 速度是最快的;

• dom.getElementsByTagName(): 能運用到全部元素節點上, 返回一個類數組的集合;

• dom.getElementsByClassName(): 同上;

• dom.querySelector(): 能運用到全部元素節點上, 返回第一個匹配的元素, 參數是標準的css選擇器;

• dom.querySelectorAll(): 能運用到全部元素節點上, 返回一個類數組的集合, 參數是標準的css選擇器;

操做class

• dom.className: 獲取或設置元素的class;

• dom.classList: 返回元素的全部class的一個集合;

• dom.classList.add(): 追加指定的類名;

• dom.classList.remove(): 移除指定的類名; 不傳參數是不會作移除的喲;

• dom.classList.toggle(): 同時兼具移除和添加功能, 若是存在批定的類名則移除, 若是不存在則添加;

• dom.classList.contains(): 返回一個布爾值, 判斷節點是否包含指定的類名;

其餘

• navigator.userAgent中MicroMessenger能夠來判斷是否爲WeChat;

• document.referrer: 獲取來源的URL;

• Array.prototype.slice.call(list): 將一個類數組的集合轉換成一個真實的數組;

• input.value: 獲取input的值; input.defaultValue: 獲取input的默認值;

• selectEl.value: 若是<select>中<option>沒有value屬性則獲取的是文本內容，不然獲取value屬性的值;(都是獲取選中的<option>)

• selectEl.options: 獲取<select>中全部<option>標籤，是一個類數組的集合;

• selectEl.options.selectedIndex: 獲取選中<option>的索引;

• selectEl.options[selectEl.options.selectedIndex].textContent: 獲取選中<option>的文本內容;

正則

• *: 匹配0到屢次

• +: 匹配1到屢次

• ?: 匹配0或1次

• g: 全局匹配，即不是搜到一個匹配就返回，而是搜出所有匹配 通常返回是一個數組

• i: 忽略大小寫

• m: 多行匹配

HTML

• <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">: 讓IE瀏覽器以最新的引擎渲染, chrome=1能夠激活chrome Frame;

• <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

• <input autocapitalize="off">: 禁用IOS中鍵盤自動大寫;

• <input>若是有<form>包裹, 打開軟鍵盤後顯示爲'前往'; 不然顯示爲'換行';

CSS

• -webkit-appearance: none: 移除元素的默認樣式, 尤爲IOS上的表單元素, 默認會應用系統樣式;

• -webkit-tap-highlight-color: rgba(0, 0, 0, 0): 禁用元素按下後的背景顏色, 默認在移動設備上按下後會有一個灰色背景;

• -webkit-touch-callout:none;: 禁用長按頁面時的彈出菜單(iOS下有效) ,img和a標籤都要加

• background-size: 取值contain時, 寬高適應內容, 會所有顯示; 若是取值cover則寬高徹底覆蓋背景, 可能會被裁切;

• -webkit-overflow-scrolling: touch: 讓IOS中滾動條更流暢;