JS學習筆記(一)

Window對象方法：

JS學習筆記(一)

1. document.getElementById 擷取元素的方法一

文法：oElement = document .getElementById ( sID )

參數：sID――必選項。字元串 (String) 。

傳回值：oElemen――對象 (Element) 。

說明：根據指定的 id 屬性值得到對象。傳回 id 屬性值等于 sID 的第一個對象的引用。假如對應的為一組對象，則傳回該組對象中的第一個。如果無符合條件的對象，則傳回 null 。

注意： document.getElementById(” “) 得到的是一個對象，用 alert 顯示得到的是“ object ”，而不是具體的值，它有 value 和 length 等屬性，加上 .value 得到的才是具體的值！是第一個JS相容性問題

2. document 對象屬性

document.title //設定文檔标題等價于HTML的标簽

document.bgColor //設定頁面背景色

document.fgColor //設定前景色(文本顔色)

document.linkColor //未點選過的連結顔色

document.alinkColor //激活連結(焦點在此連結上)的顔色

document.vlinkColor //已點選過的連結顔色

document.URL //設定URL屬性進而在同一視窗打開另一網頁

document.fileCreatedDate //檔案建立日期，隻讀屬性

document.fileModifiedDate //檔案修改日期，隻讀屬性

document.fileSize //檔案大小，隻讀屬性

document.cookie //設定和讀出cookie

---------------------------------------------------------------------
對象方法
document.write()                  //動态向頁面寫入内容
document.createElement(Tag)       //建立一個html标簽對象
document.getElementById(ID)       //獲得指定ID值的對象
document.getElementsByName(Name)  //獲得指定Name值的對象

3. link标簽

作用1：定義文檔與外部資源的關系

作用2：連結樣式表

連結外部樣式表執行個體：

JS動态修改CSS樣式

getElementById擷取的對象obj，通過”.“ 修改樣式（第一種操作屬性的方法，第二種是[‘屬性/字元串’], 或者[參數])，HTML裡怎麼寫，JS裡怎麼寫。但是有一個例外：className

也就是，div裡id類名為class，函數裡應該寫obj.className=”“;
```
另一個執行個體：
           
```
用setAttribute方法實作一個頁面兩份樣式表的效果，具體方法如下：

第一步：在連接配接樣式表的元素裡定義一個id,例如

我定義的id是css。

第二步：寫一個js函數，代碼如下：

<script type="text/javascript"> 
        function change(a){ 
            var css=document.getElementById("css"); 
            if (a==) 
                css.setAttribute("href","1.css"); 
            if (a==) 
                css.setAttribute("href","2.css"); 
                } 
    </script>

這個函數的code可以放在頁面的任何地方。

第三步：為改變頁面的樣式表的連接配接添加一個函數的觸發事件，代碼如下： 
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onClick="change(1)">1.css</a>
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  onClick="change(2)">2.css</a> 
該效果在IE和FF下均測試通過，相信大家看完後因該非常明了，利用這個方法我們可以讓浏覽者自己選擇需要顯示的樣式表，比如年老者
可以選擇一個字型較大的樣式表。這裡需要注意的兩點是： 
在這個例子中函數名function後面的名字不能為links或者link，如果為links或者link，樣式表将不被改變，具體什麼原因我也不大清楚，可能是javascript的保留字元。 
另外如果是改變整個頁面的樣式，你需要在樣式表檔案裡定義body的高度為100%

5.函數傳參：定不下來的時候

執行個體（一個參數)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函數傳參</title>
    <style>
        #div1 {width:px; height:px;background:#a8eec6;}
    </style>
    <script>
        function changeColor(color){
            var oDiv=document.getElementById('div1');
            oDiv.style.background=color;
        }
    </script>
</head>
<body>
             <input type="button" value="tored" onclick="changeColor('red')"/>
             <input type="button" value="toblue" onclick="changeColor('blue')"/>
             <input type="button" value="togreen" onclick="changeColor('green')"/>
     <div id="div1">
         文本區域
     </div>
</body>
</html>

兩個參數：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函數傳參</title>
    <style>
        #div1 {width:px; height:px;background:#a8eec6;}
    </style>
    <script>
    function setStyle(name,value)
        {
            var oDiv = document.getElementById('div1');
            /oDiv.style.name="value";不能這麼寫，計算機不識别/
            oDiv.style[name] = value;
        }
    </script>
</head>
    <body>
            <input type="button" value="toWidth" onclick="setStyle('width','400px')"/>
            <input type="button" value="toHeight" onclick="setStyle('height','400px')"/>
            <input type="button" value="toGreen" onclick="setStyle('background','green')"/>
        <div id="div1">
            文本區域
        </div>
    </body>
</html>

6.關于樣式優先級：

