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寫法,執行順序按照綁定順序的反序進行執行) 正則: 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;//找 / 或//

轉載于:https://www.cnblogs.com/yuejie/p/5979704.html

總結

以上是生活随笔為你收集整理的原生js随笔的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。