[巧克力變成巧克力之前都是苦的] 原生 J S

• JavaScript是一種基於物件和事件驅動的客戶端指令碼語言

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

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

• API : application programming interface 應用程式介面

• js引入,內部和外部,最好都放到body裡的標籤前;

• 外部:-----可維護性高,可快取的;放在head和body中也可以,但是考慮載入順序

• document.write()方法,將html內容輸出到瀏覽器視窗,所以在document.write()中換行就是
  

• 變數:宣告一個變數用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是1015);

• 顯示型別轉換:
  .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” οnclick= “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寫法,執行順序按照繫結順序的反序進行執行)