【總結整理】javascript進階學習（慕課網）

時間 2020-05-01

原文原文鏈接

數組javascript

數組是一個值的集合，每一個值都有一個索引號，從0開始，每一個索引都有一個相應的值，根據須要添加更多數值。css

二維數組html

二維數組

一維數組，咱們當作一組盒子，每一個盒子只能放一個內容。前端

一維數組的表示: myarray[ ]

二維數組，咱們當作一組盒子，不過每一個盒子裏還能夠放多個盒子。java

二維數組的表示: myarray[ ][ ]

注意: 二維數組的兩個維度的索引值也是從0開始，兩個維度的最後一個索引值爲長度-1。 node

1. 二維數組的定義方法一jquery

var myarr=new Array();  //先聲明一維 
for(var i=0;i<2;i++){   //一維長度爲2
   myarr[i]=new Array();  //再聲明二維 
   for(var j=0;j<3;j++){   //二維長度爲3
   myarr[i][j]=i+j;   // 賦值，每一個數組元素的值爲i+j
 } }

注意: 關於for 循環語句，請看第四章4-5 。chrome

將上面二維數組，用表格的方式表示:數組

2. 二維數組的定義方法二瀏覽器

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]

3. 賦值

myarr[0][1]=5; //將5的值傳入到數組中，覆蓋原有值。

說明: myarr[0][1] ,0 表示表的行，1表示表的列。

什麼是事件

JavaScript 建立動態頁面。事件是能夠被 JavaScript 偵測到的行爲。網頁中的每一個元素均可以產生某些能夠觸發 JavaScript 函數或程序的事件。

好比說，當用戶單擊按鈕或者提交表單數據時，就發生一個鼠標單擊（onclick）事件，須要瀏覽器作出處理，返回給用戶一個結果。

主要事件表:

Date 日期對象

日期對象能夠儲存任意一個日期，而且能夠精確到毫秒數（1/1000 秒）。

定義一個時間對象 :

var Udate=new Date();

注意:使用關鍵字new，Date()的首字母必須大寫。

使 Udate 成爲日期對象，而且已有初始值：當前時間(當前電腦系統時間)。

若是要自定義初始值，能夠用如下方法：

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

咱們最好使用下面介紹的「方法」來嚴格定義時間。

訪問方法語法：「<日期對象>.<方法>」

Date對象中處理時間和日期的經常使用方法：

get/setFullYear() 返回/設置年份，用四位數表示。

var mydate=new Date();//當前時間2014年3月6日 document.write(mydate+"<br>");//輸出當前時間 document.write(mydate.getFullYear()+"<br>");//輸出當前年份 mydate.setFullYear(81); //設置年份 document.write(mydate+"<br>"); //輸出年份被設定爲 0081年。

注意:不一樣瀏覽器， mydate.setFullYear(81)結果不一樣，年份被設定爲 0081或81兩種狀況。

結果:

Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800

注意:

1.結果格式依次爲：星期、月、日、年、時、分、秒、時區。(火狐瀏覽器)

2. 不一樣瀏覽器，時間格式有差別。

返回星期方法

getDay() 返回星期，返回的是0-6的數字，0 表示星期天。若是要返回相對應「星期」，經過數組完成，代碼以下:

<script type="text/javascript">
  var mydate=new Date();//定義日期對象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; //定義數組對象,給每一個數組項賦值
  var mynum=mydate.getDay();//返回值存儲在變量mynum中
  document.write(mydate.getDay());//輸出getDay()獲取值
  document.write("今天是："+ weekday[mynum]);//輸出星期幾
</script>

注意：以上代碼是在2014年3月7日，星期五運行。

結果:

今天是：星期五

返回/設置時間方法

get/setTime() 返回/設置時間，單位毫秒數，計算從 1970 年 1 月 1 日零時到日期對象所指的日期的毫秒數。

若是將目前日期對象的時間推遲1小時，代碼以下:

<script type="text/javascript">
  var mydate=new Date(); document.write("當前時間："+mydate+"<br>"); mydate.setTime(mydate.getTime() + 60 * 60 * 1000); document.write("推遲一小時時間：" + mydate); </script>

結果:

當前時間：Thu Mar 6 11:46:27 UTC+0800 2014

推遲一小時時間：Thu Mar 6 12:46:27 UTC+0800 2014

注意:1. 一小時 60 分，一分 60 秒，一秒 1000 毫秒

2. 時間推遲 1 小時,就是: 「x.setTime(x.getTime() + 60 * 60 * 1000);」

返回指定位置的字符

charAt() 方法可返回指定位置的字符。返回的字符是長度爲 1 的字符串。

語法:空格也是字符，索引從0開始。

返回指定的字符串首次出現的位置

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

語法：空格也算一個位置

stringObject.indexOf(substring, startpos)

參數說明：

說明：

1.該方法將從頭至尾地檢索字符串 stringObject，看它是否含有子串 substring。

2.可選參數，從stringObject的startpos位置開始查找substring，若是沒有此參數將從stringObject的開始位置查找。

