JS,複習

標籤：

按鈕，倒數五秒操作練習

<input type="button" id="btn1" value="按鈕（5）" disable="disable">
<script type="text/javascript">
obtn1=document.getElementById("btn1");
var t=5;
var timer1=window.setInterval(function(){
t--;
if(t==0){
obtn1=removeAttribute("disabled");
obtn1.value="按鈕";
window.clearInterval(timer1);
}
else{
obtn1.value="按鈕（“+t+”）"；
}
},1000)；

</script>

 

 

一、常用對話方塊

1、alert("")：警告對話方塊，作用是彈出一個警告對話方塊

2、confirm("")：確定對話方塊，彈出一個帶確定和取消按鈕的對話方塊——確定返回true，取消返回false

3、primpt("要顯示的文字"):可以允許使用者輸入內容的對話方塊

 

 

二、基本文法（跟c#差不多）

1、變數

    都是通用類型var，可以隨便儲存其它類型的值，可以直接使用，不用定義。但習慣上定義。

    定義變數： var a;    //所有變數定義都用var定義，var是通用的可變類型。

    var s = "3.14";

2、類型轉換

    分為自動轉換和強制轉換，一般用強制轉換。

    其他類型轉換為整數：parseint（）；

    其他類型轉換為小數：parsefloat（）；

3、運算子

    數學運算子：+    -    *    /    %    ++    --；

    關係運算子：==    ！=    >=    <=    >    <；

    邏輯運算子：&&    ||    ！；

    其他運算子：+=    -=    *=    /=    %=    ？：；

4、語句

     一般分為順序、分支和迴圈語句。

    （1）分支語句：  if{}else{}   if{}else{}  

    （2）迴圈for語句：

5、數組

    數組的定義：new Array();    //它的長度是動態變化的，裡面可以放任意類型的元素。

    數組元素的賦值：a[0]=123; a[1]="hello";  //元素中的索引從0開始。

    數組的取值：a[i];

    數組屬性：a.length;    //數組元素的個數，長度。沒有count（）

    方法：a.sort(); //數組排序，按照每一個元素的第一個字元進行排序。

            a.reverse();  //翻轉數組。

6、函數

    函數的四要素：名稱、輸入、傳回值、加工。

    定義函數：function add(形參){函數體}     //函數名為add，輸入為參數的形式，傳回值可以是var類型，也可以return一個傳回值。

    匿名函數：function(){函數體}

    函數必須經過調用才能執行。函數的調用：add（實參）

 

 

三、Windows對象

（一）部分

●window.open("開啟的地址","開啟的位置")

●window.opener:開啟此頁面的上一個頁面對象

●window.close():關閉當前頁面

●window.navigate("url") 跳轉至目標頁面（超連結），在Google瀏覽器下有bug；（不常用）

●window.moveTo(x,y) 移動頁面至某一位置，位置由x和y決定；（不常用）

●window.resizeTo(寬，高) 調整頁面的寬度和高度；（不常用）

●window.scrollTo（x,y）滾動頁面至哪裡，y代表縱向滾動；（不常用）

（二）Window.history對象

◆window.history.back();頁面進行後退；——主要記住

◆window.history.forward();頁面前進；

◆window.history.go(n); n如果是正數則代表前進n個頁面，n如果是負數則代表後退n個頁面，一般常用這一種。 

（三）Window.location對象

location地址欄

■window.location.href="http://www.baidu.com";修改頁面地址，會跳轉頁面（超連結）——主要記住

 

 

四、Windows對象——window.document對象

它可以將Html中的元素提取到js裡面，然後對它進行各種各樣的操作

它是js中的核心中的核心

（一）取元素

      ★docunment.getElementById("id")；根據id找，最多找一個；

      ★docunment.getElementsByClassName("name") 根據classname找，找出來的是數組；

      ★docunment.getElementsByName("name")；根據name找，找出來的是數組；

      ★docunment.getElementsByTagName("name")；根據標籤名找，找出來的是數組；

註：根據id和classname最好用

 

（二）操作內容

1、普通元素

取值：alert(a.innerHTML)——會將元素內的所有內容，包括元素標記都取出來

        alert(a.innerText)——只取裡面的文字，忽略所有被編譯元素

賦值：a.innerHTML = "<font color=red >hello world </font>"——如果內容有元素，編譯後實現

         a.innerText——會將賦的東西原樣呈現

2、變單元素

取值：var t = document.f1.t1——form表單ID為f1裡面的ID為t1的input；     

         var t = document.getElementById("id")—— 直接用ID擷取。

         alert(t.value)——擷取input中的value值；

賦值： t.value="內容改變"；

註：所有表單元素取值賦值都用value

（二）操作屬性

1、添加、修改屬性

        對象.setAttribute("屬性名稱","屬性值")——如果沒有此屬性會添加進去，相反，會修改此屬性的值

2、擷取屬性：

        對象.getAttribute("屬性名稱")——擷取屬性的值；

3、刪除屬性：

        對象.removeAttribute("屬性名稱")——移除一個屬性。

（三）操作樣式

1、添加、修改樣式

        對象.style.樣式名稱=值
2、擷取樣式

        var  ....=對象.style.樣式名稱  

（四）相關元素操作——寫通用特效用

var a = document.getElementById("id");找到a；

▲var b = a.nextSibling——找a的下一個同輩元素，注意包含空格；

▲var b = a.previousSibling——找a的上一個同輩元素，注意包含空格；

▲var b = a.parentNode——找a的上一級父級元素；

▲var b = a.childNodes——找出來的是數組，找a的下一級子項目；

▲var b = a.firstChild——第一個子項目，lastChild最後一個，childNodes[n]找第幾個；

▲alert(nodes[i] instanceof Text);——判斷是不是文本，是返回true，不是返回flase，用if判斷它的值是不是false，可以去除空格。

 

 

五、事件

1、onclick：按一下滑鼠觸發

     ondblclick：雙擊觸發

2、onmouseover：滑鼠移動上面觸發

     onmouseout：滑鼠離開時觸發

3、onblur：失去焦點時觸發

     onfocus：獲得焦點是觸發

4、onkeyup：按鍵抬起來的時候觸發

 

補：1、獲得某個元素的當前高度、寬度......   ——offsetheight、offsetwidth、offset什麼.......

      2、瀏覽器尺寸改變觸發的事件：window.onresize

JS,複習