js基本知識4
阿新 • • 發佈：2018-01-03
elements urn string nts rip txt 相互 last 文檔結構
1. 數組 看電影 電影院 座位 大的變量 裏面可以放很多的值 var arr = [1,3,57]; var ar = new Array(); new object(); new Date() var txt = [“宋江”,”張飛”] ; 使用數組: 數組名[索引號] txt[1] == 張飛 txt.length; 屬性 遍歷數組： for(var i=0;i<txt.length;i++){ console.log( txt[i] )} txt[i] txt 數組 1.2 兩個小循環 循環 for(初始化; 條件; 增量){} while() 當 do {} while() while(條件) { 語句 } var j= 1; while(j<=100) { sum1+=j; j++; } console.log(sum1); do while 至少執行一次 while 不一定 1.3 多分支語句 switch switch 跟 if else if else if else 幾乎一樣的 但是switch效率更好。 作用其實就是 ： 多選1 從多個裏面選1個 。 語法格式： switch(參數) { case 參數1： 語句; break; 退出的意思 case 參數2： 語句; break; 退出的意思 ........ default: 默認的 語句; } <script> window.onload = function(){ //獲取元素 var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); btn.onclick = function(){ var val = txt.value; switch(val) { case "蘋果": alert("蘋果的價格是: 5元"); break; case "香蕉": alert("香蕉的價格是: 2元"); break; case "梨": alert("梨的價格是: 1.5元"); break; case "大白菜": alert("大白菜的價格是: 9毛"); break; default: alert("今天沒進貨"); } } }</script> 1.4 下拉菜單的事件 onchange sele.onchange = function(){} 當改變的時候 事件 <script> window.onload = function(){ var sele = document.getElementById("sele"); sele.onchange = function(){ // alert(this.value); switch(this.value) { case "1": document.body.style.backgroundImage = "url(images/chun1.jpg)"; break; case "2": document.body.style.backgroundImage = "url(images/xia1.jpg)"; break; case "3": document.body.style.backgroundImage = "url(images/qiu1.jpg)"; break; case "4": document.body.style.backgroundImage = "url(images/dong1.jpg)"; break; } } } </script> 效果 ： 1.5 數組常用方法 我們經常要對數組進行操作，可能追加，也可能刪除 等等，何如？ 1.5.1 添加 數組 var arr = [1,3,5]; 我們想要 吧 7 這個數字 放到 這個數組的後面 我想要 [1,3,5,7]; 1. push() ★★★★★ 後面推進去 push() 方法可向數組的末尾添加一個或多個元素，並返回新的長度。 push 推進去 放 var arr =[1,3,5] → arr.push(7) → 結果變成 : [1,3,5,7]; 2. unshift() 從數組的前面放入 unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度 var arr = [1,3,5] → arr.unshift(0) → 結果變成 [0,1,3,5] 註意： var dom = [1,3,5]; console.log(dom.push(7)); // 返回的是 數組的長度 4 1.5.2 刪除數組內容 1. pop() 刪除最後一個元素 pop() 移除最後一個元素 返回值 是 返回最後一個值 var arr = [1,3,5] → arr.pop() → 結果 [1,3] 2. shift() 刪除第一個元素 shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值 var arr = [1,3,5] → arr.shift() → 結果 [3,5] 1.5.3 連接兩個數組 concat() 該方法用於連接兩個或多個數組。它不會改變現有的數組，而僅僅會返回被連接數組的一個副本 var aa = [1,3,5]; var bb = [“a”,”b”,”c”]; aa.concat(bb); 結果： [1,3,5,“a”,”b”,”c”]; 1.5.4 join() 把數組轉換為字符串 join() 作用是將數組各個元素是通過指定的分隔符進行連接成為一個字符串。 語法 arrayObject.join(separator) 數組名.join(符號) 數組轉換為字符串 參數 separator 可選。指定要使用的分隔符。如果省略該參數，則使用逗號作為分隔符。 var arr = [1,2,3]; console.log(arr.join(“-”)) 結果就是： 1-2-3 字符串 1.5.5 把字符串轉換為數組 split() join <=> split split() 方法用於把一個字符串分割成字符串數組 語法 stringObject.split(separator,howmany) 參數 separator 可選。指定要使用的分隔符。如果省略該參數，則使用逗號作為分隔符。 howmany 可選。該參數可指定返回的數組的最大長度 1.6 DOM (重點) 我們js 有三部分組成的？ ECMAscript DOM BOM 核心（ECMAScript）歐洲計算機制造商協會 描述了JS的語法和基本對象。 var aa var AA 不一樣 文檔對象模型（DOM） 學習的重點 處理網頁內容的方法和接口 瀏覽器對象模型（BOM） 了解一下 與瀏覽器交互的方法和接口 window.alert() 很大的兼容問題 1.6.1 DOM 定義 DOM 為文檔提供了結構化表示，並定義了如何通過腳本來訪問文檔結構。 目的其實就是為了能讓js操作html元素而制定的一個規範。 DOM 樹 1.6.2 節點 標簽 標記 元素 節點 由結構圖中我們可以看到，整個文檔就是一個文檔節點。 而每一個HMTL標簽都是一個元素節點。 標簽中的文字則是文字節點。 標簽的屬性是屬性節點。 一切都是節點…… 1.6.3 訪問節點 我們學過幾個訪問節點 ： getElementById() id 訪問節點 getElementsByTagName() 標簽訪問節點 getElementsByClassName() 類名 有兼容性問題 主流瀏覽器支持 ie 67 8 不認識 怎麽辦？ 我們自己封裝自己的 類 。 1.6.4 封裝自己class類 原理： （核心） 我們要取出所有的盒子， 利用遍歷的方法 ， 通過每一個盒子的className 來判斷。 如果相等就留下。 <script> window.onload = function(){ //封裝自己class類名 function getClass(classname){ //如果瀏覽器支持，則直接返回 if(document.getElementsByClassName) { return document.getElementsByClassName(classname); } // 不支持的 瀏覽器 var arr = []; // 用於存放滿足的數組 var dom = document.getElementsByTagName("*"); //alert(dom.length); for(var i=0;i<dom.length;i++) { if(dom[i].className == classname) { arr.push(dom[i]); } } return arr; } console.log(getClass("demo").length); } </script> 結束，分割版本 1.7 判斷真假 我們用條件語句來判斷5大數據類型中的真假； 數據 結論 數字類型 所有數字都是真，0是假 字符串 所有字符串都是真，’ ’串是假 對象 所有對象都是真，null是假 未定義 undefined是假，沒有真 1.8 訪問關系 各個節點的相互關系 1.8.1 父節點 父 ： parentNode 親的 一層 <script> window.onload = function(){ var x = document.getElementById("x"); x.onclick = function(){ this.parentNode.style.display = "none"; // 關掉的是他的 父親 } } </script> 1.8.2 兄弟節點 nextSibling 下一個兄弟 親的 ie 678 認識 nextElementSibling 其他瀏覽器認識的 previousSibling 同理 上一個兄弟 previousElementSibling 我們想要兼容 我們可以合寫 || 或者 var div = one.nextElementSibling || one.nextSibling; div.style.backgroundColor = "red"; 必須先寫 正常瀏覽器 後寫 ie678 1.8.3 子節點 firstChild 第一個孩子 ie678 firstElementChild 第一個孩子 正常瀏覽器 var one.firstElementChild || one.firstChild; lastChild lastElementChild 1.8.4 孩子節點 childNodes 選出全部的孩子 childNodes：它是標準屬性，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文本節點 （嫡出） 火狐 谷歌等高本版會把換行也看做是子節點 利用 nodeType == 1 時才是元素節點 來獲取元素節點 標簽 元素 children 重要 選取所有的孩子 （只有元素節點） 這個更好 跟喜歡它 。 （庶出） ie 678 包含 註釋節點 這個要避免開。 1.9 dom 的節點操作 新建節點 插入節點 刪除節點 克隆節點 等等 1.9.1 創建節點 var div = document.creatElement(“li”); 上面的意思就是 生成一個新的 li 標簽 1.9.2 插入節點 1. appendChild(); 添加孩子 append 添加的意思 意思： 添加孩子 放到盒子的 最後面。 2. insertBefore(插入的節點，參照節點) 子節點 添加孩子 寫滿兩個參數 demo.insertBefore(test,childrens[0]); 放到了第一個孩子的前面 如果第二個參數 為 null 則 默認這新生成的盒子放到最後面。 demo.insertBefore(test,null); 1.9.3 移除節點 removeChild() 孩子節點 var da = document.getElementById("xiongda"); demo.removeChild(da); 1.9.4 克隆節點 cloneNode(); 復制節點 括號裏面可以跟參數 ， 如果 裏面是 true 深層復制， 除了復制本盒子，還復制子節點 如果為 false 淺層復制 只復制 本節點 不復制 子節點。
js基本知識4