3.若是找到一個 substring，則返回 substring 的第一次出現的位置。stringObject 中的字符位置是從 0 開始的。

注意：1.indexOf() 方法區分大小寫。

2.若是要檢索的字符串值沒有出現，則該方法返回 -1。

例如: 對 "I love JavaScript!" 字符串內進行不一樣的檢索：

<script type="text/javascript">
  var str="I love JavaScript!" document.write(str.indexOf("I") + "<br />"); document.write(str.indexOf("v") + "<br />"); document.write(str.indexOf("v",8)); </script>

以上代碼的輸出：

0
4
9

字符串分割split()

知識講解：

split() 方法將字符串分割爲字符串數組，並返回此數組。

語法：

stringObject.split(separator,limit)

參數說明:

注意：若是把空字符串 ("") 用做 separator，那麼 stringObject 中的每一個字符之間都會被分割。

咱們將按照不一樣的方式來分割字符串：

使用指定符號分割字符串，代碼以下:

var mystr = "www.imooc.com";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");

運行結果:

www,imooc,com
www,imooc

將字符串分割爲字符，代碼以下：

document.write(mystr.split("")+"<br>");
document.write(mystr.split("", 5));

運行結果:

w,w,w,.,i,m,o,o,c,.,c,o,m
w,w,w,.,i

提取字符串substring()

substring() 方法用於提取字符串中介於兩個指定下標之間的字符。

語法:第二個參數是結束位置，而不是長度

stringObject.substring(startPos,stopPos)

參數說明:

注意：

1. 返回的內容是從 start開始(包含start位置的字符)到 stop-1 處的全部字符，其長度爲 stop 減start。

2. 若是參數 start 與 stop 相等，那麼該方法返回的就是一個空串（即長度爲 0 的字符串）。

3. 若是 start 比 stop 大，那麼該方法在提取子串以前會先交換這兩個參數。

使用 substring() 從字符串中提取字符串，代碼以下：

<script type="text/javascript">
  var mystr="I love JavaScript"; document.write(mystr.substring(7)); document.write(mystr.substring(2,6)); </script>

運行結果:

JavaScript
love

Math對象

Math對象，提供對數據的數學計算。

使用 Math 的屬性和方法，代碼以下：

<script type="text/javascript">
  var mypi=Math.PI; var myabs=Math.abs(-15); document.write(mypi); document.write(myabs); </script>

運行結果:

3.141592653589793
15

注意：Math 對象是一個固有的對象，無需建立它，直接把 Math 做爲對象使用就能夠調用其全部屬性和方法。這是它與Date,String對象的區別。

Math 對象屬性

Math 對象方法

以上方法不作所有講解，只講解部分方法。此節沒有任務，快快進入下節學習。

向上取整ceil()

ceil() 方法可對一個數進行向上取整。

語法:

Math.ceil(x)

參數說明:

注意：它返回的是大於或等於x，而且與x最接近的整數。

咱們將把 ceil() 方法運用到不一樣的數字上，代碼以下：

<script type="text/javascript"> document.write(Math.ceil(0.8) + "<br />") document.write(Math.ceil(6.3) + "<br />") document.write(Math.ceil(5) + "<br />") document.write(Math.ceil(3.5) + "<br />") document.write(Math.ceil(-5.1) + "<br />") document.write(Math.ceil(-5.9)) </script>

運行結果：

向下取整floor()

floor() 方法可對一個數進行向下取整。

語法:

Math.floor(x)

參數說明：

注意：返回的是小於或等於x，而且與 x 最接近的整數。

咱們將在不一樣的數字上使用 floor() 方法，代碼以下:

<script type="text/javascript"> document.write(Math.floor(0.8)+ "<br>") document.write(Math.floor(6.3)+ "<br>") document.write(Math.floor(5)+ "<br>") document.write(Math.floor(3.5)+ "<br>") document.write(Math.floor(-5.1)+ "<br>") document.write(Math.floor(-5.9)) </script>

運行結果：

四捨五入round()

round() 方法可把一個數字四捨五入爲最接近的整數。

語法:

Math.round(x)

參數說明：

注意：

1. 返回與 x 最接近的整數。

2. 對於 0.5，該方法將進行上舍入。(5.5 將舍入爲 6)

3. 若是 x 與兩側整數同等接近，則結果接近 +∞方向的數字值。(如 -5.5 將舍入爲 -5; -5.52 將舍入爲 -6),以下圖:

把不一樣的數舍入爲最接近的整數,代碼以下：

<script type="text/javascript"> document.write(Math.round(1.6)+ "<br>"); document.write(Math.round(2.5)+ "<br>"); document.write(Math.round(0.49)+ "<br>"); document.write(Math.round(-6.4)+ "<br>"); document.write(Math.round(-6.6)); </script>

運行結果：

隨機數 random()

random() 方法可返回介於 0 ~ 1（大於或等於 0 但小於 1 )之間的一個隨機數。

語法：

Math.random();

