JS中的全局函數

全局函數：JS中提供部分的函數，不需要任何對象，可以直接通過函數名在代碼使用。

URL：統一資源定位符
瀏覽器地址欄中輸入的信息
http：//www.itheima.com:80/index.jsp?name=zhangsan&password=123

URI：統一資源標識符
URI表示的資源數據不具體 index.jsp 稱為一個URI

BOM對象介紹

BOM：browser object model 瀏覽器對象模型，把當前的瀏覽器看成一個對象。
通過瀏覽器對象可以獲取和瀏覽器相關的所有信息。
1.window對象：

是javascript層級中的頂層對象
Window對象有瀏覽器在加載到body或者frameset標簽的時候由JS引擎自動創建。我們在JS代碼中可以直接使用，使用window。

window對象中的屬于：

專門獲取window中包含的其他對象：
document 獲取瀏覽器加載的html文件對象
history 獲取瀏覽器中的歷史記錄對象
location 瀏覽器的地址欄對象
navigator 瀏覽器對象
screen 瀏覽器窗口在顯示器屏幕上的相關對象

setInterval("函數名",毫秒值) 在指定的毫秒值之后重復執行當前指定的這個函數clearInterval()清除重復執行的動作setTimeout("函數名",毫秒值)在制定的毫秒值后只執行一次某個函數clearTimeout()清除指定的執行動作open() 打開一個新窗口close() 關閉打開的新窗口

2.history對象：

它是javascript對象，不是html dom對象
History對象是有javascript runtime engine 自動創建，由一系列的URL組成的，這些URL是瀏覽器口內已訪問的URL。
唯一保持使用的功能只有back(),forward()和go()方法。

3.Location對象：

包含當前URL的信息

4.navigator對象：

可以訪問系統，瀏覽器的信息。

DOM對象

DOM：Document Object Model 文檔對象模型。
文檔：html文件。但是后期也可能是xml文檔
當瀏覽器把一個html文件加載到內存中，這時就會在內存中得到一個關于當前這個html文件的對象，這個對象就是DOM對象。

DOM對象的標準：由W3C指定，它規定如何通過JS技術來解析當前加載的這個html文件中的所有標簽，以及標簽中的屬性，還有標簽中封裝的文本數據。

當我們去解析一個html文件的時候，解析到的標簽稱為標簽對象（元素節點）、標簽上的屬性稱為屬性對象（屬性節點）、標簽中的文本稱為文本對象（文本節點）。

• JavaScript 能夠改變頁面中的所有 HTML 元素
• JavaScript 能夠改變頁面中的所有 HTML 屬性
• JavaScript 能夠改變頁面中的所有 CSS 樣式
• JavaScript 能夠對頁面中的所有事件做出反應
• 對 HTML DOM 事件對出反應
• 如何添加或刪除 HTML 元素

DOM獲取元素(標簽)節點:

getElementById(): 是根據頁面上的標簽的id屬性值。獲取當前某個標簽對象當獲取到一個html頁面中的標簽對象之后，當前這個標簽對象的具體操作需要查閱DHTML文檔getElementsByName() :根據頁面上標簽上的name屬性的值，獲取當前頁面上的標簽對象由于標簽的name屬性的值可能重復，因此獲取到的一個數組getElementsByTagName():根據標簽的名稱獲取標簽對象，由于頁面上會出現同名的標簽，因此獲取到一定也是一個數組

改變 HTML 輸出流:
在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內容。

改變 HTML 內容:

ent.getElementById(id).innerHTML=new HTML

改變 HTML 屬性:

document.getElementById(id).attribute=new value

改變 HTML 樣式:

document.getElementById(id).style.property=new style

HTML DOM 事件

onclick=JavaScript

• 當用戶點擊鼠標時
• 當網頁已加載時
• 當圖像已加載時
• 當鼠標移動到元素上時
• 當輸入字段被改變時
• 當提交 HTML 表單時
• 當用戶觸發按鍵時

JS中的事件

給頁面上的標簽綁定事件對應的函數的2種方式：
1、直接在頁面上的標簽上書寫事件名稱，然后給名稱的屬性值綁定JS函數名
2、在頁面加載完成之后，通過js和dom技術獲取到這個標簽對象，然后動態給這個標簽綁定事件

