javascript基礎知識筆記_第1頁
javascript基礎知識筆記_第2頁
javascript基礎知識筆記_第3頁
javascript基礎知識筆記_第4頁
javascript基礎知識筆記_第5頁
已閱讀5頁，還剩7頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、1. 節(jié)點及其類型:1). 元素節(jié)點2). 屬性節(jié)點: 元素的屬性, 可以直接通過屬性的方式來操作. 3). 文本節(jié)點: 是元素節(jié)點的子節(jié)點, 其內容為文本. 2. 在 html 文檔的什么位置編寫 js 代碼?0). 直接在 html 頁面中書寫代碼.<button id="button" onclick="alert('hello world');">Click Me!</button>缺點: . js 和 html 強耦合, 不利用代碼的維護. 若 click 相應函數(shù)是比較復雜的, 則需要先定義一個函數(shù),

2、然后再在 onclick 屬性中完成對函數(shù)的引用, 比較麻煩1). 一般地, 不能在 body 節(jié)點之前來直接獲取 body 內的節(jié)點, 因為此時 html 文檔樹還沒有加載完成, 獲取不到指定的節(jié)點:<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">var

3、 cityNode = document.getElementById("city");/打印結果為 null.alert(cityNode);</script></head><body>.2). 可以在整個 html 文檔的最后編寫類似代碼, 但這不符合習慣3). 一般地, 在 body 節(jié)點之前編寫 js 代碼, 但需要利用 window.onload 事件, 該事件在當前文檔完全加載之后被觸發(fā), 所以其中的代碼可以獲取到當前文檔的任何節(jié)點. <head><meta http-equiv="Content-

4、Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript">window.onload = function()var cityNode = document.getElementById("city");alert(cityNode);</script></head><body>.3. 如何來獲取元素

5、節(jié)點:1). *document.getElementById: 根據(jù) id 屬性獲取對應的單個節(jié)點2). *document.getElementsByTagName: 根據(jù)標簽名獲取指定節(jié)點名字的數(shù)組, 數(shù)組對象 length 屬性可以獲取數(shù)組的長度3). document.getElementsByName: 根據(jù)節(jié)點的 name 屬性獲取符合條件的節(jié)點數(shù)組, 但 ie 的實現(xiàn)方式和 W3C 標準有差別: 在 html 文檔中若某節(jié)點(li)沒有 name 屬性,則 ie 使用 getElementsByName 不能獲取到節(jié)點數(shù)組, 但火狐可以. 4). 其它的兩個方法,ie 根本就不

6、支持, 所以不建議使用 /獲取指定的元素節(jié)點. window.onload = function()代碼：/1. 獲取 id 為 bj 的那個節(jié)點./在編寫 HTML 文檔時, 需確保 id 屬性值是唯一的. /該方法為 document 對象的方法var bjNode = document.getElementById("bj");alert(bjNode);/2. 獲取所有的 li 節(jié)點. /使用標簽名獲取指定節(jié)點的集合. /該方法為 Node 接口的方法, 即任何一個節(jié)點都有這個方法. var liNodes = document.getElementsByTagNa

7、me("li");alert(liNodes.length);var cityNode = document.getElementById("city");var cityLiNodes = cityNode.getElementsByTagName("li");alert(cityLiNodes.length);/3. 根據(jù) HTML 文檔元素的 name 屬性名來獲取指定的節(jié)點的集合. var genderNodes = document.getElementsByName("gender");alert(ge

8、nderNodes.length);/若 HTML 元素自身沒有定義 name 屬性, 則 getElementsByName()/方法對于 IE 無效. 所以使用該方法時需謹慎. var bjNode2 = document.getElementsByName("BeiJing");alert(bjNode2.length);4. 獲取屬性節(jié)點:1). *可以直接通過 cityNode.id 這樣的方式來獲取和設置屬性節(jié)點的值2). 通過元素節(jié)點的 getAttributeNode 方法來獲取屬性節(jié)點, 然后在通過 nodeValue 來讀寫屬性值 /讀寫屬性節(jié)點: 通過

