day03 js基礎

標籤：參數   改變   ons   regex   分享   bsp   載入   結構   enc   

案例1-定時彈出廣告
需求:
開啟頁面後4秒,展示廣告,2秒之後,該廣告隱藏.再停2秒,繼續展示.
技術分析:

定時器(BOM-window對象)
　　setInterval(code,毫秒數):周期執行
　　setTimeout(code,毫秒數):延遲多長事件後 只執行一次.
清除定時器
　　clearInterval(id)
　　clearTimeout(id):

////////////////////////
1.html頁面,先把廣告隱藏
2.頁面載入成功事件 onload
3.編寫函數
定時器:
操作元素:
　　document.getElementById("")
操作css屬性
　　document.getElementById("id").style.屬性="值"
　　屬性:就是css中屬性 css屬性有"-" 例如:backgroud-color
　　若有"-" 只需要將"-"刪除,後面第一個字母變大寫即可
注意:
　　只要是window對象的屬性和方法,可以把window省略
　　window.onload 等價於 onload
　　window.setInterval() 等價於 setInterval()
////////////////////
bom(瀏覽器物件模型)總結
所有的瀏覽器都有5個對象
window:視窗
location:定位資訊 (地址欄)
history:曆史
window對象詳解:
如果文檔包含架構（frame 或 iframe 標籤），瀏覽器會為 HTML 文檔建立一個 window 對象，
並為每個架構建立一個額外的 window 對象。
常用的屬性:
通過window可以擷取其他的四個對象
window.location 等價於 location
window.history 等價於 history
...
常用的方法
訊息框
　　alert("...."):警告框
　　confirm("你確定要刪除嗎?"):確定框 傳回值:boolean
　　prompt("請輸入您的姓名"):輸入框 傳回值:你輸入的內容
定時器
　　設定定時器
　　清除定時器
開啟和關閉
　　open(url):開啟
　　close():關閉
/////////////////////////////////////////////////////////////
location:定位資訊
常用屬性:
href:擷取或者設定當前頁面的url(定位資訊)

location.href; 擷取url
location.href="...";設定url 相當於 a標籤
//////////////////////
history:曆史
back();後退
forward():向前
★go(int)
go(-1) 相當於 back()
go(1) 相當於 forward()
//////////////////////////////////////////////////////////////////////////
案例2-表單校正plus
需求:
提示資訊不用彈出框,將資訊追加在文字框後面
技術分析:
確定事件 表單提交的時候 onsubmit
文字框失去焦點的時候 onblur

步驟分析:
1.表單
2.表單提交的時候 確定事件 onsubmit()
3.校正使用者名稱和密碼
4.擷取使用者名稱和密碼的對象及值
5.判斷內容,當為空白的時候,擷取響應的span元素
往span元素中顯示錯誤資訊
////////////////////////////////////////////////////////////
注意:
在方法中(function()) this指代的是當前的元素(當前dom對象)
例如:
<input type="text" name="username" id="username" onblur="loseFocus(this.value)">
方法:
function loseFocus(obj){
alert(obj);
}
///////////////////////////////////////////////////////////////////////////////////////////////////
事件總結:
常見的事件:
　　焦時間點事件:★ 　　onfocus　　onblur
　　表單事件:★　　onsubmit       表單使用　　onchange 改變  下拉框使用
　　頁面載入事件:★　　onload
　　滑鼠事件(掌握)　　onclick
　　滑鼠事件(瞭解)　　ondblclick:雙擊　onmousedown:按下　　onmouserup:彈起　　　　　　　　　　　onmousemove:移動　　onmouserover:懸停　　onmouserout:移出　　鍵盤事件(理解)　　onkeydown:按下　　onkeyup:彈起　　onkeypress:按住

瞭解
　　阻止預設事件的發生  preventDefault
　　阻止事件傳播     preventPropaganda
//////////////////////////////////////////////////////////////////////////////////////////////////////////
案例3-隔行換色
需求:
一個表格,隔一行換一個色
技術分析:
事件:onload
擷取元素:dom操作

擷取元素:
document.getElementsByTagName("標籤名"):通過標籤名擷取一種元素(多個)返回一個數組

步驟分析:
1.html表格一載入的時候 確定事件 onload
2.編寫函數
a.擷取元素(所有的tr元素)
b.操作(若當前行是偶數的話加一個樣式,若是奇數的話,加另一個樣式)
////////

//頁面載入成功onload=function(){    //1.擷取所有的tr    var arr=document.getElementsByTagName("tr");    //2.判斷奇偶數 添加不同的樣式 遍曆數組    for(var i=1;i<arr.length;i++){        if(i%2==0){            arr[i].style.backgroundColor="#FFFFCC";        }else{            arr[i].style.backgroundColor="#BCD68D";        }    }}                    

