JavaScript的對象
在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。
<script language="javascript">
var aa=Number.MAX_VALUE;
//利用數字對象獲取可表示最大數
var bb=new String("hello JavaScript");
//創建字符串對象
var cc=new Date();
//創建日期對象
var dd=new Array("星期一","星期二","星期三","星期四");
//數組對象
String對象
字符串對象創建
字符串創建(兩種方式)
① 變量 = “字符串”
② 字串對象名稱 = new String (字符串)
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) －－－－切片操作字符串
x.replace(findstr,tostr) －－－－ 字符串替換
x.split(); －－－－分割字符串
x.concat(addstr) －－－－ 拼接字符串
示例：
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"
var str1="一,二,三,四,五,六,日";
var strArray=str1.split(",");
alert(strArray[1]);//結果為"二"
Array對象
數組創建
創建數組的三種方式：
方式一：var arrname = [元素0,元素1,….];
var arr1=[1,2,3];
console.log(arr1); //[1, 2, 3]
方式二：ar arrname = new Array(元素0,元素1,….);
var arr2=new Array("hello",12,"3",true);
console.log(arr2); //["hello", 12, "3", true]
方式三：var arrname = new Array(長度);
var arr3=new Array(3);
arr3[0]="周日";
arr3[1]="周六";
arr3[2]="周三";
console.log(arr3); //["周日", "周六", "周三"]
創建二維數組
var week=new Array(3);
for(var i=0;i<=2;i++){
week[i]=new Array(2);
}
week[0][0]="周日";
week[0][1]="Sunday";
week[1][0]="周六";
week[1][1]="Saturday";
week[2][0]="周三";
week[2][1]="Wednesday";
console.log(week[0]); //["周日", "Sunday"]
數組對象的屬性和方法
join方法
x.join(bystr) －－－－將數組元素拼接成字符串 var arr= new Array(11,22,33); var arr1=arr.join("-"); console.log(arr1); //11-22-33 concat方法 var arr=[1,2,3]; var b=arr.concat(4,5); console.log(b); //[1, 2, 3, 4, 5] console.log(arr.toString(),typeof(arr.toString())); //1,2,3 string console.log(b.toString(),typeof(b.toString())); //1,2,3,4,5 string 數組排序-reverse sort： var x=[12,33,43,56]; x.reverse();//顛倒數組元素 console.log(x); //[56, 43, 33, 12] var x=[120,33,43,56]; x.sort();//排序數組元素 console.log(x); // [120, 33, 43, 56] 比較數字大小，而不是根據ASCII碼值比較 arr=[1,4,2,100]; arr.sort(); console.log(arr); //[1, 100, 2, 4] function intSort(a,b){ if(a>b){ return 1; } else if(a<b){ return -1; } else{ return 0; } } arr.sort(intSort); //不懂 console.log(arr); function IntSort(a,b){ return a-b; } 數組切片操作
x.slice(start, end)
//x代表數組對象,start表示開始位置索引,end是結束位置索引
//第一個數組元素索引為0,最后一個數組元素索引為-1
//start、end可為負數
//end省略則相當於從start位置截取以后所有數組元素
var arr1=["h","e","l","l","o"]; var arr2=arr1.slice(1,3); var arr3=arr1.slice(2); var arr4=arr1.slice(2,-1); console.log(arr2); //["e", "l"] console.log(arr3); //["l", "l", "o"] console.log(arr4); //["l", "l"] 刪除子數組
x. splice(start, deleteCount, value, ...)
//x代表數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數可以省略
var arr=[1,"23","hello",true]; arr.splice(1,2); console.log(arr); // [1, true] arr.splice(1,1); console.log(arr); //[1, "hello", true] var a = [1,2,3,4,5,6,7,8]; a.splice(1,0,22,33); alert(a.toString()); //1,22,33,2,3,4,5,6,7,8 數組的push和pop
//x代表數組對象 //value可以為字符串、數字、數組等任何值
push是將value值添加到數組x的結尾
pop是將數組x的最后一個元素刪除
var arr=[1,2,3];
arr.push(44,55);
console.log(arr); // [1, 2, 3, 44, 55]
arr.pop();
console.log(arr); //[1, 2, 3, 44]
數組的shift和unshift
//x代表數組對象 //value可以為字符串、數字、數組等任何值
unshift是將value值插入到數組x的開始 shift是將數組x的第一個元素刪除 var arr=[3,4,5]; arr.unshift(11,22); console.log(arr); //[11, 22, 3, 4, 5] arr.shift(); console.log(arr); // [22, 3, 4, 5] js中數組的特性 js中的數組特性1: js中的數組可以裝任意類型,沒有任何限制. js中的數組特性2: js中的數組,長度是隨着下標變化的.用到多長就有多長. var arr=["abc",1,1.23,true,null,undefined,new String("hello")]; console.log(arr.length); //7 arr[10]=1; console.log(arr.length); //11
Date對象
創建Date對象
方法一：不指定參數
var d1=new Date();
console.log(d1); //Tue Aug 08 2017 17:12:56 GMT+0800 (中國標准時間)
console.log(d1.toLocaleString()); //2017-8-8 17:13:44
方法二：參數為日期字符串
var d2=new Date("2008/05/12 12:00");
console.log(d2.toLocaleString()); //2008-5-12 12:00:00
var d3=new Date("08-05-12 12:00");
console.log(d3.toLocaleString()); //2012-8-5 12:00:00
方法三：參數為毫秒數
var d4=new Date(5000);
console.log(d4.toLocaleString()); //1970-1-1 08:00:05
console.log(d4.toUTCString()); //Thu, 01 Jan 1970 00:00:05 GMT
方法四：參數為年月日時分秒毫秒
var d5=new Date(2012,5,12,12,0,0,5000);
console.log(d5.toLocaleString()); //2012-6-12 12:00:05
Date對象的方法—獲取日期和時間
function getCurrentDate(){
//1.創建Date對象
var date=new Date();
//2.獲取當前年份
var year=date.getFullYear();
var year2=date.getYear();
//3.獲取當前月份
var month=date.getMonth()+1;
//4.獲取當前日
var day=date.getDate();
//5.獲取當前時
var hour=date.getHours();
//6.獲取當前分
var minute=date.getMinutes();
//7.獲取當前秒
var second=date.getSeconds();
//8.獲取當前毫秒
var millisecond=date.getMilliseconds();
//9.獲取當前星期
var week=date.getDay();
//10.獲取累計毫秒數(從1970/1/1午夜)
var time=date.getTime();
return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+minute+":"+second+" "+parseWeek(week);
}
console.log(getCurrentDate()); //2017年08月8日 18:35:44 星期二
//解決自動補齊成兩位數字的方法
function changeNum(num){
if(num<10){
return "0"+num;
}
else{
return num;
}
}
//將數字0~6轉換成 星期日到星期六
function parseWeek(week){
var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; return arr[week];}
Date對象的方法—設置日期和時間
設置日期和時間
var x=new Date();
// console.log(x); //Tue Aug 08 2017 18:43:51 GMT+0800 (中國標准時間)
x.setFullYear(1997); //設置年
x.setMonth(7); //設置月
x.setDate(1); //設置日
x.setHours(12); //設置時
x.setMinutes(38); //設置分
x.setSeconds(54); //設置秒
x.setMilliseconds(300); //設置毫秒(0-999)
document.write(x.toLocaleString()+"<br>");
x.setTime(8000000000000); //設置累計毫秒數(從1970/1/1午夜)
document.write(x.toLocaleString()+"<br>");
1997-8-1 12:38:54
2223-7-6 22:13:20
Date對象的方法—日期和時間的轉換
日期和時間的轉換: getTimezoneOffset():8個時區×15度×4分/度=480; 返回本地時間與GMT的時間差，以分鍾為單位
var x=new Date();
console.log(x); //Tue Aug 08 2017 18:58:21 GMT+0800 (中國標准時間)
x1=x.toLocaleString(); //返回本地格式時間字符串
console.log(x1); //2017-8-8 18:58:58
time1=Date.parse(x1); //返回累計毫秒數(從1970/1/1午夜到本地時間)
console.log(time1); //1502189712000
x2=x.toUTCString(); //返回國際標准時間字符串
console.log(x2); //Tue, 08 Aug 2017 11:00:15 GMT
time2=Date.UTC(2017,8,8); //返回累計毫秒數(從1970/1/1午夜到國際時間)
console.log(time2); //1504828800000
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) 返回角的正切。
console.log(Math.abs(-4)); //4(返回數的絕對值。)
console.log(Math.exp(0)); //1(返回 e 的指數。括號里邊表示e的多少次方)
console.log(Math.floor(3.9)); //3(對數進行向下取整)
console.log(Math.log(1)); //0(返回數的自然對數（底為e）)
console.log(Math.max(2,3)); //3(返回數中的最高值。)
console.log(Math.min(2,3)); //2(返回數中的最低值。)
console.log(Math.pow(2,3)); //8(返回 x 的 y 次冪。)
console.log(Math.random()); //0.21343409927353818(返回 0 ~ 1 之間的隨機數。)
console.log(Math.round(3.4)); //3(把數四舍五入為最接近的整數)
sin(x) 返回數的正弦。
console.log(Math.sqrt(4)); //2(返回數的平方根)
tan(x) 返回角的正切。
練習：獲取1-100的隨機整數，包括1和100
var num=Math.random();
num=num*100;
num=Math.round(num);
console.log(num);
Function 對象(重點)
函數
函數就是重復執行的代碼片。
函數的定義
function 函數名 (參數){
<br> 函數體;
return 返回值;
}
功能說明：
可以使用變量、常量或表達式作為函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類可以表示開發者定義的任何函數。
用 Function 類直接創建函數的語法如下：
var 函數名 = new Function("參數1","參數n","function_body");
函數'return'關鍵字
函數中'return'關鍵字的作用：
1、返回函數執行的結果
2、結束函數的運行
3、阻止默認行為
函數定義與執行
<scrip>
// 函數定義
function aa(){
alert('hello!');
}
// 函數執行
aa();
</script>
代碼示例：
<script>
function func1(name){
alert('hello'+name);
return 8
}
ret=func1("yuan");
alert(ret);
var func2=new Function("name","alert(\"hello\"+name);");
func2("egon")
</script>
運行結果：
先alert：helloyuan
再alert：8
最后alert：helloegon
注意：js的函數加載執行與python不同，它是整體加載完才會執行，所以執行函數放在函數聲明上面或下面都可以：
<script>
function f(){
console.log("hello")
}
f()
</script>
<script>
f();
function f(){
console.log("hello")
}
</script>
即：上面兩段代碼都會正常執行，打印正確結果
Function 對象的屬性
上面我們用 Function 類直接創建函數的行為有助於我們理解函數只不過是一種引用類型，它們的行為與用 Function 類明確創建的函數行為是相同的。
所以它們也有屬性和方法。
比如，ECMAScript 定義的屬性 length 聲明了函數期望的參數個數。
alert(func1.length)
Function 的調用
<script>
function func1(a,b){
alert(a+b);
}
func1(1,2); //3
func1(1,2,3); //3
func1(1); //NaN
func1(); //NaN
</script>
//發現只要函數名寫對即可,參數怎么填都不報錯.
<script>
//-------------------面試題-----------
function a(a,b){
alert(a+b);
}
var a=1;
var b=2;
a(a,b);
</script>
運行結果：報錯
Uncaught TypeError: a is not a function
at test.html?_ijt=hfb5ihhe3hm95n2m512oubh98t:18
函數的內置對象arguments
<script>
function add(a,b){
console.log(a+b); //3
console.log(arguments.length); //2
console.log(arguments); //(2) [1, 2, callee: function, Symbol(Symbol.iterator): function]
}
add(1,2)
</script>
<script>
//------------------arguments的用處1 ------------------
function add(){
var result=0;
for(var num in arguments){
result+=arguments[num]
}
alert(result)
}
add(1,2,3,4,5)
</script>
運行結果：15（統計函數所有參數的和）
<script>
//------------------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("參數個數剛好")
}
}
f(1,2,3,4,5)
</script>
運行結果：
Uncaught Error: function f called with 5 arguments,but it just need 3 arguments
at f (test.html?_ijt=hfb5ihhe3hm95n2m512oubh98t:15)
at test.html?_ijt=hfb5ihhe3hm95n2m512oubh98t:21
匿名函數
定義的函數可以不給名稱，這個叫做匿名函數，可以將匿名函數直接賦值給元素綁定的事件來完成匿名函數的調用。
<script>
var ele_btn=document.getElementById("btn1");
ele_btn.onclick=myalert;
function myalert() {
alert("ok")
}
</script>
<script>
var ele_btn=document.getElementById("btn1");
// 直接將匿名函數賦值給綁定的事件
ele_btn.onclick=function (){
alert("ok")
}
</script>
<script>
// 匿名函數的應用
(function(){
alert("tony");
})();
(function (arg) {
console.log(arg);
})("123")
</script>
運行結果：
alert：tony
顯示123
BOM對象
window對象
所有瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不需要創建對象,直接使用即可.
Window 對象方法
alert() 顯示帶有一段消息和一個確認按鈕的警告框。 confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 prompt() 顯示可提示用戶輸入的對話框。 open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 close() 關閉瀏覽器窗口。 scrollTo() 把內容滾動到指定的坐標。
定時器：
setTimeout() 只執行一次的定時器
clearTimeout() 關閉只執行一次的定時器
setInterval() 反復執行的定時器
clearInterval() 關閉反復執行的定時器
方法使用
1、alert confirm prompt以及open函數
<script>
alert("hello kaylee");
//
var result1=confirm("確認刪除嗎？");
alert(result1); //true或者false(確認是true,取消是false)
//
//prompt 參數1 : 提示信息. 參數2:輸入框的默認值. 返回值是用戶輸入的內容.
var result2=prompt("請輸入一個數字","haha");
alert(result2); //輸入的內容
//open方法 打開一個新的窗口 並進入指定網址.參數1 : 網址.
open("http://www.baidu.com");
//參數1 什么都不填 就是打開一個新窗口. 參數2.填入新窗口的名字(一般可以不填). 參數3: 新打開窗口的參數.
open("","","width=400,resizable=no,height=400");
//close方法 將當前文檔窗口關閉.
close();
</script>
猜數字：
<script>
var num=Math.round(Math.random()*100);
function foo(){
var userNum=prompt("請輸入一個0~100的數字","0");
if(isNaN(+num)){
alert("請輸入有效數字");
foo();
}
else if(userNum>num){
alert("輸入的數字大了");
foo();
}
else if(userNum<num){
alert("輸入的數字小了");
foo();
}
else{
var result=confirm("恭喜答對，是否繼續？")
if(result){
num=Math.round(Math.random()*100);
foo()
}
else{
close()
}
}
}
foo();
</script>
2、setInterval，clearInterval
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
語法：<br> setInterval(code,millisec) 其中，code為要調用的函數或要執行的代碼串。millisec周期性執行或調用 code 之間的時間間隔，以毫秒計。
定時器案例：
<input type="text" id="ID1">
<button onclick="start()">開始</button>
<button onclick="stop()">停止</button>
<script>
function showTime(){
var nowd=new Date().toLocaleString();
var temp=document.getElementById("ID1");
temp.value=nowd;
}
var ID;
function start() {
if(ID==undefined){
showTime();
ID=setInterval(showTime,1000);
console.log(ID);
}
}
function stop(){
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 元素。
節點查找
直接查找節點
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”) //獲取的是一個選擇集，不是數組，但是可以用下標的方式操作選擇集里面的dom元素。
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)
局部查找
<script>
var div1=document.getElementById("div1");
var ele=div1.getElementsByTagName("p");
console.log(ele.length); //1
console.log(ele[0]); //<p>hello p</p>
var ele2=div1.getElementsByClassName("div2"); console.log(ele2.length); //1
console.log(ele2[0]); //<div class="div2">i am div2</div>
var ele3=document.getElementById("div4"); console.log(ele3); //<div id="div4">i am kaylee</div> var ele4=document.getElementsByName("div3"); console.log(ele4.length); //1
console.log(ele4[0]); //<div name="div3">i am div3</div>
</script>
注意：涉及到尋找元素，注意<script>標簽的位置！
<script>
var ele_div=document.getElementById("div1");
ele_div.onclick=function(){
alert(123)
}
</script>
<div id="div1">這是一個div元素</div>
運行結果：報錯
Uncaught TypeError: Cannot set property 'onclick' of null
at test.html?_ijt=hfb5ihhe3hm95n2m512oubh98t:12
上面的語句，如果把javascript寫在元素的上面，就會出錯，因為頁面上從上往下加載執行的，javascript去頁面上獲取元素div1的時候，元素div1還沒有加載，解決方法有兩種：
第一種方法：將javascript放到頁面最下邊
<div id="div1">這是一個div元素</div>
<script>
var ele_div=document.getElementById("div1");
ele_div.onclick=function(){
alert(123)
}
</script>
第二種方法：將javascript語句放到window.onload觸發的函數里面,獲取元素的語句會在頁面加載完后才執行，就不會出錯了。
<script>
window.onload=function(){
var ele_div=document.getElementById("div1");
ele_div.onclick=function(){
alert(123)
}
}
</script>
<div id="div1">這是一個div元素</div>
導航節點屬性
parentElement // 父節點標簽元素 children // 所有子標簽 firstElementChild // 第一個子標簽元素 lastElementChild // 最后一個子標簽元素 nextElementtSibling // 下一個兄弟標簽元素 previousElementSibling // 上一個兄弟標簽元素
注意，js中沒有辦法找到所有的兄弟標簽！
節點操作
創建節點：
createElement(標簽名) ：創建一個指定名稱的元素。
例如：
<script>
var tag=document.createElement("input");
tag.setAttribute("type","text");
console.log(tag); //<input type="text">
</script>
添加節點：
追加一個子節點（作為最后的子節點） 父節點.appendChild(被追加的子節點) 把增加的節點放到某個節點的前邊 somenode.insertBefore(newnode,某個節點);
刪除節點：
父節點.removeChild(要被刪除的子節點)
替換節點：
父節點.replaceChild(新節點, 被替換的舊節點);
節點屬性操作：
1、獲取文本節點的值：innerText innerHTML
innerHTML可以讀取、寫入標簽或者文本，例如： tag.innerHTML = “<p>要顯示內容</p>”;
iinnerText只可以讀取或者寫入文本
2、attribute操作
elementNode.setAttribute(name,value) 建議使用：element.屬性名=屬性值
elementNode.getAttribute(屬性名) <-------------->elementNode.屬性名(DHTML)
elementNode.removeAttribute(“屬性名”);
3、value獲取當前選中的value值
1.input
2.select （selectedIndex）
3.textarea
<select id="sel">
<option>山西省</option>
<option>河北省</option>
<option>河南省</option>
<option>山東省</option>
<option>江蘇省</option>
</select>
<script>
var ele_select=document.getElementById("sel");
ele_select.options.length=0; //清空操作
console.log(ele_select);
</script>
<select id="sel" type="checkbox">
<option>山西省</option>
<option>河北省</option>
<option>河南省</option>
<option>山東省</option>
<option>江蘇省</option>
</select>
<script>
var ele_select=document.getElementById("sel");
ele_select.onchange=function () {
console.log(this.selectedIndex); //選中option的索引值
}
</script>
4.關於class的操作：
elementNode.className
elementNode.classList.add("class值")
elementNode.classList.remove("class值")
5.改變css樣式：
<p id="p1">hello world</p>
<script>
var ele_p=document.getElementById("p1");
p1.style.color="red";
p1.style.fontSize="48px";
</script>
DOM Event(事件)
事件類型
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素獲得焦點。 練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並松開。 onkeyup 某個鍵盤按鍵被松開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開
onselect 文本被選中。 onsubmit 確認按鈕被點擊。
綁定事件方式
方式1:
<div class="div" onclick="foo(this)">點我呀</div> <script> function foo(self){ // 形參不能是this; console.log(self); //<div class="div" onclick="foo(this)">點我呀</div> self.style.color="green"; self.style.fontSize="48px"; } </script>
方式2:
<div class="div">點我呀</div>
<script>
var ele_div=document.getElementsByClassName("div")[0];
ele_div.onclick=function(){
console.log("ok");
console.log(this); //<div class="div">點我呀</div> // this直接用
};
</script>
事件介紹
1、onload：
onload 屬性開發中 只給 body元素加.這個屬性的觸發 標志着 頁面內容被加載完成.應用場景: 當有些事情我們希望頁面加載完立刻執行,那么可以使用該事件屬性.
2、onsubmit：
當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.
<form id="form">
<input type="text"/>
<input type="submit" value="點我">
</form>
<script>
//阻止表單提交方式1.
//onsubmit 命名的事件函數,可以接受返回值. 其中返回false表示攔截表單提交.其他為放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event){
alert("驗證失敗，表單不會提交");
return false;
}
</script>
<form id="form">
<input type="text"/>
<input type="submit" value="點我">
</form>
<script>
// 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動作。
var ele=document.getElementById("form");
ele.onsubmit=function(event){
alert("驗證失敗，表單不會提交");
event.preventDefault();
}
</script>
3、事件傳播：
<div id="abc1">
<div id="abc2"></div>
</div>
<script type="text/javascript">
var ele_one=document.getElementById("abc1");
ele_one.onclick=function () {
alert("111")
};
var ele_two=document.getElementById("abc2");
ele_two.onclick=function () {
alert("222");
event.stopPropagation(); //阻止事件向外層div傳播.
}
</script>
4、onselect：
<input type="text" />
<script type="text/javascript">
var ele=document.getElementsByTagName("input")[0];
ele.onselect=function () {
alert(123);
}
</script>
5、onchange:
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select>
<script type="text/javascript">
var ele=document.getElementsByTagName("select")[0];
ele.onchange=function () {
alert(123);
}
</script>
6、onkeydown:
Event 對象：Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！
event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.
比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這里就時KeyCode.
<input type="text" id="t1">
<script type="text/javascript">
var ele=document.getElementById("t1");
ele.onkeydown=function (e) {
e=e||window.event;
var keynum=e.keyCode;
var keychar=String.fromCharCode(keynum);
alert(keynum+'---------->'+keychar);
}
</script>
String.fromCharCode()函數用於從一些Unicode字符值中返回一個字符串。 該函數屬於String對象，所有主流瀏覽器均支持該函數。
7、onmouseout與onmouseleave事件的區別：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
#container{
width:300px;
}
#title{
cursor:pointer;
background-color: #ccc;
}
#list{
display:none;
background-color: #fff;
}
#list div{
line-height:50px;
}
#list .item1{
background-color: green;
}
#list .item2{
background-color: rebeccapurple;
}
#list .item3{
background-color: lemonchiffon;
}
</style>
</head>
<body>
<div id="container">
<div id="title">hello</div>
<div id="list">
<div class="item1">第一行</div>
<div class="item2">第二行</div>
<div class="item3">第三行</div>
</div>
</div>
<script type="text/javascript">
var ele_container=document.getElementById("container");
var ele_title=document.getElementById("title");
var ele_list=document.getElementById("list");
title.onmouseover=function(){
ele_list.style.display="block";
};
ele_container.onmouseout=function () { // 1.不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。
// 2.只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。
ele_list.style.display="none"; }
</script>
</body>
</html>
js的作用域
簡單的說，作用域就是變量與函數的可訪問范圍，即作用域控制着變量與函數的可見性和生命周期。在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。
1、全局變量：在函數之外定義的變量，為整個頁面公用，函數內部外部都可以訪問。
2、局部變量：在函數內部定義的變量，只能在定義該變量的函數內部訪問，外部無法訪問。
一般來說一下幾種情形擁有全局作用域：
(1)最外層函數和在最外層函數外面定義的變量擁有全局作用域
<script>
var name="yuan";
function foo() {
var age=23;
function inner() {
console.log(age);
}
inner();
}
console.log(name); //yuan
// console.log(age); //Uncaught ReferenceError: age is not defined
foo(); //23
inner(); //Uncaught ReferenceError: inner is not defined
</script>
(2)所有末定義直接賦值的變量自動聲明為擁有全局作用域，例如：
<script>
var name="yuan";
function foo() {
age=23;
var sex="male"
}
console.log(name); //yuan
foo();
console.log(age); //23
console.log(sex); //Uncaught ReferenceError: sex is not defined
</script>
(3)所有window對象的屬性擁有全局作用域
一般情況下，window對象的內置屬性都都擁有全局作用域，例如window.alert()、window.location、window.top等等。
作用域鏈(Scope Chain)
在JavaScript中，函數也是對象，實際上，JavaScript里一切都是對象。函數對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標准第三版定義，該內部屬性包含了函數被創建的作用域中對象的集合，這個集合被稱為函數的作用域鏈，它決定了哪些數據能被函數訪問。
示例
<script>
var s=12;
function f() {
console.log(s); //12
}
f();
</script>
<script>
var s=12;
function f() {
console.log(s); //undefined
var s=12;
console.log(s); //12
}
f();
</script>
<script>
var s=10;
function foo() {
console.log(s); //function s() {console.log("ok");}
var s=5;
console.log(s); //5
function s() { // 函數的定義或聲明是在詞法分析時完成的,執行時已不再有任何操作
console.log("ok"); //5
}
console.log(s);
}
foo();
</script>
<script>
function bar(age) {
console.log(age); //fn
var age=99;
var sex="male";
console.log(age); //99
function age() {
alert(123)
}
console.log(age); //99
return 100;
}
result=bar(5);
console.log(result); //100
</script>
補充：
變量與函數預解析
JavaScript解析過程分為兩個階段，先是編譯階段，然后執行階段，在編譯階段會將function定義的函數提前，並且將var定義的變量聲明提前，將它賦值為undefined。
結果分析
以最復雜的例3來分析整個過程。
當一個函數創建后，它的作用域鏈會被創建此函數的作用域中可訪問的數據對象填充。在函數bar創建時，它的作用域鏈中會填入一個全局對象，該全局對象包含了所有全局變量，如下圖所示：
解析到函數調用時，即bar(5)，會生成一個active object的對象，該對象包含了函數的所有局部變量、命名參數、參數集合以及this，然后此對象會被推入作用域鏈的前端，當運行期上下文被銷毀，活動對象也隨之銷毀。新的作用域鏈如下圖所示：
過程解析：
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=undefined;
1-2 、接收參數 AO.age=5;
1-3 、分析變量聲明，有一個 var age, 發現 AO 上面有一個 AO.age ，則不做任何處理
1-4 、分析變量聲明，有一個 var sex，形成一個 AO.sex=undefined;
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這部操作是在詞法分析時，即運行前完成的。