JavaScript基礎2
JavaScript對象
在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。css
String字符串對象
字符串對象的建立
字符串建立(兩種方式)
① 變量 = 「字符串」
② 字串對象名稱 = new String (字符串)html
var str1="hello world";
var str1= new String("hello word");
字符串對象的屬性和函數前端
//屬性
x.length －－－－獲取字符串的長度
//函數
x.toLowerCase() －－－－轉爲小寫
x.toUpperCase() －－－－轉爲大寫
x.trim() －－－－去除字符串兩邊空格
－－－－字符串查詢方法
x.charAt(index) －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index爲要獲取的字符索引
x.indexOf(findstr,index)－－－－查詢字符串位置
x.lastIndexOf(findstr)
x.match(regexp) －－－－match返回匹配字符串的數組，若是沒有匹配則返回null
x.search(regexp) －－－－search返回匹配字符串的首字符位置索引
示例：
var str1="welcome to the world of JS!";
var str2=str1.match("world");
var str3=str1.search("world");
alert(str2[0]); // 結果爲"world"
alert(str3); // 結果爲15
－－－－子字符串處理方法
x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置
x.slice(start, end) －－－－切片操做字符串
示例：
var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);
alert(str2); //結果爲"cd"
alert(str3); //結果爲"efgh"
alert(str4); //結果爲"cdefg"
alert(str5); //結果爲"fg"
x.replace(findstr,tostr) －－－－ 字符串替換
x.split(); －－－－分割字符串
var str1="一,二,三,四,五,六,日";
var strArray=str1.split(",");
alert(strArray[1]);//結果爲"二"
x.concat(addstr) －－－－ 拼接字符串
Array數組對象
數組對象的建立
建立數組的三種方式：java
//建立方式1:
var arrname = [元素0,元素1,….]; // var arr=[1,2,3];
//建立方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
//建立方式3:
var arrname = new Array(長度);
// 初始化數組對象:
var cnweek=new Array(7);
cnweek[0]="星期日";
cnweek[1]="星期一";
...
cnweek[6]="星期六";
建立二維數組node
var cnweek=new Array(7);
for (var i=0;i<=6;i++){
cnweek[i]=new Array(2);
}
cnweek[0][0]="星期日";
cnweek[0][1]="Sunday";
cnweek[1][0]="星期一";
cnweek[1][1]="Monday";
...
cnweek[6][0]="星期六";
cnweek[6][1]="Saturday";python
二維數組面試
數組對象的屬性和方法
join方法數組
x.join(bystr) －－－－將數組元素拼接成字符串
var arr1=[1, 2, 3, 4, 5, 6, 7];
var str1=arr1.join("-");
alert(str1); //結果爲"1-2-3-4-5-6-7"
concat方法瀏覽器
x.concat(value,...) －－－－ 合併數組或值
var a = [1,2,3];
var b=a.concat(4,5) ;
console.log(a); //返回結果爲[1,2,3]
console.log(a); //返回結果爲[1,2,3,4,5]
alert(a.toString()); //返回結果爲1,2,3
alert(b.toString()); //返回結果爲1,2,3,4,5
注：toString方法是將數組轉成字符串app
數組排序-reverse sort
//x.reverse()
//x.sort()
var arr1=[32, 12, 111, 444];
//var arr1=["a","d","f","c"];
arr1.reverse(); //顛倒數組元素
alert(arr1.toString());
//結果爲444,111,12,32
arr1.sort(); //排序數組元素
alert(arr1.toString());
//結果爲111,12,32,444
//------------------------------
arr=[1,5,2,100];
//arr.sort();
//alert(arr);
//若是就想按着數字比較呢?
function intSort(a,b){
if (a>b){
return 1;//-1
}
else if(a<b){
return -1;//1
}
else {
return 0
}
}
arr.sort(intSort);
alert(arr);
function IntSort(a,b){
return a-b;
}
數組切片操做
//x.slice(start, end) // //使用註解 // //x表明數組對象 //start表示開始位置索引 //end是結束位置下一數組元素索引編號 //第一個數組元素索引爲0 //start、end可爲負數，-1表明最後一個數組元素 //end省略則至關於從start位置截取之後全部數組元素 var arr1=['a','b','c','d','e','f','g','h']; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString()); //結果爲"c,d" alert(arr3.toString()); //結果爲"e,f,g,h" alert(arr4.toString()); //結果爲"c,d,e,f,g"
刪除子數組
//x. splice(start, deleteCount, value, ...)
//使用註解
//x表明數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數能夠省略
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());//a變爲 [1,4,5,6,7,8]
a.splice(1,1);
alert(a.toString());//a變爲[1,5,6,7,8]
a.splice(1,0,2,3);
alert(a.toString());//a變爲[1,2,3,5,6,7,8]
數組的push和pop
//push pop這兩個方法模擬的是一個棧操做 //x.push(value, ...) 壓棧 //x.pop() 彈棧 //使用註解 // //x表明數組對象 //value能夠爲字符串、數字、數組等任何值 //push是將value值添加到數組x的結尾 //pop是將數組x的最後一個元素刪除 var arr1=[1,2,3]; arr1.push(4,5); alert(arr1); //結果爲"1,2,3,4,5" arr1.push([6,7]); alert(arr1) //結果爲"1,2,3,4,5,6,7" arr1.pop(); alert(arr1); //結果爲"1,2,3,4,5"
數組的shift和unshift
//x.unshift(value,...) //x.shift() //使用註解 //x表明數組對象 //value能夠爲字符串、數字、數組等任何值 //unshift是將value值插入到數組x的開始 //shift是將數組x的第一個元素刪除 var arr1=[1,2,3]; arr1.unshift(4,5); alert(arr1); //結果爲"4,5,1,2,3" arr1. unshift([6,7]); alert(arr1); //結果爲"6,7,4,5,1,2,3" arr1.shift(); alert(arr1); //結果爲"4,5,1,2,3"
總結js的數組特性
// js中數組的特性
//java中數組的特性, 規定是什麼類型的數組,就只能裝什麼類型.只有一種類型.
//js中的數組特性1: js中的數組能夠裝任意類型,沒有任何限制.
//js中的數組特性2: js中的數組,長度是隨着下標變化的.用到多長就有多長.
var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')];
/* alert(arr5.length);//8
arr5[10] = "hahaha";
alert(arr5.length); //11
alert(arr5[9]);// undefined */
特性
Date時間對象
時間對象的建立
//方法1：不指定參數
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：參數爲日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：參數爲毫秒數
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());
//方法4：參數爲年月日小時分鐘秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒並不直接顯示
獲取日期和時間
獲取日期和時間方法
getDate() 獲取日 getDay () 獲取星期 getMonth () 獲取月（0-11） getFullYear () 獲取完全年份 getYear () 獲取年 getHours () 獲取小時 getMinutes () 獲取分鐘 getSeconds () 獲取秒 getMilliseconds () 獲取毫秒 getTime () 返回累計毫秒數(從1970/1/1午夜)
實例
function getCurrentDate(){
//1. 建立Date對象
var date = new Date(); //沒有填入任何參數那麼就是當前時間
//2. 得到當前年份
var year = date.getFullYear();
//3. 得到當前月份 js中月份是從0到11.
var month = date.getMonth()+1;
//4. 得到當前日
var day = date.getDate();
//5. 得到當前小時
var hour = date.getHours();
//6. 得到當前分鐘
var min = date.getMinutes();
//7. 得到當前秒
var sec = date.getSeconds();
//8. 得到當前星期
var week = date.getDay(); //沒有getWeek
// 2014年06月18日 15:40:30 星期三
return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
}
alert(getCurrentDate());
//解決 自動補齊成兩位數字的方法
function changeNum(num){
if(num < 10){
return "0"+num;
}else{
return num;
}
}
//將數字 0~6 轉換成 星期日到星期六
function parseWeek(week){
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
// 0 1 2 3 .............
return arr[week];
}
練習示例
設置日期和時間
設置日期和時間的方法
setDate(day_of_month) 設置日
setMonth (month) 設置月
setFullYear (year) 設置年
setHours (hour) 設置小時
setMinutes (minute) 設置分鐘
setSeconds (second) 設置秒
setMillliseconds (ms) 設置毫秒(0-999)
setTime (allms) 設置累計毫秒(從1970/1/1午夜)
實例
日期和時間的轉換
轉換日期和時間的方法
getTimezoneOffset():8個時區×15度×4分/度=480; 返回本地時間與GMT的時間差，以分鐘爲單位 toUTCString() 返回國際標準時間字符串 toLocalString() 返回本地格式時間字符串 Date.parse(x) 返回累計毫秒數(從1970/1/1午夜到本地時間) Date.UTC(x) 返回累計毫秒數(從1970/1/1午夜到國際時間)
Math數學計算對象
//該對象中的屬性方法 和數學有關.
abs(x) 返回數的絕對值。
exp(x) 返回 e 的指數。
floor(x) 對數進行下舍入。
log(x) 返回數的天然對數（底爲e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四捨五入爲最接近的整數。
sin(x) 返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x) 返回角的正切。
//方法練習:
//alert(Math.random()); // 得到隨機數 0~1 不包括1.
//alert(Math.round(1.5)); // 四捨五入
//練習：獲取1-100的隨機整數，包括1和100
//var num=Math.random();
//num=num*10;
//num=Math.round(num);
//alert(num)
//============max min=========================
/* alert(Math.max(1,2));// 2
alert(Math.min(1,2));// 1 */
//-------------pow--------------------------------
alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方.
Function函數對象（重點）
函數的定義
function 函數名 (參數){
<br> 函數體;
return 返回值;
}
功能說明：
可使用變量、常量或表達式做爲函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類能夠表示開發者定義的任何函數。
用 Function 類直接建立函數的語法以下：
var 函數名 = new Function("參數1","參數n","function_body");
雖然因爲字符串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行爲與用 Function 類明確建立的函數行爲是相同的。
function func1(name){
alert('hello'+name);
return 8
}
ret=func1("bob");
alert(ret);
var func2=new Function("name","alert(\"hello\"+name);")
func2("natasha")
示例
注意：js的函數加載執行與python不一樣，它是總體加載完纔會執行，因此執行函數放在函數聲明上面或下面均可以
Function對象屬性
如前所述，函數屬於引用類型，因此它們也有屬性和方法。
好比，ECMAScript 定義的屬性 length 聲明瞭函數指望的參數個數。
alert(func1.length)
Function的調用
function func1(a,b){
alert(a+b);
}
func1(1,2); //3
func1(1,2,3);//3
func1(1); //NaN
func1(); //NaN
//只要函數名寫對便可,參數怎麼填都不報錯.
-------------------面試題-----------
function a(a,b){
alert(a+b);
}
var a=1;
var b=2;
a(a,b)
函數的內置對象arguments
該函數相似於python中的*args,**kwargs
function add(a,b){
console.log(a+b);//3
console.log(arguments.length);//2
console.log(arguments);//[1,2]
}
add(1,2)
------------------arguments的用處1 ------------------
function nxAdd(){
var result=0;
for (var num in arguments){
result+=arguments[num]
}
alert(result)
}
nxAdd(1,2,3,4,5)
// ------------------arguments的用處2 ------------------
function f(a,b,c){
if (arguments.length!=3){
throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
}
else {
alert("success!")
}
}
f(1,2,3,4,5)
匿名函數
// 匿名函數
var func = function(arg){
return "tony";
}
// 匿名函數的應用
(function(){
alert("tony");
} )()
(function(arg){
console.log(arg);
})('123')
BOM對象
window對象
全部瀏覽器都支持 window 對象
概念上講：一個html文檔對應一個window對象
功能上講：控制瀏覽器窗口的
使用上講： window對象不須要建立對象,直接使用便可
window對象方法
alert() 顯示帶有一段消息和一個確認按鈕的警告框。 confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 prompt() 顯示可提示用戶輸入的對話框。 open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 close() 關閉瀏覽器窗口。 setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。 clearInterval() 取消由 setInterval() 設置的 timeout。 setTimeout() 在指定的毫秒數後調用函數或計算表達式。 clearTimeout() 取消由 setTimeout() 方法設置的 timeout。 scrollTo() 把內容滾動到指定的座標。
window對象方法的使用
一、alert confirm prompt以及open函數
//----------alert confirm prompt----------------------------
//alert('aaa');
/* var result = confirm("您肯定要刪除嗎?");
alert(result); */
//prompt 參數1 : 提示信息. 參數2:輸入框的默認值. 返回值是用戶輸入的內容.
// var result = prompt("請輸入一個數字!","haha");
// alert(result);
方法講解:
//open方法 打開和一個新的窗口 並 進入指定網址.參數1 : 網址.
//調用方式1
//open("http://www.baidu.com");
//參數1 什麼都不填 就是打開一個新窗口. 參數2.填入新窗口的名字(通常能夠不填). 參數3: 新打開窗口的參數.
open('','','width=200,resizable=no,height=100'); // 新打開一個寬爲200 高爲100的窗口
//close方法 將當前文檔窗口關閉.
//close();
示例：
var num = Math.round(Math.random()*100);
function acceptInput(){
//2.讓用戶輸入(prompt) 並接受 用戶輸入結果
var userNum = prompt("請輸入一個0~100之間的數字!","0");
//3.將用戶輸入的值與 隨機數進行比較
if(isNaN(+userNum)){
//用戶輸入的無效(重複2,3步驟)
alert("請輸入有效數字!");
acceptInput();
}
else if(userNum > num){
//大了==> 提示用戶大了,讓用戶從新輸入(重複2,3步驟)
alert("您輸入的大了!");
acceptInput();
}else if(userNum < num){
//小了==> 提示用戶小了,讓用戶從新輸入(重複2,3步驟)
alert("您輸入的小了!");
acceptInput();
}else{
//答對了==>提示用戶答對了 , 詢問用戶是否繼續遊戲(confirm).
var result = confirm("恭喜您!答對了,是否繼續遊戲?");
if(result){
//是 ==> 重複123步驟.
num = Math.round(Math.random()*100);
acceptInput();
}else{
//否==> 關閉窗口(close方法).
close();
}
}
}
二、setInterval，clearInterval
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。
語法：setInterval(code,millisec)
其中，code爲要調用的函數或要執行的代碼串。millisec週期性執行或調用 code 之間的時間間隔，以毫秒計。
示例：
<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">中止</button>
<script>
function showTime(){
var nowd2=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd2;
}
var ID;
function begin(){
if (ID==undefined){
showTime();
ID=setInterval(showTime,1000);
}
}
function end(){
clearInterval(ID);
ID=undefined;
}
</script>
DOM對象
什麼是HTML DOM
- HTML Document Object Model（文檔對象模型）
- HTML DOM 定義了訪問和操做HTML文檔的標準方法
- HTML DOM 把 HTML 文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹)
DOM樹
畫dom樹是爲了展現文檔中各個對象之間的關係，用於對象的導航。
DOM節點
節點類型
HTML 文檔中的每一個成分都是一個節點。
DOM 是這樣規定的：
整個文檔是一個文檔節點
每一個 HTML 標籤是一個元素節點
包含在 HTML 元素中的文本是文本節點
每個 HTML 屬性是一個屬性節點
其中，document和element節點最重要
節點關係
節點樹中的節點彼此擁有層級關係。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱爲根（root）
- 每一個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子
- 同胞是擁有相同父節點的節點
下面的圖片展現了節點樹的一部分，以及節點之間的關係：
訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,咱們可以以不一樣的方式來訪問 HTML 元素。
節點查找
直接查找節點
document.getElementById(「idname」) document.getElementsByTagName(「tagname」) document.getElementsByName(「name」) document.getElementsByClassName(「name」)
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)
</script>
注意：設計到尋找元素，注意<script>標籤的位置！
導航節點屬性
parentElement // 父節點標籤元素 children // 全部子標籤 firstElementChild // 第一個子標籤元素 lastElementChild // 最後一個子標籤元素 nextElementtSibling // 下一個兄弟標籤元素 previousElementSibling // 上一個兄弟標籤元素
注意，js中沒有辦法找到全部的兄弟標籤！思路，找到全部的複合的標籤，經過遍歷的方式排除不須要的標籤。
<div class="outer">
<p>P5</p>
<p>P4</p>
<div class="inner">
<p id="p1">P1</p>
</div>
<p>P2</p>
</div>
<script>
var ele_p1=document.getElementById("p1");
var ele_p1_pa=ele_p1.parentElement;
console.log(ele_p1_pa.nextElementSibling);
</script>
節點操做
建立節點
//createElement(標籤名) ：建立一個指定名稱的元素。
var tag=document.createElement(「input")
tag.setAttribute('type','text'); //下見節點屬性操做
添加節點
//追加一個子節點（做爲最後的子節點） somenode.appendChild(newnode) //把增長的節點放到某個節點的前邊 somenode.insertBefore(newnode,某個節點);
刪除節點
removeChild()：得到要刪除的元素，經過父元素調用刪除
替換節點
somenode.replaceChild(newnode, 某個節點);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 400px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="box">
<h4>增長節點</h4>
</div>
<button>ADD</button>
<button>remove</button>
<button>repalce</button>
<script>
var ele=document.getElementsByTagName("button")[0];
var ele_remove=document.getElementsByTagName("button")[1];
var ele_repalce=document.getElementsByTagName("button")[2];
var ele_box=document.getElementsByClassName("box")[0];
// 點擊事件執行匿名函數
ele.onclick=function () {
// 建立一個節點img標籤 createElement
var ele_img=document.createElement("img"); // <img>
ele_img.src="http://dig.chouti.com/images/homepage_download.png";
// 添加標籤 appendChild 注意： 父節點添加子節點
ele_box.appendChild(ele_img)
};
// 刪除節點
ele_remove.onclick=function () {
// 查找刪除節點
var ele_h4=document.getElementsByTagName("h4")[0];
// removeChild 父節點刪除子節點
ele_box.removeChild(ele_h4);
};
//替換標籤
ele_repalce.onclick=function () {
// 建立一個img標籤 createElement
var ele_img=document.createElement("img"); // <img>
ele_img.src="http://dig.chouti.com/images/homepage_download.png";
var ele_h4=document.getElementsByTagName("h4")[0];
ele_box.replaceChild(ele_img,ele_h4)
}
</script>
</body>
</html>
節點屬性操做
文本節點操做
<body>
<div id="c1"><p>hello</p></div>
<script>
var ele=document.getElementById("c1");
// 取值操做
//innerHTML和innerText區別在於，innerText會把p標籤識別成文本
// console.log(ele.innerHTML);
// console.log(ele.innerText);
//賦值操做
// ele.innerText="<a>click</a>";
ele.innerHTML="<a href=''>click</a>";
</script>
</body>
注：innerHTML 給節點添加html代碼：
該方法不是w3c的標準，可是主流瀏覽器支持
tag.innerHTML = 「<p>要顯示內容</p>
attribute操做
elementNode.setAttribute(name,value) elementNode.getAttribute(屬性名) <-------------->elementNode.屬性名(DHTML) elementNode.removeAttribute(「屬性名」);
js操做class
elementNode.className elementNode.classList.add elementNode.classList.remove
<body>
<div class="item btn" id="d1">DIV</div>
<script>
var ele=document.getElementById("d1");
console.log(ele.className);
console.log(typeof ele.className);
// 添加和刪除class值
ele.classList.add("t1");
ele.classList.remove("t1");
</script>
</body>
js操做css
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
三、value獲取當前選中的value值
1.input
2.select （selectedIndex）
3.textarea
DOM Event（事件）
事件類型
Event對象：表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件一般與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了，而且會在事件函數被調用時傳給事件函數。
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素得到焦點。 練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證. onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並鬆開。 onkeyup 某個鍵盤按鍵被鬆開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
綁定事件方式
方式一：
<div id="div" onclick="foo(this)">點我呀</div>
<script>
function foo(self){ // 形參不能是this;
console.log("點你大爺!");
console.log(self);
}
</script>
方式二：
<p id="abc">試一試!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this); // this直接用
};
</script>
事件介紹
onload事件
onload事件的觸發，標誌着頁面內容被加載完成。
應用場景：當有些事情咱們但願頁面加載完馬上執行，那麼可使用該事件屬性。
onsubmit
當表單在提交時觸發，該屬性也只能給form元素使用
應用場景：在表單提交前驗證用戶輸入是否正確，若是驗證失敗，在該方法中咱們應該阻止表單的數據提交。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="form">
<p>姓名：<input type="text"></p>
<p>密碼：<input type="password"></p>
<input type="submit">
</form>
<script>
var ele=document.getElementById('form');
ele.onsubmit=function (event) {
alert(111)
//阻止表單提交方式1().
// onsubmit 命名的事件函數,能夠接受返回值. 其中返回false表示攔截表單提交.其餘爲放行.
// return false
// 阻止表單提交方式2 event.preventDefault();
event.preventDefault() //event對象下的一個方法，函數中須要傳入event對象(簡寫爲e),通知瀏覽器不要執行與事件關聯的默認動做
}
</script>
</body>
</html>
onsubmit事件示例
事件傳播現象
父標籤的事件會派發給子標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height: 300px;
width: 300px;
background-color: #8aab30;
}
.div2{
height: 100px;
width: 100px;
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<script>
// 點擊div2的時候，除了激活ele_div2的點擊事件，因爲父div也有點擊事件，父div的點擊事件會派發給子div
var ele_div1=document.getElementsByClassName('div1')[0]
var ele_div2=document.getElementsByClassName('div2')[0]
ele_div1.onclick=function () {
alert(123)
}
ele_div2.onclick=function (e) {
alert(456)
// e.stopPropagation() //調用event對象方法，阻止事件傳播，使事件再也不派發
}
</script>
</body>
</html>
阻止事件派發
onselect
選中表單文本框內的文本時候觸發的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="text">
//<p id="text">aaaaaaaaa</p> //無效的方式
//<textarea cols="20" rows="5" id="text">Hello world!</textarea>
</form>
<script>
var ele=document.getElementById("text");
ele.onselect=function () {
alert(21321)
}
</script>
</body>
</html>
onselect事件示例
onchange
域內元素被改變時候觸發
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select>
<input type="text" id="fname" onchange="upperCase(this.id)" />
<script>
//select表單內容改變觸發的
var ele=document.getElementsByTagName("select")[0];
ele.onchange=function(){
alert(123);
}
//input表單內容被改變時候觸發，小寫字母變大寫
function upperCase(x){
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</body>
</html>
onchange事件示例
onmouse
鼠標操做觸發的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
width: 300px;
}
.title{
background-color: gray;
line-height: 44px;
text-align: center;
}
.list{
display: none;
}
.list div{
line-height: 40px;
}
.item1{
background-color: green;
}
.item2{
background-color: goldenrod;
}
.item3{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="container">
<div class="title">text</div>
<div class="list">
<div class="item1">111</div>
<div class="item2">222</div>
<div class="item3">333</div>
</div>
</div>
<script>
var ele=document.getElementsByClassName("title")[0];
var ele_list=document.getElementsByClassName("list")[0];
var ele_box=document.getElementsByClassName("container")[0];
ele.onmouseover=function () {
ele_list.style.display="block";
};
// 1.不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。
// 2.只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。
ele_box.onmouseleave=function () {
ele_list.style.display="none"
}
// ele_box.onmouseout=function () {
// ele_list.style.display="none"
// }
//由於mouseout事件是會冒泡的，也就是onmouseout事件可能被同時綁定到了container的子元素title和list
//上，因此鼠標移出每一個子元素時也都會觸發咱們的list.style.display="none";
/*
思考，若是改爲
ele_list.onmouseout=function(){
ele_list.style.display="none";
};
爲何移出第一行時,整個list會被隱藏?
實際上是一樣的道理,onmouseout事件被同時綁定到list和它的三個子元素item上,因此離開任何一個
子元素一樣會觸發list.style.display="none";
*/
</script>
</body>
</html>
onmouseleave和onmouseout區別
注意： 1.不論鼠標指針離開被選元素仍是任何子元素，都會觸發 onmouseout 事件。
2.只有在鼠標指針離開被選元素時，纔會觸發 onmouseleave 事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
width: 300px;
}
.title{
background-color: gray;
line-height: 44px;
text-align: center;
}
.list{
display: none;
}
.list div{
line-height: 40px;
}
.item1{
background-color: green;
}
.item2{
background-color: goldenrod;
}
.item3{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="container">
<div class="title">text</div>
<div class="list">
<div class="item1">111</div>
<div class="item2">222</div>
<div class="item3">333</div>
</div>
</div>
<script>
var ele=document.getElementsByClassName("title")[0];
var ele_list=document.getElementsByClassName("list")[0];
var ele_box=document.getElementsByClassName("container")[0];
ele.onmouseover=function () {
ele_list.style.display="block";
};
// 1.不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。
// 2.只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。
ele_box.onmouseleave=function () {
ele_list.style.display="none"
}
// ele_box.onmouseout=function () {
// ele_list.style.display="none"
// }
//由於mouseout事件是會冒泡的，也就是onmouseout事件可能被同時綁定到了container的子元素title和list
//上，因此鼠標移出每一個子元素時也都會觸發咱們的list.style.display="none";
/*
思考，若是改爲
ele_list.onmouseout=function(){
ele_list.style.display="none";
};
爲何移出第一行時,整個list會被隱藏?
實際上是一樣的道理,onmouseout事件被同時綁定到list和它的三個子元素item上,因此離開任何一個
子元素一樣會觸發list.style.display="none";
*/
</script>
</body>
</html>
onmouseleave和onmouseout區別
補充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="user">
<script>
var ele=document.getElementById("user");
// event對象是保存事件觸發狀態的對象，由操做系統發送
ele.onkeydown=function (e) {
e=e||window.event; //瀏覽器兼容，有的瀏覽器並不支持直接傳e
console.log(String.fromCharCode(e.keyCode));
}
</script>
</body>
</html>
window.event
實例練習
搜索框
當鼠標點進框內，去除默認值，當輸入空格，鼠標點到框外，恢復默認值，當輸入數據，則保留數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function Focus(){
var input=document.getElementById("ID1");
if (input.value=="請輸入用戶名"){
input.value="";
}
}
function Blurs(){
var ele=document.getElementById("ID1");
var val=ele.value;
if(!val.trim()){
ele.value="請輸入用戶名";
}
}
</script>
</head>
<body>
<input id="ID1" type="text" value="請輸入用戶名" onblur="Blurs()" onfocus="Focus()">
</body>
</html>
搜索框代碼
模態對話框
點擊按鈕，彈出對話框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.5;
}
.model{
width: 300px;
height: 200px;
background-color: #8aab30;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="back">
<button>click</button>
</div>
<div class="shade hide"></div>
<div class="model hide">
<p><input type="text"></p>
<p><input type="text"></p>
<p><input type="text"></p>
<button>cancel</button>
</div>
<script>
var ele1=document.getElementsByTagName('button')[0]
var ele2=document.getElementsByTagName('button')[1]
ele1.onclick=function () {
var ele_shade=this.parentElement.nextElementSibling;
var ele_model=ele_shade.nextElementSibling;
ele_shade.classList.remove('hide')
ele_model.classList.remove('hide')
}
ele2.onclick=function () {
var ele_model2=this.parentElement;
var ele_shade2=ele_model2.previousElementSibling;
ele_model2.classList.add('hide')
ele_shade2.classList.add('hide')
}
</script>
</body>
</html>
模態對話框代碼
表格案例
多選、全選、反選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="select_all">全選</button>
<button class="select_reverse">反選</button>
<button class="cancel">取消</button>
<hr>
<table class="server_table" border="2px" cellspacing="2px">
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>444</td>
<td>444</td>
<td>444</td>
</tr>
</table>
<script>
var ele_all=document.getElementsByClassName("select_all")[0];
var ele_reverse=document.getElementsByClassName("select_reverse")[0];
var ele_cancel=document.getElementsByClassName("cancel")[0];
var input_arr=document.getElementsByClassName("item");
ele_all.onclick=function(){
for(var i=0;i<input_arr.length;i++){
console.log(input_arr[i]);
var input=input_arr[i];
input.checked=true;
}
};
ele_cancel.onclick=function(){
for(var i=0;i<input_arr.length;i++){
console.log(input_arr[i]);
var input=input_arr[i];
input.checked=false;
}
};
ele_reverse.onclick=function(){
for(var i=0;i<input_arr.length;i++){
console.log(input_arr[i]);
var input=input_arr[i];
if(input.checked){
input.checked=false;
}
else{
input.checked=true;
}
}
};
//
//
// var input_arr=document.getElementsByClassName("item");
// var button_arr=document.getElementsByTagName("button");
//
// for(var i=0;i<button_arr.length;i++){
//
// button_arr[i].onclick=function(){
//
//
// for (var j=0;j<input_arr.length;j++){
// var inp=input_arr[j]
// if(this.innerText=="全選"){
// console.log("ok");
// inp.checked=true;
// }
// else if(this.innerText=="取消"){
// inp.checked=false;
// }
// else {
// if(inp.checked){
// inp.checked=false;
// }else {
// inp.checked=true;
// }
// }
//
// }
// }
//
// }
</script>
</body>
</html>
表格案例代碼
select移動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
margin: 0 auto;
background-color: darkgray;
width: 80%;
height: 600px;
margin-top: 30px;
word-spacing: -5px;
}
#left{
display: inline-block;
width: 100px ;
height: 180px;
background-color: wheat;
text-align: center;
}
#choice{
display: inline-block;
height: 180px;
background-color: darkolivegreen;
vertical-align: top;
padding:0 5px;
}
#choice button{
margin-top: 20px;
}
#right{
display: inline-block;
width: 100px ;
height: 180px;
background-color: wheat;
text-align: center;
line-height: 140px;
}
</style>
</head>
<body>
<div class="outer">
<select multiple="multiple" size="5" id="left">
<option>紅樓夢</option>
<option>西遊記</option>
<option>水滸傳</option>
<option>JinPingMei</option>
<option>三國演義</option>
</select>
<div id="choice">
<button id="choose_move_left"> > </button><br>
<button id="all_move_left"> >> </button><br>
<button id="choose_move_right"> < </button><br>
<button id="all_move_right"> << </button>
</div>
<select multiple="multiple" size="10" id="right">
<option>放風箏的人</option>
</select>
</div>
<script>
var right=document.getElementById("right");
var left=document.getElementById("left");
//從左移動到右邊
var choose_move_left=document.getElementById("choose_move_left");
var all_move_left=document.getElementById("all_move_left");
var options_left=left.options;
console.log(options_left)
choose_move_left.onclick=function(){
for (var i=0; i<options_left.length;i++){
console.log(options_left.length)
var option=options_left[i];
if(option.selected==true){
// var news=option.cloneNode(true);
// console.log(news);
right.appendChild(option); //從一個元素向另外一個元素中移動元素
i--; //移動一個元素後，該索引位置就不是原來的了，若是不減去1,下一次移動會跳過當前i索引的元素，選取多個的時候會出現跳過元素的現象
};
};
};
all_move_left.onclick=function(){
for (var i=0; i<options_left.length;i++){
var option=options_left[i];
right.appendChild(option);
i--;
};
};
//從右移動到左邊
var choose_move_right=document.getElementById("choose_move_right");
var all_move_right=document.getElementById("all_move_right");
var options_right=right.options;
choose_move_right.onclick=function () {
for(var x=0;x<options_right.length;x++){
var option=options_right[x];
if (option.selected==true){
left.appendChild(option);
x--
};
};
};
all_move_right.onclick=function () {
for (var x = 0; x < options_right.length; x++) {
var option = options_right[x];
left.appendChild(option);
x--;
};
};
</script>
</body>
</html>
select移動代碼
三級聯動
省、市、縣選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="s1">
<option value="">請選擇省份</option>
<option value="">山東省</option>
<option value="">河北省</option>
<option value="">河南省</option>
<option value="">江蘇省</option>
</select>
<select name="" id="s2">
<option value="">請選擇市區</option>
</select>
<select name="" id="s3">
<option value="">請選擇縣區</option>
</select>
<script>
city_info={"山東省":["濟南市","青島市"],"河北省":["保定","邯鄲"],"河南省":["鄭州","洛陽"],"江蘇省":["南京市","徐州市"]};
county_info={"濟南市":["天橋區","長清區"]}
var ele_province=document.getElementById("s1");
var ele_city=document.getElementById("s2");
var ele_county=document.getElementById("s3");
ele_province.onchange=function () {
ele_city.options.length=1
ele_county.options.length=1
var provice=this.children[this.selectedIndex].innerText
for (var i in city_info[provice]){
var tag=document.createElement('option')
tag.value=city_info[provice][i]
tag.innerText=city_info[provice][i]
ele_city.appendChild(tag)
console.log(tag)
}
}
ele_city.onchange=function () {
ele_county.options.length=1
console.log(ele_county )
var city=this.children[this.selectedIndex].innerText
for (var i in county_info[city]){
var tag=document.createElement('option')
tag.value=county_info[city][i]
tag.innerText=county_info[city][i]
ele_county.appendChild(tag)
console.log(tag)
}
}
</script>
</body>
</html>
補充：js做用域
做用域是JavaScript最重要的概念之一，想要學好JavaScript就須要理解JavaScript做用域和做用域鏈的工做原理。
任何程序設計語言都有做用域的概念，簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期。在JavaScript中，變量的做用域有全局做用域和局部做用域兩種。
全局做用域
在代碼中任何地方都能訪問到的對象擁有全局做用域，通常來講一下幾種情形擁有全局做用域：
(1)最外層函數和在最外層函數外面定義的變量擁有全局做用域
<script>
var name="lan"; //全局的局部
function foo(){
var age=23; //局部聲明
function inner(){
console.log(age); //局部內調用
}
inner(); //foo函數內定義的局部的函數inner
}
console.log(name); // lan
// console.log(age); // Uncaught ReferenceError: age is not defined
foo(); // 23
inner(); // Uncaught ReferenceError: inner is not defined
</script>
(2)全部末定義直接賦值的變量自動聲明爲擁有全局做用域，例如：
<script>
function foo(){
age=23; //全局聲明
var sex="male" //位於局部做用域的sex
}
foo();
console.log(age); // 23
console.log(sex); // sex is not defined
</script>
(3)全部window對象的屬性擁有全局做用域
通常狀況下，window對象的內置屬性都都擁有全局做用域，例如window.alert()、window.location、window.top等等。
局部做用域
和全局做用域相反，局部做用域通常只在固定的代碼片斷內可訪問到，最多見的例如函數內部，全部在一些地方也會看到有人把這種做用域成爲函數做用域.
如示例1中的age與inner都只有局部做用域。（js中if、for沒有本身的做用域）
補充：做用域鏈
在JavaScript中，函數也是對象，實際上，JavaScript裏一切都是對象。函數對象和其它對象同樣，擁有能夠經過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被建立的做用域中對象的集合，這個集合被稱爲函數的做用域鏈，它決定了哪些數據能被函數訪問。
示例：
<script>
//-----**********************例1*********************************
var s=12;
function f(){
console.log(s); //undefined，由於在編譯階段，局部做用域產生了s變量，可是沒有值，因此不會向外部做用域讀取s
var s=12; //s=12
console.log(s) //12,s被賦值
}
f();
//-----**********************例2*********************************
var s=10;
function foo(){
console.log(s); //function，在編譯階段，s最後是一個函數，函數的定義是有賦值的操做的。因此執行階段讀取的是函數
var s=5;
console.log(s); //5，執行階段被賦值爲5
function s(){console.log("ok")} // 函數的定義或聲明是在詞法分析時完成的,執行時已再也不有任何操做
console.log(s); //5，執行階段被賦值爲5
}
foo();
//-----***********************例3********************************
function bar(age) {
console.log(age); //function，在編譯階段，age最後是一個函數，執行階段因此是一個函數
var age = 99; //執行階段賦值
var sex= 'male';
console.log(age); //打印的是賦值後的值
function age() { //編譯階段已經完成，操做階段不會再動了
alert(123)
};
console.log(age); //打印的是賦值後的值
return 100;
}
result=bar(5);
</script>
例3結果分析
當一個函數建立後，它的做用域鏈會被建立此函數的做用域中可訪問的數據對象填充。在函數bar建立時，它的做用域鏈中會填入一個全局對象，該全局對象包含了全部全局變量，以下圖所示：
解析到函數調用時，即bar(5)，會生成一個active object的對象，該對象包含了函數的全部局部變量、命名參數、參數集合以及this，而後此對象會被推入做用域鏈的前端，當運行期上下文被銷燬，活動對象也隨之銷燬。新的做用域鏈以下圖所示：
例3過程解析
function bar(age) {
console.log(age);
var age = 99;
var sex="male";
console.log(age);
function age(){
alert(123);
} ;
console.log(age);
return 100;
}
result=bar(5);
一 詞法分析過程(涉及參數，局部變量聲明，函數聲明表達式)：
1-1 、分析參數，有一個參數，造成一個 AO.age=undefine;
1-2 、接收參數 AO.age=5;
1-3 、分析變量聲明，有一個 var age, 發現 AO 上面有一個 AO.age ，則不作任何處理
1-4 、分析變量聲明，有一個 var sex，造成一個 AO.sex=undefine;
1-5 、分析函數聲明，有一個 function age(){} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){};
二 執行過程：
2-1 、執行第一個 console.log(age) 時，當前的 AO.age 是一個函數，因此輸出的一個函數
2-2 、這句 var age=99; 是對不 AO.age 的屬性賦值， AO.age=99 ，因此在第二個輸出的age是 99;
2-3 、同理第三個輸出的是 99, 由於中間沒有改變 age 值的語句了。
注意：執行階段：
function age(){
alert(123)
} ;
不進行任何操做，將執行語句複製給age這部操做是在詞法分析時，即運行前完成的。
- 1. 2、JavaScript基礎（2）
- 2. javaScript 基礎2
- 3. javascript基礎2
- 4. javascript 基礎2
- 5. JavaScript基礎（2）
- 6. 8.javaScript基礎(2)
- 7. JavaScript-基礎：2 基本語法2
- 8. Node.js + MongoDB + AngularJS - 2 Javascript基礎
- 9. JavaScript基礎語法2
- 10. javaScript基礎系列2
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。