原生js隨筆

JavaScript是一種基於對象和事件驅動的客戶端腳本語言

組成: ECMAScript---------------標準語法

Bom(browser Object Model) Dom(document)-------瀏覽器提供的擴充

API : application programming interface 應用程序接口

js引入,內部和外部,最好都放到body裏的</body>標籤前;

外部:<script src="" > </script>-----可維護性高,可緩存的;放在head和body中也能夠,可是考慮加載順序

document.write()方法,將html內容輸出到瀏覽器窗口,因此在document.write()中換行就是<br/>

變量:聲明一個變量用var來聲明 ------var 變量名 = 初始化值;

js 是弱類型語言,定義時不聲明變量類型;

js的五種基本數據類型:字符串String,整數Number,布爾型Boolean,null,undefined

從邏輯上看,null值表示一個空對象指針,因此類型是object

 

變量在定義時可使用逗號一次性定義多個變量,變量命名也就是標識符的命名規則;

標識符包括變量,函數,屬性的名字,最好見名知意,小寫字母開頭,不能有空格,不能是關鍵字,不能是保留字,區分大小寫;

駝峯命名法

alert() 提示框, document提供的方法,因此換行就是"/n";alert只接收字符串做爲參數,自動調用toString()方法轉換;

字符串類型的變量定義能夠用""也能夠用'';

console.log();方法是在控制檯輸出結果,chrome瀏覽器的控制檯輸出,會自動提供換行;

字符串拼接:+

轉型函數: 布爾型---Boolean();返回值就是true和false;

字符串返回true ,空串返回false;

數值0返回false ,其餘返回true;

null型返回false;undefined返回false ;

float,型因爲精度問題,計算不是精確計算,true爲1,false爲0;

數值型----parseFloat();返回值是浮點型數值;

解析一個字符串,返回一個浮點型數值;

數值型----parseInt();返回值是整型數值,true爲1,false爲0;

解析一個字符串,返回一個整形的數值;

解析時候,參數如是0開頭的數值,會按照8進制轉

解析時候,參數若是是0開頭的字符串,0就會被忽略;

解析時候,參數若是是ox開頭的數值,就會按照16進制進行轉換數值;(A~F是10~15);

顯示類型轉換:

.toString()方法,強制類型轉換,轉爲字符串,對於null和undefined,沒法轉換,要用String()函數

對象:

Object(),建立一個對象要用new關鍵字,它是一組數據和功能的集合;建立後能夠爲它添加屬性和方法

算數運算符:

+:只要出現了字符串,就會變成字符串拼接;

- * / %:調用Number()轉化;

賦值操做:

就是將右邊的值,給 左邊的 變量;

簡單的賦值操做符: =

複合賦值操做符: += -= *= /= %= (i += 1; 就是 i=i+1);

布爾操做符: ! && ||

邏輯&&: 都真才爲真,若是第一個爲假,那麼就不判斷第二個元素,必定是假;

 

邏輯||:只要一個爲真,就爲真,第一個爲真,就不判斷第二個元素,必定爲真;

邏輯 !:就是取反

if語句:

if(){}

if(){}else{}

if(){}else if(){} else if(){} else{}

switch case :

switch (條件):

case 0: .....(每個case後要有break;)

case穿透;

條件能夠爲true,case中能夠寫判斷式;

關係操做符: > < >= <= 比較規則:

都是字符串就比較字符串編碼

一個是數值,另外一就會轉化爲數值

布爾值轉換爲數值,true爲1,false爲0;

相等性關係: == 相等 != 不等:

若是比較類型相同:返回值爲布爾值,相等返回true,不等返回false

若是比較類型不一樣:轉換後再比較

一個布爾時,布爾轉爲數值;

一個數值,一個字符串,字符轉爲數值;

null和undefined是相等的;

null和undefined不轉換;

只要有NaN就不等;

全等性關係: ==== 全等 !== 不全等 :

不只要比較類型,還要比較值;

