JavaScript入門

1.在頁面寫東西。

var mystr="我是";
var mychar="JavaScript";
document.write(mystr+mychar);
複製程式碼

2.彈窗。

var c = "點我";
alert(c);
複製程式碼

3.確認。

var c = confirm("Will you merry me?");
if(c == true){
document.write("I'm so happy that you can be my wife");
}else{
document.write("It's so pity,and hope you be a happiness wife~")
}
複製程式碼

4.對話方塊

語法:

prompt(str1, str2);

引數說明： str1: 要顯示在訊息對話方塊中的文字，不可修改str2：文字框中的內容，可以修改

var c = prompt("Please input you question.","Will you merry me?");
if(c == "Will you merry me?"){
  document.write("I'm so happy that you can be my wife");
}else{
  document.write("It's so pity,and hope you be a happiness wife~")
}
複製程式碼

5.開啟新視窗

window.open([URL], [視窗名稱], [引數字串])

引數說明: URL：可選引數，在視窗中要顯示網頁的網址或路徑。如果省略這個引數，或者它的值是空字串，那麼視窗就不顯示任何文件。視窗名稱：可選引數，被開啟視窗的名稱。

1.該名稱由字母、數字和下劃線字元組成。 2."_top"、"_blank"、"_selft"具有特殊意義的名稱。 _blank：在新視窗顯示目標網頁 _self：在當前視窗顯示目標網頁 _top：框架網頁中在上部視窗中顯示目標網頁 3.相同 name 的視窗只能建立一個，要想建立多個視窗則 name 不能相同。 4.name 不能包含有空格。引數字串：可選引數，設定視窗引數，各引數用逗號隔開。

<script type="text/javascript">
function winOpen(){
window.open('http://www.baidu.com','baiduyixia','_blank','width=300,height=400');
}
</script>
複製程式碼

6.close()關閉視窗

用法：

window.close(); //關閉本視窗 或 <視窗物件>.close(); //關閉指定的視窗

7.dom操作

HTML文件可以說由節點構成的集合，DOM節點有:

1. 元素節點：上圖中、等都是元素節點，即標籤。
2. 文字節點:向使用者展示的內容，如li.../li中的JavaScript、DOM、CSS等文字。
3. 屬性節點:元素屬性，如a標籤的連結屬性href="http://www.imooc.com"。

節點屬性：

遍歷節點樹:

dom操作

• 根據結點ID獲取結點（取到的值是唯一的） var a = document.getElementById("h");

• getElementsByName()方法 返回帶有指定名稱的節點物件的集合。 語法：

  • document.getElementsByName(name) 與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
  • 注意:
    1. 因為文件中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的陣列，而不是一個元素。
    2. 和陣列類似也有length屬性，可以和訪問陣列一樣的方法來訪問，從0開始。

• getElementsByTagName()方法 返回帶有指定標籤名的節點物件的集合。返回元素的順序是它們在文件中的順序。 語法: document.getElementsByTagName(Tagname) 說明:

  1. Tagname是標籤的名稱，如p、a、img等標籤名。
  2. 和陣列類似也有length屬性，可以和訪問陣列一樣的方法來訪問，所以從0開始。

獲取成功後直接可以對結點進行操作： 1).改變html元素的屬性

eg：
function c(){
var a = document.getElementById("h");
a.style.color = "red";
a.style.backgroundColor = "white";
}
複製程式碼

顯示和隱藏：display

2).獲得並改變html元素的類名(應用：某個元素一開始是one這個類名，在css有one的樣式，然後類名改成two之後，就可以讓元素不用one的樣式)

var a = document.getElementById("id");
a.className = "one";
複製程式碼

3)getAttribute()方法 通過元素節點的屬性名稱獲取屬性的值。 語法：

elementNode.getAttribute(name)

說明: 1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。 2. name：要想查詢的元素節點的屬性名字

