JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)的客戶端腳本語(yǔ)言

組成: ECMAScript---------------標(biāo)準(zhǔn)語(yǔ)法 Bom(browser Object Model) Dom(document)-------瀏覽器提供的擴(kuò)充 API : application programming interface 應(yīng)用程序接口 js引入,內(nèi)部和外部,最好都放到body里的</body>標(biāo)簽前; 外部:<script src="" > </script>-----可維護(hù)性高,可緩存的;放在head和body中也可以,但是考慮加載順序 document.write()方法,將html內(nèi)容輸出到瀏覽器窗口,所以在document.write()中換行就是<br/> 變量:聲明一個(gè)變量用var來(lái)聲明 ------var 變量名 = 初始化值; js 是弱類型語(yǔ)言,定義時(shí)不聲明變量類型; js的五種基本數(shù)據(jù)類型:字符串String,整數(shù)Number,布爾型Boolean,null,undefined 從邏輯上看,null值表示一個(gè)空對(duì)象指針,所以類型是object 變量在定義時(shí)可以使用逗號(hào)一次性定義多個(gè)變量,變量命名也就是標(biāo)識(shí)符的命名規(guī)則; 標(biāo)識(shí)符包括變量,函數(shù),屬性的名字,最好見(jiàn)名知意,小寫字母開(kāi)頭,不能有空格,不能是關(guān)鍵字,不能是保留字,區(qū)分大小寫; 駝峰命名法 alert() 提示框, document提供的方法,所以換行就是"/n";alert只接收字符串作為參數(shù),自動(dòng)調(diào)用toString()方法轉(zhuǎn)換; 字符串類型的變量定義可以用""也可以用''; console.log();方法是在控制臺(tái)輸出結(jié)果,chrome瀏覽器的控制臺(tái)輸出,會(huì)自動(dòng)提供換行; 字符串拼接:+ 轉(zhuǎn)型函數(shù): 布爾型---Boolean();返回值就是true和false; 字符串返回true ,空串返回false; 數(shù)值0返回false ,其他返回true; null型返回false;undefined返回false ; float,型由于精度問(wèn)題,計(jì)算不是精確計(jì)算,true為1,false為0; 數(shù)值型----parseFloat();返回值是浮點(diǎn)型數(shù)值; 解析一個(gè)字符串,返回一個(gè)浮點(diǎn)型數(shù)值; 數(shù)值型----parseInt();返回值是整型數(shù)值,true為1,false為0; 解析一個(gè)字符串,返回一個(gè)整形的數(shù)值; 解析時(shí)候,參數(shù)如是0開(kāi)頭的數(shù)值,會(huì)按照8進(jìn)制轉(zhuǎn) 解析時(shí)候,參數(shù)如果是0開(kāi)頭的字符串,0就會(huì)被忽略; 解析時(shí)候,參數(shù)如果是ox開(kāi)頭的數(shù)值,就會(huì)按照16進(jìn)制進(jìn)行轉(zhuǎn)換數(shù)值;(A~F是10~15); 顯示類型轉(zhuǎn)換: .toString()方法,強(qiáng)制類型轉(zhuǎn)換,轉(zhuǎn)為字符串,對(duì)于null和undefined,無(wú)法轉(zhuǎn)換,要用String()函數(shù) 對(duì)象: Object(),創(chuàng)建一個(gè)對(duì)象要用new關(guān)鍵字,它是一組數(shù)據(jù)和功能的集合;創(chuàng)建后可以為它添加屬性和方法 算數(shù)運(yùn)算符: +:只要出現(xiàn)了字符串,就會(huì)變成字符串拼接; - * / %:調(diào)用Number()轉(zhuǎn)化; 賦值操作: 就是將右邊的值,給 左邊的 變量; 簡(jiǎn)單的賦值操作符: = 復(fù)合賦值操作符: += -= *= /= %= (i += 1; 就是 i=i+1); 布爾操作符: ! && || 邏輯&&: 都真才為真,如果第一個(gè)為假,那么就不判斷第二個(gè)元素,一定是假; 邏輯||:只要一個(gè)為真,就為真,第一個(gè)為真,就不判斷第二個(gè)元素,一定為真; 邏輯 !:就是取反 if語(yǔ)句: if(){} if(){}else{} if(){}else if(){} else if(){} else{} switch case : switch (條件): case 0: .....(每一個(gè)case后要有break;) case穿透; 條件可以為true,case中可以寫判斷式; 關(guān)系操作符: > < >= <= 比較規(guī)則: 都是字符串就比較字符串編碼 一個(gè)是數(shù)值,另一就會(huì)轉(zhuǎn)化為數(shù)值 布爾值轉(zhuǎn)換為數(shù)值,true為1,false為0; 相等性關(guān)系: == 相等 != 不等: 如果比較類型相同:返回值為布爾值,相等返回true,不等返回false 如果比較類型不同:轉(zhuǎn)換后再比較 一個(gè)布爾時(shí),布爾轉(zhuǎn)為數(shù)值; 一個(gè)數(shù)值,一個(gè)字符串,字符轉(zhuǎn)為數(shù)值; null和undefined是相等的; null和undefined不轉(zhuǎn)換; 只要有NaN就不等; 全等性關(guān)系: ==== 全等 !== 不全等 : 不僅要比較類型,還要比較值; 循環(huán): for(var i = 0; i小于循環(huán)條件;i++){ 循環(huán)體; } //常用于知道循環(huán)次數(shù)的循環(huán); while(循環(huán)條件){ 循環(huán)體; 自增條件; }//常用于不知道循環(huán)次數(shù)的循環(huán); break:跳出整個(gè)循環(huán) continue:跳出本次循環(huán),繼續(xù)程序 死循環(huán): 由于編程錯(cuò)誤,使得其自身無(wú)法控制終止的程序; 由于需要,希望程序一直執(zhí)行,當(dāng)達(dá)到某一特定要求才終止循環(huán)的情況下; 瀏覽器調(diào)試:(debug) sources 里查看,可以設(shè)置斷點(diǎn),想要觀察的變量可以右鍵Add watch,刷新后,點(diǎn)擊下一步,一步一步看執(zhí)行; 函數(shù): 可以重用的代碼塊(分為自定義函數(shù),內(nèi)置函數(shù)) 函數(shù)的聲明:function 函數(shù)名(參數(shù)1,參數(shù)2){ 函數(shù)體; } 函數(shù)可以沒(méi)有名字,我們稱為匿名函數(shù) 函數(shù)可以沒(méi)有參數(shù) 函數(shù)的調(diào)用------函數(shù)名(實(shí)際參數(shù)1,實(shí)際參數(shù)2); 理解參數(shù):函數(shù)的參數(shù)不介意傳進(jìn)來(lái)多少個(gè),也不介意傳進(jìn)來(lái)的數(shù)據(jù)類型, 也就是說(shuō)定義的時(shí)候是要傳進(jìn)來(lái)兩個(gè)參數(shù),但是在調(diào)用的時(shí)候也未必一定要傳進(jìn)來(lái)兩個(gè)參數(shù), 可以是一個(gè),也可以是三個(gè);參數(shù)的內(nèi)部是直接存在一個(gè)數(shù)組中的,所以, 我們?cè)谠L問(wèn)時(shí),可以通過(guò)arguments對(duì)象取得傳遞給函數(shù)的每一個(gè)參數(shù); 局部變量 和 全局變量: 優(yōu)先級(jí):局部 大于 全局 ; 如果一個(gè)函數(shù)內(nèi)定義一個(gè)變量,沒(méi)有添加var來(lái)聲明,那么系統(tǒng)自認(rèn)為這個(gè)變量是全局變量; 隨機(jī)數(shù): function randomNum(min, max){ return Math.floor(Math.random()*(max-min+1)+ min); } 事件驅(qū)動(dòng):1獲取元素,2綁定事件 事件:onclick 鼠標(biāo)點(diǎn)擊事件 ondblclick 鼠標(biāo)雙擊事件 onmouseover 鼠標(biāo)移入 onmouseout 鼠標(biāo)移出 onmouseenter onmouseleave 遞歸函數(shù):函數(shù)通過(guò)名字調(diào)用自己的情況; 數(shù)組: 一組數(shù)組的有序列表,每一項(xiàng)可以保存任何類型的數(shù)據(jù); 數(shù)組的長(zhǎng)度是可以動(dòng)態(tài)調(diào)整; 數(shù)組長(zhǎng)度:數(shù)組名.length; 創(chuàng)建:var 數(shù)組名 = new Array[]; var 數(shù)組名 = []; 添加:數(shù)組名[位置下標(biāo)]= ""; 數(shù)組名.push(a"");從數(shù)組的最后一個(gè)位置添加元素"a"; 數(shù)組名.unshift("a");從數(shù)組的第一個(gè)位置添加元素"a"; 數(shù)組名.concat(參數(shù)1,參數(shù)2....)方法;基于當(dāng)前數(shù)組創(chuàng)建一個(gè)新數(shù)組; 作用是合并,可以合并兩個(gè)或多個(gè)數(shù)組,如果是一個(gè)值,就會(huì)添加到新數(shù)組 如果是一個(gè)或者多個(gè)數(shù)組,那么參數(shù)數(shù)組中的 每一項(xiàng)都會(huì)添加到新數(shù)組中 刪除:數(shù)組名.pop(a"");從數(shù)組的最后一個(gè)位置刪除元素"a"; 數(shù)組名.shift("a");從數(shù)組的第一個(gè)位置刪除元素"a"; 轉(zhuǎn)串:數(shù)組名.join("")方法就是將數(shù)組里的每一項(xiàng)按照字符連接組成一個(gè)新的字符串; 排序:數(shù)組名.sort()方法;就是數(shù)組的排序: 升序:數(shù)組名.sort(function(a,b){return a-b;}); 降序:數(shù)組名.sort(function(a,b){return b-a;}); 反序:數(shù)組名.reverse()方法;數(shù)組反序 查找:數(shù)組名.indexOf("a")方法;從數(shù)組第一個(gè)元素開(kāi)始查找a,并返回下標(biāo)值;找不到返回-1; 數(shù)組名.indexOf(a,b)方法;從數(shù)組的地a+1個(gè)元素開(kāi)始查找b,并返回找到的元素的下小標(biāo) 數(shù)組名.lastIndexOf("a")方法;從數(shù)組的最后一個(gè)元素查找a,并返回下標(biāo)值;找不到返回-1; 截取:數(shù)組名.slice()方法;截取數(shù)組得到一個(gè)字?jǐn)?shù)組,接受一個(gè)或者兩個(gè)參數(shù) 一個(gè)參數(shù)就是從參數(shù)的位置到最后截取, 兩個(gè)參數(shù)就是從參數(shù)1取到參數(shù)2,不含參數(shù)2; 接受負(fù)數(shù)參數(shù),負(fù)數(shù)就是從數(shù)組的最后項(xiàng)找位置截取; 數(shù)組名.splice()方法;可以實(shí)現(xiàn)數(shù)組的添加刪除和截取;參數(shù)接受兩個(gè),三個(gè)或者多個(gè),接受負(fù)數(shù)參數(shù); String對(duì)象:是字符串的對(duì)象類型,可以用構(gòu)造函數(shù)來(lái)創(chuàng)建; 創(chuàng)建:var str = new String("內(nèi)容"); var str1= "內(nèi)容"; //基本都這么創(chuàng)建,因?yàn)榛绢愋偷淖址部梢杂肧tring的方法; 方法: 查找: 字符串.charAt() 方法;返回給定位置的字符; 字符串.charCodeAt()方法;返回給定位置的字符的編碼;//與String.fromCharCode()相反的方法; String.fromCharCode()方法;靜態(tài)方法,接收字符編碼,轉(zhuǎn)成字符串; 字符串.indexOf("a")方法;返回a在字符串中第一次出現(xiàn)的位置下標(biāo);如果找不到返回-1; 字符串.lastIndexOf("a")方法;返回a在字符串中最后一次出現(xiàn)的位置下標(biāo);如果找不到返回-1; 添加: 字符串.concat("a","b","c".....)方法;不改變?cè)?生成在原有串上添加的新串;多用于多個(gè)字符串的拼接; 加號(hào) + 字符串的拼接 //最長(zhǎng)用; 取子串: 字符串.substring(x)方法;截取下標(biāo)x開(kāi)始到字符串結(jié)尾的子串,不改變?cè)? 字符串.substring(x,y)方法;截取字符串下標(biāo)x到y(tǒng)的子串,含x不含y,不改變?cè)? 字符串.slice(x);截取下標(biāo)x開(kāi)始到字符串結(jié)尾的子串,不改變?cè)? 字符串.slice(x,y);截取字符串下標(biāo)x到y(tǒng)的子串,含x不含y,不改變?cè)? 字符串.substr(x);截取下標(biāo)x開(kāi)始到字符串結(jié)尾的子串,不改變?cè)? 字符串.substr(x,y);截取字符串下標(biāo)x開(kāi)始,后面的y個(gè);不改變?cè)? 去空格:字符串.trim()方法;去掉字符串頭和尾的空格; 字符串.trimLeft()方法;去掉字符串最左邊的空格; 字符串.trimRight()方法;去掉字符串最右邊的空格; 分割:根據(jù)分割符將字符串拆分成數(shù)組;不改變?cè)? 字符串.solid("原字符串中有規(guī)律的字符"); //找不到 原字符串中有規(guī)律的字符 返回1; 大小寫轉(zhuǎn)換: 字符串.toLowerCase()方法;轉(zhuǎn)換為小寫; 字符串.toUpperCase()方法;轉(zhuǎn)換為大寫; 替換:字符串.replace();接受一個(gè)或兩個(gè)參數(shù),一個(gè)參數(shù)是從下標(biāo)參數(shù)到最后,兩個(gè)參數(shù)是參數(shù)2替換參數(shù)1字符串; 保留小數(shù)位:字符串.toFixed(s);保留小數(shù)后s位; Math對(duì)象:該對(duì)象的方法都是靜態(tài)方法,數(shù)學(xué)公式和信息,與自己編寫的方法相比較,Math提供的方法效率更加高; 屬性: .PI 就是數(shù)學(xué)里的圓周率π 方法:Math.random() 隨機(jī)數(shù)0~1 Math.min(x,y);x y 返回最小值; Math.max(x,y);x y 返回最大值; Math.ceil(a) ;a向上取整,取最大整數(shù); Math.round(a);a數(shù)學(xué)四舍五入取整; Math.floor(a);a向下取整,取最小整數(shù);//通?？紤]到效率問(wèn)題,用該方法代替parseInt()取整方法; Math.ads(a);返回a的絕對(duì)值; Math.sqrt(a);a開(kāi)平方; Math.pow(a,n);a的n次方; Date()對(duì)象:ECMAScript中的日期是在1970年1月1日午夜零時(shí)開(kāi)始經(jīng)過(guò)的毫秒數(shù)保存時(shí)間的; 創(chuàng)建: var 變量名 = new Date(); Date()系統(tǒng)當(dāng)前時(shí)間,在傳參時(shí),會(huì)自動(dòng)調(diào)用Date類型的toString()方法; var d = new Date(年,月,日); d Date類型 方法:在方法使用前,都要new一個(gè)Date對(duì)象,才能使用; Date對(duì)象.getFullYear(); 獲得年份; Date對(duì)象.getMonth(); 獲得月份; Date對(duì)象.getDate(); 獲得日期; Date對(duì)象.getHours(); 獲得小時(shí)數(shù); Date對(duì)象.getMinutes(); 獲得分鐘數(shù); Date對(duì)象.getSeconds(); 獲得秒數(shù);//一秒 = 1000毫秒; Date對(duì)象.setFullYear();設(shè)置年份; Date對(duì)象.setMonth();設(shè)置月份; Date對(duì)象.setDay();設(shè)置日期; Date對(duì)象.setHours();設(shè)置小時(shí)數(shù); Date對(duì)象.setMinutes();設(shè)置分鐘; Date對(duì)象.setSeconds();設(shè)置秒數(shù); Date.now() //當(dāng)前時(shí)間的毫秒數(shù); Date對(duì)象.parse(2016,8,23)//將日期20160823轉(zhuǎn)成距離1970年1月1日的毫秒數(shù); getTime();獲取指定日期的毫秒數(shù) setTime();根據(jù)指定毫秒數(shù),設(shè)置或者修改日期; 串和數(shù)組的轉(zhuǎn)換: 將數(shù)組轉(zhuǎn)成字符串:arr.join("符號(hào)");//每個(gè)字符串之間用符號(hào)分隔 將字符串轉(zhuǎn)成數(shù)組:str.split("符號(hào)");//字符串中以字符規(guī)律,分隔成數(shù)組元素; DOM:(document object model)文檔對(duì)象類型; 注意: 標(biāo)簽.innerHTML =" " ; :寫入內(nèi)容到輸出標(biāo)簽內(nèi),可以直接寫入html標(biāo)簽; 頂層對(duì)象:window: window.screen 屏幕對(duì)象 window.location 地址欄對(duì)象 window.history 歷史記錄對(duì)象 window.navigator 瀏覽器對(duì)象 方法: window.alert();//alert();//只接收字符串參數(shù);不是會(huì)調(diào)用toString()方法; window.document.write();//輸出內(nèi)容; window.promet("");//提示輸入框 window.confirm();//確認(rèn)信息框,返回值是布爾類型 if(window.confirm()){ alert("您點(diǎn)擊了確定"); }else{ alert("您點(diǎn)擊了取消"); } window.onload = function(){ } //網(wǎng)頁(yè)加載完成之后執(zhí)行; //一般當(dāng)有要求將js寫在head中的時(shí)候,就要寫這個(gè),避免因加載順序取不到元素; 定時(shí)器: 一次性定時(shí)器: setTimeout(參數(shù)1,參數(shù)2);//參數(shù)1一般是函數(shù),參數(shù)2 一般是時(shí)間單位毫秒; setTimeout(function(){ },時(shí)間(毫秒)); 循環(huán)定時(shí)器: setIterval(參數(shù)1,參數(shù)2);//參數(shù)1一般是函數(shù),參數(shù)2 一般是間隔執(zhí)行參1的時(shí)間,單位毫秒; var temer = setInterval(function(){ },間隔時(shí)間(毫秒)); 為了能夠關(guān)閉定時(shí)器,一般在寫定時(shí)器的時(shí)候都要給定時(shí)器的返回值 付給一變量; 定時(shí)器的關(guān)閉: cleatInterval(參數(shù));//參數(shù)一定是一個(gè)定時(shí)器的返回值; 焦點(diǎn)事件: onfocus //得到焦點(diǎn) onblur //失去焦點(diǎn) //焦點(diǎn)事件一般就是表單用的比較多:表單元素.onfocus = function(){} this關(guān)鍵字:觸發(fā)事件的本身就是this; //以下對(duì)新窗口的操作都要讓新窗口獲取焦點(diǎn)( onfocus ) window.open(參數(shù)1,參數(shù)2,參數(shù)3);//該方法可以在當(dāng)前的窗口再打開(kāi)一個(gè)指定大小和位置的新窗口; //參數(shù)1:url 參數(shù)2:"窗口名" 參數(shù)3:窗口設(shè)置的字符串(值對(duì)之間逗號(hào)分開(kāi)) ; window.close() //關(guān)閉新窗口; window.moveTo();//設(shè)置新窗口位置; window.resizeTo(width,height);//設(shè)置新窗口寬高; Location對(duì)象: 主機(jī)域名:window.location.hostname 當(dāng)前頁(yè)面路徑:window.location.pathname 完整URL:window.location 方法:assign("url");//傳遞一個(gè)地址,根據(jù)地址跳轉(zhuǎn); reload() //刷新當(dāng)前頁(yè)面; function reloadPage(){ window.location.reload(); } roSource(); //表示對(duì)象的源代碼,通常由JS自動(dòng)后臺(tái)調(diào)用,不寫在代碼中(火狐不支持); 屬性:location.href = "url";//根據(jù)地址跳轉(zhuǎn); 理解構(gòu)造函數(shù): 構(gòu)造函數(shù)可以創(chuàng)建指定類型的對(duì)象,原生構(gòu)造函數(shù)在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在運(yùn)行環(huán)境中, 可以創(chuàng)建自定義的構(gòu)造函數(shù),從而定義對(duì)象類型和方法; 構(gòu)造函數(shù)本身也是函數(shù),只是可以用來(lái)創(chuàng)造對(duì)象; 按照慣例,構(gòu)造函數(shù)始終以大寫字母開(kāi)頭; 實(shí)例化一個(gè)對(duì)象時(shí): var 實(shí)例化對(duì)象 = new 構(gòu)造函數(shù) Navigator對(duì)象: 瀏覽器名稱: 瀏覽器版本: 操作系統(tǒng)信息: //以上的基本不用了,最新的瀏覽器都只要: navigator.userAgent; //瀏覽器以及操作系統(tǒng)信息; //在http協(xié)議的頭中,也會(huì)傳該信息; screen 對(duì)象: //顯示屏幕 window.screen.width //寬 window.screen.height//高 window.screen.availWidth //可用寬(除去任務(wù)欄) window.screen.availHeight//可用高(除去任務(wù)欄) history對(duì)象: 屬性:history.length //是0就是新開(kāi)的一個(gè)頁(yè)面 方法:history.go();//參數(shù)是-1 和 1 代表上一頁(yè)和下一頁(yè); 滾動(dòng)事件 ( onscroll ) : 兼容: var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var sctollTop = document.body.scrollTop || document.documentElement.scrollTop; DOM中獲取元素的方法: document.getElementById("id名"); document.getElementsByTagName("標(biāo)簽名");//放到數(shù)組中 document.getElementsByClassName("class名");//放到數(shù)組中 document.getElementsByName("name名");//放到數(shù)組中,元素有name屬性才可以取 document.querySelector("css選擇器");//只要第一個(gè),IE8以下不支持; document.querySelectorAll("css選擇器");// 找到所有,放到數(shù)組中,IE8以下不支持; 表達(dá)式的優(yōu)先級(jí): 小括號(hào)可以改變優(yōu)先級(jí) 算數(shù)(+) > 關(guān)系(==) > 邏輯(&&) > 賦值(=); DOM樹(shù): 節(jié)點(diǎn):是包含了標(biāo)簽,注釋,文本,doctype等在內(nèi)的多種組合; 節(jié)點(diǎn)的屬性:nodeType 節(jié)點(diǎn)類型 返回值 : 1 2 3 nodeName 節(jié)點(diǎn)名稱 nodeValue 節(jié)點(diǎn)值 nodeType nodeName nodeValue 元素節(jié)點(diǎn) 1 大寫元素名(標(biāo)簽名) null或者undefined 屬性節(jié)點(diǎn) 2 屬性值 文本節(jié)點(diǎn) 3 #text 文本本身 節(jié)點(diǎn)關(guān)系: childNodes :元素的所有子節(jié)點(diǎn)(包含空格,回車,tab空白); children :　元素的所有元素子節(jié)點(diǎn),不包含文本節(jié)點(diǎn); firstChild : 元素的第一個(gè)子節(jié)點(diǎn) lastChild :　　元素的最后一個(gè)子節(jié)點(diǎn) parentNode: 元素的父親節(jié)點(diǎn) nextSibling: 元素的下一個(gè)兄弟節(jié)點(diǎn) previousSibling:元素的上一個(gè)兄弟節(jié)點(diǎn) firstElementChild :元素的第一個(gè)子節(jié)點(diǎn) lastElementChild : 元素的最后一個(gè)子節(jié)點(diǎn) nextElementSibling:元素的下一個(gè)兄弟 previousElementsibling:元素的上一個(gè)兄弟 節(jié)點(diǎn)操作: 查 :就是獲取節(jié)點(diǎn)(dom中獲取元素的六種方法) 增加:增加分兩步,先創(chuàng)建,在加入 創(chuàng)建:createElement("屬性名");//創(chuàng)建屬性節(jié)點(diǎn) createTextNode("");//創(chuàng)建文本節(jié)點(diǎn) 加 :父級(jí)元素.appendChild("創(chuàng)");//將創(chuàng)添加到父中; 父級(jí)元素.insertBefore("創(chuàng)","節(jié)點(diǎn)")//添加到父級(jí)的某節(jié)點(diǎn)前; 修改:父級(jí).replaceChild("新的","舊的");//父級(jí)中舊的被新的替換; 刪除:父級(jí).removeChild("節(jié)點(diǎn)");//刪除父級(jí)中的節(jié)點(diǎn) 刪.remove() //IE不支持; 克隆:節(jié)點(diǎn).cloneNode(true);//克隆后再添加到新的節(jié)點(diǎn)中即可; 獲得特定元素節(jié)點(diǎn)屬性的值: 某元素.getAttribute("屬性名");//獲得末元素的某屬性的值---等價(jià):某元素.屬性名 設(shè)置特定元素節(jié)點(diǎn)屬性的值: 某元素.setAttribute("屬性名","屬性值");//設(shè)置某元素的某屬性和對(duì)應(yīng)的值---等價(jià):某元素.某屬性 = 屬性值; 刪除特定元素節(jié)點(diǎn)的屬性值: 某元素.removeAttribute("屬性名");//刪除某元素的某屬性;----等價(jià):某元素.某屬性 = ""; 自定義屬性: 自定義屬性多用于懶加載圖片 按照慣例:data_屬性名 = 屬性值; 這時(shí)只能用Attribute才能取到; 獲取非行內(nèi)樣式屬性和屬性值: 兼容: if(某元素.currentStyle){ 某元素.currentStyle.屬性名; }else{ window.computedStyle("某元素","null").屬性名; //沒(méi)有偽類參數(shù)2就是null } 偏移量:(相對(duì)于定位父級(jí)的) offsetWidth: 元素在水平空間上占用的大小(內(nèi)容+邊框+內(nèi)邊距) offsetHight:元素在垂直空間上占用的大小(內(nèi)容+邊框+內(nèi)邊距) offsetTop:元素上邊界到父級(jí)元素上邊界 offsetLeft:元素左邊界到父級(jí)元素左邊界 offsetParent:參照物為父級(jí)元素 事件:是對(duì)用戶操作的響應(yīng),用于處理表單驗(yàn)證等,事件通常和函數(shù)結(jié)合使用,函數(shù)不會(huì)再事件發(fā)生前執(zhí)行; 例如: 用戶點(diǎn)擊:onclick ondbclick 驗(yàn)證用戶輸入合法性:onsubmit 窗口滾動(dòng):onscroll 頁(yè)面大小改變:onresize 事件對(duì)象:event是事件中的一個(gè)隱含元素,可以通過(guò)arguments[0]來(lái)獲取; 在觸發(fā)一個(gè)DOM事件時(shí),就會(huì)產(chǎn)生一個(gè)event對(duì)象,它包含著事件的所有信息,例如鼠標(biāo)位置,鍵盤按下等 阻止默認(rèn)事件(兼容): //例如右鍵 菜單 (oncontextmenu) if(event.preventDefault){ event.preventDefault(); }else{ return false; } 阻止事件冒泡(兼容): //例如右鍵 菜單 中l(wèi)i的點(diǎn)擊和 點(diǎn)擊其他地方 ul 消失; if(event.stopPropagation){ event.stopProragation(); }else{ event.cancelBubble = true; } 事件綁定:標(biāo)簽直接綁定------< input type="button" οnclick= "func()"> script中:onclick = function(){} addeEventListener("click",functon(){}, false/true); 第一個(gè)參數(shù),事件名沒(méi)有on, 第二個(gè)參數(shù)多是函數(shù),如果不是匿名函數(shù),只寫函數(shù)名,沒(méi)有小括號(hào), 第三個(gè)參數(shù),都false冒泡(冒泡就是從子級(jí)元素向父級(jí)執(zhí)行) 都true 捕獲(捕獲機(jī)制就是從父級(jí)元素向自己元素執(zhí)行) 如果多個(gè)一個(gè)事件綁定多個(gè)函數(shù),誰(shuí)true先執(zhí)行誰(shuí),都true先父級(jí),都false就冒泡; 鍵盤事件: 獲取鍵盤編碼:event.keyCode //每次只能存一個(gè)值 onkeydown 鍵盤按下 onkeypress 鍵盤一直按著 onkeuup 鍵盤松開(kāi) 鍵盤的組合功能鍵: ctrl shift alt 是特殊的按鍵 按下ctrl event.ctrlKey 返回true; 按下shift event.shiftKey 返回true; 按下alt event.altKey 返回true; 所以組合鍵的判定: if(event.keyCode == 按鍵編碼 && event.ctrlKye){}//同事按下Ctrl和一個(gè)按鍵,才會(huì)執(zhí)行; 鼠標(biāo)事件: onclick 左鍵單擊 ondbclick 左鍵雙擊 oncontextmenu 右鍵單擊 onmousedown 左鍵按下 onmouseup 左鍵送開(kāi) onmusemove 鼠標(biāo)移動(dòng) onmouseover 鼠標(biāo)移入 onmouseout 鼠標(biāo)移出 可以通過(guò)event對(duì)象,獲得鼠標(biāo)坐標(biāo): event.offsetX //相對(duì)于事件源的 對(duì)象的偏移量 就是元素相對(duì)坐標(biāo); event.offsetY // event.clientX //可視區(qū)的位置 ,就是瀏覽器坐標(biāo) event.clientY // event.offsetWidth //內(nèi)容+padding+border(除去margin) event.offsetHeight// event.clientWidth //內(nèi)容+padding event.clientHeight// event.screenX //屏幕的坐標(biāo) (用的少) even.screenY // event.pageX //頁(yè)面的坐標(biāo) event.pageY // 事件監(jiān)聽(tīng);addEventListener("dbclick",函數(shù), false);//默認(rèn)false (冒泡) 捕獲機(jī)制/冒泡:捕獲就是父向子,冒泡就是子向父; 事件委托; 就是利用冒泡機(jī)制,將事件添加到父級(jí)元素上,然后通過(guò)event.target();找到所對(duì)應(yīng)的實(shí)際目標(biāo)對(duì)象,提高效率; cookie: 構(gòu)成:名稱; 值; 域(有默認(rèn)); 失效時(shí)間(有默認(rèn)); 安全標(biāo)志(有默認(rèn)); path(有默認(rèn)); 寫法:分號(hào)和空格 分隔每一段cookie; 讀寫不直觀,所以調(diào)用cookie,js(自己寫的) 工作中的cookie都是規(guī)定好后直接拿來(lái)用的JS文件; 客戶端存儲(chǔ)用戶信息能力的要求，屬于某個(gè)特定用戶的信息應(yīng)該存在該用戶的機(jī)器上，例如登陸信息、偏好設(shè)置等等,簡(jiǎn)單說(shuō)cookie就是在客戶端存儲(chǔ)數(shù)據(jù)的一種選項(xiàng) 兼容整理: event||window.event(獲取event對(duì)象，兼容IE老版本) stopPropagation||cancelBubble = true(阻止事件冒泡，兼容IE老版本) preventDefault()||return false(阻止默認(rèn)事件，兼容IE) window.getComputedStyle("","")||currentStyle(獲取非行內(nèi)樣式，兼容IE) document.documentElement.scrollTop()||document.body.scrollTop(onscroll,兼容的是谷歌) addeventListener("click",function(){},false/ture)方法||attachEvent("onclick",function(){})(事件監(jiān)聽(tīng)器的兼容IE寫法,執(zhí)行順序按照綁定順序的反序進(jìn)行執(zhí)行) 正則: var reUser = /^[a-zA-Z_]\w{5,14}$/;//用戶名 var rePhone = /^1[3,4,5,7,8]\d{9}$/;//手機(jī)號(hào) var reIdcard = /^\d{17}(\d|X)$/;//身份證 var reString = /[\u4e00-\u9fa5]+/g;//找中文 var reGang = /(\/{1,})/g;//找 / 或//

轉(zhuǎn)載于:https://www.cnblogs.com/lzm1989/p/6293203.html

總結(jié)

以上是生活随笔為你收集整理的原生javascript的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。