注意：返回一個大於或等於 0 但小於 1 的符號爲正的數字值。

咱們取得介於 0 到 1 之間的一個隨機數，代碼以下：

<script type="text/javascript"> document.write(Math.random()); </script>

運行結果：

0.190305486195328

注意:由於是隨機數，因此每次運行結果不同，可是0 ~ 1的數值。

得到0 ~ 10之間的隨機數，代碼以下:

<script type="text/javascript"> document.write((Math.random())*10); </script>

運行結果：

8.72153625893887

Array 數組對象

數組對象是一個對象的集合，裏邊的對象能夠是不一樣類型的。數組的每個成員對象都有一個「下標」，用來表示它在數組中的位置，是從零開始的

數組定義的方法：

1. 定義了一個空數組:

var  數組名= new Array();

2. 定義時指定有n個空元素的數組：

var 數組名 =new Array(n);

3.定義數組的時候，直接初始化數據：

var  數組名 = [<元素1>, <元素2>, <元素3>...];

咱們定義myArray數組，並賦值，代碼以下：

var myArray = [2, 8, 6];

說明：定義了一個數組 myArray，裏邊的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

數組元素使用：

數組名[下標] = 值;

注意: 數組的下標用方括號括起來，從0開始。

數組屬性：

length 用法：<數組對象>.length；返回：數組的長度，即數組裏有多少個元素。它等於數組裏最後一個元素的下標加一。

數組方法：

數組鏈接concat()

concat() 方法用於鏈接兩個或多個數組。此方法返回一個新數組，不改變原來的數組。

語法：鏈接結果，分隔

arrayObject.concat(array1,array2,...,arrayN)

參數說明：

注意: 該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。

咱們建立一個數組，將把 concat() 中的參數鏈接到數組 myarr 中，代碼以下：

<script type="text/javascript">
  var mya = new Array(3); mya[0] = "1"; mya[1] = "2"; mya[2] = "3"; document.write(mya.concat(4,5)+"<br>"); document.write(mya); </script>

運行結果：

1,2,3,4,5
1,2,3

咱們建立了三個數組，而後使用 concat() 把它們鏈接起來，代碼以下：

<script type="text/javascript">
  var mya1= new Array("hello!") var mya2= new Array("I","love"); var mya3= new Array("JavaScript","!"); var mya4=mya1.concat(mya2,mya3); document.write(mya4); </script>

運行結果：

hello!,I,love,JavaScript,!

指定分隔符鏈接數組元素join()

join()方法用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的。

語法：

arrayObject.join(分隔符)

參數說明:

注意：返回一個字符串，該字符串把數組中的各個元素串起來，用<分隔符>置於元素與元素之間。這個方法不影響數組本來的內容。咱們使用join（）方法，將數組的全部元素放入一個字符串中，代碼以下：

<script type="text/javascript">
  var myarr = new Array(3); myarr[0] = "I"; myarr[1] = "love"; myarr[2] = "JavaScript"; document.write(myarr.join()); </script>

運行結果：

I,love,JavaScript

咱們將使用分隔符來分隔數組中的元素，代碼以下：

<script type="text/javascript">
  var myarr = new Array(3) myarr[0] = "I"; myarr[1] = "love"; myarr[2] = "JavaScript"; document.write(myarr.join(".")); </script>

運行結果：

I.love.JavaScript

顛倒數組元素順序reverse()

reverse() 方法用於顛倒數組中元素的順序。

語法：

arrayObject.reverse()

注意：該方法會改變原來的數組，而不會建立新的數組。

定義數組myarr並賦值，而後顛倒其元素的順序：

<script type="text/javascript">
  var myarr = new Array(3) myarr[0] = "1" myarr[1] = "2" myarr[2] = "3" document.write(myarr + "<br />") document.write(myarr.reverse()) </script>

運行結果：

1,2,3
3,2,1

選定元素slice()

slice() 方法可從已有的數組中返回選定的元素。

語法:end位置要減1

var myarr1= ["我","愛","你","應","該"];
document.write(myarr1.slice(2,4) + "<br>");結果：你,應

arrayObject.slice(start,end)//

參數說明：

1.返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

2. 該方法並不會修改數組，而是返回一個子數組。

注意：

1. 可以使用負值從數組的尾部選取元素。

2.若是 end 未被規定，那麼 slice() 方法會選取從 start 到數組結尾的全部元素。

3. String.slice() 與 Array.slice() 類似。

咱們將建立一個新數組，而後從其中選取的元素，代碼以下：

<script type="text/javascript">
  var myarr = new Array(1,2,3,4,5,6); document.write(myarr + "<br>"); document.write(myarr.slice(2,4) + "<br>"); document.write(myarr); </script>

運行結果：

1,2,3,4,5,6
3,4
1,2,3,4,5,6

數組排序sort()

sort()方法使數組中的元素按照必定的順序排列。

語法:

arrayObject.sort(方法函數)

參數說明：

1.若是不指定<方法函數>，則按unicode碼順序排列。