<script type="text/javascript">//直接在頁面上的標簽上綁定事件function _click(){var input = document.getElementById("username");if( input.value == "請輸入用戶名"){input.value="";}}//動態的給頁面上的標簽綁定事件//必須在頁面架子完成之后綁定事件/*JS中的正則對象：JS中創建正則對象可以直接new，還可以使用/正則表達式/var reg = new RegExp("正則表達式");var reg2 = /正則表達式/;*/window.onload = function(){document.getElementById("username").onblur = function(){//在事件中可以使用this關鍵字，this表示的是當前發生事件的哪個標簽對象var value = this.value;var reg = new RegExp("^\\w{6,12}$");if( reg.test(value) ){document.getElementById("nameSpan").innerHTML = "用戶名正確".fontcolor("green");}else{document.getElementById("nameSpan").innerHTML = "用戶錯誤".fontcolor("red");}} } </script>

dom中的創建和添加方法 function demo(){//獲取頁面上的div標簽對象var div = document.getElementById("div");//div.innerHTML = "添加數據";//使用dom技術動態先在內存中創建出一個文本對象var text = document.createTextNode("數據");//把文本標簽對象條件到div中div.appendChild(text);}function demo2(){var div = document.getElementById("div");//div.innerHTML = "<a href='http://www.itheima.com'>黑馬</a>";//創建a標簽對象var a = document.createElement("a");//<a></a>a.innerHTML = "黑馬"; //<a>黑馬</a> //給a標簽上添加屬性a.setAttribute("href","http://www.itheima.com");//<a href='http://www.itheima.com'>黑馬</a> div.appendChild(a);}

dom中的刪除、克隆、替換方法 //刪除頁面上的id為two 的 divfunction demo(){var two = document.getElementById("two");//刪除的時候必須獲取當前標簽的父標簽，才能刪除自己var body = two.parentNode;//刪除當前div標簽對象//獲取 id為 one的div 使用兄弟標簽獲取var one = two.previousSibling;body.removeChild(one);}//替換function demo2(){//使用id為one的div替換id為two的divvar two = document.getElementById("two");var one = document.getElementById("one");//獲取父標簽var body = two.parentNode;body.replaceChild(one, two);}//克隆替換function demo3(){//使用id為one的div替換id為two的divvar two = document.getElementById("two");var one = document.getElementById("one");//獲取父標簽var body = two.parentNode;//克隆出id為one的div標簽var cloneOne = one.cloneNode(true);body.replaceChild(cloneOne, two);}

JSON格式數據

JSON格式的數據表現形式：
第一種格式：
{
key:value,
key:value,
key:value
}
JSON格式中的數據的key必須是字符串。value值可以是任意類型的數據

第二種格式：
[
{ key:value , key:value }，
{ key:value , key:value }，
{ key:value , key:value }]
/*
json的第一種格式：
var json = {key:value,key:value}
可以根據指定的json對象，調用它的key，得到對應的value
調用的方式：
格式1：對象.key 獲取到key對應的value
格式2：對象["key"] 獲取到key對應的value

如果要遍歷json個數的所有數據，需要使用循環for in循環====================================================Java中的foreach 遍歷容器：for( 容器中的數據類型 變量名 ： 容器名 ){變量空間中保持的是容器中的某個元素數據} ====================================================JS中的for in格式for( var 變量 in 數組|對象|json ){如果是數組的話，變量是數組的下標如果是json個數數據，變量是key值如果是對象，變量是對象中的某個屬性或者方法名} var arr = [4,2,7,9,0,11];for( var i in arr){alert(arr[i]);}*/var json = {"name":"林青霞","age":26,"address":"東莞","sex":"不詳","student":{"name":"風清揚","age":32,"address":"西安",}};//for in循環是用來遍歷對象或json的for( var j in json ){document.write(j +":"+json[j]+"<br/>");for( var i in json[j] ){document.write(i +":"+json[j][i]+"<br/>");}}var json2 = [{"name":"黑馬","age":"5"}];alert(json2[0].name);

注意：var j ; json.j；//這格式是錯誤的，j是變量，不能這樣使用json.j訪問該json的屬性值。

posted @ 2015-08-25 22:13 beyondbycyx 閱讀(...) 評論(...) 編輯 收藏 刷新評論刷新頁面返回頂部

轉載于:https://www.cnblogs.com/beyondbycyx/p/4758861.html

總結

以上是生活随笔為你收集整理的javascript+dom的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。