9、元素節(jié)點 . 的方式來獲取屬性值和設置屬性值. 代碼：window.onload = function()/屬性節(jié)點即為某一指定的元素節(jié)點的屬性. /1. 先獲取指定的那個元素節(jié)點var nameNode = document.getElementById("name");/2. 再讀取指定屬性的值alert(nameNode.value);/3. 設置指定的屬性的值.nameNode.value = "尚硅谷"5. 獲取元素節(jié)點的子節(jié)點(*只有元素節(jié)點才有子節(jié)點!):1). childNodes 屬性獲取全部的子節(jié)點, 但該方法不實用. 因為如果要獲取

10、指定的節(jié)點的指定子節(jié)點的集合, 可以直接調用元素節(jié)點的 getElementsByTagName() 方法來獲取. 2). firstChild 屬性獲取第一個子節(jié)點3). lastChild 屬性獲取最后一個子節(jié)點代碼：window.onload = function()/1. 獲取 #city 節(jié)點的所有子節(jié)點.var cityNode = document.getElementById("city");/2. 利用元素節(jié)點的 childNodes 方法可以獲取指定元素節(jié)點的所有子節(jié)點./但該方法不實用. alert(cityNode.childNodes.length

11、);/3. 獲取 #city 節(jié)點的所有 li 子節(jié)點.var cityLiNodes = cityNode.getElementsByTagName("li");alert(cityLiNodes.length);/4. 獲取指定節(jié)點的第一個子節(jié)點和最后一個子節(jié)點. alert(cityNode.firstChild);alert(cityNode.lastChild);6. 獲取文本節(jié)點:1). 步驟: 元素節(jié)點 -> 獲取元素節(jié)點的子節(jié)點2). 若元素節(jié)點只有文本節(jié)點一個子節(jié)點, 例如 <li id="bj" name="Be

12、iJing">北京</li>, <p>你喜歡哪個城市?</p>, 可以先獲取到指定的元素節(jié)點 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法來讀寫其文本節(jié)點的值 /獲取文本節(jié)點代碼：window.onload = function()/文本節(jié)點一定是元素節(jié)點的子節(jié)點. /1. 獲取文本節(jié)點所在的元素節(jié)點var bjNode = document.getElementById("bj");/2. 通過 firstChild 定義為到文本節(jié)點var bjTextNode = bjN

13、ode.firstChild;/3. 通過操作文本節(jié)點的 nodeValue 屬性來讀寫文本節(jié)點的值. alert(bjTextNode.nodeValue);bjTextNode.nodeValue = "尚硅谷"/alert(bjTextNode);7. 節(jié)點的屬性:1). nodeName: 代表當前節(jié)點的名字. 只讀屬性. *如果給定節(jié)點是一個文本節(jié)點, nodeName 屬性將返回內容為 #text 的字符串2). nodeType：返回一個整數(shù), 這個數(shù)值代表著給定節(jié)點的類型. 只讀屬性. 1 - 元素節(jié)點, 2 - 屬性節(jié)點, 3 - 文本節(jié)點 *3). no

14、deValue：返回給定節(jié)點的當前值(字符串). 可讀寫的屬性. 元素節(jié)點, 返回值是 null. 屬性節(jié)點: 返回值是這個屬性的值. 文本節(jié)點: 返回值是這個文本節(jié)點的內容 8. 創(chuàng)建一個元素節(jié)點:1). createElement(): 按照給定的標簽名創(chuàng)建一個新的元素節(jié)點. 方法只有一個參數(shù)：被創(chuàng)建的元素節(jié)點的名字, 是一個字符串. 方法的返回值：是一個指向新建節(jié)點的引用指針. 返回值是一個元素節(jié)點, 所以它的 nodeType 屬性值等于 1. *新元素節(jié)點不會自動添加到文檔里, 它只是一個存在于 JavaScript 上下文的對象. 9. 創(chuàng)建一個文本節(jié)點:1). createTex

