JS

JavaScript:    --> 嚴格區分大小寫 1、什麼是JavaScript？ 是web上一種功能強大的編程語言，用於開發交互式的web頁面 · JavaScript 被設計用來向 HTML 頁面添加交互行爲。  · JavaScript 是一種腳本語言（腳本語言是一種輕量級的編程語言）。  · JavaScript 由數行可執行計算機代碼組成。  · JavaScript 通常被直接嵌入 HTML 頁面。  · JavaScript 是一種解釋性語言（就是說，代碼執行不進行預編譯）。  · 所有的人無需購買許可證均可使用 JavaScript。 HTML：整個網頁的骨架； CSS：對整個網頁骨架的內容進行修飾（美化） JavaScript：實現動態的效果   1、內嵌方式：只能使用一次，並且只作用於當前元素； alert彈窗：  alert('Hello World'); 2、內聯方式： function hello(){ //調試用 alert("hello"); //相當於Java中的System.out,在開發者工具中console會有打印信息 console.log("hello function"); } 關鍵字：不能使用關鍵字命名，命名規範和Java基本相同 3、外聯方式： Css:       JS  基於對象，不是面向對象 Js 弱變量類型，對於變量的界限沒有那麼明顯 js內置對象： document； getElementById(“id”);id唯一，所以元素唯一 getElementByName(“name”)；name不唯一 getElementByTagName(“”)； 返回帶有指定標籤名的對象集合。 window   函數：isNaN（a） 判斷是否爲數字，返回true，則不是數字； parseInt(a) 把a轉化成整數數字 eval（String）：可計算某個字符串，並執行其中的的 JavaScript 代碼，把string看做js代碼來執行。eval（“10+20+30”）-->60   課堂練習：猜數字遊戲 document.getElementById("userregex").innerHTML="用戶名可用"; document.getElementById("userregex").className="ti"; Document.write(...)  向網頁中寫入   案例：表單驗證  DOM Events Onblur：失去焦點   寫下一個驗證 Onfocus：獲得焦點 Onclick:鼠標點擊   點擊後才驗證 Onsubmit: 表單提交接收函數返回值，true則提交 Onkeyup： 鍵彈起     寫完驗證 Onload:    加載頁面   Function  函數： 1、使用函數傳參數個數和定義的參數個數可以不一致，多的部分捨棄掉，少的部分爲undefined 2、函數沒有重載，結果是最後一個的計算結果；但是可以使用可變長參數arguments來實現重載； 3、匿名函數的定義和使用： var f1=function(){.....}    result=f1();   運算符： ==和===的區別：===即比較值，又要比較類型；==只比較值 var a=1;var b="1"; a==b:true;a===b:false; for循環：true爲1，false爲0； true+true=2； for(var i=10;i;i--)  當i=0時，會自動跳出循環； For(var i=10;i>-2;i--)  當i=0時，不會退出     數組： 1、給參數，則長度確定；不給，則可以一直加元素 var ary=new Array("hello","hehe","heiehei"); var citys=[["直轄市"],["合肥","蕪湖","淮南","安慶"],["杭州","溫州","紹興","台州"],["南京","蘇州","無錫"],["南昌","上饒"]];   2、var ary=["hello","hehe","heiehei"];//長度可變，可以直接加元素 ary[4]=”niaho”   這時數組長度爲5，ary[3]爲undefined； 3種構造器、一種靜態賦值方法[] 排序：sort() 方法，默認排序規則 ，字符串升序（字典）排序； 定義比較函數，a-b 升序，b-a 降序： function rules1(a,b){return a-b; }ary2.sort(rules1);   Document.write(...)  向網頁中寫入   Window: setInterval();一般結合onload（頁面加載時調用）使用 應用：實現圖片輪播、時鐘 setTimeout( ); 在指定時間延遲後執行，只執行一次 利用此方法，實現彈廣告功能--廣告持續3秒結束 彈出確認框 --> 按鈕的實現      confirm("確認需要退出嗎？");   點擊確定，返回true Alert(“  ”)普通彈窗 Prompt() 帶有文本輸入的彈窗 window.open("")//新頁面跳轉;location.href("");原頁面跳轉 Location href 超鏈接   function go(){ location.href="http://www.baidu.com";} History:   title屬性，鼠標停在上面時會顯示title的內容 //返回到歷史記錄的上一層 超鏈接//跳轉 讓按鈕點擊失效：onclick="javascript:volid(0) "   Document： tr.className="";// <==> tr.setAttribute("class",""); 設置元素屬性 Document：整個html文件都成爲一個document文檔 Element：所有的標籤都是Element元素（操作的都是Element） Attribute：標籤裏面的屬性 Text：標籤中間夾着的內容爲text文本 Node：document、element、attribute、text統稱爲節點node   日期：Date   new Date() 當前系統時間   正則表達式：RegExp var reg=/^[a-z]{8,10}$/i;  /// var regex=new RegExp("^[a-z]{8,10}$","i"); regex.test(username) --> true / false Username.match(regex) --> 符合正則表達式的字符串 應用：表單驗證 Check（regex，ele，id）{ Var reg=new RegExp（RegExp，“i”）； Var username=ele.value; Document.getElementById(id).innerHTML=reg.test(username); }         creatElement createTextNode 下拉列表級聯關係 兩個下拉列表，後面的隨着前面的改變而改變   歷史遺留DOM：專用、簡潔 Element.className=””; Element.innerHTML=””; Element.style.xx=””; 標準HTML  DOM:標準化  W3C Element.setAttribute(“class”,”xx”); removeChild(); appendChild(D);  在後面加一個D節點 insertBefore(A,E);  在A節點前插入E節點 parentNode  ---返回一個父節點 childNodes  ---- 返回子節點數組 Document: getElementById. createElement createTextNode HTML對象：html標籤對應的對象 常用：Table 事件冒泡： 事件觸發元素互相疊加，事件會順序調用 event.target;返回觸發此事件的元素 event.srcElement;對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。(IE屬性) event.stopPropagation();阻止事件繼續派發，否則會繼續調用div1的事件（IE不支持） 自定義對象： Image：HTML對象 var img=new Image(); img.scr="286110.jpg"; 等價於：     自定義對象3種方式： //第一種方式：類似於定義函數，推薦大寫 function User(name,age){ //this=new Object();隱藏了這句話 this.name=name; this.age=age; this.toString=function(){ console.log("name:"+this.name+",age:"+this.age); } } var obj=new User("long",21);//自定義對象都是Object類型  typeof obj爲：Object obj.toString(); alert(obj.name+":"+obj.age); //第二種方式： var obj2=new Object(); obj2.id=1001; obj2.price=23.24; obj2.introduce=introduce;//定義一個方法，   function introduce(){ console.log("第二種方式："+this.id+":"+this.price); } obj2.introduce();//調用定義的方法 //第三種方式:JSON（也是一個對象）使用最多--（批量傳輸或保存） var obj3={"name":"jack","price":21,"print":print}; function print(){ console.log("第三種方式："+this.name+";"+this.price); } obj3.print();