1.JS變量
1.1基本數據類型
相似於java中的基本數據類型。java
| 屬性名ide |
屬性說明函數 |
| stringspa |
字符串類型。3d "" 和 '' 都是字符串。 JavaScript中沒有單個字符orm
|
| boolean對象 |
布爾類型。 blog 固定值爲true和falseseo
|
| number事件 |
數字類型。 任意數字及NaN標記
NaN（Not A Number）沒有特定意義，僅標記當前值不是一個數字。 但NaN標記屬於數字類型
|
| null |
空，一個佔位符
|
| undefined |
未定義類型。 該類型只有一個固定值，即undefined， 表示變量聲明卻 未定義具體的值。
能夠理解爲Java中，int類型的0，String類型的空字符串，都是爲賦值時的默認值 |
1.2 引用數據類型
- Java 中的引用數據類型 都是Class（類）
- JavaScript中的引用數據類型 都是對象。
標準建立方式：
- var str = new String();//和java相同
- var str = new String; //js獨有的方式
引用數據類型默認值：null
2. js 運算符
- 比較運算符
- == 邏輯等。僅僅對比 數據值。
- === 全等。 對比數據值而且對比類型。
- 若是值和類型都相同，則爲true；值和類型有一個不一樣，則爲false
<script> /* * == 僅僅比較值是否相同。 若是相同，返回true，不然返回false * === 比較值和數據類型。 若是值和數據類型都相等，返回true； 不然返回false * */ var aa = "10"; alert(aa==10);//true alert(aa===10);//類型不一樣，false alert(aa==="10");//true 值和類型都相等 </script>
3. JS函數
function 方法名(參數列表){
}
- return可忽略
- 必定有返回值。 默認值：undefined
目前階段：JS函數沒有重載，只有覆蓋
4.JS正則對象
Java正則：「字符串」
JS正則：正則對象
- var reg = /^表達式$/; 直接量（開發中經常使用）
直接量中存在邊界，即^表明開始，$表明結束
直接量方式的正則是對象，不是字符串，別用引號
| test(string) |
匹配傳入的字符串是否匹配正則。 字符串所有匹配正則，返回true 有一個字符不匹配，返回false |
<script> var str = " ccc "; //定義一個正則對象 var reg = /^\s*$/;// \s空白符--空格 。 空格能夠有0個或多個 alert(reg.test(str)); </script>
5.js事件
- onclick
- onsubmit
- 寫在<form>
- onsubmit=」return 方法名()」
- 被綁定的方法必須有boolean返回值。
true:表單正常提交
false:阻止表單提交
HTML-DOM綁定方式：
document.getElementById(「」).事件名=方法名;
document.getElementById(「」).事件名=function(){
};
onchange事件
域內容發生改變時
<select> 域
<script>
function run(){
alert("xxxxxxxx");
}
</script>
</head>
<body>
<select onchange="run()">
<option value="ll">榴蓮</option>
<option value="sl">石榴</option>
<option value="cm">草莓</option>
</select>
</body>
小結：
- 只有域內容發生改變時，纔會觸發onchange事件
- 域內容未發生改變，onchange事件不會觸發
6. js 定時器
定時器：固定一個週期，執行某一項任務
- 循環定時器： setInterval()
- 一次性定時器：setTimeout()
<script>
function run1(){
alert("你好");
}
//循環定時器：
//setInterval("run1()",2000);//每隔2秒，執行一次run1方法
//一次性定時器：
setTimeout("run1()",2000);//2秒以後，執行一次run1方法
//定時器其餘寫法：
//setTimeout(run1,2000);//2秒以後，執行一次run1方法
/*setTimeout(function () {
run1();
},2000);//2秒以後，執行一次run1方法*/
</script>
定時器三種寫法：
- setTimeout(「方法名()」,毫秒值);
- setTimeout(方法名,毫秒值);
- setTimeout(function(){ //JS代碼 },毫秒值);
取消定時器
- clearInterval(id);取消循環定時器
- clearTimeout(id);取消一次性定時器
<script> function run1(){ alert("執行run1"); } var xid = setInterval("run1()",1000); function runx() { clearInterval(xid); } </script> </head> <body> <input type="button" value="點我取消循環定時器" onclick="runx()"/> </body>
注意：頁面上的定時器ID都不相同
7. 輪播圖
需求分析
- 1、onload
- 2、循環定時器
- 3、一個<img> 重複更改src
<script> //計數器 var num = 1; //更換圖片 function changeImg(){ //1、獲取圖片標籤對象 var img = document.getElementById("lbt"); //2、更改src屬性 img.src="img/"+(++num==4?num=1:num)+".jpg"; } </script> </head> <body onload="setInterval('changeImg()',2000)">
8. 定時彈廣告
- 1、onload
- 2、setTimeout
- 3、獲取對象
- 對象.className="顯示樣式"
- 對象.className="隱藏樣式"
<script> //顯示圖片 function showImg(){ //1、獲取圖片對象 var img = document.getElementById("ad"); //2、對象.className img.className="showImg"; //設置一個定時器，2秒後隱藏圖片 setTimeout("hideImg()",2000); } //隱藏圖片 function hideImg(){ //1、獲取圖片對象 var img = document.getElementById("ad"); //2、對象.className img.className="hiddenImg"; } </script> </head> <body onload="setTimeout('showImg()',2000)">
9.JS事件總結
| 事件名 |
描述 |
| onload |
某個頁面或圖像被完成加載 時觸發 |
| onsubmit |
提交按鈕被點擊時觸發 |
| onclick |
點擊某個對象 時觸發 |
| ondblclick |
雙擊某個對象 時觸發 |
| onblur |
元素失去焦點 時觸發 失去焦點前提：必須先獲取焦點 |
| onfocus |
元素得到焦點 時觸發 |
| onchange |
域的內容被用戶改變 時觸發 |
焦點（關注點）：一個網頁只有一個焦點
焦點在輸入框中有直接體現：閃爍的光標
鼠標鍵盤事件：
| 事件名 |
描述 |
| onkeydown |
某個鍵盤的鍵被按下 |
| onkeypress |
某個鍵盤的鍵被按下或按住 |
| onkeyup |
某個鍵盤的鍵被鬆開、彈起 前提：必須先按下 |
| onmousedown |
某個鼠標按鍵被按下 |
| onmouseup |
某個鼠標按鍵被鬆開 |
| onmouseover |
鼠標被移到某元素之上 移入 |
| onmouseout |
鼠標從某元素移開 移出 前提：必須先移入 |