web前端技能方法總結（css、js、jquery、html）（10）

hide 隐藏

show 顯示

skin 皮膚

code 代碼

even 事件

array 數組

integer 整數

veruant 變量

common 公用

switch

case 情況

break 中斷整個循環

continue 跳出本次循環

default 不履行/所有情況都不滿足的時候走這個

null 沒有/空對象

computed 計算後/生效的

eval（JS可以讀懂的代碼：如‘1+1’->字元串） 這個代碼會把（）裡面的字元串換成計算機讀懂的代碼來計算 + - * % 都行 （計算用的）

return 傳回

write 輸入

find 查找

interval 間隔

setInterval（函數名，1000/） 間隔定時器

clearInterval 清除間隔定時器

Timeout 逾時

setTimeout 延遲定時器

clearTimeout 清除延遲定時器

obj.disabled 讓按鈕/變成不可使用

true 不可用

false 可用

date 時間

get 擷取

set 設定

Fullyear 滿年

month 月 （從0月開始）

day 日 擷取需要 date

week 星期 擷取需要day （從0到6）

hours 小時

minutes 分鐘

seconds 秒

single 一個/一倍

dubble 兩個/兩倍

triple 三個/三倍

arguments 函數傳參-實參的集合

arguments.length 函數傳參-實參的長度

arr.push（） 向數組最後添加一項

arr.unshift() 向數組前面添加一項

arr.pop（）删除數組最後一位.

arr.shift（） 删除數組第一位

arr.splice(開始的位置，删除的個數，添加的東西1。。。)

arr.join('') 變字元串 是中間的隔開東西 如- ，空格 等等。。。

arr.concat(arr1,arr2,arr..要拼接的數組...); 數組拼接/合并數組

arr.reverse() 反轉/颠倒數組

arr.sort() 數組排序 按照字元串比大小的方法來排序

