為了賬號安全,請及時綁定郵箱和手機立即綁定

javascript方法使用案例介紹

2016.05.04 12:24 3627瀏覽

常用互動方法:
輸出內容(document.write)
document.write() 可用于直接向 HTML 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。
第一種:輸出內容用“”括起,直接輸出""號內的內容。

<script type="text/javascript">
  document.write("I love JavaScript!"); //內容用""括起來,""里的內容直接輸出。
</script>

第二種:通過變量,輸出內容

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接寫變量名,輸出變量存儲的內容。
</script>

第三種:輸出多項內容,內容之間用+號連接。

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多項內容之間用+號連接
</script>

第四種:輸出HTML標簽,并起作用,標簽使用“”括起來。

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//輸出hello后,輸出一個換行符
  document.write("JavaScript");
</script>

輸出空格方法:

  1. 使用輸出html標簽?來解決
    document.write("??"+"1"+"????"+"23");
    結果: 1 23
  2. 使用CSS樣式來解決
    document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");
    結果: 1 2 3
    在輸出時添加“white-space:pre;”樣式屬性。這個樣式表示"空白會被瀏覽器保留"

警告(alert 消息對話框)
語法:
alert(字符串或變量);
看下面的代碼:

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

注:alert彈出消息對話框(包含一個確定按鈕)。
結果:按順序彈出消息框

注意:

  1. 在點擊對話框"確定"按鈕前,不能進行任何其它操作。
  2. 消息對話框通常可以用于調試程序。
  3. alert輸出內容,可以是字符串或變量,與document.write 相似

確認(confirm 消息對話框)
語法:
confirm(str);
參數說明:
str:在消息對話框中要顯示的文本
返回值: Boolean值
返回值:
當用戶點擊"確定"按鈕時,返回true
當用戶點擊"取消"按鈕時,返回false
注: 通過返回值可以判斷用戶點擊了什么按鈕
看下面的代碼:

<script type="text/javascript">
    var mymessage=confirm("你喜歡JavaScript嗎?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能強大,要學習噢!");   }
</script>

結果:

注: 消息對話框是排它的,即用戶在點擊對話框按鈕前,不能進行任何其它操作。
提問(prompt 消息對話框)
prompt彈出消息對話框,通常用于詢問一些需要與用戶交互的信息。彈出消息對話框(包含一個確定按鈕、取消按鈕與一個文本輸入框)。
語法:
prompt(str1, str2);
參數說明:
str1: 要顯示在消息對話框中的文本,不可修改
str2:文本框中的內容,可以修改
返回值:

  1. 點擊確定按鈕,文本框中的內容將作為函數返回值
  2. 點擊取消按鈕,將返回null
    看看下面代碼:
var myname=prompt("請輸入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }

結果:

注:在用戶點擊對話框的按鈕前,不能進行任何其它操作。
打開新窗口(window.open)
open() 方法可以查找一個已經存在或者新建的瀏覽器窗口。
語法:
window.open([URL], [窗口名稱], [參數字符串])
參數說明:
URL:可選參數,在窗口中要顯示網頁的網址或路徑。如果省略這個參數,或者它的值是空字符串,那么窗口就不顯示任何文檔。
窗口名稱:可選參數,被打開窗口的名稱。
1.該名稱由字母、數字和下劃線字符組成。
2."_top"、"_blank"、"_selft"具有特殊意義的名稱。
_blank:在新窗口顯示目標網頁
_self:在當前窗口顯示目標網頁
_top:框架網頁中在上部窗口中顯示目標網頁
3.相同 name 的窗口只能創建一個,要想創建多個窗口則 name 不能相同。
4.name 不能包含有空格。
參數字符串:可選參數,設置窗口參數,各參數用逗號隔開。
參數表:

例如:打開http://www.whaambanhmi.com網站,大小為300px * 200px,無菜單,無工具欄,無狀態欄,有滾動條窗口:

<script type="text/javascript"> window.open('http://www.whaambanhmi.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>

注意:運行結果考慮瀏覽器兼容問題。
關閉窗口(window.close)
close()關閉窗口
用法:
window.close(); //關閉本窗口

<窗口對象>.close(); //關閉指定的窗口
例如:關閉新建的窗口。

<script type="text/javascript">
   var mywin=window.open('http://www.whaambanhmi.com'); //將新打的窗口對象,存儲在變量mywin中
   mywin.close();
</script>

注意:上面代碼在打開新窗口的同時,關閉該窗口,看不到被打開的窗口。
DOM對象
認識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.whaambanhmi.com"。
    節點屬性:

遍歷節點樹:

以上圖ul為例,它的父級節點body,它的子節點3個li,它的兄弟結點h2、P。
DOM操作:

注意:前兩個是document方法。
getElementById()方法
學過HTML/CSS樣式,都知道,網頁由標簽將信息組織起來,而標簽的id屬性值是唯一的,就像是每人有一個身份證號一樣,只要通過身份證號就可以找到相對應的人。那么在網頁中,我們通過id先找到標簽,然后進行操作。
語法:
document.getElementById(“id”)

getElementsByName()方法
返回帶有指定名稱的節點對象的集合。
語法:
document.getElementsByName(name)
與getElementById() 方法不同的是,通過元素的 name 屬性查詢元素,而不是通過 id 屬性。
注意:

  1. 因為文檔中的 name 屬性可能不唯一,所有 getElementsByName() 方法返回的是元素的數組,而不是一個元素。
  2. 和數組類似也有length屬性,可以和訪問數組一樣的方法來訪問,從0開始。
    getElementsByTagName()方法
    返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
    語法:
    getElementsByTagName(Tagname)
    說明:
  3. Tagname是標簽的名稱,如p、a、img等標簽名。
  4. 和數組類似也有length屬性,可以和訪問數組一樣的方法來訪問,所以從0開始。
    看看下面代碼,通過getElementsByTagName()獲取節點。

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

  1. ID 是一個人的身份證號碼,是唯一的。所以通過getElementById獲取的是指定的一個人。
  2. Name 是他的名字,可以重復。所以通過getElementsByName獲取名字相同的人集合。
  3. TagName可看似某類,getElementsByTagName獲取相同類的人集合。如獲取小孩這類人,getElementsByTagName("小孩")。
    把上面的例子轉換到HTML中,如下:
    <input type="checkbox" name="hobby" id="hobby1"> 音樂
    input標簽就像人的類別。
    name屬性就像人的姓名。
    id屬性就像人的身份證。
    方法總結如下:

注意:方法區分大小寫
通過下面的例子(6個name="hobby"的復選項,兩個按鈕)來區分三種方法的不同:
<input type="checkbox" name="hobby" id="hobby1"> 音樂
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 閱讀
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步
<input type="button" value = "全選" id="button1">
<input type="button" value = "全不選" id="button1">

  1. document.getElementsByTagName("input"),結果為獲取所有標簽為input的元素,共8個。
  2. document.getElementsByName("hobby"),結果為獲取屬性name="hobby"的元素,共6個。
  3. document.getElementById("hobby6"),結果為獲取屬性id="hobby6"的元素,只有一個,"跑步"這個復選項。

innerHTML 屬性
innerHTML 屬性用于獲取或替換 HTML 元素的內容。
語法:
Object.innerHTML
注意:
1.Object是獲取的元素對象,如通過document.getElementById("ID")獲取的元素。
2.注意書寫,innerHTML區分大小寫。
我們通過id="con"獲取<p> 元素,并將元素的內容輸出和改變元素內容,代碼如下:

改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢?
語法:
Object.style.property=new style;
注意:Object是獲取的元素對象,如通過document.getElementById("id")獲取的元素。
基本屬性表(property):

注意:該表只是一小部分CSS樣式屬性,其它樣式也可以通過該方法設置和修改。
看看下面的代碼:
改變 <p> 元素的樣式,將顏色改為紅色,字號改為20,背景顏色改為藍:

<p id="pcon">Hello World!</p>

   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";

顯示和隱藏(display屬性)
網頁中經常會看到顯示和隱藏的效果,可通過display屬性來設置。
語法:
Object.style.display = value
注意:Object是獲取的元素對象,如通過document.getElementById("id")獲取的元素。
value取值:

看看下面代碼:

控制類名(className 屬性)
className 屬性設置或返回元素的class 屬性。
語法:
object.className = classname
作用:
1.獲取元素的class 屬性

  1. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀
    看看下面代碼,獲得 <p> 元素的 class 屬性和改變className:

removeAttribute取消設置
Obj.removeAttribute(“style”);

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()方法只能通過元素節點對象調用的函數。
節點屬性
在文檔對象模型 (DOM) 中,每個節點都是一個對象。DOM 節點有三個重要的屬性 :

  1. nodeName : 節點的名稱
  2. nodeValue :節點的值
  3. nodeType :節點的類型
    一、nodeName 屬性: 節點的名稱,是只讀的。
  4. 元素節點的 nodeName 與標簽名相同
  5. 屬性節點的 nodeName 是屬性的名稱
  6. 文本節點的 nodeName 永遠是 #text
  7. 文檔節點的 nodeName 永遠是 #document
    二、nodeValue 屬性:節點的值
  8. 元素節點的 nodeValue 是 undefined 或 null
  9. 文本節點的 nodeValue 是文本自身
  10. 屬性節點的 nodeValue 是屬性的值
    三、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
訪問子結點的第一和最后項
一、firstChild 屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點,則該屬性返回 NULL。
語法:
node.firstChild
說明:與elementNode.childNodes[0]是同樣的效果。
二、 lastChild 屬性返回‘childNodes’數組的最后一個子節點。如果選定的節點沒有子節點,則該屬性返回 NULL。
語法:
node.lastChild
說明:與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
注意: 上一節中,我們知道Internet Explorer 會忽略節點之間生成的空白文本節點,而其它瀏覽器不會。我們可以通過檢測節點類型,過濾子節點。 (以后章節講解)
訪問父節點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

插入節點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>元素并向其中添加一條消息,代碼如下:

運行結果:

瀏覽器窗口可視區域大小
獲得瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動條)的方法:
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari:
? window.innerHeight - 瀏覽器窗口的內部高度
? window.innerWidth - 瀏覽器窗口的內部寬度
二、對于 Internet Explorer 8、7、6、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,獲取網頁內容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網頁內容實際高度,可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網頁內容高度,不過最小值是 clientHeight。也就是說網頁內容實際高度小于 clientHeight 時,scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:區分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內容實際占用的高度和寬度。
網頁尺寸offsetHeight
offsetHeight和offsetWidth,獲取網頁內容高度和寬度(包括滾動條等邊線,會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
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基礎
變量

  1. 必須以字母、下劃線或美元符號開頭,后面可以跟字母、下劃線、美元符號和數字。
  2. 變量名區分大小寫,如:A與a是兩個不同變量。
  3. 不允許使用JavaScript關鍵字和保留字做變量名

聲明變量:
聲明變量語法: var 變量名1,var 變量名2;
注意:變量也可以不聲明,直接使用,但為了規范,需要先聲明,后使用。

表達式

操作符
(1)操作符
看下面這段JavaScript代碼。
sum = numa + numb;
其中的"="和"+"都是操作符。
JavaScript中還有很多這樣的操作符,例如,算術操作符(+、-、、/等),比較操作符(<、>、>=、<=等),邏輯操作符(&&、||、!)。
注意: “=” 操作符是賦值,不是等于。
(2) "+"操作符
算術運算符主要用來完成類似加減乘除的工作,在JavaScript中,“+”不只代表加法,還可以連接兩個字符串,例如:
mystring = "Java" + "Script"; // mystring的值“JavaScript”這個字符串
自加一,自減一 ( ++和- -)
算術操作符除了(+、-、
、/)外,還有兩個非常常用的操作符,自加一“++”;自減一“--”。首先來看一個例子:
mynum = 10;
mynum++; //mynum的值變為11
mynum--; //mynum的值又變回10
上面的例子中,mynum++使mynum值在原基礎上增加1,mynum--使mynum在原基礎上減去1,其實也可以寫成:
mynum = mynum + 1;//等同于mynum++
mynum = mynum - 1;//等同于mynum--
比較操作符

操作符之間的優先級(高到低):
算術操作符 → 比較操作符 → 邏輯操作符 → "="賦值符號
數組
創建數組
創建數組語法:
var myarray=new Array();

我們創建數組的同時,還可以為數組指定長度,長度可任意指定。
var myarray= new Array(8); //創建數組,存儲8個數據。
注意:
1.創建的新數組是空數組,沒有值,如輸出,則顯示undefined。
2.雖然創建數組時,指定了長度,但實際上數組都是變長的,也就是說即使指定了長度為8,仍然可以將元素存儲在規定長度以外。
數組賦值
數組的表達方式:
第一步:創建數組var myarr=new Array();
第二步:給數組賦值
myarr[1]=" 張三";
myarr[2]=" 李四";
下面創建一個數組,用于存儲5個人的數學成績。
var myarray=new Array(); //創建一個新的空數組
myarray[0]=66; //存儲第1個人的成績
myarray[1]=80; //存儲第2個人的成績
myarray[2]=90; //存儲第3個人的成績
myarray[3]=77; //存儲第4個人的成績
myarray[4]=59; //存儲第5個人的成績
注意:數組每個值有一個索引號,從0開始。
我們還可以用簡單的方法創建上面的數組和賦值:
第一種方法:
var myarray = new Array(66,80,90,77,59);//創建數組同時賦值
第二種方法:
var myarray = [66,80,90,77,59];//直接輸入一個數組(稱 “字面量數組”)
注意:數組存儲的數據可以是任何類型(數字、字符、布爾值等)
數組屬性
myarray.length; //獲得數組myarray的長度
JavaScript數組的length屬性是可變的,這一點需要特別注意。
數組隨元素的增加,長度也會改變,如下:
var arr=[98,76,54,56,76]; // 包含5個數值的數組
document.write(arr.length); //顯示數組的長度5
arr[15]=34; //增加元素,使用索引為15,賦值為34
alert(arr.length); //顯示數組的長度16
二維數組

  1. 二維數組的定義方法一
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
   }
 }
  1. 二維數組的定義方法二
    var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3, ]]
  2. 賦值
    myarr[0][1]=5; //將5的值傳入到數組中,覆蓋原有值。
    說明: myarr[0][1] ,0 表示表的行,1表示表的列。
    函數
    函數定義
    function 函數名( )
    {
    函數體;
    }
    函數調用
    第一種情況:在標簽內調用。