2.若是指定<方法函數>，則按<方法函數>所指定的排序方法排序。

myArray.sort(sortMethod);

注意: 該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：

若返回值<=-1，則表示 A 在排序後的序列中出如今 B 以前。
若返回值>-1 && <1，則表示 A 和 B 具備相同的排序順序。
若返回值>=1，則表示 A 在排序後的序列中出如今 B 以後。

1.使用sort()將數組進行排序，代碼以下：

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); var myarr2 = new Array("80","16","50","6","100","1"); document.write(myarr1.sort()+"<br>"); document.write(myarr2.sort()); </script>

運行結果：

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代碼沒有按照數值的大小對數字進行排序。

2.如要實現這一點，就必須使用一個排序函數，代碼以下：

<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>

運行結果：

80,16,50,6,100,1
1,6,16,50,80,100

window對象

window對象是BOM的核心，window對象指當前的瀏覽器窗口。

window對象方法:

注意:在JavaScript基礎篇中，已講解了部分屬性，window對象重點講解計時器。

JavaScript 計時器

在JavaScript中，咱們能夠在設定的時間間隔以後來執行代碼，而不是在函數被調用後當即執行。
計時器類型：
一次性計時器：僅在指定的延遲時間以後觸發一次。
間隔性觸發計時器：每隔必定的時間間隔就觸發一次。
計時器方法：

計時器setInterval()

在執行時,從載入頁面後每隔指定的時間執行代碼。

語法:

setInterval(代碼,交互時間);

參數說明：

1. 代碼：要調用的函數或要執行的代碼串。

2. 交互時間：週期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。

返回值:

一個能夠傳遞給 clearInterval() 從而取消對"代碼"的週期性執行的值。

調用函數格式(假設有一個clock()函數):

setInterval("clock()",1000) 或 setInterval(clock,1000)

咱們設置一個計時器，每隔100毫秒調用clock()函數，並將時間顯示出來，代碼以下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
  var int=setInterval(clock, 100) function clock(){ var time=new Date(); document.getElementById("clock").value = time; } </script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
  </form>
</body>
</html>

clearInterval() 方法可取消由 setInterval() 設置的交互時間。

語法：

clearInterval(id_of_setInterval)

參數說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒調用 clock() 函數,並顯示時間。當點擊按鈕時，中止時間,代碼以下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
   function clock(){ var time=new Date(); document.getElementById("clock").value = time; } // 每隔100毫秒調用clock函數，並將返回值賦值給i
     var i=setInterval("clock()",100); </script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

計時器setTimeout()

setTimeout()計時器，在載入後延遲指定時間後,去執行一次表達式,僅執行一次。

語法:

setTimeout(代碼,延遲時間);

參數說明：

1. 要調用的函數或要執行的代碼串。
2. 延時時間：在執行代碼前需等待的時間，以毫秒爲單位（1s=1000ms)。

當咱們打開網頁3秒後，在彈出一個提示框，代碼以下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"> setTimeout("alert('Hello!')", 3000 ); </script>
</head>
<body>
</body>
</html>

當按鈕start被點擊時，setTimeout()調用函數，在5秒後彈出一個提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){ var t=setTimeout("alert('Hello!')",5000); } </script>
</head>
<body>
<form>
  <input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要建立一個運行於無窮循環中的計數器，咱們須要編寫一個函數來調用其自身。在下面的代碼，當按鈕被點擊後，輸入域便從0開始計數。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0; function numCount(){ document.getElementById('txt').value=num; num=num+1; setTimeout("numCount()",1000); } </script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

取消計時器clearTimeout()

setTimeout()和clearTimeout()一塊兒使用，中止計時器。

語法:

clearTimeout(id_of_setTimeout)

參數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。

下面的例子和上節的無窮循環的例子類似。惟一不一樣是，如今咱們添加了一個 "Stop" 按鈕來中止這個計數器：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i; function timedCount(){ document.getElementById('txt').value=num; num=num+1; i=setTimeout(timedCount,1000); } setTimeout(timedCount,1000); function stopCount(){ clearTimeout(i); } </script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

History 對象

history對象記錄了用戶曾經瀏覽過的頁面(URL)，並能夠實現瀏覽器前進與後退類似導航的功能。

注意:從窗口被打開的那一刻開始記錄，每一個瀏覽器窗口、每一個標籤頁乃至每一個框架，都有本身的history對象與特定的window對象關聯。

語法：

window.history.[屬性|方法]

注意：window能夠省略。

History 對象屬性

History 對象方法

使用length屬性，當前窗口的瀏覽歷史總長度，代碼以下：

<script type="text/javascript">
  var HL = window.history.length; document.write(HL); </script>

返回前一個瀏覽的頁面

back()方法，加載 history 列表中的前一個 URL。

語法：

window.history.back();

好比，返回前一個瀏覽的頁面，代碼以下：

window.history.back();

注意：等同於點擊瀏覽器的倒退按鈕。

back()至關於go(-1),代碼以下:

window.history.go(-1);

