1. 程式人生 > >JS-JavaScript學習筆記(一)

JS-JavaScript學習筆記(一)

onchange art scrip n) val url 屬性。 write ret

javaScript


1.文檔的輸出:document.write() 可輸出字符,表達式,html標簽。函數


2.不論什麽類型和字符串相加,都會被轉換成字符串類型。
比如:var i=5; var j="5"; var k=i+j; 結果:k=55


3.運算符優先級(由高到低)
算術操作符->比較操作符->邏輯操作符->"="賦值操作符 ,假設同級的運算按從左到右次序進行,多層括號由裏向外


4.事件:
onclick鼠標點擊,
onmouseover鼠標經過,
onmouseout鼠標離開,
onfocus獲得焦點,
onblur失去焦點,
onselect選中,
onchange文本框發生改變,
onload載入,
onunload卸載
5.內置對象


Date日期對象。
get/setTime();時間
get/setDate();日期
getDay();星期
String字符串對象,
charAt(index);獲得指定位置的字符;
indexOf(substring,startPos);返回指定字符串首次出現的位置;
split(separator,limit);字符串切割成字符數組
substring(startPos,endPos);提取字符串中介於兩個下標間的字符串
subsrt(startPos,length);提取字符串中從startPos位置開始指定數目的字符串


Math對象。
ceil(x);向上取整
floor(x);向下取整
round(x);四舍五入
random();隨機數


Array數組對象,
concat(array1.....arrayN);數組連接
join(分隔符);指定分隔符連接數組元素
reverse();顛倒數組元素順序
slice(start,end);從已有數組中返回指定元素
sort(方法函數);使數組按一定順序排序
樣例:
<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序。如降序,把“a - b”該成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>

6.瀏覽器對象

**BOM瀏覽器對象模型(Browser Object Model)

技術分享圖片

(1).window對象

技術分享圖片


(2).javascript計時器
a.計時器var i=setInterval(代碼。交互時間);在運行時,從加載頁面後每隔指定的時間運行代碼。


b.取消計時clearIntercal(i);
c.計時器setTimeout(代碼。延遲時間),在加載後延遲指定時間後,去運行一次表達式,僅運行一次。

d.取消計時器clearTimeout(由 setTimeout() 返回的 ID 值)


(3).History對象 --history對象記錄了用戶以前瀏覽過的頁面(URL)。並能夠實現瀏覽器前進與後退相似導航的功能。


a.window.history.[屬性|方法]
b. 屬性length 。返回瀏覽器歷史列表中URL的數量

c. 方法:back() ,載入History列表中的前一個URL ,相當於go(-1) ; forward() 載入History列表中下一個URL ,相當於go(1) ; go(number-要訪問的URL在列表中的相對位置) 載入History列表中指定的頁面


(4).Location對象 --location用於獲取或設置窗口的URL,而且能夠用於解析URL。

技術分享圖片

技術分享圖片


(5).Navigator對象 --Navigator 對象包括有關瀏覽器的信息。通經常使用於檢測瀏覽器與操作系統的版本號。
技術分享圖片


(6).screen對象 --screen對象用於獲取用戶的屏幕信息。

技術分享圖片


7.DOM (Document Object Model)文檔對象模型 --定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構(節點樹)。

技術分享圖片

技術分享圖片

技術分享圖片

(1).getAttribute(name)方法 -通過元素節點的屬性名稱獲取屬性的值。
語法:
elementNode.getAttribute(name)
說明:
1. elementNode:使用getElementById()、getElementsByTagName()等方法,獲取到的元素節點。


2. name:要想查詢的元素節點的屬性名字
(2).setAttribute()方法 -添加一個指定名稱和值的新屬性,或者把一個現有的屬性設定為指定的值。
語法:
elementNode.setAttribute(name,value)
說明:
1.name: 要設置的屬性名。
2.value: 要設置的屬性值。
註意:
1.把指定的屬性設置為指定的值。假設不存在具有指定名稱的屬性,該方法將創建一個新屬性。
2.類似於getAttribute()方法。setAttribute()方法僅僅能通過元素節點對象調用的函數。
(3)瀏覽器窗體可視區域大小
在不同瀏覽器都有用的 JavaScript 方案:
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
(4)網頁尺寸scrollHeight
瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
註意:區分大寫和小寫
scrollHeight和scrollWidth還可獲取Dom元素中內容實際占用的高度和寬度。


(5)網頁尺寸offsetHeight
offsetHeight = clientHeight + 滾動欄 + 邊框。
瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight

|| document.body.offsetHeight;


參考站點:http://www.imooc.com/learn/10

學習站點:http://www.dreamdu.com/javascript/core/

JS-JavaScript學習筆記(一)