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" ο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寫法,執行順序按照綁定順序的反序進行執行)