15、tNode(): 創(chuàng)建一個包含著給定文本的新文本節(jié)點. 這個方法的返回值是一個指向新建文本節(jié)點引用指針. 它是一個文本節(jié)點, 所以它的 nodeType 屬性等于 3. 方法只有一個參數(shù)：新建文本節(jié)點所包含的文本字符串. 新元素節(jié)點不會自動添加到文檔里 10. 為元素節(jié)點添加子節(jié)點:1). appendChild(): var reference = element.appendChild(newChild): 給定子節(jié)點 newChild 將成為給定元素節(jié)點 element 的最后一個子節(jié)點. 方法的返回值是一個指向新增子節(jié)點的引用指針. 11. 節(jié)點的替換:1). replaceChild

16、(): 把一個給定父元素里的一個子節(jié)點替換為另外一個子節(jié)點var reference = element.replaceChild(newChild,oldChild);返回值是一個指向已被替換的那個子節(jié)點的引用指針2). 該節(jié)點除了替換功能以外還有移動的功能. 3). 該方法只能完成單向替換, 若需要使用雙向替換, 需要自定義函數(shù):/* * 互換 aNode 和 bNode * param Object aNode * param Object bNode */function replaceEach(aNode, bNode)if(aNode = bNode)return;var aPar

17、entNode = aNode.parentNode;/若 aNode 有父節(jié)點if(aParentNode)var bParentNode = bNode.parentNode;/若 bNode 有父節(jié)點if(bParentNode)var tempNode = aNode.cloneNode(true);bParentNode.replaceChild(tempNode, bNode);aParentNode.replaceChild(bNode, aNode); 12. 插入節(jié)點:1). insertBefore(): 把一個給定節(jié)點插入到一個給定元素節(jié)點的給定子節(jié)點的前面 var re

18、ference = element.insertBefore(newNode,targetNode); 節(jié)點 newNode 將被插入到元素節(jié)點 element 中并出現(xiàn)在節(jié)點 targetNode 的前面. 節(jié)點 targetNode 必須是 element 元素的一個子節(jié)點。 2). 自定義 insertAfter() 方法 /* * 將 newChild 插入到 refChild 的后邊 * param Object newChild * param Object refChild */function insertAfter(newChild, refChild)var refPare

19、ntNode = refChild.parentNode;/判斷 refChild 是否存在父節(jié)點if(refParentNode)/判斷 refChild 節(jié)點是否為其父節(jié)點的最后一個子節(jié)點if(refChild = refParentNode.lastChild)refParentNode.appendChild(newChild);elserefParentNode.insertBefore(newChild, refChild.nextSibling); 完整代碼:window.onload = function()alert("abc");/1. 把 #rl 插入

20、到 #bj 節(jié)點的前面var cityNode = document.getElementById("city");var bjNode = document.getElementById("bj");var rlNode = document.getElementById("rl");/cityNode.insertBefore(rlNode, bjNode);/var refNode = document.getElementById("se");var refNode = document.getElemen

21、tById("dj");insertAfter(rlNode, refNode);/把 newNode 插入到 refNode 的后面function insertAfter(newNode, refNode)/1. 測試 refNode 是否為其父節(jié)點的最后一個子節(jié)點var parentNode = refNode.parentNode;if(parentNode)var lastNode = parentNode.lastChild;/2. 若是: 直接把 newNode 插入為 refNode 父節(jié)點的最后一個子節(jié)點. if(refNode = lastNode)pa