返回下一個瀏覽的頁面

forward()方法，加載 history 列表中的下一個 URL。

若是倒退以後，再想回到倒退以前瀏覽的頁面，則可使用forward()方法,代碼以下:

window.history.forward();

注意：等價點擊前進按鈕。

forward()至關於go(1),代碼以下:

window.history.go(1);

返回瀏覽歷史中的其餘頁面

go()方法，根據當前所處的頁面，加載 history 列表中的某個具體的頁面。

語法：

window.history.go(number);

參數：

瀏覽器中，返回當前頁面以前瀏覽過的第二個歷史頁面，代碼以下：

window.history.go(-2);

注意：和在瀏覽器中單擊兩次後退按鈕操做同樣。

同理，返回當前頁面以後瀏覽過的第三個歷史頁面，代碼以下：

window.history.go(3);

Location對象

location用於獲取或設置窗體的URL，而且能夠用於解析URL。

語法:

location.[屬性|方法]

location對象屬性圖示:

location 對象屬性：

location 對象方法:

Navigator對象

Navigator 對象包含有關瀏覽器的信息，一般用於檢測瀏覽器與操做系統的版本。

對象屬性:

查看瀏覽器的名稱和版本，代碼以下:

<script type="text/javascript">
   var browser=navigator.appName; var b_version=navigator.appVersion; document.write("Browser name"+browser); document.write("<br>"); document.write("Browser version"+b_version); </script>

userAgent

返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)

語法

navigator.userAgent

幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內核。

使用userAgent判斷使用的是什麼瀏覽器(假設使用的是IE8瀏覽器),代碼以下:

function validB(){ var u_agent = navigator.userAgent; var B_name="Failed to identify the browser"; if(u_agent.indexOf("Firefox")>-1){ B_name="Firefox"; }else if(u_agent.indexOf("Chrome")>-1){ B_name="Chrome"; }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ B_name="IE(8-10)"; } document.write("B_name:"+B_name+"<br>"); document.write("u_agent:"+u_agent+"<br>"); }

運行結果:

Screen對象

screen對象用於獲取用戶的屏幕信息。

語法：

window.screen.屬性

對象屬性:

屏幕分辨率的高和寬

window.screen 對象包含有關用戶屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計。
2. window.screen 對象在編寫時能夠不使用 window 這個前綴。
咱們來獲取屏幕的高和寬，代碼以下:

<script type="text/javascript"> document.write( "屏幕寬度："+screen.width+"px<br />" ); document.write( "屏幕高度："+screen.height+"px<br />" ); </script>

屏幕可用高和寬度

1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，好比任務欄。

2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，好比任務欄。

注意:

不一樣系統的任務欄默認高度不同，及任務欄的位置可在屏幕上下左右任何位置，因此有可能可用寬度和高度不同。

咱們來獲取屏幕的可用高和寬度，代碼以下：

<script type="text/javascript"> document.write("可用寬度：" + screen.availWidth); document.write("可用高度：" + screen.availHeight); </script>

注意:根據屏幕的不一樣顯示值不一樣。

認識DOM

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

先來看看下面代碼:

將HTML代碼分解爲DOM節點層次圖:

HTML文檔能夠說由節點構成的集合，DOM節點有:

1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。

2. 文本節點:向用戶展現的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 屬性節點:元素屬性，如<a>標籤的連接屬性href="http://www.imooc.com"。

節點屬性:

遍歷節點樹:

以上圖ul爲例，它的父級節點body,它的子節點3個li,它的兄弟結點h二、P。

DOM操做:

注意:前兩個是document方法。

getElementsByName()方法

返回帶有指定名稱的節點對象的集合。

語法：

document.getElementsByName(name)

與getElementById() 方法不一樣的是，經過元素的 name 屬性查詢元素，而不是經過 id 屬性。

<input name="myt" type="text" value="6">

getElementsByTagName()方法

返回帶有指定標籤名的節點對象的集合。返回元素的順序是它們在文檔中的順序。

語法:

document.getElementsByTagName(Tagname)

說明:

1. Tagname是標籤的名稱，如p、a、img等標籤名。

2. 和數組相似也有length屬性，能夠和訪問數組同樣的方法來訪問，因此從0開始。

區別getElementByID,getElementsByName,getElementsByTagName

以人來舉例說明，人有能標識身份的身份證，有姓名，有類別(大人、小孩、老人)等。

1. ID 是一我的的身份證號碼，是惟一的。因此經過getElementById獲取的是指定的一我的。

2. Name 是他的名字，能夠重複。因此經過getElementsByName獲取名字相同的人集合。

3. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。

把上面的例子轉換到HTML中，以下:

<input type="checkbox" name="hobby" id="hobby1">  音樂

input標籤就像人的類別。

name屬性就像人的姓名。

id屬性就像人的身份證。

方法總結以下:

注意：方法區分大小寫

getAttribute()方法

經過元素節點的屬性名稱獲取屬性的值。

語法：

elementNode.getAttribute(name)

說明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。