View Code

//////////////////////////
案例4:全選或者全不選
步驟分析:
1.確定事件 最上面那個複選框的單擊事件 onclick
2.編寫函數:讓所有的複選框和最上面的複選框狀態保持一致
a.擷取最上面這個複選框選中狀態 通過checkbox的checked屬性即可
b.擷取其他的複選框,設定他們的checked屬性即可
可以通過以下兩種方案擷取元素
document.getElementsByClassName():需要給下面所有的複選框添加class屬性
document.getElementsByName():需要給下面所有的複選框添加name//////////////////////////////////dom(文件物件模型)

當瀏覽器接受到html代碼的時候,瀏覽器會將所有的代碼裝載到記憶體中,形成一棵樹(document樹)
節點(Node)
文檔節點 document　　元素節點 element　　屬性節點 attribute　　文本節點 text
擷取節點:
通過document可以擷取其他節點:
常用方法:
document.getElementById("id值"):擷取一個特定的元素
document.getElementsByTagName("標籤名"):通過標籤名擷取一種元素(多個)
document.getElementsByClassName("class屬性的值"):通過class屬性擷取一類元素(多個)
document.getElementsByName("name屬性的值"):通過name屬性擷取一類元素(多個)
設定擷取擷取節點的value屬性
dom對象.value;擷取
dom對象.value="";設定
設定或者擷取節點的標籤體
dom對象.innerHTML;擷取
dom對象.innerHTML="";設定
擷取或者設定style屬性
dom對象.style.屬性;擷取
dom對象.style.屬性="";設定
擷取或者設定屬性
dom對象.屬性

appendChild(dom對象):在一個元素下添加孩子
////////////////////////////////////////////////////////////////////////////////
案例5-左右選中.
需求:
技術分析:
1.確定事件,按鈕的單擊事件
2.編寫函數:
點擊移動單|多個的:
a.擷取左邊選中的選項 select對象. selectedOptions--數組
b.將其追加到右邊的下拉選中
rightSelect對象.appendChild(option);
點擊移動所有的
a.擷取左邊的所有的選項
b.一個個的追加過去
///////////////////////
案例6-省市聯動
需求:　　選中省的時候,動態查詢當前省下的所有市,然後展示在市的下拉選中
new Array();//長度為0
new Array(size);//指定長度的
new Array(e1,e2..);//指定元素
非官方　　var arr4=["aa","bb"];
注意:
　　數組是可變的
　　數組可以存放任意值
常用方法:(瞭解)
存放值:對內容的操作
　　pop():彈最後一個
　　push():插入 到最後

　　shift():刪除第一個
　　unshift():插入到首位
列印數組:
　　join(分隔字元):將數組裡的元素按照指定的分隔字元列印
拼接數組:
　　concat():串連兩個或更多的數組，並返回結果。
對結構的操作:
　　sort();排序
　　reverse();反轉

///////////////////////////////////////////////////////////////////////////////////////////////
參考型別總結:
原始類型中的String Number Boolean都是偽對象,可以調用相應的方法
Array:數組
String:
　　new String(值|變數);//返回一個對象
　　String(值|變數);//返回原始類型
常用方法:
　　substring(start,end):[start,end)
　　substr(start,size):從索引為指定的值開始向後截取幾個
　　charAt(index):返回在指定位置的字元。
　　indexOf(""):返回字串所在索引
　　replace():替換
　　split():切割
　　常用屬性:length
Boolean:
　　new Boolean(值|變數);
　　Boolean(值|變數);
　　非0數字 非Null 字元串 非Null 物件 轉成true
Number
　　new Number(值|變數);
　　Number(值|變數);
注意:

　　null====>0
　　fale====>0 true====>1
　　字串的數字=====>對應的數字
　　其他的NaN
Date:
　　new Date();
　　常用方法:
　　toLocalString()
　　RegExp:Regex
文法:
　　直接量文法 /Regex/參數
　　直接量文法 /Regex/
　　new RegExp("Regex")
　　new RegExp("Regex","參數")
參數:
　　i:忽略大小寫
　　g:全域
常用方法:
　　test() :傳回值為boolean
Math:
　　Math.常量|方法
　　Math.PI
　　Math.random() [0,1)
全域:
　　decodeURI() 解碼某個編碼的 URI。
　　encodeURI() 把字串編碼為 URI。

Number():強制轉換成數字
String():轉成字串

parseInt():嘗試轉換成整數
parseFloat():嘗試轉換成小數
eval() 計算 JavaScript 字串，並把它作為指令碼代碼來執行。 

day03 js基礎