1.Hello World 2.數據類型 3.函數 4.數組 5.Date 6.Math 7.String 8.Regular Expression javascript
1.Hello World
-
View Code<script type="text/javascript"> alert("JavaScript is running..."); document.write("寫到頁面去。"); console.log("寫到控制檯去。"); </script>
- 嚴格區分大小寫
- 自動忽略縮進和換行
2.數據類型
- String，字符串（基本數據類型）
- Number，數值（基本數據類型）
- Boolean，布爾值（基本數據類型）
- Null，空值（基本數據類型）
- Undefined，未定義（基本數據類型）
- Object，對象（引用數據類型）
字符串 & 數值：html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day04</title> <script type="text/javascript"> /** * 定義字符串，定義數值類型 */ var str = "hello"; var num = 1314; console.log(str) console.log(num) /** * 字符串與數值類型比較 */ var a = 123; var b = "123"; console.log(a == b); //true console.log(a === b); //false /** * 打印數據類型 */ console.log(typeof a);//number console.log(typeof b);//string </script> </head> <body> </body> </html>
布爾值java
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Day09</title> <script type="text/javascript"> var flag = 8 > 17; console.log(flag);//false console.log(typeof flag);//boolean </script> </head> <body> </body> </html>
類型轉換成字符串node
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day11</title> <script type="text/javascript"> var num = 110; var flag = true; /** * 1.類型轉換爲字符串，調用toString()方法 */ console.log(typeof num.toString());//string console.log(typeof num);//number console.log(typeof flag.toString());//string console.log(typeof flag);//boolean /** * 2.類型轉換爲字符串，使用String()方法 */ console.log(typeof null);//object console.log(typeof String(null));//string console.log(typeof undefined);//undefined console.log(typeof String(undefined));//string </script> </head> <body> </body> </html>
類型轉換成數值正則表達式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day12</title> <script type="text/javascript"> var str = "2019"; var st2 = "2019-01-01"; var st3 = " "; /** * String類型轉換爲Number，使用Number()方法 * 1，純數字字符串直接轉成相應數值， * 2，非純數字，轉成NaN * 3，空白符（空格、製表），轉換成數字 0 */ console.log(Number(str));//"2019" console.log(Number(st2));//"NaN" console.log(Number(st3));//"0" var f1 = true;//布爾值 var f2 = false; var f3 = null;//Null值 var f4 = undefined;//未定義 console.log(Number(f1));//"1" console.log(Number(f2));//"0" console.log(Number(f3));//"0" console.log(Number(f4));//"NaN" /** * 特殊轉換方法：parseInt、parseFloat * 以數值開頭的相似字符串，會被轉成「NaN」 */ var ts1 = "330px"; var ts2 = "size 266px"; console.log(parseInt(ts1));//"330" console.log(parseFloat(ts2));//"NaN" </script> </head> <body> </body> </html>
類型轉成布爾值數組
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day14</title> <script type="text/javascript"> /** * 把其餘類型轉換成Boolean，使用Boolean()函數 */ var num = "110"; var str = "hello"; console.log(Boolean(num));//true console.log(Boolean(0));//false console.log(Boolean(str));//true console.log(Boolean(" "));//true console.log(Boolean(""));//false console.log(Boolean("true"));//true console.log(Boolean("false"));//true console.log(Boolean(null));//false console.log(Boolean(undefined));//false </script> </head> <body> </body> </html>
表示Unicode編碼瀏覽器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day23</title> <script type="text/javascript"> /** * 輸出utf字符，使用\u帶上Unicode字符編碼便可 */ document.write("\u2663"); document.write("\u2615"); /** * 也能夠以十進制的形式表示Unicode編碼 */ document.write("\♣"); document.write("\☕"); </script> </head> <body> </body> </html>
對象的基本操做dom
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day47</title> <script type="text/javascript"> /** * 對象的基本操做 * 建立對象 */ var obj = new Object(); /** * 爲對象賦值 */ obj.name = "孫悟空"; obj.age = 500; obj.faith = "Buddhism";//信仰 obj.master = "Taoism";//師從 /** * 修改對象屬性 */ obj.name = "sun wu kong"; /** * 刪除屬性 */ delete obj.master; document.write(obj.age);//頁面輸出對象屬性 console.log(obj);//控制檯輸出對象 </script> </head> <body> </body> </html>
使用字面量建立對象ide
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day50</title> <script type="text/javascript"> /** * 使用字面量建立對象 */ var obj = { name:"sun wu kong", age:500, master:"Taoism", faith:"Buddhism" } console.log(obj); </script> </head> <body> </body> </html>
構造函數方式建立對象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day64</title> <script type="text/javascript"> function Dog(name) { this.name = name; } function Monk(lawName) { this.lawName = lawName; } var d = new Dog("luck"); var m = new Monk("孫悟空"); document.write(d.name); console.log(m.lawName); </script> </head> <body> </body> </html>
3.函數
建立函數，並調用執行函數
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day51</title> <script type="text/javascript"> /** * 聲明式建立函數 */ function f1() { alert("建立的函數執行啦"); console.log("函數輸出到控制檯"); document.write("函數輸出到頁面"); } //執行一個函數 f1(); </script> </head> <body> </body> </html>
當即執行函數
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day56</title> <script type="text/javascript"> //定義一個函數 var f2 = (function() { document.write("當即執行函數------"); }); //執行函數 f2(); //定義後就直接執行 (function() { document.write("當即執行函數------"); })(); </script> </head> <body> </body> </html>
在對象中能夠存在方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day57</title> <script type="text/javascript"> /** * 當對象的屬性賦值爲函數時，該屬性稱做對象的方法 */ var obj = { name:"sunwukong", age:500, hello:function(name) { console.log("hello, i'm "+name); } } /** * 遍歷對象的屬性 */ for (n in obj) { document.writeln(n+": "+obj[n]+"</br>"); } //調用對象的方法 obj.hello(obj["name"]); </script> </head> <body> </body> </html>
-
- this
傳遞到函數的一個隱含參數，指向一個對象。表示函數執行的上下文。
根據函數調用方式的不一樣：以函數形式調用，this 永遠都是 window。以方法的形式調用，this 就是調用方法的對象。
- this
4.數組
使用數組對象建立數組
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day70</title> <script type="text/javascript"> /** * 不建議建立不連續數組 */ var arr = new Array(); arr[10] = 10; arr[15] = 115; console.log(arr.length);//長度爲16 var arr2 = new Array(); arr2[arr2.length] = 10; arr2[arr2.length] = 115; console.log(arr2.length); console.log(arr2); </script> </head> <body> <p>Array</p> </body> </html>
建立數組並直接賦值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day71</title> <script type="text/javascript"> var arr1 = [10,20,30];//建立數組，並賦值 var arr2 = new Array(11,22,33);//建立數組，並賦值 var arr3 = new Array(34);//定義數組的長度 console.log(arr1);//length=3 console.log(arr2);//length=3 console.log(arr3);//length=34 /** * 數組中能夠存聽任何數據類型 */ var vari = [{name:"argor",role:"user"},{name:"admin",role:"admin"},{name:"roog",role:"admin"}]; console.log(vari.length); console.log(vari); </script> </head> <body> </body> </html>
數組的經常使用方法：增長、刪除元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day72</title> <script type="text/javascript"> /** * 數組的經常使用方法 * push * 做用：添加元素到數組末尾， * 返回值：數組的新長度 */ var arr = ["曹操","荀彧","許褚"]; var length = arr.push("劉備","關羽","張飛","趙雲","諸葛亮"); console.log(length);//長度爲8 /** * pop，無參 * 做用：刪除數組末尾的元素 * 返回值：刪除的元素 */ var ele = arr.pop();//刪除並返回「諸葛亮」 console.log(ele); /** * unshift * 做用：給數組開頭添加元素 * 返回值：數組的新長度 */ arr.unshift("公孫瓚","馬騰","劉璋"); console.log(arr); /** * shift * 做用：刪除數組開頭元素 * 返回值：頭元素 */ ele = arr.shift(); console.log(ele);//「公孫瓚」 </script> </head> <body> <p>functions</p> </body> </html>
控制檯結果：
切分：hello argor, How are you, What a good day, 查找：9 匹配：or 替換：hello-argor,-How-are-you?-What-a---good---day! 替換：hello argor, How are you? What a good day! 替換：yonghuming, length: 10
5.Date
日期對象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day81</title> <script type="text/javascript"> /** * 日期 Date，獲取當前時間 * 建立一個指定日期時間對象，日期格式：月/日/年 時:分:秒 */ var d = new Date(); var d1 = new Date("3/6/2016 09:31:22:888");//還能夠跟上毫秒 console.log(d);//當前時間 console.log(d1);//指定時間 /** * Date對象的經常使用方法（默認Gmt時間） * getDate()//日,1-31 * getDay()//星期，0-6,0表示週日 * getMonth()//月，0-11，0表示1月，11表示12月； * getFullYear()//年 * getHours()//小時，0-23 * getMinutes()//分鐘，0-59 * getSeconds()//，秒，0-59 * getMilliseconds()//毫秒，0-99 * getTime()//1970-1-1 0:0:0至今的毫秒數（毫秒時間戳） * Date.now() */ console.log(d1.getTime()); </script> </head> <body> </body> </html>
6.Math
Math工具類
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day82</title> <script type="text/javascript"> /** * Math,不是構造方法，是一個工具類 * 屬性： * E,天然對數的底數 * PI,圓周率 * * 方法： * ceil,向上取整 * floor,向下取整 * round，四捨五入取整 * random,0到1的隨機數(0,1) * max,獲取多個數的最大值 * min,……最小值 */ console.log(Math.PI);//圓周率 for(var i=0; i<5; i++) { console.log(Math.random()); } var arr = [3,5,2,1,3,5,7,9,2,1,3,6]; console.log(Math.max(3,5,2,1,3,5,7,9,2,-1,3,6));//參數不是數組 console.log(Math.min(3,5,2,1,3,5,7,9,2,-1,3,6)); </script> </head> <body> </body> </html>
7.字符串
字符串的屬性、方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day84</title> <script type="text/javascript"> /** * 字符串是以字符數組的形式保存的。 * 屬性： * length，獲取字符串長度 * 方法： * charAt * 0~length-1，返回指定index的字符 * charCodeAt * 返回Unicode編碼 * fromCharCode * 把Unicode編碼(十進制)轉成字符 */ var str = "hello argor"; console.log(str.charAt(str.length-1));//r console.log(str.charCodeAt(str.length-1));//114 console.log(String.fromCharCode(114));//r /** * 方法： * concat * 拼接字符串 */ console.log(str.concat(", ", "How are you?")); /** * 方法： * indexOf * 返回字符索引，0~length-1，沒找到返回 -1，重複字符返回首個字符索引。 * 第二個參數，表示開始查找的位置，是個索引值。 * lastIndexOf * …… * slice * 截取字符串，兩個參數，[開始位置，結束位置） * 只是用一個參數，截取到末尾 * 接受負值 * subString * 截取字符串，兩個參數，[開始位置，結束位置） * 不接受負值 */ console.log(str.indexOf('H'));//-1 console.log(str.slice(1,2)); /** * 方法： * split * 把字符串拆分爲數組 */ console.log(str.split(" "));//["hello", "argor"] console.log(Array.isArray(str.split(" ")));//true console.log(str.split("e"));//["h", "llo argor"] /** * 方法： * sup * 把字符顯示爲上標 */ document.write(str+"@".sup()); /** * 方法： * toUpperCase * toLowerCase */ console.log(str.toUpperCase()); </script> </head> <body> </body> </html>
與正則表達式相關的方法：search、match、replace、split
8.正則表達式
定義一個正則表達式對象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day86</title> <script type="text/javascript"> /** * 建立正則表達式對象，new RegExp(EXPR[, PATT]) * 參數1，正則表達式 * 參數2，匹配模式 * * 使用字面量建立正則表達式 * var re = /EXPR/PATT */ var re = new RegExp("a"); console.log(re.test("hello"));//false console.log(re.test("hello argor"));//true var re2 = /H/; var re3 = /H/i; var str = "hello argor"; console.log(re2.test(str));//false console.log(re3.test(str));//true </script> </head> <body> <p>day86</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day87</title> <script type="text/javascript"> /** * 切分 */ var str = "hello argor, How are you? What a good day!"; document.write(str+"<br/>"); var re1 = /[,?!]/; console.log("切分："+str.split(re1));//切分時，不是指定固定的拆分標識，而是使用正則匹配多個標識來完成拆分； /** * 查找 * 返回位置 */ console.log("查找："+str.search(/[oe]r/));//9,返回的是匹配到的下標 /** * 匹配 * 返回true、false */ console.log("匹配："+str.match(/[oe]r/));//or //添加一些tab str = "hello argor, How are you? What a good day!"; document.writeln(str+"<br/>"); /** * 替換 * 處理空白符 */ console.log("替換："+str.replace(/\s/g,"-"));//只替換掉匹配的首個 console.log("替換："+str.replace(/\s{1,}/g," "));//無論幾個連續的空白符，都替換爲一個空格 str = " yong hu m\ri ng \n \ "; str = str.replace(/\s{1,}/g,""); console.log("替換："+str+", length: "+str.length);//去除字符串中包含的全部 </script> </head> <body> </body> </html>
控制檯結果：
切分：hello argor, How are you, What a good day, 查找：9 匹配：or 替換：hello-argor,-How-are-you?-What-a---good---day! 替換：hello argor, How are you? What a good day! 替換：yonghuming, length: 10
正則表達式語法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day88</title> <script type="text/javascript"> /** * 正則表達式語法： * 修飾符 * i 大小寫不敏感 * g 全局匹配 * m * 方括號 * {n}，匹配n次 * n+ 至少一個 * n* 0~n個 * n? 0或1個 * ^a 以a開頭 * a$ 以a結尾 * 元字符 * . 任意字符 * \w 任意字母、數字、下劃線，[A-z0-9_] * \W 除了字母、數字、下劃線，[^A-z0-9_] * \d 任意數字，[0-9] * \D 除了數字，[^0-9] * \s 空格 * \S 除了空格 * \b 單詞邊界 * \B */ var phoneNum = "13389222587 "; var re = /^1[3-9]([0-9]{9})$/;//匹配手機號 document.write(re.test(phoneNum.trim())); //匹配單詞 document.write(/\bargor\b/.test("argor's blog."));//true，是獨立單詞 document.write(/\bargor\b/.test("aargor's blog."));//false,argor 不是一個獨立單詞 /** * 電子郵件 * 正則中如何匹配只有一個@？ */ var reg = /^\w+.*@\w+(\.\w+){1,2}$/;//最多支持3級域名 var emailAddr = " argor_hh.com@ @_@-@@@@@@@q_qtello.org.cn1"; console.log(emailAddr+" is "+reg.test(emailAddr.trim()));//true，存在多個@時就不行了 console.log(emailAddr+" is "+(2 == emailAddr.split("@") && reg.test(emailAddr.trim())));//false emailAddr = " argor_hh.com@q_qdo3natello.org.cn1"; console.log(emailAddr+" is "+(2 == emailAddr.split("@").length && reg.test(emailAddr.trim())));//true </script> </head> <body> </body> </html>
9.Dom
- 節點Node
View Code
- 文檔節點，html - 元素節點，p、a、span - 屬性節點，id、class、href - 文本節點
- 節點屬性
nodeName nodeType nodeValue 文檔節點 #document 9 null 元素節點 標籤名 1 null 屬性節點 屬性名 2 屬性值 文本節點 #text 3 文本內容 - 小實例
圖片輪播
View Code<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day95</title> </head> <body> <div class="contrainer"> <div class="info"> <span id="info_span1"></span> </div> <div class="img"> <img id="car_img" src="img/Carousel/2.png" /> </div> <button id="next">Next</button> <button id="previous">Previous</button> </div> <script type="text/javascript"> /** * 獲取元素 */ var nextBtn = document.getElementById("next"); var prevBtn = document.getElementById("previous"); var element = document.getElementById("car_img"); var info_show = document.getElementById("info_span1"); /** * url前綴和後綴 */ var prefix = (element.src.split(/\d.png/))[0]; var suffix = ".png"; /** * 獲取當前圖片名稱的數字 */ function getId() { var id = Number(element.src.match(/\d.png/).toString().match(/\d/)); console.log(id); return id; } /** * */ function showInfo(id) { info_show.innerHTML = "這是第 "+id+" 張圖片"; } /** * 下一個 */ nextBtn.onclick = function() { var id = getId(); id++; id = (id > 3) ? 1 : id; var url = prefix+id+suffix; console.log(url); element.src = url; showInfo(id); } /** * 上一個 */ prevBtn.onclick = function() { var id = getId(); id--; id = (id < 1) ? 3 : id; var url = prefix+id+suffix; console.log(url); element.src = url; showInfo(id); } showInfo(getId()); </script> </body> </html>
全選/全不選
View Code<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day100</title> <link rel="stylesheet" href="css/day100.css" /> </head> <body> <div class="contrainer"> <div class="isAll"> <span class="item_value"><input type="checkbox" id="isAll"/></span> <span class="item_key">全選/全不選</span> </div> <div class="items"> <span id="span_dihao" > <span class="item_value"><input id="in_dihao" type="checkbox" name="sports"</span> <span class="item_key">帝豪</span> </span> <span id="span_eado"> <span class="item_value"><input id="in_eado" type="checkbox" name="sports"</span> <span class="item_key">逸動</span> </span> <span id="span_bt50"> <span class="item_value"><input id="in_bt50" type="checkbox" name="sports"</span> <span class="item_key">奔騰B50</span> </span> <span id="span_srui"> <span class="item_value"><input id="in_srui" type="checkbox" name="sports"</span> <span class="item_key">速瑞</span> </span> </div> <div class="btns"> <input id="selectAll" type="button" value="全選 / 全不選"/> <input id="selectInverse" type="button" value="反選"/> <br /> <input id="com" type="button" value="提交"/> </div> </div> <script type="text/javascript"> //checkbox var isAll = document.getElementById("isAll"); //全選 var selectAll = document.getElementById("selectAll"); //全不選 var selectNone = document.getElementById("selectNone"); //反選 var selectInverse = document.getElementById("selectInverse"); //全選對象數組 var all_sports = document.getElementsByName("sports"); //單選 var in_dihao = document.getElementById("in_dihao"); var in_eado = document.getElementById("in_eado"); var in_bt50 = document.getElementById("in_bt50"); var in_srui = document.getElementById("in_srui"); //提交 var com = document.getElementById("com"); /** * 設置「全選」效果，或者「全不選」效果； */ function setAll(flag) { for (var i = 0; i < all_sports.length; i++) { all_sports[i].checked = flag; } isAll.checked = flag;//全選聯動checkbox } /** * 計算「全選/全不選」 checkbox 的狀態； */ function getStatus() { var status = in_dihao.checked && in_eado.checked && in_bt50.checked && in_srui.checked; return status; } /** * 「全選/全不選」 按鈕，設置事件 */ selectAll.onclick = (function() { var status = getStatus(); setAll(!status);//調用方法時，就聯動了checkbox }); /** * 「全選/全不選」 checkbox，設置事件 * 添加單擊事件，設置onchange事件 */ isAll.onclick = (function() {//checkbox聯動單選 var status = getStatus(); setAll(!status); }); in_dihao.onchange = (function() {//單選聯動checkbox isAll.checked = getStatus(); }); in_eado.onchange = (function() { isAll.checked = getStatus(); }); in_bt50.onchange = (function() { isAll.checked = getStatus(); }); in_srui.onchange = (function() { isAll.checked = getStatus(); }); /** * 反選按鈕，設置事件 */ selectInverse.onclick = (function() { for (var i = 0; i < all_sports.length; i++) { all_sports[i].checked = !all_sports[i].checked; } //反選聯動checkbox isAll.checked = getStatus(); }); /** * 提交按鈕 */ com.onclick = (function() { var array = new Array(); in_dihao.checked ? array.push("帝豪") : 1; in_eado.checked ? array.push("逸動") : 1; in_bt50.checked ? array.push("奔騰B50") : 1; in_srui.checked ? array.push("速瑞") : 1; /** * 啥都不選，就得激勵一下； * 全選提交，就得打擊一下； * 有選擇，在一到三個之間，直接顯示； */ (array.length > 0) ? ((4==array.length) ? alert("你咋不上天呢，全都有！") : alert(array)) : alert("總的有個兩輪吧！"); array = null; }); </script> </body> </html>
10.Bom
- Bom對象
- Window
表明的是整個瀏覽器窗口，同時window也是網頁中的全局對象。 - Navigator
表明的是當前瀏覽器的信息，能夠識別不一樣的瀏覽器。 - Location
表明當前瀏覽器的地址欄信息，能夠獲取頁面跳轉信息、當前地址欄信息。 - History
表明瀏覽器的歷史紀錄。能夠控制瀏覽器的「後退」、「前進」按鈕點擊效果。 - Screen
表明用戶的屏幕信息，能夠獲取用戶的顯示器相關信息。
- Window
- setInterval、setTimeout方法，設置「循環執行代碼」、「延時執行代碼」
View Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day127</title> </head> <body> <div id="inf" style="display: inline-block;"></div> <input type="button" value="clear" style="display: none" id="bt1"/> <script type="text/javascript"> var inf = document.getElementById("inf"); var bt1 = document.getElementById("bt1"); /** * 顯示時間信息 * 每隔一秒刷新一次時間 */ var si = setInterval(function(){ var time = new Date(); inf.innerHTML = time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); }, 1000); /** * 顯示按鈕 * 5秒後顯示按鈕 */ var st = setTimeout(function(){ bt1.style.display="inline"; },5000); /** * 按鈕單擊事件 */ bt1.onclick = function() { clearInterval(si);//關閉定時器 clearTimeout(st); inf.style.display="none"; bt1.style.display="none"; }; </script> </body> </html>
JavaScript