2. name：要想查詢的元素節點的屬性名字

看看下面的代碼，獲取h1標籤的屬性值：

運行結果:

h1標籤的ID ：alink
h1標籤的title ：getAttribute()獲取標籤的屬值

setAttribute()方法

setAttribute() 方法增長一個指定名稱和值的新屬性，或者把一個現有的屬性設定爲指定的值。

語法：

elementNode.setAttribute(name,value)

說明：

1.name: 要設置的屬性名。

2.value: 要設置的屬性值。

注意：

1.把指定的屬性設置爲指定的值。若是不存在具備指定名稱的屬性，該方法將建立一個新屬性。

2.相似於getAttribute()方法，setAttribute()方法只能經過元素節點對象調用的函數。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
<body>
  <p id="intro">個人課程</p>  
  <ul>  
    <li title="JS">JavaScript</li>  
    <li title="JQ">JQuery</li>  
    <li title="">HTML/CSS</li>  
    <li title="JAVA">JAVA</li>  
    <li title="">PHP</li>  
  </ul>  
  <h1>如下爲li列表title的值,當title爲空時，新設置值爲"WEB前端技術":</h1>
<script type="text/javascript">
  var Lists=document.getElementsByTagName("li"); for (var i=0; i<Lists.length;i++) { var text = Lists[i].getAttribute("title"); document.write(text +"<br>"); if(text=="") { Lists[i].setAttribute("title","WEB前端技術"); document.write(Lists[i].getAttribute("title")+"<br>"); } } </script>
</body>
</html>

節點屬性

在文檔對象模型 (DOM) 中，每一個節點都是一個對象。DOM 節點有三個重要的屬性：

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的類型

1、nodeName 屬性: 節點的名稱，是隻讀的。

1. 元素節點的 nodeName 與標籤名相同
2. 屬性節點的 nodeName 是屬性的名稱
3. 文本節點的 nodeName 永遠是 #text
4. 文檔節點的 nodeName 永遠是 #document

2、nodeValue 屬性：節點的值

1. 元素節點的 nodeValue 是 undefined 或 null
2. 文本節點的 nodeValue 是文本自身
3. 屬性節點的 nodeValue 是屬性的值

3、nodeType 屬性: 節點的類型，是隻讀的。如下經常使用的幾種結點類型:

元素類型節點類型
元素 1
屬性 2
文本 3
註釋 8
文檔 9

訪問子節點childNodes

訪問選定元素節點下的全部子節點的列表，返回的值能夠看做是一個數組，他具備length屬性。

語法：

elementNode.childNodes

注意：

若是選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。

咱們來看看下面的代碼:

運行結果:

IE:

UL子節點個數:3
  節點類型:1

其它瀏覽器:

UL子節點個數:7
   節點類型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容問題

2. 節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，因此IE是3，其它瀏覽器是7，以下圖所示:

若是把代碼改爲這樣:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

運行結果:（IE和其它瀏覽器結果是同樣的）

UL子節點個數:3
  節點類型:1

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
<body>
<div> javascript <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
  var x=document.getElementsByTagName("div")[0].childNodes; for(var i=0;i<x.length;i++) { document.write("第"+(i+1)+"個節點的值是："+x[i].nodeValue+"<br />"); document.write("第"+(i+1)+"個節點的名稱是："+x[i].nodeName+"<br />"); document.write("第"+(i+1)+"個節點的屬性是："+x[i].nodeType+"<br />"); document.write("<br />"); } </script>
</body>
</html>

訪問子節點的第一和最後項

1、firstChild 屬性返回‘childNodes’數組的第一個子節點。若是選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.firstChild

說明：與elementNode.childNodes[0]是一樣的效果。

2、 lastChild 屬性返回‘childNodes’數組的最後一個子節點。若是選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.lastChild

說明：與elementNode.childNodes[elementNode.childNodes.length-1]是一樣的效果。

注意: 上一節中，咱們知道Internet Explorer 會忽略節點之間生成的空白文本節點，而其它瀏覽器不會。咱們能夠經過檢測節點類型，過濾子節點。 (之後章節講解)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
<body>

<!--調整後-->
<div id="con"><p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5></div> 
<script type="text/javascript">
  var x=document.getElementById("con"); document.write(x.firstChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType+"<br/>"); document.write(x.lastChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType); </script>
</body>
</html>

訪問父節點parentNode

獲取指定節點的父節點

語法：

elementNode.parentNode

注意:父節點只能有一個。

看看下面的例子,獲取 P 節點的父節點，代碼以下:

<div id="text">
  <p id="con"> parentNode 獲取指點節點的父節點</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con"); document.write(mynode.parentNode.nodeName); </script>

運行結果:

parentNode 獲取指點節點的父節點
DIV

訪問祖節點:

elementNode.parentNode.parentNode

看看下面的代碼:

<div id="text">  
  <p> parentNode <span id="con"> 獲取指點節點的父節點</span>
  </p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con"); document.write(mynode.parentNode.parentNode.nodeName); </script>