arr.sort(function(a1,a2){ return a1-a2 //從小到大 return a2-a1 //從大到小 }) a1 a2随便起 代表的是數組中随機的某兩項

str.charAt() 字元串裡面的下标

str.indexOf(‘’) 下字元串對應的下标數（相同的就取第一個）

str.lastIndexOf（‘’）下字元串對應的下标數（相同的就取最後一個）

str.substring (開始位置，結束位置)/（開始位置-不寫結束位置預設就從開始位置到最後） 截取子串

str.toUpperCase() 大寫字母

str.toLowerCase() 小寫字母

str.split(切割的方式 '-' '' '空格'等) 切割變成數組

str.charCodeAt('a') 輸入字元查找對應的編碼

String.fromCharCode(編碼) 輸入編碼查找對應的字元

json.name=value; 添加

delete json.name 删除

token 括号

try catch(e) 異常

math.random() 求随機數

parseInt（math.random()（m-n）+n） 求n-m之間随機的整數， 前包括後不包括

math.abs() 求絕對值

math.max(，，，) 求最大值

math.min(，，，) 求最小值

math.pow(n,m) 求n的m次方

math.sqrt(a) 開方

math.PI π

math.ceil(12.3) 向上取整 13

math.floor(12.3) 向下取整 12

math.round(a) 四舍五入

!important Css樣式值後面加這個 權重最大

navigator.userAgent UA 例子判斷浏覽器的類型

navigator.language 語言

navigator.platform 作業系統

Sibling 兄弟

next 下一個

previous 上一個

擷取元素/節點：

(父級) obj.children 找：兒子/子級 子節點

(子級) obj.parentNode 找：父親/父級 父節點

(同級) obj.nextElementSibling || obj.nextSibling 下一個同級/節點 (同級) obj.previousElementSibling || obj.prenviousSibling 上一個同級/節點

(父級) obj.firstElementChild ||obj.firstChild 首節點

(父級) obj.lastElementChild || obj.lastChild 尾節點

建立元素：

document.createElement_x('标簽名') 建立元素

添加插入

(父級) obj.appendChild(誰) 往元素裡面最後添加一個

帶剪切效果

(父級) obj.insertBefore(把誰，加在誰的前面) 往元素裡面添加一個

删除元素：

(父級) obj.removeChild(子級) 删除子級

window.open() 打開

window.close() 關閉

a标簽：target=""

不填 預設新頁面打開

_blank 新頁面打開

_self 本頁面打開

window.location 位址欄資訊

window.location.href 連結資訊

window.location.search 資料資訊

window.location.hash 錨點資訊

*了解就行 面試背住

window.location.procotol 協定資訊

window.location.hostname 域名資訊

window.location.port 端口号資訊

window.location.pathname 路徑資訊

back 傳回

forward 向前

history 曆史

window.history.back 傳回曆史記錄 退

window.history.forward 傳回曆史記錄 前

alert（） 彈

confirm 詢問提示框

prompt 問答提示框

console.log（） 在F12中顯示;

document.write（*） 在頁面中輸入

scroll 滾動 有相容問題

client 用戶端/可視區

offsetHeight/Width 物體盒子模型的寬高

offsetTop/Bottom/方向 物體距上/下/左/右的距離

offsetparent 定位父級

window.onScroll 當滾動的時候 滾動事件

window.onresize 當縮放的時候 縮放事件

onfocus 當擷取焦點的時候

onblur 當失去焦點的時候

obj.getAttribute('屬性名') 擷取屬性名對應的屬性值

obj.setAttribute('屬性名','屬性值') 設定屬性

obj.removeAttribute('屬性名') 删除屬性

event 事件

onmousemove 滑鼠移動事件

onload 當圖檔加載完成時

onerror 當圖檔加載失敗時

cancelBubble 取消冒泡

onkeydown 當按鍵按下的時候

onkeyup 當按鍵擡起的時候

oEvent.keycode 鍵盤編碼

oncontextmenu 當按右鍵的時候

return false 阻止浏覽器右鍵菜單

cache 緩存

onmousedown 滑鼠按下時

onmouseup 滑鼠擡起時

obj.setCapture() 開始捕獲

obj.releaseCapture() 取消捕獲

obj.cloneNode() 克隆複制一個節點

document/obj.addEventListener（'不加on的事件名',函數名,false） 添加事件綁定 相容進階

document/obj.attachEvent（'加on的事件名',函數名） 添加事件綁定 相容IE系列

document/obj.removeEventListener（'不加on的事件名',函數名,false） 解除事件綁定

document/obj.detachEvent（'加on的事件名',函數名） 解除事件綁定

onmouseenter 滑鼠移入

onmouseleave 滑鼠移出

onmousewheel 滑鼠滾輪事件

DOMMouseScroll 滑鼠滾動事件

oEvent.wheelDelta 非火狐 測試滑鼠滾輪向上向下彈得數字

oEvent.detail 火狐 測試滑鼠滾輪向上向下彈得數字

return false 阻止浏覽器預設事件 但是在事件綁定中失效

oEvent.preventDefoult 在事件綁定中用 阻止浏覽器預設事件（如果單獨用隻相容進階浏覽器）

oninput 當輸入的時候 iE9- 沒有此方法

onpropertychange 當屬性改變的時候 IE系列

oEvent.srcElement 事件源 非火狐

oEvent.target 事件源 進階浏覽器

duration 期間

start 開始

count 次數

complete 完成

var bFlag=false/ture 開關 自定義

easing 速度類型：

linear 勻速

ease-in 加速

ease-out 減速

window.onload 頁面加載完畢後執行（代碼、資源）

DOMReady 頁面加載完畢後執行（代碼）

DOMContentLoaded DOM加載事件

obj.onreadystatechange 監控事件（模拟DOM加載事件）

readyState 加載狀态

document/obj.readyState 加載狀态

ondbclick 滑鼠輕按兩下

queryselector 新的擷取元素方法

window.location.reload 重新加載

cookie

expires 期限

session 一個會話（浏覽器打開和關閉）

path 路徑

define 定義

require 引用其他子產品

exports 導出子產品

module 批量導出子產品，

data-main 主要資料/初始化接口

success 成功

error 失敗

Request 請求

ActiveX 浏覽器插件

XMLHttpRequest（） ajax 建立/ 不相容ie6-

ActiveXObject（'Microsoft.XMLHTTP'） 建立/(插件) ie系列

oAjax.open()打開

oAjax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

oAjax.send() 發送

onreadystatechange 接收/當通信狀态變化

oAjax.abort() 使中止

oAjax.readyState 是否完成/加載狀态

oAjax.status 是否成功

response 回答/響應

oAjax.responseText 傳回結果

JSON.parse() 可以把字元串json變成json 不過json要正規些 雙引号

JSON.stringify() json列印出來的方法

encode 編碼

decode 解碼

Component 元件/元件

encodeURIComponent('中文') 中文轉化成編碼

decodeURIComponent('編碼') 編碼轉化成中文

str.replace 替換

new RegExp() 正規表達式

str.search() 跟indexOf一樣 在正則用

str.match 比對

正則.test（你要校驗的str） true 正确滿足 false 不滿足 用這個的時候一定配合行首和行尾

轉譯

\d 數字 [0-9]

\w 數字、英文、下劃線 [0-9a-z]

\s 空白字元 所有的空白字元

. 代表任意字元

\D 非數字

1 \W 非數字、英文、下劃線 2

\S 非空白字元

\u4e00-\u9fa5 中文

量詞

{n} n個

{n,m} n-m個

{n,} 最少n個，最多随便

{0，m} 最少随便 最多m個

{1，} 就是 若幹個

{0，} 任意個 可以沒有

？ {0,1} 最少沒有 最多1個

\ 轉譯特殊字元

| 或的意思

i 忽略大小寫

g 全局比對

m 多行模式

^ 行首 如果在方括号裡面是除了

$ 行尾

*jq

toggle 點選

hover 移入

fadeIn 淡入

fadeOut 淡出

animate 運動函數（move）

slideDown 滑動從上往下出來

slideUp 滑動從下往上隐藏

eq(下标) 标簽擷取的下标

li>a li下面的第一級a

僞類選擇器:

li:last li最後一個

li:first li第一個

li:eq(2) 第三個li

obj：even 偶數

obj：odd 奇數

obj：has("p/标簽名") 裡面包含‘p’這個标簽的就會選取

obj：contains("p/内容") 内容有得‘p’ 就都會選取

event/自己起行參名字.pageX X軸坐标

event/自己起行參名字.pageY Y軸坐标

offset().top 物體絕對的位置 ->getPos()函數

offset().left 物體絕對的位置

position().top 物體距定位父級距離 ->offsetTop

position().left 物體距定位父級距離

document.scrollTop 和原生一樣

document.scrollLeft 和原生一樣

.width/.height 物體本身的寬高

innerHeight/Width 物體内部的寬高 包括padding 不包括邊框

outerHeight/Width 物體盒子模型寬高

父級.append(子級) 在父級内的後部追加

父級.prepend(子級) 在父級内的前面追加

子級.appendTo(父級) 在父級後部追加

子級.prependTo(父級) 在父級前部追加

obj1.after(obj2) 把2放在1的後面

obj1.before(obj2) 把2放在1的前面

bind() 事件綁定

unbind() 事件解綁

live() 事件委托

die() 解除事件委托

**以上四種不推薦 因為原理還是昂 是以推薦on

obj.on（） 可以事件綁定/委托

each 循環

$.trim() 去除首尾空格

extend() 延伸

height() 就是寬度

innerHeight 包括padding、不包括邊框

outerHeight 盒子模型的

offset().left -> getPos()

position().left -> offsetLeft()

scrollTop() -> scrollTop

eve.pageX/Y 坐标

maxlength 表單元素最大長度 屬性

$.fn.函數名=function(){} 建立jq封裝函數

$.fn.extend({函數名1:function(){},函數名2:function(){},...})

漢字：[0x4e00,0x9fa5]（或十進制[19968,40869]）

數字：[0x30,0x39]（或十進制[48, 57]）

小寫字母：[0x61,0x7a]（或十進制[97, 122]）

大寫字母：[0x41,0x5a]（或十進制[65, 90]）

parent() 父級

offsetParent() 定位父級

parents() 所有父級 括号裡面可以篩選 比如放class名字或...

str/arr.slice（開始位置，結束位置） 切 從開始到結束 如果隻有開始 就從開始到最後。 前包後不包

prototype 原型

form表單中 submit 送出 reset 重置

xxx instanceOf xxx 檢測一個對象屬于某個類

xxx.constructor==xxx 看構造函數 雙等是判斷 直接父級屬不屬于xxx 一個等号是指派讓直接父級等于xxx

fn.call(this的指向，參數一，參數二，....) 改變this的指向 fn中的this=

fn.apply(this的指向，[參數一，參數二，....]) 改變this的指向 fn中的this=

init 開始

localStorage 本地存儲

一般的規範

localStorage.name=value 存

localStorage.name 取

delete localStorage.name 删除一條

localStorage.clear() 删除全部

規範的存取

localStorage.setItem(name,value)

localStorage.getItem(name)

localStorage.removeItem(name)

sessionStorage 臨時存儲 和localStorage一樣用法

include() 包含

template.defaults.openTag=''; 自定義模闆開始樣子

template.defaults.closeTag=''; 自定義模闆結束樣子

template.config('openTag','')

template.config('closeTag','')

template.config('escape',true/false) true不預設轉譯 false預設轉譯

m model 模型

v view 視圖

c controller 控制器

scope 範圍 作用域

then 然後

model模型

bind綁定

ng-app=""; 引用其他子產品

ng-model="" 資料從哪來

ng-bind="" 或 model 或 {{xxx}} 資料到哪去

ng-init 初始化

ng-repeat 循環

angular.module('名字',[依賴子產品).controller('名字',function(依賴項){})

$scope

$http

$interval

$timeout

` 反單引号 包住字元串 拼接是這樣 ${}

|currency:"" 貨币

date:"" 時間戳轉化處理

route 路由/狀态

filter 過濾器

directive 指令

restrict 類型 E:'element' C:'class' M:'comment' A:'attribute'

service 依賴

oDate.toString() 擷取正常時間

creator.ionic.io 做手機端的架構網站不錯

ng-show true false 顯示 隐藏

ng-hide true false 隐藏 顯示

ng-clack

comment 注釋

bundle 打包

transclude 嵌入

params 參數

provider 提供者

.config() 配置

$scope.$watch(資料，fn)

template 模闆

templateUrl:'模闆位址' 模闆

$ bower install * 下載下傳東西用的

ReactDOM.render(什麼東西，渲染到哪)

type='text/babel'

state 狀态

extends 延伸 繼承

constructor 建立

super 超類/父類

component 元件

React.Component

this.props.屬性

元件中 ref和正常的ID類似

vue

el：'id'

data:{}

$index

capitalize 首字母大寫

uppercase 變大寫字母

lowercase 變小寫字母

ev.stoppropagation() 阻止冒泡

ev.preventDefault() 阻止預設事件 angular

angular.bind(this的指向，要改變指向的函數名，參數)

bootstrap 開啟應用模式

copy(複制誰,複制到哪裡) 複制/克隆

equals(a,b) 比較

forEach 循環

fromJson 字元串json轉化成json

extend（obj，obj1，obj2。。。） 擴充

标簽裡面屬性 transition="名字" 過渡 動畫

.名字-

transition 過渡

transition：時間 讓誰變/all ease;

enter 進來

leave 出去

watch 監控

props 存東西 可在替換模闆身上用

Router-view 狀态視圖

v-link="{path:名字

animation:8s test/名字 linear infinite/數值/次數;

background-size 背景尺寸

contain 以最合适的狀态展示 可能會留白

cover 盡可能填滿

nth-child(下标 注意：從1開始) 注意:項目不用這個。禁用

nth-of-type(下标 注意：從1開始) 注意:項目不用這個。禁用

background-origin： 背景從哪裡開始

content-box

border-box

padding-box

background-clip： 背景從哪裡開切

1. 0-9 ↩
2. 0-9a-z