22、rentNode.appendChild(newNode);/3. 若不是: 獲取 refNode 的下一個兄弟節(jié)點, 然后插入到其下一個兄弟/節(jié)點的前面.elsevar nextNode = refNode.nextSibling;parentNode.insertBefore(newNode, nextNode); 13. 刪除節(jié)點:1). removeChild(): 從一個給定元素里刪除一個子節(jié)點 var reference = element.removeChild(node);返回值是一個指向已被刪除的子節(jié)點的引用指針. 某個節(jié)點被 removeChild() 方法刪除時, 這個節(jié)

23、點所包含的所有子節(jié)點將同時被刪除. 如果想刪除某個節(jié)點, 但不知道它的父節(jié)點是哪一個, parentNode 屬性可以幫忙。 14. innerHTML屬性:1). 瀏覽器幾乎都支持該屬性, 但不是 DOM 標準的組成部分. innerHTML 屬性可以用來讀, 寫某給定元素里的 HTML 內容例子:window.onload = function()/1. 為 #province 添加 onchange 響應函數(shù)document.getElementById("province").onchange = function()/ 2.加載cities.xml 文件。得到do

24、cument對象var cityNode=document.getElementById("city");var cityNodeOptions=cityNode.getElementsByTagName("option");var len =cityNodeOptions.length;for(var i=1;i<len;i+)cityNode.removeChild(cityNodeOptions1);var xmlDoc=parseXml("cities.xml");var provinces=xmlDoc.getElem

25、entsByTagName("province");/alert(provinces.length);/4.在cities.xml文檔中查找和選擇的省匹配的provices節(jié)點。var provinceVal=this.value;var provinceEles=xmlDoc.selectNodes("/provincename='" +provinceVal+"'");/alert(provinceEles.length);var cityNodes= provinceEles0.getElementsByTagN

26、ame("city");/alert(cityNodes.length);for (var i=0;i<cityNodes.length;i+)/alert(cityNodesi.firstChild.nodeValue);var cityText=cityNodesi.firstChild.nodeValue;var cityTextNode=document.createTextNode(cityText);var optionNode= document.createElement("option");optionNode.appendChi

27、ld(cityTextNode);document.getElementById("city").appendChild(optionNode);/5.遍歷city子節(jié)點，得到每一個city子節(jié)點 /6.利用得到的文本值創(chuàng)建option節(jié)點 /7.并把6創(chuàng)建的option節(jié)點添加為city的子節(jié)點/js 解析 xml 文檔的函數(shù), 只支持 iefunction parseXml(fileName) /IE 內核的瀏覽器 if (window.ActiveXObject) /創(chuàng)建 DOM 解析器 var doc = new ActiveXObject("Micros

28、oft.XMLDOM"); doc.async = "false" /加載 XML 文檔, 獲取 XML 文檔對象 doc.load(fileName); return doc; /需求: 若 #checkedAll_2 被選中, 則 name=items 的 checkbox 都被選中/若 #checkedAll_2 取消選中, 則 name=items 的 checkbox 都取消選中/若 name=items 的 checkbox 都被選中, 則 #checkedAll_2 的 checkbox 也被選中/若 name=items 的 checkbox 有一

29、個沒有被選中, 則 #checkedAll_2 取消選擇./提示: 事件需要加給 #checkedAll_2, 獲取 name=items 的 checkbox 數(shù)組/判斷是否被選中, 若被選擇, 則 name=items 的 checkbox 都要被選擇/若沒有被選擇, 則 name=items 的 checkbox 都要取消選擇/根據(jù)是否存在 checked 屬性來判斷是否被選擇, 可以使其 checked = true 被選擇/checked = false 取消選擇. /還需要給每個 name=items 的 checkbox 加響應函數(shù)/判斷 name=items 的 checkbox 是否都被選中: 選擇的個數(shù)和總個數(shù)是否相等./若都被選擇: 則使 #checkedAll_2 被選擇/若沒有都被選擇: 則使 #checkedAll_2 取消選擇window.onload = function()document.getElementById("checkedAll_2").onclick = function()var flag = this.checked;var items = document

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論