<script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//調用函數,直接寫函數名。
</script>

第二種情況:在HTML文件中調用,如通過點擊按鈕后調用定義好的函數。

<html>
<head>
<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  //按鈕,onclick點擊事件,直接寫函數名
</form>
</body>
</html>

有參數的函數
function 函數名(參數1,參數2)
{
函數代碼
}
返回值的函數
function add2(x,y)
{
sum = x + y;
return sum; //返回函數值,return后面的值叫做返回值。
}
事件響應,網頁交互
事件:
事件是可以被 JavaScript 偵測到的行為。
Onclick 鼠標單擊事件
Onmouseover 鼠標經過事件
Onmouseout 鼠標移開事件
Onselect 文本框內容被選中事件
Onchange 文本框內容被改變事件
Onfocus 光標聚集
Onblur 光標離開
Onload 網頁導入
Onunload 關閉網頁

Javascript內置對象
JavaScript 中的所有事物都是對象,如:字符串、數值、數組、函數等,每個對象帶有屬性和方法。
對象的屬性:反映該對象某些特定的性質的,如:字符串的長度、圖像的長寬等;
對象的方法:能夠在對象上執行的動作。例如,表單的“提交”(Submit),時間的“獲取”(getYear)等;
JavaScript 提供多個內建對象,比如 String、Date、Array 等等,使用對象前先定義,如下使用數組對象:
var objectName =new Array();//使用new關鍵字定義對象
或者
var objectName =[];
訪問對象屬性的語法:
objectName.propertyName
訪問對象的方法:
objectName.methodName()
如使用string 對象的 toUpperCase() 方法來將文本轉換為大寫:
var mystr="Hello world!";//創建一個字符串
var request=mystr.toUpperCase(); //使用字符串對象方法
以上代碼執行后,request的值是:HELLO WORLD!
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.結果格式依次為:星期、月、日、年、時、分、秒、時區。(火狐瀏覽器)

  1. 不同瀏覽器,時間格式有差異。
    返回星期方法
    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]);//輸出星期幾