循環: for(var i = 0; i小於循環條件;i++){

循環體;

} //經常使用於知道循環次數的循環;

 

while(循環條件){

循環體;

自增條件;

}//經常使用於不知道循環次數的循環;

 

break:跳出整個循環

continue:跳出本次循環,繼續程序

死循環: 因爲編程錯誤,使得其自身沒法控制終止的程序;

因爲須要,但願程序一直執行,當達到某一特定要求才終止循環的狀況下;

瀏覽器調試:(debug) sources 裏查看,能夠設置斷點,想要觀察的變量能夠右鍵Add watch,刷新後,點擊下一步,一步一步看執行;

函數: 能夠重用的代碼塊(分爲自定義函數,內置函數)

函數的聲明:function 函數名(參數1,參數2){

函數體;

}

函數能夠沒有名字,咱們稱爲匿名函數

函數能夠沒有參數

函數的調用------函數名(實際參數1,實際參數2);

理解參數:函數的參數不介意傳進來多少個,也不介意傳進來的數據類型,

也就是說定義的時候是要傳進來兩個參數,可是在調用的時候也未必必定要傳進來兩個參數,

能夠是一個,也能夠是三個;參數的內部是直接存在一個數組中的,因此,

咱們在訪問時,能夠經過arguments對象取得傳遞給函數的每個參數;

局部變量 和 全局變量:

優先級:局部 大於 全局 ;

若是一個函數內定義一個變量,沒有添加var來聲明,那麼系統自認爲這個變量是全局變量;

隨機數: function randomNum(min, max){

return Math.floor(Math.random()*(max-min+1)+ min);

}

事件驅動:1獲取元素,2綁定事件

事件:onclick 鼠標點擊事件

ondblclick 鼠標雙擊事件

onmouseover 鼠標移入

onmouseout 鼠標移出

onmouseenter

onmouseleave

遞歸函數:函數經過名字調用本身的狀況;

數組: 一組數組的有序列表,每一項能夠保存任何類型的數據;

數組的長度是能夠動態調整;

數組長度:數組名.length;

建立:var 數組名 = new Array[];

var 數組名 = [];

添加:數組名[位置下標]= "";

數組名.push(a"");從數組的最後一個位置添加元素"a";

數組名.unshift("a");從數組的第一個位置添加元素"a";

數組名.concat(參數1,參數2....)方法;基於當前數組建立一個新數組;

做用是合併,能夠合併兩個或多個數組,若是是一個值,就會添加到新數組

若是是一個或者多個數組,那麼參數數組中的 每一項都會添加到新數組中

刪除:數組名.pop(a"");從數組的最後一個位置刪除元素"a";

數組名.shift("a");從數組的第一個位置刪除元素"a";

轉串:數組名.join("")方法就是將數組裏的每一項按照字符鏈接組成一個新的字符串;

排序:數組名.sort()方法;就是數組的排序:

升序:數組名.sort(function(a,b){return a-b;});

降序:數組名.sort(function(a,b){return b-a;});

反序:數組名.reverse()方法;數組反序

查找:數組名.indexOf("a")方法;從數組第一個元素開始查找a,並返回下標值;找不到返回-1;

數組名.indexOf(a,b)方法;從數組的地a+1個元素開始查找b,並返回找到的元素的下小標

數組名.lastIndexOf("a")方法;從數組的最後一個元素查找a,並返回下標值;找不到返回-1;

截取:數組名.slice()方法;截取數組獲得一個字數組,接受一個或者兩個參數

一個參數就是從參數的位置到最後截取,

兩個參數就是從參數1取到參數2,不含參數2;

接受負數參數,負數就是從數組的最後項找位置截取;

 

 

數組名.splice()方法;能夠實現數組的添加刪除和截取;參數接受兩個,三個或者多個,接受負數參數;

String對象:是字符串的對象類型,能夠用構造函數來建立;

建立:var str = new String("內容");

var str1= "內容"; //基本都這麼建立,由於基本類型的字符串也能夠用String的方法;

方法:

查找: 字符串.charAt() 方法;返回給定位置的字符;

字符串.charCodeAt()方法;返回給定位置的字符的編碼;//與String.fromCharCode()相反的方法;

String.fromCharCode()方法;靜態方法,接收字符編碼,轉成字符串;

 

字符串.indexOf("a")方法;返回a在字符串中第一次出現的位置下標;若是找不到返回-1;

字符串.lastIndexOf("a")方法;返回a在字符串中最後一次出現的位置下標;若是找不到返回-1;

添加: 字符串.concat("a","b","c".....)方法;不改變原串,生成在原有串上添加的新串;多用於多個字符串的拼接;

加號 + 字符串的拼接 //最長用;

取子串:

字符串.substring(x)方法;截取下標x開始到字符串結尾的子串,不改變原串;

字符串.substring(x,y)方法;截取字符串下標x到y的子串,含x不含y,不改變原串;

字符串.slice(x);截取下標x開始到字符串結尾的子串,不改變原串;

字符串.slice(x,y);截取字符串下標x到y的子串,含x不含y,不改變原串;

字符串.substr(x);截取下標x開始到字符串結尾的子串,不改變原串;

字符串.substr(x,y);截取字符串下標x開始,後面的y個;不改變原串;

 

去空格:字符串.trim()方法;去掉字符串頭和尾的空格;

字符串.trimLeft()方法;去掉字符串最左邊的空格;

字符串.trimRight()方法;去掉字符串最右邊的空格;

分割:根據分割符將字符串拆分紅數組;不改變原串;

字符串.solid("原字符串中有規律的字符"); //找不到 原字符串中有規律的字符 返回1;

大小寫轉換:

字符串.toLowerCase()方法;轉換爲小寫;

字符串.toUpperCase()方法;轉換爲大寫;

替換:字符串.replace();接受一個或兩個參數,一個參數是從下標參數到最後,兩個參數是參數2替換參數1字符串;

保留小數位:字符串.toFixed(s);保留小數後s位;

 

Math對象:該對象的方法都是靜態方法,數學公式和信息,與本身編寫的方法相比較,Math提供的方法效率更加高;

屬性: .PI 就是數學裏的圓周率π

方法:Math.random() 隨機數0~1

Math.min(x,y);x y 返回最小值;

Math.max(x,y);x y 返回最大值;

Math.ceil(a) ;a向上取整,取最大整數;

Math.round(a);a數學四捨五入取整;

Math.floor(a);a向下取整,取最小整數;//一般考慮到效率問題,用該方法代替parseInt()取整方法;

Math.ads(a);返回a的絕對值;

Math.sqrt(a);a開平方;

Math.pow(a,n);a的n次方;

Date()對象:ECMAScript中的日期是在1970年1月1日午夜零時開始通過的毫秒數保存時間的;

建立:

var 變量名 = new Date(); Date()系統當前時間,在傳參時,會自動調用Date類型的toString()方法;

var d = new Date(年,月,日); d Date類型

方法:在方法使用前,都要new一個Date對象,才能使用;

Date對象.getFullYear(); 得到年份;

Date對象.getMonth(); 得到月份;

Date對象.getDate(); 得到日期;

Date對象.getHours(); 得到小時數;

Date對象.getMinutes(); 得到分鐘數;

Date對象.getSeconds(); 得到秒數;//一秒 = 1000毫秒;

 

Date對象.setFullYear();設置年份;

Date對象.setMonth();設置月份;

Date對象.setDay();設置日期;

Date對象.setHours();設置小時數;

Date對象.setMinutes();設置分鐘;

Date對象.setSeconds();設置秒數;

 

Date.now() //當前時間的毫秒數;

Date對象.parse(2016,8,23)//將日期20160823轉成距離1970年1月1日的毫秒數;

getTime();獲取指定日期的毫秒數

setTime();根據指定毫秒數,設置或者修改日期;

串和數組的轉換:

將數組轉成字符串:arr.join("符號");//每一個字符串之間用符號分隔