行間樣式style>id#>class.>html标簽
CSS樣式可以有很多種選擇器形式，它們的權重可以用四位數字 X X X X 來表示。
首先，HTML元素的内聯樣式權重最高，可以用 1 0 0 0 來表示；
其次，ID選擇器的樣式權重次之，可以用 0 1 0 0 來表示；
第三，類選擇器、屬性選擇器、僞類選擇器，可以用 0 0 1 0 來表示；
第四，HTML元素選擇器、僞元素選擇器權重最低，可以用 0 0 0 1 來表示；
第五，通配符選擇器，權重完全為0，對權重無貢獻，可以用 0 0 0 0 來表示。

7.function（）行為樣式結構相分離

Web标準由一系列标準組合而成，其核心理念就是将網頁的結構、樣式和行為分離開來，是以它可以分為三大部分：結構标準、樣式标準和行為标準。
 結構标準包括XML标準、XHTML标準、HTML标準；樣式标準主要是指CSS标準；行為标準主要包括DOM标準和ECMAScript标準。
 一個符合标準的網頁，标簽中的标簽名應該全部都是小寫的，屬性要加上引号，樣式和行為不再夾雜在标簽中，而應該分别單獨存放在樣式檔案
 和腳本檔案中。理想狀态下，網頁源代碼由三部分組成：.html檔案、.css檔案和.js檔案。标簽中混有樣式和行為的寫法是不推薦的。
 常用到一個函數：window.onload是頁面加載完成的時候才發生
 a.在JS語句調用 ：

<script type="text/javascript"> 
        function func(){……} 
            window.onload=func; 
    </script>

b.同時調用多個函數 直接寫到html的body标簽裡面,如：

<html> 
        <body onload="func1();func2();func3();"> 
        </body> 
    </html>

c.js調用多個函數,以下這種調用方式可以用于不太複雜的JS程式中，如果程式函數很多，邏輯比較複雜，可以考慮用第四種方式。

<script type="text/javascript"> 
        function func1(){……} 
        function func2(){……} 
        function func3(){……} 
        window.onload=function(){ 
        func1(); 
        func2(); 
        func3(); } 
    </script>

d.JS自定義函數式多次調用

<script type="text/javascript"> 
        function func1(){……} 
        function func2(){……} 
        function func3(){……} 
        function addLoadEvent(func){ 
        var oldonload=window.onload; 
        if(typeof window.onload!="function"){ 
        window.onload=func;
        } 
        else{ 
        window.onload=function(){ 
            oldonload(); 
            func();} 
        } 
        } 
    addLoadEvent(func1); 
    addLoadEvent(func2); 
    addLoadEvent(func3); 
    </script>

8.getElementsByTagName

<script>
        window.onload=function(){
            var aDiv=document.getElementsByTagName('div');
            aDiv[].style.background='red';
        }
    </script>

9.循環

一般包括四部分：初始化，條件，語句，自增

for循環：

for（var i=0，i<5,i++）{語句}

執行個體：

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {width:px;height:px;float:left;
            border: px solid black;margin:px;}
    </style>
    <script>
        window.onload=function(){
            var aDiv=document.getElementsByTagName('div');

            for (var i=;i<aDiv.length;i++){
                aDiv[i].style.background='red';
            }
        }
    </script>
</head>
<body>
    <div>a </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

10.this

表示目前選中的對象，如頁籤小程式

<script>
        window.onload= function(){
              var oDiv=document.getElementById('div1');
              var aBtn=oDiv.getElementsByTagName('input');
              var aDiv=oDiv.getElementsByTagName('div');
            for (var i=;i<aBtn.length;i++)
            {
                 aBtn[i].index=i;
                 aBtn[i].onclick=function()
                 {
                     //先讓所有的按鈕變為常态
                     for(var j=;j<aBtn.length;j++)
                     {
                         aBtn[j].className='';
                         aDiv[j].style.display='none';
                     }
                     //再讓按鈕選中，并顯示對應DIV
                    this.className='active';
                     aDiv[this.index].style.display='block';
                 }
            }
        }
    </script>

11.innerHTML

用來設定或擷取位于對象起始和結束标簽内的HTML。可以是文字，也可以是html代碼

<script>
        window.onload=function(){
            var oTxt=document.getElementById('txt1');
            var oBtn1=document.getElementById('btn1');
            var oDiv=document.getElementById('div1');
            oBtn1.onclick=function(){
                oDiv.innerHTML=oTxt.value;
            }
        }
    </script>

JS學習筆記(一)

繼續閱讀

JavaEE & HTML5之WebSocket1、工作流程2、W3C WebSocket接口3、Java服務端

JavaScript常用函數練習之substring和splice

【JavaScript】10.解決chplayer視訊播放器在本地能加載視訊，放到伺服器上加載視訊失敗的問題

嘔心瀝血 JavaScript知識點梳理大全，超詳細建議收藏！！！

javascript 支援的最大數 js最大值

JavaScript學習12：事件對象

JavaScript實作滑動折疊

Javascript中擷取指定名稱的cookie

重新整理被彈出的模态視窗

Combobox不能指派怎麼辦？

Javascript檢測通路的浏覽器的作業系統

JS中的location.href

Web版2048遊戲制作

JavaScript學習第三課（三）

javascript之排程：setTimeout 和 setInterval