1. 首頁 > 生活 > >

原生JavaScript

生活百科原生JavaScript

原生JavaScript

為了方便查看. 所有的js和css代碼都是嵌入式直接寫在html代碼中
1.js的引入方式<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box1 {width: 200px;height: 200px;background-color: red;}</style></head><body><div class="box1"></div><script>// 注: 部分js代碼寫錯了也不報錯var obj = document.getElementsByClassName('box1')[0];obj.onclick = function(){this.style.backgroundColor = "green";}</script><!--<script src="https://www.huyubaike.com/biancheng/js/a.js"></script>--></body></html>2.數組對象var arr = ["Maxs_hu", 11, 3, 4]// 取數組中內容arr[0]// 數組長度arr.length// 取出數組中最后一個元素arr.pop()// 即使內部放置索引也會取出最后一個// 頭部插入元素arr.unshift("xxx")// 頭部移出元素arr.shift('xxx')// 切片arr.slice(0, 3)// 顧頭不顧尾// 反序arr.reverse()// 數組拼接arr.join(':')// 兩個數組的拼接arr.concat(數組1)// 排序arr = [5, 3, "a", "-1"]// 使用sort函數默認使用ascii排序// sort會取出兩個值進行減法運算(減法運算會將字符串轉乘number類型進行運算). 最終比出大小arr.sort(function (x, y){return x - y})// splice用法: 可以刪頭刪尾刪中間//從1位置開始. 刪除兩個. 然后在1位置插入后面的三個字符串arr.splice(1, 2, "xxx", "yyy", "zzz")// 遍歷列表中每個元素arr.forEach(function(item){console.log(item)})// 沒有返回值arr.map(function(item){console.log(item)})// 有返回值// 案例:var res = arr.forEach(function(item){return item + "_sb"})// output: undefined -> void function return value is usedvar result = arr.map(function(item){return item + "_sb"})// map可以拿到返回值3.Date日期對象// 四種生成時間的方法var d1 = new Date()// 獲取當前時間var d2 = new Date('2022/9/29 9:08:08')var d3 = new Date(7000)var d4 = new Date(2022, 11, 11, 11, 11, 11, 3000)// 獲取本地時間d1.toLocaleString()// 獲取當前時間d1.getDate()d1.getHours()d1.getDay()d1.getSeconds()// 具體用法可查看文檔 https://www.cnblogs.com/linhaifeng/article/9346128.html4.Math對象// 向下取整Math.floor(5.9)// 5// 向上取整Math.cell(5.9)// 6// 取最大. 最小Math.max(1, 2, 3, 4)Math.min(1, 2, 3, 4)// 取0-1中十五位小數的隨機數Math.random()//取3-7中的隨機數3 + Math.random()*45.Json對象// Json字符串轉化成對象var str1='{"name":"egon","age":18}';var obj1=JSON.parse(str1);console.log(obj1.name);console.log(obj1["name"]);// dic對象轉化成JSON對象var obj2={"name":"egon","age":18};var str2 = JSON.stringify(obj2)console.log(str2)6.RegExp對象// 1. 創建正則對象的方式1// 參數1 正則表達式// 參數2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配后停止)和i(忽略大小寫)// 注意：正則放到引號內，{}內的逗號后面不要加空格var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); // 匹配用戶名只能是英文字母、數字和_，并且首字母必須是英文字母 。長度最短不能少于6位 最長不能超過12位 。reg1.test("egon_123") // true// 2. 創建正則對象的方式2var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; // 不要加引號reg2.test("egon_123")// true// 3. String對象與正則結合的4個方法var s1="hello world";s1.match(/l/g) // 符合正則的內容["l", "l", "l"]s1.search(/h/g) // 符合正則的內容的索引0s1.split(/ /) // ["hello", "world"]s1.replace(/l/g,'L') // "heLLo worLd"http:// 4. 匹配模式g與ivar s2="name:Egon age:18"s2.replace(/e/,"贏") // "nam贏:Egon age:18"s2.replace(/e/g,"贏") // "nam贏:Egon ag贏:18"s2.replace(/e/gi,"贏") //"nam贏:贏gon ag贏:18"http:// 5. 注意1：// 1、如果regExpObject帶有全局標志g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找 。// 2、該屬性值默認為0，所以第一次仍然是從字符串的開頭查找 。// 3、當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改為字符串中本次匹配內容的最后一個字符的下一個索引位置 。// 4、當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配 。// 5、因此，當我們使用test()函數執行了一次匹配之后，如果想要重新使用test()函數從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0 。// 6、如果test()函數再也找不到可以匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置為 0 。var reg3 = /egon/g;reg3.lastIndex0reg3.test("egon") // true，匹配成功truereg3.lastIndex // 匹配成功reg3.lasIndex=44reg3.test("egon") // 從4的位置開始匹配，本次匹配失敗falsereg3.lastIndex // 匹配失敗，lastIndex歸為00reg3.test("egon") // 再次匹配成功true// 6. 注意2：// 當我們不加參數調用RegExpObj.test()方法時, 相當于執行RegExpObj.test("undefined"), 并且/undefined/.test()默認返回true 。var reg4 = /^undefined$/;reg4.test(); // 返回truereg4.test(undefined); // 返回truereg4.test("undefined"); // 返回true

經驗總結擴展閱讀