將字符串轉成數組:str.split("符號");//字符串中以字符規律,分隔成數組元素;

DOM:(document object model)文檔對象類型;

 

注意: 標籤.innerHTML =" " ; :寫入內容到輸出標籤內,能夠直接寫入html標籤;

頂層對象:window:

window.screen 屏幕對象

window.location 地址欄對象

window.history 歷史記錄對象

window.navigator 瀏覽器對象

方法:

window.alert();//alert();//只接收字符串參數;不是會調用toString()方法;

window.document.write();//輸出內容;

window.promet("");//提示輸入框

window.confirm();//確認信息框,返回值是布爾類型

if(window.confirm()){

alert("您點擊了肯定");

}else{

alert("您點擊了取消");

}

window.onload = function(){

 

} //網頁加載完成以後執行;

//通常當有要求將js寫在head中的時候,就要寫這個,避免因加載順序取不到元素;

 

 

定時器:

一次性定時器:

setTimeout(參數1,參數2);//參數1通常是函數,參數2 通常是時間單位毫秒;

setTimeout(function(){

 

},時間(毫秒));

循環定時器:

setIterval(參數1,參數2);//參數1通常是函數,參數2 通常是間隔執行參1的時間,單位毫秒;

var temer = setInterval(function(){

 

},間隔時間(毫秒));

爲了可以關閉定時器,通常在寫定時器的時候都要給定時器的返回值 付給一變量;

定時器的關閉:

cleatInterval(參數);//參數必定是一個定時器的返回值;

焦點事件:

onfocus //獲得焦點

onblur //失去焦點

//焦點事件通常就是表單用的比較多:表單元素.onfocus = function(){}

this關鍵字:觸發事件的自己就是this;

 

//如下對新窗口的操做都要讓新窗口獲取焦點( onfocus )

window.open(參數1,參數2,參數3);//該方法能夠在當前的窗口再打開一個指定大小和位置的新窗口;

//參數1:url 參數2:"窗口名" 參數3:窗口設置的字符串(值對之間逗號分開) ;

window.close() //關閉新窗口;

window.moveTo();//設置新窗口位置;

window.resizeTo(width,height);//設置新窗口寬高;

Location對象:

主機域名:window.location.hostname

當前頁面路徑:window.location.pathname

完整URL:window.location

 

方法:assign("url");//傳遞一個地址,根據地址跳轉;

 

reload() //刷新當前頁面;

function reloadPage(){

window.location.reload();

}

 

roSource(); //表示對象的源代碼,一般由JS自動後臺調用,不寫在代碼中(火狐不支持);

屬性:location.href = "url";//根據地址跳轉;

理解構造函數:

構造函數能夠建立指定類型的對象,原生構造函數在運行時會自動出如今運行環境中,

能夠建立自定義的構造函數,從而定義對象類型和方法;

構造函數自己也是函數,只是能夠用來創造對象;

按照慣例,構造函數始終以大寫字母開頭;

實例化一個對象時: var 實例化對象 = new 構造函數

Navigator對象:

瀏覽器名稱:

瀏覽器版本:

操做系統信息:

//以上的基本不用了,最新的瀏覽器都只要:

navigator.userAgent; //瀏覽器以及操做系統信息;

//在http協議的頭中,也會傳該信息;

 

screen 對象: //顯示屏幕

window.screen.width //寬

window.screen.height//高

window.screen.availWidth //可用寬(除去任務欄)

window.screen.availHeight//可用高(除去任務欄)

history對象:

屬性:history.length //是0就是新開的一個頁面

方法:history.go();//參數是-1 和 1 表明上一頁和下一頁;

滾動事件 ( onscroll ) :

兼容:

var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

var sctollTop = document.body.scrollTop || document.documentElement.scrollTop;

DOM中獲取元素的方法:

document.getElementById("id名");

document.getElementsByTagName("標籤名");//放到數組中

document.getElementsByClassName("class名");//放到數組中