運行結果:

parentNode獲取指點節點的父節點
DIV

注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標籤之間的空白也算是一個文本節點。

訪問兄弟節點

1. nextSibling 屬性可返回某個節點以後緊跟的節點（處於同一樹層級中）。

語法：

nodeObject.nextSibling

說明：若是無此節點，則該屬性返回 null。

2. previousSibling 屬性可返回某個節點以前緊跟的節點（處於同一樹層級中）。

語法：

nodeObject.previousSibling

說明：若是無此節點，則該屬性返回 null。

注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。

解決問題方法:

判斷節點nodeType是否爲1, 如是爲元素節點，跳過。

運行結果:

LI = javascript
nextsibling: LI = jquery

nodetype 空格是text，text的type是3，li的type是1

插入節點appendChild()

在指定節點的最後一個子節點列表以後添加一個新的子節點。

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

咱們來看看，div標籤內建立一個新的 P 標籤，代碼以下:

運行結果:

HTML
JavaScript
This is a new p

插入節點appendChild()

在指定節點的最後一個子節點列表以後添加一個新的子節點。

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

咱們來看看，div標籤內建立一個新的 P 標籤，代碼以下:

運行結果:

HTML
JavaScript
This is a new p

插入節點insertBefore()

insertBefore() 方法可在已有的子節點前插入一個新的子節點。

語法:

insertBefore(newnode,node);

參數:

newnode: 要插入的新節點。

node: 指定此節點前插入節點。

咱們在來看看下面代碼，在指定節點前插入節點。

運行結果:

This is a new p
JavaScript
HTML

注意: otest.insertBefore(newnode,node); 也能夠改成: otest.insertBefore(newnode,otest.childNodes[0]);

刪除節點removeChild()

removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。

語法:

nodeObject.removeChild(node)

參數:

node ：必需，指定須要刪除的節點。

咱們來看看下面代碼，刪除子點。

運行結果:

HTML
刪除節點的內容: javascript

注意: 把刪除的子節點賦值給 x，這個子節點不在DOM樹中，可是還存在內存中，可經過 x 操做。

若是要徹底刪除對象，給 x 賦 null 值，代碼以下:

替換元素節點replaceChild()

replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。

語法：

node.replaceChild (newnode,oldnew )

參數：

newnode : 必需，用於替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。

咱們來看看下面的代碼:

效果: 將文檔中的 Java 改成 JavaScript。

注意:

1. 當 oldnode 被替換時，全部與之相關的屬性內容都將被移除。

2. newnode 必須先被創建。

建立元素節點createElement

createElement()方法可建立元素節點。此方法可返回一個 Element 對象。

語法：

document.createElement(tagName)

參數:

tagName：字符串值，這個字符串用來指明建立元素的類型。

注意：要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。

咱們來建立一個按鈕，代碼以下：

<script type="text/javascript">
   var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "建立一個按鈕"; body.appendChild(input); </script>

效果：在HTML文檔中，建立一個按鈕。

咱們也可使用setAttribute來設置屬性，代碼以下：

<script type="text/javascript">  
   var body= document.body; var btn = document.createElement("input"); btn.setAttribute("type", "text"); btn.setAttribute("name", "q"); btn.setAttribute("value", "使用setAttribute"); btn.setAttribute("onclick", "javascript:alert('This is a text!');"); body.appendChild(btn); </script>

效果：在HTML文檔中，建立一個文本框，使用setAttribute設置屬性值。當點擊這個文本框時，會彈出對話框「This is a text!」。

建立文本節點createTextNode

createTextNode() 方法建立新的文本節點，返回新建立的 Text 節點。

語法：

document.createTextNode(data)

參數：

data : 字符串值，可規定此節點的文本。

咱們來建立一個<div>元素並向其中添加一條消息，代碼以下：

運行結果:

瀏覽器窗口可視區域大小

得到瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:

1、對於IE9+、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 瀏覽器窗口的內部高度

• window.innerWidth - 瀏覽器窗口的內部寬度

2、對於 Internet Explorer 八、七、六、5：

• document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。

• document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。

或者

Document對象的body屬性對應HTML文檔的<body>標籤

• document.body.clientHeight

• document.body.clientWidth

在不一樣瀏覽器都實用的 JavaScript 方案：

var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientHeight;

網頁尺寸scrollHeight

scrollHeight和scrollWidth，獲取網頁內容高度和寬度。

1、針對IE、Opera:

scrollHeight 是網頁內容實際高度，能夠小於 clientHeight。

2、針對NS、FF:

scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小於 clientHeight 時，scrollHeight 返回 clientHeight 。

3、瀏覽器兼容性

var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight;

注意:區分大小寫

scrollHeight和scrollWidth還可獲取Dom元素中內容實際佔用的高度和寬度。

網頁尺寸offsetHeight

offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。

1、值

offsetHeight = clientHeight + 滾動條 + 邊框。

2、瀏覽器兼容性

