javaScript基礎

一、瀏覽器對象

1、window對象:指當前的瀏覽器窗口

方法:

2、定時器:可設定一個時間之後,再來運行

var timer=setInterval( function(){   ...//做的事情  }   , 'slow'  );     ----每隔指定時間之後執行,會一直執行

clearInterval( timer) ;   ---結束指定的計時器,參數就是計時器對象

 

var timer=setTimeout();    運行一次後就自動結束

clearTimeout(timer);  ---清除計時器

  var num=0;
  var i;
  function startCount(){	//計時器實現計數功能
    clearTimeout(i);
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
    clearTimeout(i);
  };

3、History對象:記錄了用戶曾經瀏覽過的頁面(URL),並可以實現瀏覽器前進與後退相似導航的功能

window.history.[屬性|方法]
History對象屬性:
length---返回瀏覽器歷史列表中的URL數量
History對象方法:
back()/forward()---加載history列表中的上/下一個URL  【back()=go(-1)  forward()=go(1)】
go()---加載history列表中的某個具體的頁面 
1 ---前一個,相當於forward(1)
0 ---當前頁面
1 ---後一個,相當於back(-1)
其它數值---要訪問的URL在History的URL列表中的相對位置

【從窗口被打開的那一刻開始記錄,每個瀏覽器窗口、每個標籤頁乃至每個框架,都有自己的history對象與特定的window對象關聯。】


4、Location對象:用於獲取或設置窗體的URL,並且可以用於解析URL

location.[屬性|方法]
屬性:
hash---設置或返回從#開始的URL(錨)
host---主機名和當前URL的端口號
hostname---當前URL的主機名
href---完整的URL
pathname---當前URL的路徑部分
port---當前URL的端口號
protocol---當前URL的協議
search---從?開始的URL(查詢部分)
方法:--- [參數的URL是會將原來的url+上]
assign()---加載新的文檔
reload()---重新加載當前文檔
replace()--用新的文檔替換當期文檔 



5、Navigator對象---包含有關瀏覽器的信息,通常用於檢測瀏覽器與操作系統的版本。

  var browser=navigator.appName;
appCodeName---瀏覽器代碼名的字符串表示
appName---返回瀏覽器的名稱
appVersion---瀏覽器的平臺和版本信息
platform---運行瀏覽器的操作系統平臺
userAgent---由客戶機發送服務器的user-agent頭部的值 示例:例子

6、screen對象---獲取用戶屏幕的信息

window.screen.屬性
availHeight/availWidth---窗口可以使用的屏幕高/寬度【減去界面特性,比如任務欄】
colorDepth---用戶瀏覽器表示的顏色位數
pixelDepth---用戶瀏覽器表示的顏色位數(ie不支持)
height/width---屏幕的高/寬度

7、注意事項

1)將<script>放在<head>標籤裏,會先加在<script>,若想先將佈局加載,得用window.onload

2)若佈局中有(如onclick="methodName()" )先要用到<script>,則得先讓<script>加載

3)同樣的,如果<script>在前面,但有獲取佈局中的對象(如getElementById()),則得先讓佈局加載


二、DOM---文本對象模型


1、DOM結點

1. 元素節點:上圖中<html>、<body>、<p>等都是元素節點,即標籤。
2. 文本節點:向用戶展示的內容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節點:元素屬性,如<a>標籤的鏈接屬性href="http://www.imooc.com"。
結點屬性:
nodeName---返回一個字符串,其內容是給定結點的名字
nodeType---返回一個整數,這個數組代表給定結點的類型
nodeValue---返回給定結點的當前值
遍歷結點樹:
childNodes--返回一個數組,這個數組由給定元素結點的子節點構成 示例


2、document.getElementsByName("name") ---通過name屬性值,返回帶有指定名稱的節點對象的集合

3、document.getElementsByTagName(" li" ) ---通過標籤名,返回指定標籤的節點對象的集合

4、elementNode.getAttribute(name);  ---通過元素節點的屬性名稱獲取屬性的值。

5、elementNode.setAttribute(name,value);  ---增加一個指定名稱和值的新屬性,或把一個現有的屬性設定爲指定的值

6、結點屬性

1) nodeName : 節點的名稱													·元素節點的 nodeName 與標籤名相同   				                  	      ·屬性節點的 nodeName 是屬性的名稱  							   ·文本節點的 nodeName 永遠是 #text
· 文檔節點的 nodeName 永遠是 #document
2) nodeValue :節點的值                                                                        ·元素節點的 nodeValue 是 undefined 或 null			                	  ·文本節點的 nodeValue 是文本自身
·屬性節點的 nodeValue 是屬性的值 
3) nodeType :節點的類型									        元素類型    節點類型
  	元素          1
  	屬性          2
  	文本          3
  	註釋          8
  	文檔          9

7、elementNode.childNodes; ---訪問選定元素節點下的所有子節點的列表,返回的值是一個數組(僞)

8、node.firstChild/lastChild; ---屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點,則該屬性返回 null   【空格chrome、firefox等瀏覽器標籤之間的空白也算是一個文本節點也會算進去】

9、elementNode.parentNode;  ---獲取指定結點的父節點

10、 nodeObject.nextSibling/ previousSibling ; ---獲取指定結點的下一個/上一個兄弟結點

function get_nextSibling(n){	//封裝獲取下一個兄弟結點  n--指定的結點元素
        var x=n.nextSibling;
        while (x && x.nodeType!=1){	//如果不是元素結點,則繼續往下查找
            x=x.nextSibling;
        }
        return x;
    }                 
11、.appendChild(newNode);  ---向指定元素結點插入一個子節點,放在最後

12、 parentNode.insertBefore(newNode ,childNode); ---向指定元素結點插入一個子節點,放在指定的子節點的前面

13、nodeObject.removeChild(node);  ---刪除子節點,若 刪除成功,可返回被刪除的結點[node],否則null     ---刪除所有子節點示例

14、node.replaceChild(newNode,oldNode); ---實現子節點(對象)的替換。返回被替換對象的引用

15、document.createElement( 'tagName'); ---創建一個元素結點

16、document.createTextNode( 'data'); ---創建一個文本結點,返回新創建的Text結點 ---示例

17、獲取瀏覽器窗口可視區域的大小(瀏覽器的視口,不包括工具欄和滾動條)【仍不理解,待完善】

var width= window.innerWidth ||  document.documentElement.clientWidth;   ---考慮兼容性

window.innerWidth    ---IE9+、Chrome、Firefox、Opera 以及 Safar(瀏覽器)
document.documentElement.clientWidth  ---IE 5~8
document.body.clientWidth    ---IE 5~8
18、scrollHeight   ---獲取網頁內容的大小  【仍不理解,待完善】

var h= document.body.scrollHeight||document.documentElement.scrollHeight;  ---兼容性

19、offsetHeight = clientHeight + 滾動條 + 邊框  ---網頁尺寸   【仍不理解,待完善】

Offset屬性
獲取一個標籤的寬度,因爲用 div.style.width只能得到行內的數值,而我們通常使用的是內嵌式,外鏈式 

var h= document.documentElement.offsetHeight || document.body.offsetHeight; ---
offsetWidth =  width  + border  +  padding   不包含margin   //獲取 對象 的寬度








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章