document.getElementsByName("name名");//放到數組中,元素有name屬性才能夠取

 

document.querySelector("css選擇器");//只要第一個,IE8如下不支持;

document.querySelectorAll("css選擇器");// 找到全部,放到數組中,IE8如下不支持;

表達式的優先級:

小括號能夠改變優先級

算數(+) > 關係(==) > 邏輯(&&) > 賦值(=);

DOM樹:

節點:是包含了標籤,註釋,文本,doctype等在內的多種組合;

節點的屬性:nodeType 節點類型 返回值 : 1 2 3

nodeName 節點名稱

nodeValue 節點值

 

nodeType nodeName nodeValue

元素節點 1 大寫元素名(標籤名) null或者undefined

屬性節點 2 屬性值

文本節點 3 #text 文本自己

 

 

節點關係:

childNodes :元素的全部子節點(包含空格,回車,tab空白);

children :　元素的全部元素子節點,不包含文本節點;

firstChild : 元素的第一個子節點

lastChild :　　元素的最後一個子節點

 

parentNode: 元素的父親節點

 

nextSibling: 元素的下一個兄弟節點

previousSibling:元素的上一個兄弟節點

 

 

firstElementChild :元素的第一個子節點

lastElementChild : 元素的最後一個子節點

nextElementSibling:元素的下一個兄弟

previousElementsibling:元素的上一個兄弟

 

節點操做:

查 :就是獲取節點(dom中獲取元素的六種方法)

增長:增長分兩步,先建立,在加入

建立:createElement("屬性名");//建立屬性節點

createTextNode("");//建立文本節點

加 :父級元素.appendChild("創");//將創添加到父中;

父級元素.insertBefore("創","節點")//添加到父級的某節點前;

修改:父級.replaceChild("新的","舊的");//父級中舊的被新的替換;

刪除:父級.removeChild("節點");//刪除父級中的節點

刪.remove() //IE不支持;

克隆:節點.cloneNode(true);//克隆後再添加到新的節點中便可;

 

 

 

得到特定元素節點屬性的值:

某元素.getAttribute("屬性名");//得到末元素的某屬性的值---等價:某元素.屬性名

設置特定元素節點屬性的值:

某元素.setAttribute("屬性名","屬性值");//設置某元素的某屬性和對應的值---等價:某元素.某屬性 = 屬性值;

刪除特定元素節點的屬性值:

某元素.removeAttribute("屬性名");//刪除某元素的某屬性;----等價:某元素.某屬性 = "";

 

自定義屬性:

自定義屬性多用於懶加載圖片

按照慣例:data_屬性名 = 屬性值;

這時只能用Attribute才能取到;

 

獲取非行內樣式屬性和屬性值:

兼容:

if(某元素.currentStyle){

某元素.currentStyle.屬性名;

}else{

window.computedStyle("某元素","null").屬性名; //沒有僞類參數2就是null

}

偏移量:(相對於定位父級的)

offsetWidth: 元素在水平空間上佔用的大小(內容+邊框+內邊距)

offsetHight:元素在垂直空間上佔用的大小(內容+邊框+內邊距)

offsetTop:元素上邊界到父級元素上邊界

offsetLeft:元素左邊界到父級元素左邊界

offsetParent:參照物爲父級元素

 

事件:是對用戶操做的響應,用於處理表單驗證等,事件一般和函數結合使用,函數不會再事件發生前執行;

例如:

用戶點擊:onclick ondbclick

驗證用戶輸入合法性:onsubmit

窗口滾動:onscroll

頁面大小改變:onresize

 

 

事件對象:event是事件中的一個隱含元素,能夠經過arguments[0]來獲取;

在觸發一個DOM事件時,就會產生一個event對象,它包含着事件的全部信息,例如鼠標位置,鍵盤按下等

阻止默認事件(兼容): //例如右鍵 菜單 (oncontextmenu)

if(event.preventDefault){

event.preventDefault();

}else{

return false;

}

 

