####★技巧★ JS 引入 返回 從哪來到哪去 <script src="javascript:history.go(-1)">返回</script> <a href="javascript:history.go(-1)"></a> ####★技巧★ a.toExponential(3) 科學計數法 num = num.toExponential(3) "3.333e+0" ####★技巧★ num.toFixed(2); 限制小數點後兩位 num = num.toFixed(2); ####★技巧★ 注意filder中篩選 返回的是條件 ： ‘==’ 雙等於 let r = choicelist.filter(function (v, i) { return v.id == o.id }); ####★技巧★ find eq(this.index()) 查找 li下邊的 類名爲 '.num img' 的標籤 picEl = $(this).closest('li').find('.num img').attr('src'); $(this).removeClass('active').eq($(this).index()).addClass('active') ####★技巧★ javescript:void(0) <a href="javescript:void(0)">刪除</a> ####★技巧★ 計算數組內值的和 let arr = [1,2,3,4,5,6,'7']; let sums = arr.reduce(function (a, b) { return Number(a) + Number(b); }); console.log(sums) 28 ####★技巧★ target與currentTarget的區別？ 通俗易懂的說法： 比如說現在有A和B， A.addChild(B) A監聽鼠標點擊事件 那麼當點擊B時，target是B，currentTarget是A 也就是說，currentTarget始終是監聽事件者，而target是事件的真正發出者 target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。 target指向被單擊的對象而currentTarget指向當前事件活動的對象（一般爲父級）。 ####★技巧★ alert() 顯示帶有一段消息和一個確認按鈕的警告框。 confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 prompt() 顯示可提示用戶輸入的對話框。 close() 關閉瀏覽器窗口。 open(url,name,feafurse,replace) 通過腳本打開新的窗口URL要在新窗口中顯示的文檔的 URL。如果省略了這個參數,那麼新窗口就不會顯示任何文檔 var input=prompt('輸入',' '); //都是字符串 var flag=confirm(123); open('error.html','_blank','width=500,height=500,left=200,top=100'); open('error.html','_self','width=500,height=500,left=200,top=100'); ####★技巧★ ES6有哪些新的？ .ES6的新特性:箭頭操作符=>，模板字符串(`${asd}`)等等 ####★技巧★ JSON.parse /字符串轉化成對象 數組 JSON.stringify 對象轉換爲一個JSON字符串 ####★技巧★ format 講任意類型轉換成字符串 a = format(123) ####★技巧★ * .a{ opacity: 0; transition: all 1s; } .a:hover{ opacity: 1; } 鼠標移動過去過1秒顯示 ####★技巧★ 獲取元素的寬度，高度 window.οnlοad=function(){ let box1=document.getElementsByClassName('box'); console.log(getComputedStyle(box[0],null).width); console.log(getComputedStyle(box[0],null).height); //可以獲取所有，但只能獲取，不能設置 } ####★技巧★ canvas 畫的圖出現不停複製，清空不了情況。給border加一個邊框 ####★技巧★ cursor cursor：move 此光標指示某對象可被移動。 ####★技巧★ 彈幕 `<marquee>彈幕標籤</marquee>` <marquee>彈幕標籤</marquee> ####★技巧★ 面向對象 選取顏色 設置 * HTML： <input type="color" class="miaocolor" value="#000"> * JS: miaocolor.οnchange=function(){ //描邊顏色 palette.strokeStyle=this.value; }; tiancolor.οnchange=function(){ //填充顏色 palette.fillStyle=this.value; }; miaobtn.οnclick=function(){ //描邊 palette.type = 'stroke'; }; tianbtn.οnclick=function(){ //填充 palette.type = 'fill'; }; * function Palette(obj,mask,ctx){ this.type = 'stroke'; this.fillStyle = '#000'; this.strokeStyle = '#000'; } * Palette.prototype={ //初始化 init:function(){ this.ctx.lineWidth = this.lineWidth; this.ctx.strokeStyle = this.strokeStyle; //OK this.ctx.fillStyle = this.fillStyle; //OK this.ctx.lineCap = this.lineCap; // this.ctx[type](); // self[type](); }, } //選擇 填充、描邊類型 self.ctx[self.type](); ####★技巧★ 選擇 輸入 var colorchoose=document.querySelector("input[type=color]"); var widthchoose=document.querySelector(".linewidth input[type=number]"); ####★技巧★ 瀏覽器 ！！！警告！！！！ 顏色應該是：#000000 The specified value "#000" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers. ####★技巧★ 瀏覽器 ！！！報錯！！！！ Uncaught SyntaxError: Unexpected token : 可能是上面函數少了一個 { } ####★技巧★ 瀏覽器 ！！！報錯！！！！ index.js:16 Uncaught TypeError: Cannot read property 'getContext' of null at index.js:16 把相關的script引用句放在html最下邊 JS中寫： window.οnlοad=function(){} ####★技巧★ label 表單元素 當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。 ####★技巧★ 注意 鼠標點擊嵌套 內層也要寫 function(e) eeeeeee canvas.οnmοusedοwn=function(e){ canvas.οnmοusemοve=function(***e***){ } } ####★技巧★ Math.pow Math.pow ####★技巧★ 弧度 角度轉換 * 弧度=（π/180）×角度 * 角度=180/π×弧度 ####★技巧★ 如果某個事件報錯 看看是否能獲取到那個元素 ####★技巧★ CSS設置全屏 html:-webkit-full-screen{ background: yellow; } ####★技巧★ 全屏 quanping:function(){ if(document.documentElement.requestFullscreen){ document.documentElement.requestFullscrren(); }else if(document.documentElement.webkitRequestFullscreen){ document.documentElement.webkitRequestFullscreen(); }else if(document.documentElement.mozRequestFullscreen){ document.documentElement.mozRequestFullscreen(); } } ### 全屏 ，退出全屏 // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen(); // Firefox 10+ element.mozRequestFullScreen(); document.mozCancelFullScreen(); // W3C 提議 element.requestFullscreen(); document.exitFullscreen(); ####★技巧★ 屬性選擇器 let done=document.querySelector('input[type=text]'); ####★技巧★ 清空內容 ！！''中不能有空格！！！ table.innerHTML=''; //清空內容 ！！ ''中不能有空格！！！ ####★技巧★ 立即獲取焦點 input.focus();//立即獲取焦點 ####★技巧★ * element.getAttribute(attributename) `attributename 字符串值。 必需。需要獲得屬性值的屬性名稱。` ####★技巧★ 分割 split函數 括號中要 （'; '） 在逗號後邊留一個空格 （=） 等號不加空格 let arr=cookie.split('; '); ####★技巧★ some中 是 == 雙等號 let a=this.currentele.some(function(value,index,obj){ return value.innerText==text; }) ####★技巧★ 注意循環 輸出false會壞事 循環只是等 true,輸出的false會打亂結構，干擾結果 for(let i=0;i<this.currentele.length;i++){ if(this.currentele[i].innerText==text){ return true; }/*else{ // console.log('不相等') continue aa; return false; // alert(1) };*/ } ####★技巧★ 綁定this 把外邊的this傳到函數當中 document.body.οnkeydοwn=function(e){}.bind(this); //綁定this 把外邊的this傳到函數當中 ####★技巧★ 數值轉換字符串 =String.fromCharCode(Math.floor(Math.random()*26)+65); ####★技巧★ 定義元素樣式 ele.style.cssText=` width: 50px; height: 50px; line-height: 50px; background: #F2F2F2; text-align: center; position:absolute; left:${lefts}px; top:${tops}px; ` ####★技巧★ 動畫結束之後 tr.addEventListener('webkitTransitionEnd',function(){ tr.removeChild(obj.parentNode); ####★技巧★ /* let student[1,2,{},4] forEach的是student的值，也就是value：1,2,{},4 {} 內爲對象，obj.name 對象.屬性*/ let student=[ {'name':'任雨','age':'18','sex':'女','loca':'山西','tel':12345678}, {'name':'曹越','age':'19','sex':'男','loca':'山西','tel':87543213}, {'name':'李虎','age':'16','sex':'女','loca':'山西','tel':87654456}, {'name':'劉婷','age':'18','sex':'男','loca':'山西','tel':09876542} ] ####★技巧★ ${} 花括號 輸入內容 let tr=$('<tr>'); 此處tr是標籤 tr.innerHTML= `<td> ${obj.name} </td>` ####★技巧★ 注意 innerHTML 大寫 tr.innerHTML tr.innerHtml--》 錯誤 ####★技巧★ let oldv=div.innerText; //獲取標籤內的文字內容 input.value=oldv; //value是input的屬性，obj沒有value這個屬性 ####★技巧★ 給box中插入 son for(let i=0;i<100;i++){ box.innerHTML += `<div class='son'></div>`; } ####★技巧★ 給隨機顏色 obj.style.background='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'; ####★技巧★ nodeName 後面要大寫 if(obj.nodeName=='P'){ node.name ####★技巧★ 輸入文本框 `<textarea name="" id="" cols="30" rows="10" maxlength="100" >輸入文本</textarea>` ####★技巧★ 沒有報錯 沒有現象 * 檢查元素的下標 `let btn=$('button')[0];` ####★技巧★ 輸入文本 <div class="box" contenteditable="true"> 輸入文本 </div> <textarea name="" id="" cols="30" rows="10"> 輸入文本 </textarea> ####★技巧★ 兼容問題 //IE高版本 兼容問題 div.addEventListener('click', function(){alert(1)}, false) //IE低版本 兼容問題 div.attachEvent('onclick', function(){alert(1)}) * this 是指向其他地方 ####★技巧★ box.style.cssText=''; ####★技巧★ this.###### let aa=this; function(){ aa. } ####★技巧★ 在第一個前面插入 imgbox.insertBefore(last,first); ####★技巧★ 報錯 setTimeout is not defined 把這一行重新寫 ####★技巧★ ！！！報錯！！！ 語法錯誤 下標越界 下標沒寫 box1[0].style.borderRadius='50%'; box1[0].style['border-radius']='50%'; box1[0].style.fontSize='50%'; box1[0].style.['font-size']='50%'; ####★技巧★ ！！！報錯！！！ Uncaught TypeError: Cannot read property 'style' of undefined at HTMLDivElement.caoyue1.(anonymous function).onclick * 注意事件下標越界：caoyue1[5].style.background='red'; 下標只有 0--4 ####★技巧★ ！！！報錯！！！ * Uncaught TypeError: Cannot set property 'innerText' of null script裏操作了body的東西。script在body前面。 解決方法：把script內容寫進body中，或寫在最後。</html>之後。 ####★技巧★ 瀏覽器報錯： 因爲while() 括號不完整。少半個 ） 或是（）的地方寫成了 {} Uncaught SyntaxError: Unexpected token { ####★技巧★ F12 在瀏覽器打開 Alt + table 切換窗口 ####★技巧★ 這三個不用加下標 * let box=document.querySelector('.box'); * let box=document.querySelectorAll('.box'); * let win3=document. * * getElementBy * * * () ####★技巧★ 自動輪播的時間要比切換的時間多點兒 ####★技巧★ 獲取的方法： * let win1=document.querySelector('.win'); * let img2=document.querySelectorAll('.imgbox li'); * let win3=document.getElementById() * let win4=document.getElementsByClassName() * let win5=document.getElementsByTagName() * let win6=document.getElementsByName() ####★技巧★ 按住空格多選，同時操作 ####★技巧★ * let imgbox=document.querySelector('.imgbox'); * let imgs=document.querySelectorAll('.imgbox li'); ####★技巧★ animate.js的調用 ####★技巧★ 繼承 把一個對象的方法冒充給另一個對象 冒充法 callback.call(obj); 傳函數 this.aa=function(); zhangsan.aa.call(lisi); 傳函數傳參 this.aa=function(a,b); zhangsan.aa.call(lisi,12,32); zhangsan.aa.call(lisi,[10,20]); ####★技巧★ 注意傳參 width 是‘width’ animate(box,'width',500) ####★技巧★ 屏蔽a標籤的默認行爲 ？？？？？？？？？？？？？？？？？？？ ？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？ * `<a href="javascript:;"></a>` * `<a href="#"></a>` * `<a href="http://www.baidu.com" οnclick=" return false; "> Click Me </a>` ####★技巧★ btn.play=function(){ this.play=aa; 添加自定義屬性，方法 } for(let i=0;i<5;i++){ btn[i].aa=i; btn[i].οnmοuseοut=function(){ btn[i].style.background='none'; this.style.background='none'; box[this.aa].style.background='none'; } } ####★技巧★ input1[i].οnmοuseοver=function(){ // this.style.background='red'; 等同於下一句 input1[i].style.background='red'; kw[i].style.height='200px'; let a=this; function aa(){ input1[i].style.background='red'; // this.style.background='red'; 這兒的this需要上邊 let =this 一下，否則不能用。 } } ####★技巧★ for(var i=0;i<5;i++){ input1[i].οnmοuseοver=function(){ input1[i].style.background='red'; kw[i].style.height='200px'; } } for(let i=0;i<5;i++){ input1[i].οnmοuseοver=function(){ input1[i].style.background='red'; kw[i].style.height='200px'; } } * var 執行完以後，i在循環外邊可以訪問。let不行。 * let循環時，可以保存每個I的值，var不行。 ####★技巧★ .hidden{ display: hidden; } .show{ display: show; } box1[0].className = 'box show'; box1[0].className = 'box hidden'; ####★技巧★ box1[0].id='color'; 添加id box1[0].className = 'box color'; 添加類名=‘原有類名 新類名’ ####★技巧★ 清除浮動： <div style='clear:both'></div> ####★技巧★ location ####★技巧★ filter ####★技巧★ * 把函數寫進文本中 > document.body.innerText=(day+'天'+hour+'小時'+min+'分'+second+'秒'); ####★技巧★ ??????????????????????????????????? /*if(!(arr instanceof Array)){ return ; } ??????????????????????????????????? if(!Array.isArray(arr)){ return ; }*/ ####★技巧★ 數組的遍歷+判斷 let flag=arr1.some(function(value,index,arr){ return console.log(value,index,arr) }) some(function(值 下標 遍歷的數組){}) 回調函數 返回值： 布爾值。如果數組中有元素滿足條件返回 true，否則返回 false。 every(function(值 下標 遍歷的數組){}) 返回值： 布爾值。如果所有元素都通過檢測返回 true，否則返回 false。 var arr=[3,-1,1,6,12,-1,65,1,-4]; var flag=arr.some(function(value,index,arr){ return value>0; }) document.write(flag); ####★技巧★ 遍歷屬性(遍歷數組下標) for(let i in arr) var arr=[3,-1,1,6,12,-1,65,1,-4]; document.write(arr+'<br>'); for(let i in arr){ console.log(i+'--'+arr[i]); } 遍歷屬性值(遍歷數組元素) for(let i of arr) for(let i of arr){ console.log(i); } ####★技巧★ function huoqu(arr,num=3){} 函數中num給一個默認值3。調用的時候傳參就可以不用傳。 ####★技巧★ 對象元素的順序：自己構造---自己原型--父構造---父原型 ####★技巧★ 構造函數和普通函數差不多 ####★技巧★ 查看瀏覽器 繼承對象的方法，在瀏覽器console中輸入console.dir(String) console.dir(String) ####★技巧★ `true 和 false 不能進行 true++ true-- 運算` ####★技巧★ 注意創建對象的JSON方式的逗號 ####★技巧★ instanceof 判斷 console.log(str instanceof String); //false instanceof 只能判斷數組和對象，不能用來判斷字符串和數字等. console.log(str instanceof arrAy) console.log(str instanceof Object) ####★技巧★ 判斷是否爲字符串 if(typeof(str1)!='string'){ return '不是字符串'; } ####★技巧★ 注意分割空格（' '）中間要有空格 let arr=str.split(' '); ##### 無聊望見了猶豫(磨料望跟六搖椅) 達到理想不太易(達到類桑霸臺儀) 即使有信心(即西要森森) 鬥志靠抑止(導既靠譯既) 誰人定我去和留(歲人頂我會望老) 定我心中的宇宙(頂我僧中的與奏) 只想靠兩手向理想揮手 (只想靠浪掃 航類桑非掃) 問句天幾高心中志比天更高(問歸聽給溝僧鍾執筆天更高) 自信打不死的心態活到老 (自森大霸四（sei1）的僧臺乎到樓) OH… 我有我心底故事 (喔嗷嗷...摸幽默僧得古四（sei1）) 親手寫上每段得失樂與悲與夢遺 (岑搜噻上母得（dei4）當撒浪於被與夢遺) OH… 縱有創傷不退避 (喔嗷嗷... 總要從桑把腿被) 夢想有日達成找到心底夢想的世界 (夢桑幽雅大事遭鬥僧得夢桑的四該~) 終可見... （總豪給...） 誰人沒試過猶豫 （水人毛四（sei2）國藥儀） 達到理想不太易(達到類桑霸臺儀) 即使有信心 (即西要森森) 鬥志卻抑止 (導既靠譯既) 誰人定我去和留 (歲人頂我會望老) 定我心中的宇宙 (頂我僧中的與奏) 只想靠兩手向理想揮手 (只想靠浪掃 航類桑非掃) 問句天幾高心中志比天更高 (問歸聽給溝僧鍾執筆天更高) 自信打不死的心態活到老 (自森大霸四（sei）的僧臺乎到樓) OH… 我有我心底故事 (喔嗷嗷...摸幽默僧得古事（sei1）) 親手寫上每段得失樂與悲與夢遺 (岑搜噻上母得（dei4）當撒浪於被與夢遺) OH… 縱有創傷不退避 (喔嗷嗷... 總要從桑把腿被) 夢想有日達成找到心底夢想的世界 (夢桑幽雅大事（sei4） 遭鬥僧得（dei4）夢桑的四（sei4）該~) 終可見... （總豪給...） ##★★★★★★★★★★★★對象簡寫★★★★★20170425★★★★★★★★★★★★★ //##### 對象簡寫 允許變量名作爲對象的屬性名,變量的值對應對象的屬性值 let age=20; let sex='boy'; let zhangsan={age,sex}; 等價於: let lisi={age:18,'sex':'nv',tall:180}; ##### 對象屬性允許是表達式 let firstname='hello'; let lisi={ ['a'+'ge']:18, [firstname]:'li', //等價於：hello:'li' // hello:'li' } console.dir(lisi); * 此方法不允許嵌套 ren.prototype={ } //原型對象 ##### 一個對象指向另一個對象 繼承 class student extends person{ super(); } //一個對象指向另一個對象 class person{ constructor(){ this.name='zhangsan'; this.age=18; } play(){ alert(1); } } var zhangsan=new person(); //繼承 指向 student可以調用person的屬性、方法 class student extends person{ constructor(){ super(); this.classes='wuif1702'; this.num=1702; } homework(){ alert('寫作業'); } } var lisi =new student(); document.write(lisi.name); console.log(lisi.age); console.log(lisi.num); * 繼承方法二： `var students.prototype=new person();` //原型對象 # ★★★★★★★★★★★★字符串對象★★20170425★★★★★★★★★★★★★★★★ var arr=[1,2,3,4],arr1=new Array(1,2,3,4); var str='abcd'; 等價於： var str1=new String("abcd"); #### 1.內置對象 Global 全局 Object String Array Number Math 數學方法對象 Boolean Function RegExp 正則 2.數組對象 DOM BOM #### 一\屬性 1.length 不識別空字符、不區分中英文 計算字符串的長度 2.constructor 對象的構造函數 console.log(str.length); //返回長度 console.log(str.constructor); //返回構造函數 #### 二\ 方法 獲取類型: 1.myString.charAt(num) 返回在指定位置的字符. 2.myString.charCodeAt(num) 返回指定位置的字符的unicode編碼 3.String.fromCharCode() 接受一個或多個自定的unicode值,然後返回一個或多個字符串 console.log(str.charAt(0)); //返回指定位置字符。下標從0開始 console.log(str.charAt(3)); console.log(str.charAt(5)); //-1和5爲空 console.log(str.charAt(-1)); console.log(str.charCodeAt(1)); //返回指定位置字符對應的unicode編碼 console.log(String.fromCharCode(97));//將unicode編碼轉換爲響應字符 #### 查找類型 1.myString.indexOf("") 返回某個指定的字符串,在字符串中首次出現的位置 如果要檢索的字符串值沒有出現，則該方法返回 -1。 2.myString.lastlndexOf() 返回指定的字符串值最後出現的位置 3.myString.match() 3.1 console.log(str.includes("d")); //返回 true false 在字符串中檢索指定的值,返回的值就是指定的值 4.search() 只能作用於正則 5.myString.replace() 將字符串中的一些字符替換爲另外一些字符 6.myString.repeat(5) 將字符串重複5次 changdu='*'.repeat(str1.length); str2="asd"; var res=str2.repeat(5); alert(res); #### 截取類型 1.myString.slice(start,end)。 從指定的開始位置，到結束位置(不包括)的所有字符串。如果不指定結束位置，則從指定的開始位置，取到結尾 slice參數可以是負數，如果是負數，從-1開始指的是字符串結尾。 eg:var str1=str.slice(-7,-3); 2.substring(start,end) 和 myString.slice(start,end)的用法一樣，唯一的區別是不支持負數。 3.substr(start,length) 從指定的位置開始取指定長度的字符串。如果沒有指定長度，從指定開始的位置取到結尾。 #### 轉換類型 1.split("分割位置i",[指定的長度n]) 將一個字符串分割成數組(分割成長度爲N的數組)。從分割位置i開始轉換n個。 2.toLowerCase(); 用於把字符串轉換爲小寫。 3.toUpperCase() 將字符串轉換爲大寫. console.log('abcd'.toUpperCase()) console.log('ABcd'.toLowerCase()) #### 樣式類型 1.fontcolor() 給字符串指定顏色，十六進制表示、red、 rgb(255,0,0) 2.fontsize() 指定字符串的大小 (1-7) #### 去空 trim console.log(str.trim()) console.log(str.trimLeft()) console.log(str.trimright()) ### eg: //搜索 str1 中是否有 str2 . function isinclude(str1,str2){ if((typeof(str1)!='string')&&(str2 instanceof String)&&(arguments.length>=2)){ return '不是字符串'; } else{ if(str1.indexOf(str2)==-1){ return false; }else{ return true; } } } str1='asdd'; str2="dd"; var result=isinclude(str1,str2); alert(result); 3. console.log(str.match("d")); 等同於match 3.1 console.log(str.includes("d")); //返回 true false ###### eg： 將str中的str1全部替換爲"***" str='abcsdsabcsdsabc'; function rpls(str,str1){ let changdu=''; for(let i=0;i<str1.length;i++){ changdu+='*'; } let newstr=str; while(newstr.includes(str1)){ newstr = newstr.replace(str1,changdu); } return newstr; } var str='asdfghasdfghasdgfhasd'; var str1='a'; var res=rpls(str,str1); alert(res); ####eg //判斷一個字符串中是否包含另一個字符串 function isinclude(str1,str2){ if(str1.indexOf(str2)==-1){ return false; }else{ return true; } } str1="acdwe"; str2="de"; let result=isinclude(str1,str2); alert(result); //判斷一串字符串 （'one one1 one2 '）中是否有 （one） // class= 'one one1 one2 ' function isele(str,ele){ let arr=str.split(' '); for(let i=0;i<arr.length;i++){ if(arr[i]==ele){ return true; } } return false; } var str='one3 one1 one one4'; var res=isele(str,'one'); console.log(res); /* 輸出指定字符串在字符串中的位置 */ function addres(str,str1){ if((typeof str!='string')||(typeof str1!='string')||(document.length<2)){ return '輸入錯誤'; } let changdu='*'.repeat(str1.length); let newstr=str; var num=0; let arr=[]; let i=0; while(newstr.includes(str1)){ /*num=newstr.indexOf(str1); console.log(num); arr[i]=num; i++;*/ arr.push(newstr.indexOf(str1)); newstr=newstr.replace(str1,changdu); } document.write(arr+'<br>'); document.write(newstr); return newstr,arr; } str="http://fanyi.youdao.com/http://fanyi.youdao.com/http://fanyi.youdao.com/http://fanyi.youdao.com/"; str1='t'; var add=addres(str,str1); console.log(add); ##### ★★★★★★★20170425★★★★★★★★ Math ★★★★★★★★★★★★★★★ var num=1.998; //取絕對值 var result=Math.abs(num); // alert(result); //取整 四捨五入 var result2=Math.round(num); // alert(result2); //向上取整 var result3=Math.ceil(num); // alert(result3); //向下取整 var result4=Math.floor(num); // alert(result4); //最大值 var num1=Math.max(1,2,3,43,45,6,77); // alert(num1); //最小值 var num1=Math.min(1,2,3,43,45,6,77); // alert(num1); //隨機數 0~1之間的隨機數 var num1=Math.random(1,2,3,43,45,6,77); // alert(num1); //隨機數 10~20之間的隨機數 var num1=Math.random(Math.random(1,2,3,43,45,6,77)*10)+10; // alert(num1); // Math.sin(); alert(Math.PI); var result=Math.sin(30*Math.PI/180); // alert(result); // Math.cos(); // Math.tan(); //保留兩位小數 var num=1.234; var result=num.toFixed(2); // alert(result); 事件流 ##★★★★★★★★★★★★ 數組對象 ★★★★★20170426★★★★★★★★★★★★★ * BOM * dom ### 遍歷 // let arr=new Array(5); // let arr1=Array.of(5); // console.log(arr); ##### 一、屬性 * 1.length `可設置或返回數組元素的數目` * 2.constructor `返回構造函數的引用` ##### 二、方法 添加 點點點...？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？ A.刪除或添加 類 1. myarr.push(數組元素......) 添加 向數組的末尾添加新的元素，返回值是新數組的長度。可以一次添加多個元素 //有...添加進去的是元素 /*let arr3=['a','b','c','d']; let result=arr.push(...['a','b','c','d']); console.log(result) let result1=arr.unshift(...['a','b','c','d']); console.log(result1) let rp=arr.pop() console.log(rp) let rs=arr.shift() console.log(rs)*/ * 從第2個開始截取3個元素並把字符串放進去 // arr.splice(2,3,'a','b','c'); // console.log(arr) * //連接符 // let str=arr.join('-'); // console.log(str,typeof str) * //截取 // let arr4=arr.slice(-3); // console.log(arr4) * // 反轉 // let arr5=arr.reverse() // console.log(arr5) * //排序 /*let arr6=arr.sort(fn); function fn(a,b){ if(a<b){ return -1; }else if(a==b){ return 0; }else if(a>b){ return 1; } } console.log(arr6)*/ 2. myarr.unshift(數組元素.....) 從開頭添加 向數組的開頭加入新的元素，返回值是新數組的長度。可以一次添加多個元素 3. myarr.pop() 從後邊刪。 刪除數組的最後一個元素，返回刪除的元素 4. myarr.shift() 從前邊刪 刪除數組的第一個元素，返回刪除的元素 5.萬能的添加刪除函數(用於插入、刪除或替換數組的元素。) myarr.splice(index,數量,添加的元素.....) (1)index 從何處開始添加或刪除，必須是數值類型(數組的下標) (2)數量 規定了刪除的個數，如果是0，則不刪除 (3)需要添加的元素，可以當作替換的元素 (4)如果從arrayObject中刪除了元素，則返回的是含有被刪除的元素的數組。 eg: var arr=[1,2,3,4,5]; let res=arr.push('a','v','d'); arr.splice(1,2) //從第1個位置刪掉2個。 arr.splice(1,0,'ac','dc')//從第1個位置添加 'ac','dc' arr.splice(1,2,'acd','qwe','dsa');//從第一個位置刪除2個，再添加 'acd','qwe','dsa' ##### B.數組的轉換 * mystr.split() //字符串分割爲數組 * myarr.join([分隔符]) 把數組元素按照指定分隔符組合成一個字符串，如果沒有指定分隔符，默認是用“,”返回結果就是組合成的字符串 ？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？ // let str=arr.join('-'); // join這一塊 let arr=[1,2,3,4,5]; arr.reverse(arr); //數組反轉過來 // 數組轉化爲字符串 var arr=[1,2,3,55]; // var str=arr.join('*'); // document.write(str) ##### C.數組的分割 同字符串分割 myarr.slice() 從截取指定的開始位置，到結束位置(不包括)的元素。如果不指定結束位置，則從指定的開始位置，取到結尾(數組的下標)支持負數(-1開頭) 返回新數組。 數組的分割 var newarr=arr.slice(1,3); document.write(arr); document.write(newarr); //新數組 ##### D.數組的連接 myarr.concat() 連接兩個或更多的數組，並返回新數組，但是對原數組沒有任何影響。 // let con=arr.concat(arr1); // let con=arr.concat('a','v','d'); // let con=arr.concat(...arr1); // let con=arr.concat(...arr1,['zhangsan','lisi']); //可以連接多個數組 // 拼接 /*var arr2=[4,5,6]; var newarr=arr.concat(arr2); document.write(newarr);//新數組*/ ##### E.數組排序 myarr.sort(fun) 用於對數組的元素進行排序 1. 默認是按照字符編碼的順序進行排 2. 如果要實現其他排序則要傳入一個參數，這個參數必須要函數，並且這個函數要有兩個參數 • 若 a 小於 b，在排序後的數組中 a 應該出現在 b 之 前，則返回一個小於 0 的值。 • 若 a 等於 b，則返回 0。 • 若 a 大於 b，則返回一個大於 0 的值。 let arr=[1,2,3,4,5]; arr.reverse(arr); //將數組前後反轉過來 let arr=[21,3,34,65,3,12,23,123,2]; arr.sort(arr); //當做字符串比較來排序 console.log(arr); 排序： let arr=[21,3,34,65,3,12,23,123,2]; let arr2=arr.sort(fn); function fn(a,b){ //升序 if(a<b){ return -1; }else if(a==b){ return 0; }else if(a>b){ return 1; } } console.log(arr2); /*function fn(a,b){ //降序 if(a<b){ return 1; }else if(a==b){ return 0; }else if(a>b){ return -1; } }*/ /* 1.判斷是否存在 >0 或 <0 的數 2.判斷數組是否都 >0 或 <0 的數 3.篩選 數組元素>0 的元素 4.刪除重複的元素 5.從數組中隨機獲取任意元素 6.從數組中隨機獲取任意一個不重複的元素 */ ### eg 例子： // 1 判斷是否存在 >0 或 <0 的數 /*var arr=[-3,-1,0,6,12,65,1,-4]; function cunzai(arr,num=1){ for(let i=0;i<arr.length;i++){ console.log(arr[i]); if(arr[i]>num){ return '存在>'+num+'的'; } } return '不存在>'+num+'的'; } var res=cunzai(arr); console.log(res); alert(res)*/ // 2.判斷數組是否都 >0 或 <0 的數 /*var arr=[-3,-1,0,6,12,65,1,-4]; function cunzai(arr){ for(let i=0;i<arr.length;i++){ console.log(arr[i]); if(arr[i]>0){ return '不是都<0'; } } } var res=cunzai(arr); console.log(res);*/ // 3.篩選 數組元素>0 的元素 /* var arr=[-3,-1,0,6,12,65,1,-4]; function cunzai(arr){ let arr1=[]; for(let i=0;i<arr.length;i++){ console.log(arr[i]); if(arr[i]>0){ arr1.push(arr[i]); } } return arr1; } var res=cunzai(arr); console.log(res);*/ // 4.刪除重複的元素 //檢查數組中是否包含特定的元素 /*var arr=[3,-1,1,6,12,-1,65,1,-4]; function youmeiyou(str,str1){ for(i=0;i<str.length;i++){ if(str1==str[i]){ return true; } } // if(str.includes(str1)){ // return true; // }else{ // return false; // } return false; } //去掉數組中重複的元素 function delrepeat(arr){ let newarr=[]; for(let i=0;i<arr.length;i++){ let flag=youmeiyou(newarr,arr[i]); if(!flag){ newarr.push(arr[i]); } // newarr.push() } return newarr; } let res=delrepeat(arr); console.log(res);*/ // 5.從數組中隨機獲取任意元素 /*var arr=[3,-1,1,6,12,-1,65,1,-4]; function randomEle(arr,times=3){ let newarr=[]; for(let i=0;i<times;i++){ var num=Math.random()*arr.length; var index=arr[Math.floor(num)]; newarr.push(index); } return newarr; } let res1=randomEle(arr); console.log(res1);*/ // 6.從數組中隨機獲取任意一個不重複的元素 var arr=[3,-1,1,6,12,-1,65,1,-4]; function randomEle(arr,times=3){ let newarr=[]; for(let i=0;i<times;i++){ let num=Math.random()*arr.length; //隨機數 let index=Math.floor(num); // 向下取整後 的 下標 while(newarr.includes(arr[index])){ //去重 num=Math.random()*arr.length; //隨機數 index=Math.floor(num); // 向下取整後 的 下標 } newarr.push(arr[index]); } return newarr; } let res1=randomEle(arr); console.log(res1); # 數組對象 ???????????????????????????????????????????????????????? // var arr=[5,1,2,3,4]; // alert(arr.length); //從大往小 arr.sort(function(a,b){ if(a>b){ return -1; }else if(a==b){ return 0; }else if(a<b){ return 1; } }); document.write(arr); #事件 onclick 鼠標點擊事件 onmouseover 鼠標經過事件 onmouseout 鼠標移開事件 onfocus 光標聚焦事件 onblur 光標失焦事件 onselect 內容選中事件 onchange 文本框內容改變事件 onload 加載事件 input.focus();//立即獲取焦點 ###### onclick # ★★★★★★★★★★★★日期對象★★★★★★★★★★★★★★★★ // 獲取時間: var date=new Date; // var date2=new Date("2017/5/1 12:0.0"); // var date3=new Date("12:0.0 2017/5/1"); // var date4=new Date(2017,4,1,12,0,0);// 月份需要-1.想要輸出5月，需要輸入4月。 //可以設置 年、月、日、時、分、秒。不能設置星期幾。 var date=new Date; document.write(date.getMonth()+1+'月<br>'); //月份需要+1 document.write(date.getFullYear()+'年<br>'); document.write(date.getDate()+'號<br>'); // document.write(date.getTime()+'秒<br>'); var date=new Date; date.setFullYear(2018); date.setMonth(4); date.setDate(1); document.write(date+'天<br>'); #### //五一倒計時 <script> var date=new Date; function time(){ var date5=new Date('2017/5/1'); var date=new Date; var cha=Math.floor((date5-date)/1000); //轉換爲秒 var day = Math.floor(cha/(60*60*24)); //轉換爲天 cha = cha % (60*60*24); var hour=Math.floor(cha/(60*60)); //轉換爲小時 cha = cha % (60*60); var min =Math.floor( cha / 60); //轉換爲分鐘 var second = cha % 60; //轉換爲秒 document.body.innerText=(day+'天'+hour+'小時'+min+'分'+second+'秒'); } time(); setInterval(time,1000); </script> //十分鐘倒計時 var date1=new Date; var date2=date1.setMinutes(date1.getMinutes()+1); var date3=date2; function time2(){ var date4=new Date; var cha=Math.floor((date3-date4)/1000); while(cha<=0){ alert('時間到！'); clearInterval(t); return; } var min=Math.floor(cha/60); var second=Math.floor(cha%60); document.body.innerText=(min+'分'+second+'秒'); } time2(); var t=setInterval(time2,1000); t; /* #################################################################################3 # ★★★★★★★★★★★★ BOM ★★★★★瀏覽器模型★★★★★★★★★★★★★★★★★★★ #################################################################################3 */ # BOM(Browser Object Model) --瀏覽器對象模型 window對象 是BOM中所有對象的核心 --> Global ### 屬性 1.(位置類型) (獲得瀏覽器的位置) IE: * window.screenLeft 可以獲得瀏覽器距屏幕左上角的左邊距 * window.screenTop 可以獲得瀏覽器距屏幕左上角的上邊距 FF: w3c * window.screenX window.screenY (獲得瀏覽器的尺寸) * window.innerWidth 獲得窗口的寬度 * window.innerHeight 獲得窗口的 * 兼容: * document.documentElement. clientWidth * document.documentElement. clientHeight (獲得瀏覽器的分辨率) * window.screen.height; * window.screen.width; 舉例： /* console.log(window.screenX); //距屏幕左邊的距離 console.log(window.screenLeft); console.log(window.screenY); //距屏幕上邊的距離 console.log(window.screenTop); console.log(window.innerWidth); //獲取瀏覽器寬度 console.log(window.innerHeight); //獲取瀏覽器高度 console.log(document.documentElement.clientWidth); //兼容 寬度 console.log(document.documentElement.clientHeight); //兼容 高度 console.log(window.screen.height); //屏幕分辨率 console.log(window.screen.width);*/ ### 2.關係類型 A.top 返回頂層窗口 B.self === window 3.status 設置窗口狀態欄的文本 window.top ### 方法: * 1.窗體控制 A.對窗體的移動 window.moveBy(x,y) 相對於當前位置沿着X\Y軸移動指定的像素， 如負數是反方向 moveTo(x,y) 相對於瀏覽器的左上角沿着X\Y軸移動到指定的像素， 如負 數是反 方 向 B.窗體尺寸的改變 resizeBy(x,y) 相對於當前窗體的大小，調整寬度和高度 resizeTo(x,y) 把窗體調整爲指定寬度和高度 * 2.對窗體滾動條的控制 scrollBy(x,y) 相對於當前滾動條的位置移動的像素(前提有滾動條) scrollTo(x,y) 相對於當前窗口的高度或寬度，移動到指定的像素 console.log(window.moveBy(20,30)); //移動 window.scrollBy(200,130); scrollBy() 可把內容滾動指定的像素數。 ### 3.時間間隔的函數 setInterval(函數指針,指定的時間(毫秒)) 按照指定的週期(毫秒)不斷的執行函數 clearInterval() 清除時間函數進程 setInterval(miaosha,1000) // 1000毫秒=1秒 setTimeout(函數指針,指定的時間(毫秒)) 在指定的毫秒數後只執行一次函數 clearTimeout() 清除時間函數進程 ### 其他方法: alert() 顯示帶有一段消息和一個確認按鈕的警告框。 confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 prompt() 顯示可提示用戶輸入的對話框。 close() 關閉瀏覽器窗口。 open(url,name,feafurse,replace) 通過腳本打開新的窗口URL要在新窗口中顯示的文檔的 URL。如果省略了這個參數,那麼新窗口就不會顯示任何文檔 var input=prompt('輸入',' '); //都是字符串 var flag=confirm(123); open('error.html','_blank','width=500,height=500,left=200,top=100'); open('error.html','_self','width=500,height=500,left=200,top=100'); /* #################################################################################3 練習 #################################################################################3 */ ### //按照指定的週期不停的執行某個函數 setInterval(function(){ // alert(1); },1000) // 1000毫秒=1秒 setInterval(miaosha,1000) // 1000毫秒=1秒 var t = setInterval(miaosha,1000) // 1000毫秒=1秒 clearInterval(t); ### //只執行一次 var t = setTimeout(miaosha,1000) // 1000毫秒=1秒 clearTimeout(t); /* #################################################################################3 history location #################################################################################3 */ History 對象包含用戶(在瀏覽器窗口中)訪問過的 URL ，他是window對象的子對象。 alert(history.length) ## 屬性: length 返回瀏覽器歷史列表中的 URL 數量。 alert(history.length) 方法: back() 加載 history 列表中的前一個 URL。 history.back(); forward() 加載 history 列表中的下一個 history.forward(); go() 值：1 後一個 || -1 前一個 || 0 刷新 # 事件三要素 <script> // alert(history.length) // 操作誰 怎麼樣 幹什麼 alert(3); window.οnlοad=function(){ alert(1); } alert(2); //彈出順序： 3--2--1 需要頁面資源加載完畢之後才能觸發window </script> ### 屬性:http://baidu.com/boke/image? – hash 設置或返回從井號 (#) 開始的 URL（錨）。 – host 設置或返回主機名和當前 URL 的端口號。 hostname 設置或返回當前 URL 的主機名。 – href 設置或返回完整的 URL。 location.href='error.html'; – pathname 設置或返回當前 URL 的路徑部分。 – port 設置或返回當前 URL 的端口號。 – protocol 設置或返回當前 URL 的協議。 – search 設置或返回從問號 (?) 開始的 URL（查詢部分）。 – http://baidu.com/admin/aaa/#top?name=zhangsan&age=12 http://127.0.0.1:8020/js-4-27/denglu.html ？ * 協議 域名 路徑 查詢 hash: #後邊的東西 herf: 整個地址 pathname: 路徑 pro 協議 search ? ### 方法: – assign() 加載新的文檔。 加載文檔後會在歷史記錄裏面留下記錄 location.assign('error.html'); – reload() 重新加載當前文檔。 location.reload('error.html'); – replace("1,html") 用新的文檔替換當前文檔。 不會留下記錄 ################################################################ 舉例 -- 頁面跳轉和 歷史刷新 ################################################################ <script> document.write(history.length); window.οnlοad=function(){ let forward1=document.getElementById('forward'); let back1=document.getElementById('back'); let go1=document.getElementById('go'); forward1.onclick = function(){ history.forward(); alert('onclick--forward1'); } back1.onclick = function(){ alert('onclick--back1'); history.back(); } go1.onclick = function(){ // alert(3); location.reload(); } } </script> <body> <h1>這是html2頁面 </h1> <a href="index.html">跳轉到 index1 頁面</a> <button id="forward">2前進</button> <button id="back">2後退</button> <button id="go">2刷新</button> </body> ######、、、、、、、、、、、、##########、、、、、、、、、、、########## ### ############################################################# 舉例 -- 登錄-出錯- html文件 ### ############################################################# ################################################################ # ★★★★★★★★★DOM★★★★★★★★★ ################################################################ # document對象 ### 一、屬性 title 返回或設置當前文檔的標題 URL 返回當前文檔的url bgColor 設置文檔的背景色 fgColor 設置文檔的前景色(設置文字顏色) document.title='曹越'; console.log(document.title); console.log(document.URL); document.bgColor='res'; document.fgColor='red'; ### 二、方法: * getElementById(idname) 返回擁有指定id的（第一個）對象的引用 * getElementsByTagName(tagname) 獲得的是集合（類似於數組），需要加下標[0].元素都需要加下標 返回帶有指定標籤名的對象的集合 * getElementsByName(name) 返回帶有指定name指定名稱的對象的集合 * getElementsByClassName() 返回帶有指定class指定名稱的對象的集合 ### Document 對象集合 A. all 所有元素的集合 B. forms 返回對文檔中所有form對象的引用 通過集合來訪問相應的對象 1.通過下標的形式 2.通過name形式 C. anchors 返回對文檔中所有anchors(錨鏈接) 對象的引用 D. images 返回對文檔中所有image 對象的引用 E. links 返回對文檔中所有area 對象和link對象的引用 ################################################################ 事件 ################################################################ ## 一、事件驅動 1.事件 javascript偵測到的用戶的操作或是頁面 的一些行爲(怎麼 發生的) 2.事件源 引發事件的元素。(發生在誰的身上) 3.事件處理程序 對事件處理的程序或是函數 (發生了什麼事) ## 1.常用的鼠標事件 onclick 鼠標單擊事件 ondblclick 鼠標雙擊事件 onmousedown 鼠標按下事件 onmouseup 鼠標擡起事件 onmousemove 鼠標移動事件 鼠標在規定區域、塊兒內移動時的效果 onmouseover 鼠標移入事件 移入其子元素，仍會觸發 onmouseout 鼠標移出事件 onmouseenter 鼠標移入事件 移入，常用 onmouseleave 鼠標移出事件 移出，常用 ## 2.鍵盤事件 onkeyup 按鍵彈起事件 onkeydown 按鍵按下事件 onkeypress 按鍵按下或按住 ## 3.表單事件 onsubmit onblur onfoucs onchange ## 4.頁面事件 onload 頁面加載 ################################################################ 對內容、屬性、樣式的操作 ################################################################ 操作屬性 對象.屬性 對象.屬性=值 (設置、獲取、添加屬性 (屬性值)) 對樣式的操作: 1.批量修改 – 通過ID來更改樣式 – 通過className更改樣式 2.通過行內樣式更改 – 對象.style.屬性(獲取) – 對象.style.屬性=值 (設置、更改、添加屬性) # ★★★★對內容、屬性、樣式的操作★★★★★★★★★ ### 行內樣式和外部樣式通用的獲取方法 獲取樣式屬性 * 對象.currentStyle.屬性 IE 用來獲得實際的樣式屬性 * getComputedStyle(對象,null).屬性 FF 用來獲得實際的樣式屬性 * 只能獲取不能設置 ##### window.οnlοad=function(){ let box1=document.getElementsByClassName('box'); console.log(getComputedStyle(box[0],null).width); console.log(getComputedStyle(box[0],null).height); //可以獲取所有，但只能獲取，不能設置 } ##### 讓塊兒反覆伸縮 window.οnlοad=function(){ let box1=document.getElementsByClassName('box')[0]; var t= setInterval(resize, 200); let speed=10; function resize(){ let widths= parseInt(getComputedStyle(box1,null).width); if(widths>=400){ widths=400; speed*=-1; } if(widths<=300){ widths=300; speed*=-1; } box1.style.width=`${widths+speed}px`; } /*let flag=1; function resize(){ let widths= parseInt(getComputedStyle(box1,null).width); box1.style.width = widths+10+'px'; if(flag==1){ box1.style.width = widths+10+'px'; console.log(box1.style.width); if(box1.style.width >'400px'){ flag=2; } } if(flag==2){ box1.style.width = widths-10+'px'; console.log(box1.style.width); if(box1.style.width <'300px'){ flag=1; } } }*/ ### 操作內容 1.innerHTML 用來設置或獲取對象起始和結束標籤內的內容(識別html標籤) 2.innerText 用來設置或獲取對象起始和結束標籤內的文字內容 (IE) textContent用來設置或獲取對象起始和結束標籤內的文字內容 (FF) <script> window.οnlοad=function(){ let box=document.getElementsByClassName('box')[0]; console.log(box.innerText); box.innerText='設置text文本'; console.log(box.innerHTML); box.innerHTML='設置innerHTML屬性'; console.log(box.outterText); console.log(box.outterHTML); box.className='box hot'; box.id btn.zhangsan } </script> querySelectorAll 返回指定選擇器的集合，需要加下標。 querySelec 返回指定選擇器的第一個，直接操作，不需要加下標。 input1[i].οnmοuseοver=function(){ // this.style.background='red'; 等同於下一句 input1[i].style.background='red'; kw[i].style.height='200px'; let a=this; function aa(){ input1[i].style.background='red'; // this.style.background='red'; 這兒的this需要上邊 let =this 一下，否則不能用。 } } # ★★★★封裝 ★★★★★★★★★★★★ ### js 文件 // 去空 判斷類型 判斷字符串 判斷 . # 獲得 字符串 function $(selector,ranger=document){ let type=typeof selector; if(type == 'string'){ //元素的獲取 let select = selector.trim(); let first = select.charAt(0); if(first=='.'){ return ranger.getElementsByClassName(select.substring(1)); }else if(first=='#'){ return document.getElementById(select.substring(1)); }else if(/^[a-zA-Z][a-zA-Z1-6]{0,8}$/.test(select)){ // 正則// ^開頭 $結尾 return ranger.getElementsByTagName(select); } }else if(type=='function'){ //添加事件 window.οnlοad=function(){ selector(); } } } ### ★★★★★★★★★如何實現兼容★★★★★★★★★★★★★★ function getStyle(boj,attr){ if(window.getComputedStyle){ // alert(1); return getComputedStyle(obj,null)[attr]; }else{ alert(2); return obj.currentStyle[attr]; } } ### ★★★★★★設置或獲取某一個元素的內容★★★★★★★★ `/*html(obj,contant) obj 指定的對象 contant 設置的內容 ，沒有--》表示獲取內容 有--》 設置內容*/` ### function html(obj,content){ //content 沒傳 就是undefined 就是false if(content){ // 》設置 return obj.innerHTML=content; }else{ // 獲取 return obj.innerHTML; } } /* html(obj,contant=neitong) ### 設置或獲取某一個元素的內容 obj 指定的對象 contant 設置的內容 ， 沒有--》表示獲取內容 有--》 設置內容 */ function html(obj,content){ //content 沒傳 就是undefined 就是false if(contant){ // 》設置 obj.innerHTML=content; }else{ // 獲取 return obj.innerHTML; } } ## //動畫封裝 多參數輸入 /*animate(box,{width:500,height:400,left:500}，function(){ }) function animate(obj,attrObj){ let speed=10; t=setInterval(move,200); function move(){ for(let i in attrObj){ let currentV=parseInt(getComputedStyle(obj,null)[i])+10; if(currentV>=attrObj[i]){ currentV=attrObj[i]; clearInterval(t); } obj.style[i] = currentV+'px'; } } }*/ #### 自動輪播 // 狀態初始化 // current（當前窗口） next（下一個） // 就位 next left:width // 動畫 // index left:-width; // next left:0 // 更新 current let imgbox=document.querySelector('.imgbox'); let imgs=document.querySelectorAll('.imgbox li'); let imgwidth=parseInt(getComputedStyle(imgbox,null).width); let current=0,next=0; let t; for(let i=0;i<imgs.length;i++){ if(i==0){ continue; } imgs[i].style.left=imgwidth+'px'; } t=setInterval(move,2000); function move(){ next++; if(next==imgs.length){ next=0; } imgs[next].style.left=imgwidth+'px'; animate(imgs[current],{left:-imgwidth}); animate(imgs[next],{left:0}); current=next; } ####手動輪播 // 手動點擊輪播點 向左切換圖 OK for(var i=0;i<btns.length;i++){ btns[i].index=i; //用index保存對應屬性 和 值 btns[i].οnclick=function(){ // alert(this); // alert(this.index); btns[current].className=''; //輪播點 this.className='hot'; imgs[this.index].style.left=imgwidth+'px'; animate(imgs[current],{left:-imgwidth}); animate(imgs[this.index],{left:0}); current=next=this.index; } } ##### ？？？？？？？？？？？？？？？？？？？？？？？？？？？ 手動點擊輪播點 向左 向右 切換圖 // value 對應元素 index 對應下標 obj對應對象 btns.forEach(function(value,index,obj){ //index 對應 next value.οnclick=function(){ if(current==index){ return; } btns[current].className=''; //輪播點 btns[index].className='hot'; if(index>current){ btns[index].style.left=imgwidth+'px'; animate(imgs[current],{left:-imgwidth}); animate(imgs[index],{left:0}); }else if(index<current){ btns[index].style.left=-imgwidth+'px'; animate(imgs[current],{left:imgwidth}); animate(imgs[index],{left:0}); } current=next=index; } }) ### 閉包函數 let bb==aa(321); bb(); function aa(j){ return function(){ alert(j); } } 外層函數調用內層函數的局部變量 內存泄漏： ##### 使用forEach ？？？？？？？？？？？？？？？？？？？？？？？ let btns1=document.getElementsByClassName('btn')[0]; let aa=btns1.getElementsByClassName('li')[0]; console.log(Array.from(aa)); // 轉化成數組 就可以用 forEach 了 //冒充法 Array[0].forEach.callback ### 獲取 box 寬高 尺寸 獲取位置 let widths1=box.offsetWidth; let height=box.offsetHeight; let top=box.offsetTop; let left=box.offsetLeft; * 只有 top left 沒有right和bottom let cw=window.innerWidth;瀏覽器寬度 let ch=window.innerHeight;瀏覽器高度 * scrollTop * scrollLeft * 獲取具有滾動條元素的位置屬性.具有滾動條的元素在滾動的時候，他的內部元素超出該元素頂部或是左邊的距離。 `let a=document.body.scrollTop` # 按需加載 window.οnscrοll=function(){ // 按需加載 方法二 OK let tops=document.body.scrollTop; for(let i=0;i<arr.length;i++){ if(tops+ch>arr[i]+100){ let floor=document.getElementsByClassName('floor')[i]; let imgs=floor.getElementsByTagName('img'); for(let j=0;j<imgs.length;j++){ imgs[j].src=imgs[j].title; console.dir(imgs[j].src); } } } } /*window.οnscrοll=function(){ // 按需加載 方法一 OK let tops=document.body.scrollTop; arr.forEach(function(value,index){ if(tops + ch > value+50){ //index 下標 let floor=document.getElementsByClassName('floor')[index]; let imgs=floor.getElementsByTagName('img'); for(let i=0;i<imgs.length;i++){ imgs[i].src=imgs[i].title; console.dir(imgs[i].src); } } }) }*/ ## 類名操作 * * sli[i].classList.add('hot'); //添加類名 * sli[i].classList.remove('two'); //刪除類名 * sli[i].classList.toggle('two'); //以前有，則刪除 * sli[i].classList.toggle('three'); //以前無，則添加 * sli[n].className=''; * this.className='hot'; #####for( let i in let a=document.body.scrollTop // console.log(a); ### 過渡結束 * ontransilationEnd # 節點的屬性和方法 #####獲得節點關係的屬性 * 對象.parentNode 獲得父節點的引用 * 對象.childNodes 獲得子節點的集合 * 對象.firstChild 獲得第一個子節點的引用 * 對象.lastChild 獲得最後一個子節點的引用 * 對象.nextSibling 獲得下一個兄弟節點的引用 * 對象.previousSibling 獲得上一個兄弟節點的引用 var one = div1.nextElementSibling || div1.nextSibling; // 所以用這種處理兼容的辦法：中間通過一個變量，獲取其中一個值 注意：先寫正常瀏覽器，在寫要去兼容的IE其他瀏覽器 #### eg: let box=document.getElementsByClassName('box')[0]; let child=box.childNodes; let son = child[1]; son.style.background='yellow'; let prev=son.previousSibling; let par=son.parentNode; console.dir(son); console.dir(prev); console.dir(par); ## 封裝 獲取 第一 最後一個 元素節點 #### 創建指定元素 創建一個div: let button=document.querySelector('button'); button.οnclick=function(){ let ele=document.createElement('div'); ele.style.cssText='width:200px;height:200px;background:red'; document.body.appendChild(ele); } #### 創建 id class ele.id='one'; ele.className='two'; ## 節點的方法 一、創建節點 1. 創建元素節點 document.createElement("元素標籤名"); 2. 創建屬性節點 A.對象.屬性="屬性值“ B.對象.setAttribute(屬性名,屬性值) C. arrt=document.createAttribute(“屬性名”); arrt.nodeValue=“屬性值” obj.setAttributeNode(arrt); 3. 創建文本節點 對象.innerHTML=""; document.createTextNode("文本"); ## 插入元素 * document.body.appendChild(ele); //父元素的後面插入 * document.body.insertBefore(ele,box); //往指定元素的前面插入，在 box之前插入 ele obj.insertBefore(ele,box); // obj(父元素).在box之前插入ele obj 父元素 ele 要插入的元素 box 在其之前插入新節點的子節點。如果未規定，則 insertBefore 方法會在結尾插入 newnode。 ## 三、刪除節點 * 父對象.removeChild(刪除的對象) 如果確定要刪除節點，最好也清空內存 對象=null; let box=document.querySelector('.box'); document.body.removeChild(box); //移除box box=null; //移除對象，從內存中清空對象 ### 四.替換 * document.body.replaceChild(ele.box); let newbox=box.cloneNode(); //只克隆節點本身，不可隆內部元素 let newbox=box.cloneNode(true); //克隆節點本身+內部元素 document.body.appendChild(newbox); ### maspainter #### //設置背景顏色 方法一 OK let colorArr=[0,3,6,9,'c']; function getColor(){ let color='#'; for(let i=0;i<3;i++){ let num=Math.floor(Math.random()*colorArr.length); color+=colorArr[num]; } return color; } #### //設置背景顏色 方法二 function getColor(){ let r= Math.floor(Math.random()*256); let g= Math.floor(Math.random()*256); let b= Math.floor(Math.random()*256); return `rgb(${r},${g},${b})`; } ### 輪播 向左 左移 index輪換圖.html function move(){ //左移 animate(imgbox,{left:-widths},function(){ let first=getFirst(imgbox); imgbox.appendChild(first); imgbox.style.left='0'; }) } # 事件綁定 事件詳情 1.一般綁定事件 在腳本中綁定 報錯 直接在HTML元素綁定 * 2.同一個事件綁定多個事件處理程序 IE: 對象.attachEvent("事件(on)",move) 添加 對象. detachEvent("事件(on)","處理程序") 刪除 FF: 對象.addEventListener("事件","處理程序",布爾值) 添加 對象.removeEventListener("事件","處理程序",布爾值) 刪除 ### 綁定事件方式： // 綁定事件方式：一 事件類型 事件處理函數 布爾值 // box.addEventListener('click',function(){alert(1),false}); // 綁定事件方式： 二 function aa(){alert(1)}; function bb(){alert(2)}; box.addEventListener('click',aa,false); box.addEventListener('click',bb,false); box.οnclick=function(){ aa(); bb(); } box.οnclick=null; ## 一、事件驅動 1.事件 JavaScript偵測到的用戶的操作或是頁面的一些 行爲(怎麼發生的) 2.事件源 引發事件的元素。(發生在誰的身上) 2.事件處理程序 對事件處理的程序或是函數 (發生了什麼事) ### 一、什麼是事件對象 用來記錄一些事件發生時的相關的信息的對象 1.只有當事件發生的時候才產生，只能在處理函數內部訪問 2.處理函數運行結束後自動銷燬。 二、如何獲取事件對象 IE：window.event FF: 對象.on事件=function (e){} # 1.關於鼠標事件 相對於瀏覽器位置的 clientX 當鼠標事件發生的時候，鼠標相對於瀏覽器X軸的位置 clientY 當鼠標事件發生的時候，鼠標相對於瀏覽器Y軸的位置 相對於屏幕位置的 screenX 當鼠標事件發生的時候，鼠標相對於屏幕X軸的位置 screenY 當鼠標事件發生的時候，鼠標相對於屏幕Y軸的位置 相對於事件源的位置 offsetX 當鼠標事件發生的時候，鼠標相對於事件源X軸的位置 offsetY 當鼠標事件發生的時候，鼠標相對於事件源Y軸的位置 ### 關於鼠標滾輪的 onmousewheel 滾輪事件 if(document.attachEvent){ document.attachEvent("onmousewheel",scrollFn); //IE、 opera }else if(document.addEventListener){ document.addEventListener("mousewheel",scrollFn,false); //chrome,safari -webkitdocument.addEventListener("DOMMouseScroll",scrollFn,false); //firefox -moz- } 事件對象屬性: ### 滾輪 onmousewheel 事件對象.wheelDelta 獲取滾輪滾動的方向 IE 事件對象.detail 獲取滾輪滾動的方向 FF let box=$('.box')[0]; console.log(box.style.height); document.addEventListener('mousewheel',function(e){ let dir=e.wheelDelta; if(dir==120){ // 谷歌 滾輪朝下 -120 滾輪朝上 120 火狐 下 3 上 -3 //up box.style.height=510+'px'; }else if(dir == -120){ //下 box.style.height=50+'px'; } },false) ### let box=$('.box')[0]; 鼠標滾動 變色 mouseWheel(box,function(){ box.style.background='green'; },function(){ box.style.background='blue'; }) #### 關於鼠標移入移出的 mouseout mouseover 事件對象屬性 事件對象.fromElement 鼠標從哪來 IE 事件對象.toElement 鼠標到哪去 IE 事件對象.relatedTarget FF 在mouseover事件中代表IE中的fromElement 在mouseout事件中代表IE中的toElement ### 2.關於鍵盤事件 不區分大小寫 a-A都是65 keyCode 獲得鍵盤碼 空格:32 回車13 左上右下：37 38 39 40 * altKey 判斷alt鍵是否被按下 按下是true 反之是false 布爾值 * ctr * lKey * shiftKey * type 用來檢測事件的類型 主要是用於多個事件通用一個事件處理程序的時候 e.type=='click' ***e.type=='keydown'*** * onkeyup 按鍵彈起事件 * onkeydown 按鍵按下事件 * onkeypress 按鍵按下或按住 ## 事件流 當頁面元素觸發事件的時候，該元素的容器以及整個頁面都會按照特定順序響應該元素的觸發事件，事件傳播的順序叫做事件流程。 事件流的分類 1.冒泡型事件(所有的瀏覽器都支持) 從下往上 由明確的事件源到最不確定的事件源依次向上觸發。 * ***addEventListener(事件，處理函數，false)*** IE低版本中只有冒泡型從下往上 onEventType addEventListener ***同類型事件*** 纔會響應 冒泡 2.捕獲型事件(IE不支持 w3c標準 火狐) 從上往下 不確定的事件源到明確的事件源一次向下觸發。 addEventListener(事件，處理函數，true) 目標事件源對象 e.target 是誰觸發的該事件 ### 事件源 事件對象 目標事件源的對象 box e.target (box,) ### 阻止事件流(事件對象) * e.preventDefault(); 清除瀏覽器默認行爲 * e.stopPropagation(); 阻止事件流 IE: 事件對象.cancelBubble=true; FF: 事件對象.stopPropagation(); * 獲得目標事件源的對象 IE： 事件對象.srcElement FF: ***事件對象.target*** * 事件對象阻止瀏覽器默認行爲 if (ev.preventDefault ) ev.preventDefault(); //阻止默認瀏覽器動作(W3C) else ev.returnValue = false;//IE中阻止函數器默認動作的方 式 ## 事件委派 son -> box 把原來加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素 box.οnclick=function(){ box.target.style.background='red'; //實際操作爲box的son } * 有大量的事件需要處理的時候 * 通過JS動態，後添加的元素，需用委派 e.target ### 舉例： 鍵盤點擊+鼠標點擊 = 評論頁面 btn.οnclick=text.οnkeydοwn=function(e){ if(text.value.trim()==''){ return; } if(e.type=='click'){ let news=document.createElement('li'); let new1=document.createElement('div'); new1.className='delete'; news.innerText=text.value; // new1.innerText='X'; new1.innerText='刪除'; ul.appendChild(news); ul.appendChild(new1); text.value=''; span.innerText='100'; console.log('OK'); new1.οnclick=function(){ ul.removeChild(new1); ul.removeChild(news); } }else if(e.type=='keydown'){ if(e.shiftKey&&e.keyCode==13){ let news=document.createElement('li'); let new1=document.createElement('div'); new1.className='delete'; news.innerText=text.value; new1.innerText='X'; ul.appendChild(news); ul.appendChild(new1); text.value=''; span.innerText='100'; console.log('OK'); new1.οnclick=function(){ ul.removeChild(new1); ul.removeChild(news); } } } # Cookie 是一些數據, 存儲於你電腦上的文本文件中。 當 web 服務器向瀏覽器發送 web 頁面時，在連接關閉後，服務端不會記錄用戶的信息。 Cookie 的作用就是用於解決 "如何記錄客戶端的用戶信息": ## cookie * name cookie名 * value 值 * expires 過期時間 * path 路徑 ##### 設置 生成 cookie： document.cookie=`${key}=${value};expires=${expires.toUTCString()}`; document.cookie='name=liujiang'; document.cookie='age=18'; document.cookie='sex=nan;expires='+time.toUTCString(); * function setcookie * function getcookie * function delcookie ## localStorage 本地存儲 頁面之間可以共享 不刪除 就會 永久性存在 * localStorage.setItem('class','1702'); * 設置（名字，值） * localStorage.getItem('class'); * 獲取（名字） * localStorage.key(0); * localStorage.clear(); * 清除 * localStorage.removeItem('name'); * 移除 ## sessionStorage 用法和 localStorage 一樣 。頁面之間不能共享 臨時的，關了瀏覽器就沒了 * sessionStorage.aa='bb'; //設置aa的值是bb ### cookie--localstorage--sessionstorage 區別 * 1.localStorage、sessionStorage（5M） 比cookie（4K） 容量大，存儲方便 * 2.cookie存儲有時間限制，設置就有，不設置就是臨時的，關閉瀏覽器就沒了。localStorage 必須手動清除，不刪除 就會 永久性存在。 sessionStorage臨時的。關閉瀏覽器就沒了。 * 3.刪除方式： cookie 需要把時間設置提前。localStorage、sessionStorage是remove和clear. * 4.localstorage 頁面之間可以共享. sessionstorage 頁面之間不能共享 `localStorage 5M 必須手動清除 remove clear `sessionStorage 5M 關瀏覽器就沒了 remove clear `cookie 區別 有時間 設置就有，不設置就是臨時的，關瀏覽器就沒了。內 存少 4k 刪除方式 需設置，把時間提前` ## JSON.parse /字符串轉化成對象 ## JSON.stringify 對象轉換爲一個JSON字符串 let student1 =localStorage.student; let json1=JSON.parse(student1); //字符串轉化成對象 console.log(json1[0]); json1.push({'name':'zhangsan','age':18}); localStorage.student = JSON.stringify(json1); //對象轉化成字符串 //將一個JavaScript值轉換爲一個JSON字符串 音頻、視頻 video type 設置格式 # 音頻、視頻 video audio audio.muted 靜音 # canvas 畫板 畫布 ## 標籤 `<canvas widht="300px" height="300px">替換內容</canvas>` 不能在CSS中設置寬高 ##尺寸 * width * height > CSS相當於放大 ## 座標 > 原點左上角；水平 X Y ## 繪圖環境 2D let ctx = canvas.getContext('2d'); //繪 2D 圖 ## 矩形 （矩形左上角的 x座標 Y 寬 高) * context.rect(x,y,width,height); * 矩形左上角的 x 座標 Y座標 寬 高 * context.fillRect(x,y,width,height);<br> * ctx.fillRect(10,10,100,100); //填充 * ctx.strokeRect(200,100,50,50); //描邊 * ctx.clearRect(50,50,50,50); //擦除 ## 樣式 * fillstyle 設置或返回用於填充繪畫的顏色、漸變或模式 * strokestyle > red #000 rgb() rgba() 漸變 ## 路徑 ctx.beginPath(); //開始 每次都要開始 ctx.moveTo(150,150); //移動位置 ctx.lineTo(150,200); //繪製 ctx.lineTo(200,175); // ctx.closePath(); //閉合 ctx.fillStyle='purple'; //填充爲紫色 ctx.fill(); //填充 ctx.stroke(); //描邊 ## 畫圓 ctx.beginPath(); ctx.arc(150,150,100,0,2*Math.PI);// 250,150 // （圓心 x 座標,Y座標，半徑，起始角-以弧度計，結束角-以弧度計，true逆時針/false順時針） ctx.closePath(); ctx.stroke(); /* let anglue = (n * 360 / 100) * Math.PI / 180; // 從0開始 ctx.arc(150,150,50,0,anglue,false);*/ let anglue = (n * 360 / 100-90) * Math.PI / 180; // 從0開始 ctx.arc(150,150,50,-Math.PI/2,anglue,false); // （圓心 x 座標,Y座標，半徑，起始角-以弧度計，結束角-以弧度計，true逆時針/false順時針） ## 貝塞爾 quadraticCurveTo // 貝塞爾控制點的 x 座標, 貝塞爾控制點的 y 座標, 結束點的 x 座標, 結束點的 y 座標 ctx.quadraticCurveTo(50,20,50,50); ## 線 * linewidth 線寬 * linecap 端點 * linejoin 拐點 ctx.lineWidth = 10; ctx.lineCap='round'; // round 圓形線帽 ctx.lineCap='square'; //方形 ctx.lineCap='butt'; //默認沒有 ctx.lineJoin='round';//圓角 ctx.lineJoin='bevel';//平角 ctx.lineJoin='miter';//尖角 ctx.miterLimit=4; ## 文本操作 字體 ctx.font = 'bold 30px 宋體'; ctx.textAlign = 'right'; //右對齊 對齊方式 context.textAlign="center|end|left|right|start"; 居中 結束 左對齊 右對齊 開始 ctx.textBaseline = 'top'; //文本基線。 context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; 默認 em方框的頂端 懸掛基線 正中 表意基線 方框的底端 ctx.strokeText('hello world',150,150); //不填充文本 context.strokeText(text,x,y,maxWidth); 畫布上輸出的文本。 開始繪製文本的 x 座標， y座標， 可選。允許的最大文本寬度 ctx.fillText('hello world',150,200); //繪製填充色文本 let aa = ctx.measureText('hello world'); //測量 ## 陰影 虛線 setLineDash ctx.setLineDash([4, 2]); //設置虛線，參數爲數組，第一個值爲實現寬度，第二個值爲空白的寬度 ctx.lineDashOffset = 0; //虛線起始偏移量 ctx.shadowColor = 'red'; //陰影顏色 ctx.shadowBlur = 5; //陰影的模糊級數 ctx.shadowOffsetX = 5; // ctx.shadowOffsetY = 5; // ## ctx.clearRect(0,0,600,500); //清空畫布 ## ctx.translate(x,y); //平移原點 ## ctx.rotate(Math.PI/2); //旋轉座標系 x 度，正方向 ## 插入圖片 * context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); > img 規定要使用的圖像、畫布或視頻。 sx 可選。開始剪切的 x 座標位置。 sy 可選。開始剪切的 y 座標位置。 swidth 可選。被剪切圖像的寬度。 sheight 可選。被剪切圖像的高度。 x 在畫布上放置圖像的 x 座標位置。 y 在畫布上放置圖像的 y 座標位置。 width 可選。要使用的圖像的寬度。（伸展或縮小圖像） height 可選。要使用的圖像的高度。（伸展或縮小圖像） let img = new Image(); img.src = '../img_1.png'; img.onload = function(){ //加載 ctx.drawImage(img,100,200,200,200) } ## save restore > save() 方法保存當前圖像狀態的一份拷貝。 > restore() 方法將繪圖狀態置爲保存值。 ctx.fillStyle = 'green'; ctx.fillRect(75,75,200,200); ctx.save(); 、、、、、、、保存save之前的樣式 ctx.fillStyle = 'yellow'; ctx.fillRect(100,100,100,100); // ctx.fillStyle = 'blue'; ctx.restore(); 、、、、、、、、、、恢復到save之前樣式 ctx.fillRect(125,125,50,50); #### eg:畫板 虛線 self.ctx.save(); if(self.arr.length > 0){ self.ctx.putImageData(self.arr[self.arr.length-1],0,0) } self.ctx.beginPath(); self.ctx.moveTo(ox,oy); self.ctx.lineTo(mx,my); //劃線 self.ctx.setLineDash([4, 6]); self.ctx.closePath(); self.ctx.stroke(); self.ctx.restore(); ## putImageData getImageData putImageData(self.arr[self.arr.length-1],0,0) this.ctx.getImageData(0,0,this.width,this.height) ## 下載 let data = this.obj.toDataURL('image/png').replace(`data:image/png`,'data:stream/octet') ## 下載圖片 let imgdata = canvas.toDataURL('image/png'); //創建 let img = new Image; img.src = imgdata; img.οnlοad=function(){ // for(let i=0;i<box.childNodes.length;i++){ if(box.childNodes.length ==2 ){ box.removeChild(box.firstChild); box.removeChild(box.lastChild); } box.appendChild(img); let a= document.createElement('a'); a.href = imgdata; a.download = 'qipan.png'; //下載 box.appendChild(a); }; ## 正則 ### 創建正則表達式 在javascript正則表達式也是通過對象的方式來創建的，他有自己的方法。 * 1. 通過構造函數創建 reg=new RegExp(“正則表達式”,”模式修正符”) var reg = new RegExp("uek“); var stat = reg.test("sxuek"); alert(stat); * 2. 通過字面量方式創建 var reg = /uek/i; var stat = reg.test("sxuek"); alert(stat); 通常將正則表達式字符串放在 /RegExp/ 中間//稱爲定界符 * RegExp.test(str) `返回一個 Boolean 值，它指出在被查找的字符串中是否存在模式` * RegExp.exec() `在字符串中匹配，成功返回數組，失敗返回null` * console.log(reg1.exec(str1)); //數組： // 0:"abc" index(位置):0 input:"abcdef" length:1 let str = `a0b12cd345ef67g890h`; let reg = /abcd123/; //原子 let reg2 = /[a-z]/g; // 讓他一直往下匹配 let reg1 = /[0-9]/; //[]原子表 一個[] 代表一位，這一位可以是[]中的任意一個 let reg1 = /[\d]/; // [0-9] let reg1 = /[\D]/; // [^0-9] 相當於/[\d]/ 取反 == 與除了數字以外的任何一個字符匹配 [^0-9] let reg1 = /[\w]/; // [0-9a-zA-Z] 中任意一個元素 let reg1 = /[\W]/; // [^0-9a-zA-Z] 與[\w]取反 /[\s]/ // 與任意一個空白字符匹配 /[\S]/ // 與除了空白符外任意一個字符匹配 \f 換頁 \n 換行 \r 回車 \t 製表符 \v 垂直製表 \S 與除了空白符外任意一個字符匹配 [^\n\f\r\t\v] #### 原子表 [ ] 只匹配其中的一個原子 [^] 只匹配"除了"其中字符的任意一個原子 取反 [0-9] 匹配0-9任何一個數字 [a-z] 匹配小寫a-z任何一個字母 [A-Z] 匹配大寫A-Z任何一個字母 #### 元字符 在正則表達式中有一些特殊字符帶表特殊意義叫元字符。 – . 除換行符以外的任何一個字符 – | 或的意思，匹配其中一項就代表匹配 > 例子:匹配身份證號，舊版是15位數字，新版是18位數字 `/^\d{15} ¦\d{18}$/` #### 原子分組 反向引用 匹配多個字符時用()分組，分組代表一個原子集合或者說一個大原子，並壓入堆棧(內存)用於調用，組號是從左到右. 計數的調用時：如果是字面量形式用\1，構造函數方式用\\1. 這種方式我們叫做反向引用 #### 取消反向引用 使用形如(?:pattern)的正則就可以避免保存括號內的匹配結果，反向引用也將會失效 #### 模式修正符 i 不區分大小寫字母的匹配 m 將字符串視爲多行，修飾^與$ g 全局匹配，找到所有匹配項 #### 量詞 可以使用一些元字符，重複表示一些元子或元字符 * 重複零次或更多次 + 重複一次或更多次 ? 重複零次或一次 {n} 重複n次 {n,} 重複n次或更多次 {n,m} 重複n到m次 一片兩片三四片，落盡正則全找見 上面的小標題翻譯成正則就是{1},{2},{3,4},{1,} #### 禁止貪婪 正則匹配是貪婪的，禁止貪婪用 ? * *? 重複任意次，但儘可能少重複 * +? 重複1次或更多次，但儘可能少重複 * ?? 重複0次或1次，但儘可能少重複 * {n,m}? 重複n到m次，但儘可能少重複 * {n,}? 重複n次以上，但儘可能少重複 let str = `a0b12cd345ef67g890h`; let reg = /abcd123/; //原子 let reg2 = /[a-z]/g; // 讓他一直往下匹配 let reg1 = /[0-9]/; //[]原子表 一個[] 代表一位，這一位可以是[]中的任意一個 let reg1 = /[\d]/; // [0-9] let reg1 = /[\D]/; // [^0-9] 相當於/[\d]/ 取反 == 與除了數字以外的任何一個字符匹配 [^0-9] let reg1 = /[\w]/; // [0-9a-zA-Z] 中任意一個元素 let reg1 = /[\W]/; // [^0-9a-zA-Z] 與[\w]取反 /[\s]/ // 與任意一個空白字符匹配 /[\S]/ // 與除了空白符外任意一個字符匹配 \f 換頁 \n 換行 \r 回車 \t 製表符 \v 垂直製表 \S 與除了空白符外任意一個字符匹配 [^\n\f\r\t\v] let reg2 = /[a-z]/; // [\d] [0-9] [1,2,3,4,5,6,7,8,9,0] 一樣 let result = reg.exec(str); console.log(result) 貪婪匹配：儘可能多的重複 let str = `a0b12cd345ef67g890h`; var reg = /\d{2}/g; 數字出現2次 var reg = /\d\w{2,4}/g; w至少2次，最多4次 滿足情況下儘可能的多 var reg = /\d\w{2,}/g; \w至少2次，然後儘可能的多 var reg = /\d\w*/g; var reg = /\d\w{0,}/g; \w* 重複零次或更多次 var reg = /\d\w+/g; var reg = /\d\w{1,}/g; \w重複一次或更多次 var reg = /\d\w?/g; var reg = /\d\w{0,1}/g; \w重複零次或一次 var reg = /[a-z][a-z1-6]{0,5}/; var reg = /^[a-z][a-z1-6]{0,5}$/; 邊界限定符 ^必須以[a-z]開頭 $必須以[a-z1-6]結尾 var reg = /^<[a-z][a-z1-6]{0,5}>$/; 創建 邊界限定符 ^必須以[a-z]開頭 $必須以[a-z1-6]結尾 var str = 'div'; alert(reg.test(str)); var reg = /\bjava\b/; \b 單詞邊界符 var str = 'javascript html css '; result = reg.test(str); ### 字符邊界 ^ 匹配字符串的開始 $ 匹配字符串的結束，忽略換行符 * 單詞邊界限制 \b 匹配單詞的邊界 \B 匹配除單詞邊界以外的部分 ## 字符串中用到正則的函數 #### str.search(regexp) – regexp爲正則表達式，反回索引位置，不支持全局索引(即g修飾符無效）找到即停止搜索 #### replace（正則或字符串,替換內容） 支持全局g修飾符，如果模式不是全局，當匹配到一個以後將不會繼續匹配，反之則會繼續往下匹配。 #### split 方法 – 拆分字符串，參數可以爲字符串或正則表達式 #### 去空 去掉字符串的空格 : var str = ' abcdef '; console.log(qukong1(str)); function qukong1(str){ let reg = /^\s+ | \s+$/g; //去掉 開頭+結尾的 空格 let result = str.replace(reg,''); //替換+去掉 開頭空格 //把檢測到的空格替換爲空 ' ' --> ''. return result; } #### trim 去空格 : String.prototype.trims = function(type = 'l'){ let reg; if(type == 'l'){ // left reg = /^\s+/ ; }else if(type == 'r'){ // right reg = /\s+$/ ; }else if(type == 'a'){ // all reg = /^\s+ | \s+$/g ; } return this.replace(reg,''); }; var str = ' abcdef '; let result = str.trims('a'); console.log(result);*/ var reg = /\+/; //轉義字符 '\' 反斜槓 去掉\ var str = '.a+\\bcd'; let result = reg.exec(str); console.log(result); ### 屏蔽關鍵詞 var reg = /爛透了|死孩子|滾/g; var str = '死孩子真的是爛透了，出去'; let result = str.replace(reg,'*****'); console.log(result) //輸出 *****真的是*****，出去 ### ？ 問號 最多出現一次，要麼不出現 ### 小括號 () var reg =/ab(cd)?|ef/g; //選擇性的匹配 //匹配結果: ab abcd ef 如果有abcd，則先匹配abcd，否則ab var str = 'abcdef'; console.log(reg.exec(str)); // abcd console.log(reg.exec(str)); // ef console.log(reg.exec(str)); // null var reg = /[a-z]{3}(\d{3})/g; var str = 'asd123fghj456jkl789'; // 把數字也輸出來。 對內容進行分組 console.log(reg.exec(str)); // ["asd123", "123", console.log(reg.exec(str)); // ["asd123", "123", console.log(reg.exec(str)); // ["jkl789"，"789" //獲取字符串中 ''中的內容 ?????????????????????????????????????????????? var str = "ab'cd'e'f'"; var reg = /[',"][^',"]+[',"]/g; console.log(reg.exec(str)) console.log(reg.exec(str)) var str = "ab'cd'e'f'"; var reg = /([',"])([^',"]+)\1/g; //反向引用 應用第一組內容 【[',"]】 小括號分組 // 組號： 1組 2組 引用1組 console.log(reg.exec(str)) console.log(reg.exec(str)) var str = "ab'cd'e'f'"; var reg = /(:?[',"])([^',"]+)\1/g; //取消反向引用 應用第一組內容 【[',"]】 小括號分組 // 取消反向引用第一組 console.log(reg.exec(str)) console.log(reg.exec(str)) var reg = /([a-z]+)-\1/; console.log(reg.exec('a-b')); console.log(reg.exec('ab-ab')); //ab-ab console.log(reg.exec('ac-cb')) //c-c
002 - JavaScript object foreach 遍歷
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
MCU初始化流程——從上電到main()之間
說明： 以下介紹示例的MCU地址空間如下： ROM空間爲：0x0000 0000 – 0x0000 8000 RAM空間爲：0x2000 0000 – 0x2000 2000