注意:以上代碼是在2014年3月7日,星期五運行。
結果:
5
今天是:星期五
返回/設置時間方法
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 毫秒

  1. 時間推遲 1 小時,就是: “x.setTime(x.getTime() + 60 60 1000);”
    String 字符串對象
    在之前的學習中已經使用字符串對象了,定義字符串的方法就是直接賦值。比如:
    var mystr = "I love JavaScript!"
    定義mystr字符串后,我們就可以訪問它的屬性和方法。
    訪問字符串對象的屬性length:
    stringObject.length; 返回該字符串的長度。
    var mystr="Hello World!";
    var myl=mystr.length;
    以上代碼執行后,myl 的值將是:12
    訪問字符串對象的方法:
    使用 String 對象的 toUpperCase() 方法來將字符串小寫字母轉換為大寫:
    var mystr="Hello world!";
    var mynum=mystr.toUpperCase();
    以上代碼執行后,mynum 的值是:HELLO WORLD!
    返回指定位置的字符
    charAt() 方法可返回指定位置的字符。返回的字符是長度為 1 的字符串。
    語法:
    stringObject.charAt(index)
    參數說明:

注意:1.字符串中第一個字符的下標是 0。最后一個字符的下標為字符串長度減一(string.length-1)。
2.如果參數 index 不在 0 與 string.length-1 之間,該方法將返回一個空字符串。
返回指定的字符串首次出現的位置
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
語法
stringObject.indexOf(substring, startpos)
參數說明:

說明:
1.該方法將從頭到尾地檢索字符串 stringObject,看它是否含有子串 substring。
2.可選參數,從stringObject的startpos位置開始查找substring,如果沒有此參數將從stringObject的開始位置查找。
3.如果找到一個 substring,則返回 substring 的第一次出現的位置。stringObject 中的字符位置是從 0 開始的。
注意:1.indexOf() 方法區分大小寫。
2.如果要檢索的字符串值沒有出現,則該方法返回 -1。
字符串分割split()
知識講解:
split() 方法將字符串分割為字符串數組,并返回此數組。
語法:
stringObject.split(separator,limit)
參數說明:

注意:如果把空字符串 ("") 用作 separator,那么 stringObject 中的每個字符之間都會被分割。
提取字符串substring()
substring() 方法用于提取字符串中介于兩個指定下標之間的字符。
語法:
stringObject.substring(starPos,stopPos)
參數說明:

注意:

  1. 返回的內容是從 start開始(包含start位置的字符)到 stop-1 處的所有字符,其長度為 stop 減start。
  2. 如果參數 start 與 stop 相等,那么該方法返回的就是一個空串(即長度為 0 的字符串)。
  3. 如果 start 比 stop 大,那么該方法在提取子串之前會先交換這兩個參數。
    提取指定數目的字符substr()
    substr() 方法從字符串中提取從 startPos位置開始的指定數目的字符串。
    語法:
    stringObject.substr(startPos,length)
    參數說明:

注意:如果參數startPos是負數,從字符串的尾部開始算起的位置。也就是說,-1 指字符串中最后一個字符,-2 指倒數第二個字符,以此類推。
如果startPos為負數且絕對值大于字符串長度,startPos為0。
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 對象方法

向上取整:Math.ceil(x)
向下取整:Math.floor(x)
四舍五入:Math.round(x)
隨機數:Math.random();
注意:返回一個大于或等于 0 但小于 1 的符號為正的數字值。
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;返回:數組的長度,即數組里有多少個元素。它等于數組里最后一個元素的下標加一。
    數組方法:

數組排序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 計時器
在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()
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);
 }

</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);

返回前一個瀏覽的頁面
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.單位以像素計。
  3. window.screen 對象在編寫時可以不使用 window 這個前綴。
    我們來獲取屏幕的高和寬,代碼如下:
<script type="text/javascript">
  document.write( "屏幕寬度:"+screen.width+"px<br />" );
  document.write( "屏幕高度:"+screen.height+"px<br />" );

屏幕可用高和寬度

  1. screen.availWidth 屬性返回訪問者屏幕的寬度,以像素計,減去界面特性,比如任務欄。
  2. screen.availHeight 屬性返回訪問者屏幕的高度,以像素計,減去界面特性,比如任務欄。
    注意:
    不同系統的任務欄默認高度不一樣,及任務欄的位置可在屏幕上下左右任何位置,所以有可能可用寬度和高度不一樣。

我們來獲取屏幕的可用高和寬度,代碼如下:

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

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

點擊查看更多內容
8人點贊

若覺得本文不錯,就分享一下吧!

評論

相關文章推薦

正在加載中
意見反饋 幫助中心 APP下載
官方微信

舉報

0/150
提交
取消
lpl竞猜