阻止事件冒泡(兼容): //例如右鍵 菜單 中li的點擊和 點擊其餘地方 ul 消失;

if(event.stopPropagation){

event.stopProragation();

}else{

event.cancelBubble = true;

}

 

 

 

事件綁定:標籤直接綁定------< input type="button" onclick= "func()">

script中:onclick = function(){}

addeEventListener("click",functon(){}, false/true);

第一個參數,事件名沒有on,

第二個參數可能是函數,若是不是匿名函數,只寫函數名,沒有小括號,

第三個參數,都false冒泡(冒泡就是從子級元素向父級執行) 都true 捕獲(捕獲機制就是從父級元素向本身元素執行)

若是多個一個事件綁定多個函數,誰true先執行誰,都true先父級,都false就冒泡;

 

鍵盤事件:

獲取鍵盤編碼:event.keyCode //每次只能存一個值

onkeydown 鍵盤按下

onkeypress 鍵盤一直按着

onkeuup 鍵盤松開

 

鍵盤的組合功能鍵:

ctrl shift alt 是特殊的按鍵

按下ctrl event.ctrlKey 返回true;

按下shift event.shiftKey 返回true;

按下alt event.altKey 返回true;

因此組合鍵的斷定:

 

if(event.keyCode == 按鍵編碼 && event.ctrlKye){}//同事按下Ctrl和一個按鍵,纔會執行;

 

鼠標事件:

onclick 左鍵單擊

ondbclick 左鍵雙擊

oncontextmenu 右鍵單擊

onmousedown 左鍵按下

onmouseup 左鍵送開

onmusemove 鼠標移動

onmouseover 鼠標移入

onmouseout 鼠標移出

 

能夠經過event對象,得到鼠標座標:

event.offsetX //相對於事件源的 對象的偏移量 就是元素相對座標;

event.offsetY //

event.clientX //可視區的位置 ,就是瀏覽器座標

event.clientY //

event.offsetWidth //內容+padding+border(除去margin)

event.offsetHeight//

event.clientWidth //內容+padding

event.clientHeight//

event.screenX //屏幕的座標 (用的少)

even.screenY //

event.pageX //頁面的座標

event.pageY //

 

 

事件監聽;addEventListener("dbclick",函數, false);//默認false (冒泡)

捕獲機制/冒泡:捕獲就是父向子,冒泡就是子向父;

 

事件委託; 就是利用冒泡機制,將事件添加到父級元素上,而後經過event.target();找到所對應的實際目標對象,提升效率;

 

cookie:

構成:名稱; 值; 域(有默認); 失效時間(有默認); 安全標誌(有默認); path(有默認);

寫法:分號和空格 分隔每一段cookie;

讀寫不直觀,因此調用cookie,js(本身寫的)

工做中的cookie都是規定好後直接拿來用的JS文件;

客戶端存儲用戶信息能力的要求，屬於某個特定用戶的信息應該存在該用戶的機器上，例如登錄信息、偏好設置等等,簡單說cookie就是在客戶端存儲數據的一種選項

 

 

 

兼容整理:

event||window.event(獲取event對象，兼容IE老版本)

stopPropagation||cancelBubble = true(阻止事件冒泡，兼容IE老版本)

preventDefault()||return false(阻止默認事件，兼容IE)

window.getComputedStyle("","")||currentStyle(獲取非行內樣式，兼容IE)

document.documentElement.scrollTop()||document.body.scrollTop(onscroll,兼容的是谷歌)

addeventListener("click",function(){},false/ture)方法||attachEvent("onclick",function(){})(事件監聽器的兼容IE寫法,執行順序按照綁定順序的反序進行執行)

正則:

var reUser = /^[a-zA-Z_]\w{5,14}$/;//用戶名

var rePhone = /^1[3,4,5,7,8]\d{9}$/;//手機號

var reIdcard = /^\d{17}(\d|X)$/;//身份證

var reString = /[\u4e00-\u9fa5]+/g;//找中文

var reGang = /(\/{1,})/g;//找 / 或//