var w= document.documentElement.offsetWidth || document.body.offsetWidth; var h= document.documentElement.offsetHeight || document.body.offsetHeight;

網頁捲去的距離與偏移量

咱們先來看看下面的圖：

scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離，即左邊灰色的內容。

scrollTop:設置或獲取位於對象最頂端與窗口中可見內容的最頂端之間的距離，即上邊灰色的內容。

offsetLeft:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置。

offsetTop:獲取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算頂端位置。

注意:

1. 區分大小寫

2. offsetParent：佈局中設置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到HTML的body。

如今利用以前咱們學過的JavaScript知識，實現選項卡切換的效果。

效果圖:

文字素材:

房產：

275萬購昌平鄰鐵三居總價20萬買一居
200萬內購五環三居 140萬安家東三環
北京首現零首付樓盤 53萬購東5環50平
京樓盤直降5000 中信府公園樓王現房

家居:

40平出租屋大改造美少女的混搭小窩
經典清新簡歐愛家 90平老房煥發新生
新中式的酷色溫情 66平撞色活潑家居
瓷磚就像選好老婆衛生間煙道的設計

二手房：

通州豪華3居260萬二環稀缺2居250w甩
西3環通透2居290萬 130萬2居限量搶購
黃城根小學學區僅260萬 121平70萬拋!
獨家別墅280萬蘇州橋2居優惠價248萬

任務

你們先思考和分析實現思路，而後在動手實現

1、HTML頁面佈局

提示:
選項卡標題使用ul..li
選項卡內容使用div

2、CSS樣式製做

提示:
整個選項卡的樣式設置
選項卡標題的樣式設置
選項卡內容的樣式設置
一開始只顯示一個選項卡內容，其它選項卡內容隱藏。

3、JS實現選項卡切換

提示:
獲取選項卡標題和選項卡內容
選項卡內容多個，須要循環遍從來操做，得知哪一個選項卡和哪一個選項內容匹配
經過改變DOM的css類名稱,當前點擊的選項卡顯示，其它隱藏。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>實踐題 - 選項卡</title>
    <style type="text/css">
     /* CSS樣式製做 */  
       
       
    </style>
    <script type="text/javascript">
         
    // JS實現選項卡切換
    
    
    </script>
 
</head>
<body>
<!-- HTML頁面佈局 -->


 
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>實踐題 - 選項卡</title>
    <style type="text/css">
     /* CSS樣式製做 */ *{margin:0;padding:0;font:normal 12px "微軟雅黑";color:#000000;} ul{list-style-type: none;} a{text-decoration: none;} #tab-list{width: 275px;height:190px;margin: 20px auto;} #ul1{border-bottom: 2px solid #8B4513;height: 32px;} #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;} #ul1 li:hover{cursor: pointer;} #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;} #tab-list div{border: 1px solid #7396B8;border-top: none;} #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;} .show{display: block;}.hide{display: none;}
    </style>
    <script type="text/javascript"> window.onload = function() { var oUl1 = document.getElementById("ul1"); var aLi = oUl1.getElementsByTagName("li"); var oDiv = document.getElementById("tab-list"); var aDiv = oDiv.getElementsByTagName("div"); for(var i = 0; i < aLi.length; i++) { aLi[i].index = i; aLi[i].onmouseover = function() { for(var i = 0; i < aLi.length; i++) { aLi[i].className = ""; } this.className = "active"; for(var j = 0; j < aDiv.length; j++) { aDiv[j].className = "hide"; } aDiv[this.index].className = "show"; } } } </script>
 
</head>
<body>
<!-- HTML頁面佈局 -->
<div id="tab-list">
    <ul id="ul1">
        <li class="active">房產</li><li>家居</li><li>二手房</li>
    </ul>
    <div>
        <ul>
            <li><a href="javascript:;">275萬購昌平鄰鐵三居 總價20萬買一居</a></li>
            <li><a href="javascript:;">200萬內購五環三居 140萬安家東三環</a></li>
            <li><a href="javascript:;">北京首現零首付樓盤 53萬購東5環50平</a></li>
            <li><a href="javascript:;">京樓盤直降5000 中信府 公園樓王現房</a></li>
        </ul>
    </div>    
    <div class="hide">
        <ul>
            <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窩</a></li>
            <li><a href="javascript:;">經典清新簡歐愛家 90平老房煥發新生</a></li>
            <li><a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a></li>
            <li><a href="javascript:;">瓷磚就像選好老婆 衛生間煙道的設計</a></li>
        </ul>
    </div>    
    <div class="hide">
        <ul>
            <li><a href="javascript:;">通州豪華3居260萬 二環稀缺2居250w甩</a></li>
            <li><a href="javascript:;">西3環通透2居290萬 130萬2居限量搶購</a></li>
            <li><a href="javascript:;">黃城根小學學區僅260萬 121平70萬拋!</a></li>
            <li><a href="javascript:;">獨家別墅280萬 蘇州橋2居優惠價248萬</a></li>
        </ul>
    </div>
</div>

 
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。