4)setAttribute()方法 setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。 語法：

elementNode.setAttribute(name,value) 說明： 1.name: 要設定的屬性名。 2.value: 要設定的屬性值。 注意： + 把指定的屬性設定為指定的值。如果不存在具有指定名稱的屬性，該方法將建立一個新屬性。 + 類似於getAttribute()方法，setAttribute()方法只能通過元素節點物件呼叫的函式。

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

• nodeName : 節點的名稱
• nodeValue ：節點的值
• nodeType ：節點的型別 ######一、nodeName 屬性: 節點的名稱，是隻讀的。

1. 元素節點的 nodeName 與標籤名相同
2. 屬性節點的 nodeName 是屬性的名稱
3. 文字節點的 nodeName 永遠是 #text
4. 文件節點的 nodeName 永遠是 #document ######二、nodeValue 屬性：節點的值
5. 元素節點的 nodeValue 是 undefined 或 null
6. 文字節點的 nodeValue 是文字自身
7. 屬性節點的 nodeValue 是屬性的值 ######三、nodeType 屬性: 節點的型別，是隻讀的。以下常用的幾種結點型別: 元素型別 節點型別 元素 1 屬性 2 文字 3 註釋 8 文件 9

8.事件

<h2 id="con" onclick="c()" onmouseover="a()" onmouseout="b()">JavaScript課程</h2>
<input type="text" value="改變值發生變化" id="conn" onchange="d()" onfocus="e()" onselect="f()">
<script type="text/javascript">
var content = document.getElementById("con");
var content2 = document.getElementById("conn");
function c(){
content.style.color = "red";
}
function a(){
content.style.color = "green";
}
function b(){
content.style.color = "blue";
}
function d(){
content2.style.color = "grey";
}
function e(){
content2.style.color = "black";
}
function f(){
content2.style.color = "yellow";
}
</script>
複製程式碼

9.物件

JavaScript 中的所有事物都是物件，如:字串、數值、陣列、函式等，每個物件帶有屬性和方法。

• 物件的屬性：反映該物件某些特定的性質的，如：字串的長度、影象的長寬等； objectName.propertyName
• 物件的方法：能夠在物件上執行的動作。例如，表單的“提交”(Submit)，時間的“獲取”(getYear)等； JavaScript 提供多個內建物件，比如 String、Date、Array 等等，使用物件前先定義。 objectName.methodName()

9.1Date物件（日期時間物件，可以精確到毫秒）

常用方法：

var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write("今天是：" +weekday[mydate.getDay()] );

var myyear= mydate.getFullYear();
document.write("年份:"+myyear);

document.write("當前時間："+mydate+"<br>");
// 2h = 2 * 60 * 60 * 1000 ms
mydate.setTime( mydate.getTime() + 2* 60 * 60 * 1000);
document.write("推遲二小時時間：" + mydate);
複製程式碼

#####9.2 Math物件

#####9.3 數祖

• sort方法 sort()方法使陣列中的元素按照一定的順序排列。 語法: arrayObject.sort(方法函式) 引數說明：

  

  1.如果不指定<方法函式>，則按unicode碼順序排列。 2.如果指定<方法函式>，則按<方法函式>所指定的排序方法排序。 myArray.sort(sortMethod);

9.4 window物件

9.5 計時器

i = window.setInterval("cal()", 1000);
window.clearInterval(i);
複製程式碼

#####9.6 History 物件 記錄著瀏覽器從開啟瀏覽過的每一張頁面

back()相當於go(-1);

#####9.7Location物件 location用於獲取或設定窗體的URL，並且可以用於解析URL。 location物件屬性圖示:

• location 物件屬性：

  

• location 物件方法:

  

#####9.8 navigator物件 Navigator 物件包含有關瀏覽器的資訊，通常用於檢測瀏覽器與作業系統的版本。

#####9.9 screen物件 screen物件用於獲取使用者的螢幕資訊。