一眷唉、簡(jiǎn)介
JavaScript 是 Web 的編程語(yǔ)言岳链。
所有現(xiàn)代的 HTML 頁(yè)面都使用 JavaScript。JavaScript 是互聯(lián)網(wǎng)上最流行的腳本語(yǔ)言侮攀，這門語(yǔ)言可用于 HTML 和 web扮休，更可廣泛用于服務(wù)器迎卤、PC、筆記本電腦玷坠、平板電腦和智能手機(jī)等設(shè)備蜗搔。
我的第一個(gè)JavaScript程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一個(gè) JavaScript 程序</h1>
<p id="demo">這是一個(gè)段落</p>
<button type="button" onclick="displayDate()">顯示日期</button>
</body>
</html>
1.為什么學(xué)習(xí) JavaScript?
JavaScript web 開(kāi)發(fā)人員必須學(xué)習(xí)的 3 門語(yǔ)言中的一門：
- HTML 定義了網(wǎng)頁(yè)的內(nèi)容
- CSS 描述了網(wǎng)頁(yè)的布局
- JavaScript 網(wǎng)頁(yè)的行為
JavaScript 是腳本語(yǔ)言
2.JavaScript 是一種輕量級(jí)的編程語(yǔ)言。
JavaScript 是可插入 HTML 頁(yè)面的編程代碼八堡。
JavaScript 插入 HTML 頁(yè)面后樟凄，可由所有的現(xiàn)代瀏覽器執(zhí)行。
JavaScript 很容易學(xué)習(xí)兄渺。
一缝龄、JS的概念和聲明
問(wèn)題
在網(wǎng)頁(yè)的發(fā)展歷程中，發(fā)現(xiàn)網(wǎng)頁(yè)不能對(duì)用戶的數(shù)據(jù)進(jìn)行自動(dòng)校驗(yàn)和提供一些特效挂谍，造成用戶體驗(yàn)極差叔壤。
解決
使用JavaScript
作用
可以讓網(wǎng)頁(yè)和用戶之間進(jìn)行直接簡(jiǎn)單的交互
可以給網(wǎng)頁(yè)制作特效和畫面
注意
js是由瀏覽器解析執(zhí)行的
js需要在HTML文檔中進(jìn)行聲明
使用
聲明js代碼域
-
在head標(biāo)簽中使用script聲明js代碼
<head> <script type="text/javascript"> function test(){ alert("hello js!"); } </script> </head> -
在head標(biāo)簽中使用script引入外部聲明的js文件
<script src="js/my.js" type="text/javascript" charset="utf-8"> </script>
二、JS的變量學(xué)習(xí)
作用：變量是用來(lái)存儲(chǔ)數(shù)據(jù)的口叙，方便程序進(jìn)行操作
1.js的變量聲明
使用var關(guān)鍵字進(jìn)行變量聲明炼绘，格式如下
var 變量名=初始值；
2.js變量的特點(diǎn)
- 變量聲明只有var關(guān)鍵字妄田，聲明的變量可以存儲(chǔ)任意類型的數(shù)據(jù)
- js中可以不使用分號(hào)結(jié)尾俺亮，但是為了提升代碼的可讀性，建議使用
- 允許出現(xiàn)同名變量疟呐，但是后面的會(huì)覆蓋前面
- 聲明不賦值脚曾，默認(rèn)是undefined
3.js的數(shù)據(jù)類型
使用關(guān)鍵字typeof判斷數(shù)據(jù)類型
number:數(shù)值類型
string:字符類型
boolean:布爾類型
object:對(duì)象類型
4.js的變量強(qiáng)轉(zhuǎn)
使用Number（）方法，將其他數(shù)據(jù)類型轉(zhuǎn)換為數(shù)值類型萨醒，轉(zhuǎn)換失敗返回NaN（not a number斟珊，是number類型）
使用Boolean（）方法苇倡，將其他數(shù)據(jù)類型轉(zhuǎn)換為布爾類型富纸，有值為true囤踩，無(wú)值為false
?
5.特殊的值
null（object類型）
undefined（undefined類型）
NaN（number類型）
三、JS的運(yùn)算符
算數(shù)運(yùn)算符
? 加法：+晓褪，在有一方為字符串時(shí)堵漱，結(jié)果為字符串
? 減法：-
? 乘法：*
? 除法：/
? 取余：%
除了+在遇到字符串時(shí)會(huì)默認(rèn)字符串拼接，其余符號(hào)遇到非數(shù)字會(huì)進(jìn)行隱式類型轉(zhuǎn)換為數(shù)字再運(yùn)算
邏輯運(yùn)算符
1 與或非
涣仿！
&&
||
按位與
按位或
2 關(guān)系運(yùn)算符
++
--
+=
-=
勤庐！=
>=
<=
等等
1.==
<script type="text/javascript">
var a=1;
var a1="1";
var a2=true;
var a3="true";
var a4="a";
var a5="a";
alert(a==a1);//true
alert(a==a2);//true
alert(a==a3);//false
alert(a1==a2);//true
alert(a1==a3);//false
alert(a2==a3);//false
alert(a4==a5);//true
<script>
等值運(yùn)算符：==
? 先判斷類型，類型一致則直接比較好港。
? 類型不一致愉镰，則先使用Number（）進(jìn)行強(qiáng)轉(zhuǎn)后進(jìn)行比較
注意：alert（none==undefined）返回true
2.===
等同運(yùn)算符：===
? 先判斷類型，類型一致則再比較內(nèi)容钧汹，內(nèi)容也一致則返回true
? 類型不一致則直接返回false
注意：alert（none===undefined）返回false
四丈探、JS的邏輯結(jié)構(gòu)
if
單分支
雙分支
多分支
switch
switch (){
case value:
....
break;
default:
break;
}
循環(huán)結(jié)構(gòu)
for(var i;i>100;i--){
}
while(){
}
do{
}while()
五、JS的數(shù)組
1.數(shù)組的聲明
var arr=new Array();
arr[0]="abc";
alert(arr);//abc
var arr2=new Array(5);
alert(arr2.length);//5,長(zhǎng)度為5
var arr3=[1,2,3,4,5];
alert(arr3);//1,2,3,4,5
var arr4=new Array([5,6]);
alert(arr4.length);//1,arr4的第一個(gè)元素為一個(gè)數(shù)組
js中的數(shù)組聲明不用指定長(zhǎng)度拔莱，js的數(shù)組長(zhǎng)度是不固定的
2.數(shù)組的賦值和取值
var arr=[];
arr[0]="2";
arr[1]="abc";
arr[2]="true";
arr[3]=new Data();
arr[10]="哈哈";
alert(arr);//js內(nèi)的數(shù)組可以存儲(chǔ)任意類型數(shù)值,而且可以跳著賦值碗降。
//如果下標(biāo)所在數(shù)組值不存在，返回undefined
3.數(shù)組的length屬性
var arr=[];
alert(arr.length);//0
arr[10]="abc";
alert(arr.length);//11
arr.length=100;
alert(arr.length);//100
- 作用1：數(shù)組名.length 返回當(dāng)前數(shù)組的長(zhǎng)度
- 作用2：數(shù)組名.length=值塘秦，動(dòng)態(tài)改變數(shù)組的長(zhǎng)度
- 當(dāng)length小于當(dāng)前數(shù)組長(zhǎng)度讼渊，后面數(shù)據(jù)會(huì)丟失
- 當(dāng)length大于原有長(zhǎng)度，則使用空進(jìn)行填充
4.數(shù)組的遍歷
使用for循環(huán)
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
for in
for(var i in arr){
alert(arr[i]);
}
5.一個(gè)網(wǎng)頁(yè)計(jì)算器例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計(jì)算器</title>
<style type="text/css">
#showdiv{
border: solid 1px;
width: 320px;
padding-bottom: 20px;
text-align: center;
margin: auto;//設(shè)置居中
margin-top: 50px;
border-radius: 10px;//設(shè)置邊框角度
background-color: floralwhite;
}
input[type=text]{
margin-top: 20px;
width: 290px;
height: 40px;
font-size: 20px;
text-align: right;
padding-right: 10px;
}
input[type=button]{
width: 60px;
height: 60px;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
font-size: 30px;
font-weight: bold;
font-family: serif;
}
input[type=button]:hover{
background-color: aliceblue;
}
</style>
<script type="text/javascript">
function test(btn){
//獲取button按鈕對(duì)象的value
var num=btn.value;
//根據(jù)點(diǎn)擊動(dòng)作執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯
switch (num){
case "=":
document.getElementById("t1").value=eval(document.getElementById("t1").value);
break;
case "c":
document.getElementById("t1").value="";
break;
default:
//將按鈕的值賦值給input輸入框
document.getElementById("t1").value+=num;
break;
}
}
</script>
</head>
<body>
<h3 align="center">計(jì)算器</h3>
<hr >
<div id="showdiv">
<input type="text" name="" id="t1" value="" readonly="readonly"/><br>
<input type="button" name="" id="" value="1" onclick="test(this)"/>
<input type="button" name="" id="" value="2" onclick="test(this)"/>
<input type="button" name="" id="" value="3" onclick="test(this)"/>
<input type="button" name="" id="" value="4" onclick="test(this)"/><br>
<input type="button" name="" id="" value="5" onclick="test(this)"/>
<input type="button" name="" id="" value="6" onclick="test(this)"/>
<input type="button" name="" id="" value="7" onclick="test(this)"/>
<input type="button" name="" id="" value="8" onclick="test(this)"/><br>
<input type="button" name="" id="" value="9" onclick="test(this)"/>
<input type="button" name="" id="" value="0" onclick="test(this)"/>
<input type="button" name="" id="" value="+" onclick="test(this)"/>
<input type="button" name="" id="" value="-" onclick="test(this)"/><br>
<input type="button" name="" id="" value="*" onclick="test(this)"/>
<input type="button" name="" id="" value="/" onclick="test(this)"/>
<input type="button" name="" id="" value="c" onclick="test(this)"/>
<input type="button" name="" id="" value="=" onclick="test(this)"/>
</div>
</body>
</html>
6.數(shù)組的常用操作
1).數(shù)組合并---concat
<script typr="text/javascript">
var arr=[1,"abc","zhangsan","12"];
var b=["hello","今天天氣不錯(cuò)"];
var c="js";
var d=arr.concat(b,c);
//d=[1,"abc","zhangsan","12","hello","今天天氣不錯(cuò)","js"],d.length=7
</script>
2).數(shù)組轉(zhuǎn)字符串---join
3）pop（）尊剔、shift()
將數(shù)組視為棧爪幻，彈棧操作，移除數(shù)組最后一個(gè)元素并返回該元素
shift()與之相反须误，將數(shù)組視為隊(duì)列笔咽，進(jìn)行出隊(duì)操作
var arr=[1,"abc","zhangsan","12"];
var ele=arr.pop();//ele="12"
4) push()、unshift()
將數(shù)組視為棧霹期，壓棧操作叶组，在數(shù)組最后追加一個(gè)元素或者多個(gè)元素并返還數(shù)組長(zhǎng)度
unshift（）與之相反，將數(shù)組視為隊(duì)列历造，進(jìn)行入隊(duì)操作
注意：如果追加的是一個(gè)數(shù)組甩十，新數(shù)組整體作為舊數(shù)組的一個(gè)元素。
從中可知JavaScript的數(shù)組是鏈?zhǔn)浇Y(jié)構(gòu)吭产。
5）reverse()
將數(shù)組顛倒侣监，同時(shí)返回該數(shù)組
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//fruits 結(jié)果輸出：
//Mango,Apple,Orange,Banana
6）sort（）排序方法
array.sort(sortfunction)
| 參數(shù) | 描述 |
|---|---|
| sortfunction | 可選。規(guī)定排序順序臣淤。必須是函數(shù)橄霉。 |
| Type | 描述 |
|---|---|
| Array | 對(duì)數(shù)組的引用。請(qǐng)注意邑蒋，數(shù)組在原數(shù)組上進(jìn)行排序姓蜂，不生成副本按厘。 |
注意：當(dāng)數(shù)字是按字母順序排列時(shí)"40"將排在"5"前面。使用數(shù)字排序钱慢，你必須通過(guò)一個(gè)函數(shù)作為參數(shù)來(lái)調(diào)用逮京。
7)splice，從中間刪除或插入
語(yǔ)法
array.splice(index,howmany,item1,.....,itemX)
參數(shù) Values
| 參數(shù) | 描述 |
|---|---|
| index | 必需束莫。規(guī)定從何處添加/刪除元素懒棉。 該參數(shù)是開(kāi)始插入和（或）刪除的數(shù)組元素的下標(biāo)，必須是數(shù)字览绿。 |
| howmany | 可選策严。規(guī)定應(yīng)該刪除多少元素。必須是數(shù)字饿敲，但可以是 "0"享钞。 如果未規(guī)定此參數(shù)，則刪除從 index 開(kāi)始到原數(shù)組結(jié)尾的所有元素诀蓉。 |
| item1, ..., itemX | 可選栗竖。要添加到數(shù)組的新元素 |
返回值
| Type | 描述 |
|---|---|
| Array | 如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組渠啤。 |
注意狐肢，可以刪除0個(gè)，返回空數(shù)組
8）toString沥曹、valueOf
valueOf（）定義和用法
valueOf() 方法返回 Array 對(duì)象的原始值份名。
該原始值由 Array 對(duì)象派生的所有對(duì)象繼承。
valueOf() 方法通常由 JavaScript 在后臺(tái)自動(dòng)調(diào)用妓美，并不顯式地出現(xiàn)在代碼中僵腺。
注意： valueOf() 方法不會(huì)改變?cè)瓟?shù)組。
六壶栋、JS的函數(shù)
js的函數(shù)學(xué)習(xí)一：
作用：功能代碼塊的封裝辰如，減少代碼冗余
1 函數(shù)的聲明：
方式一
function函數(shù)名（形參名1，形參名2贵试，...）｛執(zhí)行體｝
方式二
var 函數(shù)名=new Function（“形參1”琉兜，“形參2”，...毙玻，“函數(shù)體”）豌蟋；
該種方式中，將函數(shù)作為一個(gè)類桑滩，new了一個(gè)函數(shù)對(duì)象梧疲，如使用類型強(qiáng)轉(zhuǎn)為字符串，可以發(fā)現(xiàn)該字符串與方式一相同。
只不過(guò)該種方式聲明的函數(shù)名調(diào)用函數(shù)時(shí)幌氮，調(diào)用的是對(duì)象內(nèi)的anonymous函數(shù)
var test2=new Function("a1","a2","alert('I'm function2')");
test2(1,2);
方式三
var test3=function(a1,a2){
alert("I'm functon3");
}
2 函數(shù)的參數(shù)
function testParam(a1,a2){
alert("I'm learning Param")
}
testParam();//正確缭受，有初值undefined
js中的函數(shù)在調(diào)用時(shí)，形參可以不賦值浩销，也可以少賦值（實(shí)參依次賦值）或者多賦值
因此js中沒(méi)有函數(shù)重載
3 函數(shù)的返回值
默認(rèn)返回值是undefined
注意:js的代碼聲明趨于和執(zhí)行區(qū)域是一起的，都是在js代碼域中
函數(shù)學(xué)習(xí)二
1 函數(shù)的執(zhí)行符
var test1=function(){
alert("函數(shù)的執(zhí)行符學(xué)習(xí)")听哭；
return "js";
}
alert(test1);//不執(zhí)行test1慢洋，打印test1的內(nèi)容
alert(test1());//執(zhí)行test1，打印test1返回值的內(nèi)容
在js中函數(shù)的執(zhí)行符就是小括號(hào)
沒(méi)有小括號(hào)時(shí)函數(shù)名就是一個(gè)變量
2 函數(shù)作為實(shí)參傳遞
在js中函數(shù)是可以作為實(shí)參進(jìn)行傳遞的陆盘。
上圖中a加上（）則顯示返回值undefined
3 開(kāi)發(fā)中常用的傳遞方式?
function testObj2(fn){
//testObj2函數(shù)在被調(diào)用的時(shí)候普筹，實(shí)參必須是一個(gè)函數(shù)對(duì)象
fn();
}
testObj2(function(){
alert("開(kāi)發(fā)");
})
優(yōu)點(diǎn)：函數(shù)對(duì)象的動(dòng)態(tài)執(zhí)行，不用預(yù)先聲明好隘马，調(diào)用時(shí)傳入即可
七太防、JS的自定義類
1、類的聲明
function Person(name,age){
this.name=name;
this.age=age;
this.fav="sing";
this.test=function(a){
alert(a);
}
}
2酸员、類的使用
var p1=new Person("zhangsan",32);
alert(p1.name,p1.age);
p1.test("hello");//等于alert（“hello”）
p1.adress="beijing";//正確用法
3蜒车、類的“繼承”
var p2=new Person("lisi",23);
alert(p1.test===p2.test);//false
function Person(name,age){
this.name=name;
this.age=age;
this.fav="sing";
}
........
........
Person.prototype.test=function(a){alert(a);}//共有
alert(p1.test===p2.test);//false
prototype關(guān)鍵字
通過(guò)該關(guān)鍵字實(shí)現(xiàn)了不同對(duì)象之間的數(shù)據(jù)共享
作用
實(shí)現(xiàn)某個(gè)類的所有子對(duì)象的方法區(qū)對(duì)象的共享，節(jié)省內(nèi)存
-
偽繼承（可以鏈?zhǔn)嚼^承-----）
function User(uname,pwd){ this.uname=uname; this.pwd=pwd; } Person.prototype.user=new User(); User.prototype.testU=function(){alert("我是user")}; p1.user.testU();//可以通過(guò)p1對(duì)象調(diào)用testU方法了Person.prototype=new User(); p1.prototype.testU();
4幔嗦、自定義對(duì)象
1）創(chuàng)建自定義對(duì)象
對(duì)象的作用：用來(lái)存儲(chǔ)整體數(shù)據(jù)
原因：很多時(shí)候我們沒(méi)有辦法預(yù)先知道一個(gè)對(duì)象應(yīng)該有哪些屬性酿愧，所以只能臨時(shí)創(chuàng)建一個(gè)對(duì)象來(lái)自定義屬性存儲(chǔ)數(shù)據(jù)，來(lái)保證數(shù)據(jù)的完整性邀泉。
應(yīng)用：
? Ajax會(huì)使用
使用：
? 1嬉挡、創(chuàng)建自定義對(duì)象
? var 對(duì)象名=newObject（）；
? 對(duì)象名.屬性名1=屬性值1汇恤；
? ...
? ...
? var 對(duì)象名={};
? 對(duì)象名.屬性名1=屬性值1庞钢；
? ...
? ...
? 2、一般用來(lái)存儲(chǔ)數(shù)據(jù)因谎，不會(huì)再自定義對(duì)象中存儲(chǔ)函數(shù)對(duì)象
? 3基括、js中的對(duì)象屬性和內(nèi)容是可以自定義擴(kuò)充的，不是依賴于類的聲明的财岔，類知識(shí)對(duì)象公共部分的一種聲明阱穗，是為了節(jié)省代碼的冗余的。
var obj=new Object();
obj.name="zhangsan";
obj.age=23;
obj.test=function(){
alert("我是obj");
}
5使鹅、js的常用方法和對(duì)象
作用：js將常用的功能已經(jīng)封裝好揪阶，調(diào)用即可，不用重復(fù)封裝患朱。
String
操作字符
function testString(){
var str="abcdefg";
//1.大小寫轉(zhuǎn)換
alert(str.toUpperCase()+":"+str.toLowerCase());
//2.字符串截取
alert(str.substr(0,1));
//substr:返回一個(gè)從指定位置開(kāi)始的指定長(zhǎng)度的字符串鲁僚，參數(shù)為start，length：從start開(kāi)始要截取的長(zhǎng)度
//substring:返回位于string對(duì)象中指定位置的字符串，參數(shù)為start冰沙，end：字符串的結(jié)束位置
//3.查找字符位置
indexOf 返回指定字符第一次出現(xiàn)的位置
lastIndexOf 返回指定字符最后一次出現(xiàn)的位置
}
Date
需要先 var 變量名=new Date（）侨艾；
//Date對(duì)象
function testDate(){
//創(chuàng)建日期對(duì)象
var d=new Date();
alert(d);//隱式調(diào)用toString方法，顯示當(dāng)前時(shí)間
//操作日期和時(shí)間
//1 獲取年份
alert(d.getYear());//返回1900年距今的年數(shù)
alert(d.getFullYear());//返回當(dāng)前的年份
//獲取月份
alert(d.getMonth()+1);//獲取當(dāng)前的月份數(shù)（從0算起）拓挥，注意+1
//獲取日期
alert(d.getDate());//返回當(dāng)前的日期
//獲取星期幾的數(shù)字
alert(d.getDay());//返回星期數(shù)唠梨。星期天是0
//獲取小時(shí)數(shù)
alert(d.getHours());//返回小時(shí)數(shù)
//獲取分鐘數(shù)
alert(d.getMinutes());//返回當(dāng)前的分鐘數(shù)
//獲取秒數(shù)
alert(d.getSeconds());//返回當(dāng)前的秒數(shù)
}
js獲取的時(shí)間是客戶端的時(shí)間，不能作為功能校驗(yàn)標(biāo)準(zhǔn)
Math
使用：Math.函數(shù)名
function testMath(){
//隨機(jī)數(shù)字
alert(Math.random());//數(shù)值在0-1之間
//四舍五入
round()
//上下取整
ceil()
floor()
//
//
//
}
Global
global對(duì)象是一個(gè)固有對(duì)象侥啤，目的是把所有全員方法集中在一個(gè)對(duì)象中
global對(duì)象沒(méi)有語(yǔ)法当叭，直接調(diào)用其方法
//eval方法,直接把參數(shù)作為方法執(zhí)行
eval("var a=123;");//等于聲明了一個(gè)變量a
//isNaN方法。返回一個(gè)布爾值盖灸，指明提供的值是否值得保留至NaN（不是數(shù)字）蚁鳖，如果參數(shù)用Number強(qiáng)轉(zhuǎn)后是NaN，返回true
//parseInt,返回字符串轉(zhuǎn)換后得到的整數(shù)
parseInt("abc");//返回NaN
parseInt("12abc");//返回12
//parseFloat同理
八赁炎、Js的事件機(jī)制學(xué)習(xí)：
作用：根據(jù)用戶在網(wǎng)頁(yè)中的不同操作觸發(fā)執(zhí)行對(duì)應(yīng)的功能函數(shù)
概念：基于監(jiān)聽(tīng)的醉箕，一個(gè)動(dòng)作會(huì)觸發(fā)其他事物的執(zhí)行
使用：
單雙擊事件：
單擊事件
<input type="button" name="" id="" value="測(cè)試" onclick="函數(shù)名();" />
注：
? js中添加事件的第一種方式
? 在HTML上直接使用事件屬性進(jìn)行添加，屬性值為所監(jiān)聽(tīng)執(zhí)行的函數(shù)
? js中的事件只有在當(dāng)前HTML元素上有效
? 一個(gè)HTML元素可以添加多個(gè)不同的事件
? 一個(gè)事件可以監(jiān)聽(tīng)觸發(fā)多個(gè)函數(shù)的執(zhí)行徙垫，不同函數(shù)之間用分號(hào)隔開(kāi)
雙擊事件
ondblclick
鼠標(biāo)事件
onmouseover() 鼠標(biāo)懸停事件
onmousemove() 鼠標(biāo)移動(dòng)
onmouseout() 鼠標(biāo)移出
鍵盤事件
onkeyup 鍵盤彈起事件
onkeydown 鍵盤下壓事件
焦點(diǎn)事件
onfocus 獲取焦點(diǎn)事件
onblur 失去焦點(diǎn)事件
頁(yè)面加載事件
onload 頁(yè)面加載事件
值改變事件
onchange
事件機(jī)制學(xué)習(xí)2
1.給合適的HTML標(biāo)簽添加合適的事件
onchange-----給select下拉框
onload-----給body
單雙擊-----用戶會(huì)進(jìn)行點(diǎn)擊動(dòng)作的HTML元素
鼠標(biāo)事件----用戶會(huì)進(jìn)行鼠標(biāo)移動(dòng)操作的
鍵盤事件-----用戶會(huì)進(jìn)行鍵盤操作的HTML元素
2.給HTML元素添加多個(gè)事件時(shí)讥裤，注意事件之間的沖突
例如單雙擊事件會(huì)沖突
當(dāng)事件的觸發(fā)條件包含相同部分的時(shí)候會(huì)產(chǎn)生事件之間的沖突
3.事件的阻斷 ?
function testA(){
return false;//此時(shí)不再跳轉(zhuǎn)
}
---
<a target="_blank" onclick="return testA();">wwwwww</a>
當(dāng)事件所監(jiān)聽(tīng)的函數(shù)將返回值返回給事件時(shí)
? false將阻斷當(dāng)前事件所在的HTML標(biāo)簽的功能
? true將繼續(xù)執(zhí)行當(dāng)前事件所在的HTML標(biāo)簽的功能
4.超鏈接調(diào)用js函數(shù)
function testHref(){
alert("onactive");
}
----
<a href="javascript:testHref()">aaaaa</a>
九、window對(duì)象
bom瀏覽器對(duì)象模型
? 瀏覽器的內(nèi)核語(yǔ)言支持規(guī)范
是規(guī)范瀏覽器對(duì)js語(yǔ)言的支持（js調(diào)用瀏覽器本身的功能）
BOM的具體實(shí)現(xiàn)是window對(duì)象
window對(duì)象學(xué)習(xí)
window對(duì)象不用new姻报，直接使用即可坞琴，累死Math的使用方法，window關(guān)鍵字可以省略不寫
1.window對(duì)象的常用方法
1）.框體方法
<script type="text/javascript">
function testAlert(){
window.alert("警告框體");//無(wú)返回值
}
function testConfirm(){
window.confirm("確認(rèn)框");//提示用戶選擇一項(xiàng)操作（確認(rèn)--true/取消---false）
}
function testPrompt(){
var a=window.prompt("提示框");//收集用戶信息逗抑，返回值為填入的值剧辐，未輸入為null，默認(rèn)是空字符串
}
</script>
<input type="button" name="" id="" value="測(cè)試警告框" onclick="testAlert()"/>
<input type="button" name="" id="" value="測(cè)試確認(rèn)框" onclick="testConfirm()"/>
<input type="button" name="" id="" value="測(cè)試提示框" onclick="testPrompt()"/>
------
2）.定時(shí)和間隔執(zhí)行方法
<script type="text/javascript">
function testSetTimeout(){//觸發(fā)后指定時(shí)間后執(zhí)行指定函數(shù)
window.setTimeout(function(){//返回值為線程id
alert("我是定時(shí)執(zhí)行");
},3000);
}
</script>
<input type="button" name="" id="" value="測(cè)試定時(shí)執(zhí)行" onclick="testSetTimeout()"/>
setInterval
clearTimeout 停止當(dāng)前的定時(shí)方法邮府，參數(shù)為定時(shí)器id
clearInterval 停止當(dāng)前的間隔方法荧关，參數(shù)為間隔器id
3）.子窗口方法
<script type="text/javascript">
function testOpen(){
//window.open();//出現(xiàn)新的標(biāo)簽頁(yè)
window.open('son.html',.......);//配置信息直接復(fù)制下圖的
}
</script>
<input type="button" name="" id="" value="測(cè)試定時(shí)執(zhí)行" onclick="testOpen()"/>
分別是子頁(yè)面相對(duì)路徑、打開(kāi)方式褂傀、高忍啤、寬、距上距離仙辟、距左距離同波、工具欄、菜單欄叠国、滾動(dòng)條未檩、大小是否可變、地址欄粟焊、狀態(tài)欄
<--!以下是son.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>son頁(yè)面</title>
<script type="text/javascript">
function testTime(){
window.setInterval(function(){
var span=document.getElementById("timeSpan");
span.innerHTML=span.innerHtML-1;
if(span.innerHTML==0){
window.close();//只能關(guān)閉window.open打開(kāi)的頁(yè)面
}
},1000);
}
</script>
</head>
<body onload="testTime">
<h3>son頁(yè)面</h3>
<hr />
<b>本頁(yè)面<span id="timeSpan" style="color:red;font-size:40px;">5</span>秒后關(guān)閉</b>
</body>
</html>
2.子頁(yè)面調(diào)用父頁(yè)面的函數(shù)
子頁(yè)面中使用window.opener.函數(shù)名()冤狡；即可調(diào)用父頁(yè)面函數(shù)
作用：可以從子頁(yè)面返回信息給父頁(yè)面孙蒙，并且刷新父頁(yè)面
3.window對(duì)象的常用屬性
地址欄屬性location
window.location.;跳轉(zhuǎn)到指定網(wǎng)址
window.location.reload();重新刷新
歷史記錄屬性
window.history.forward();//前進(jìn)
window.history.back();//頁(yè)面資源后退
window.history.go(index)；//跳轉(zhuǎn)到指定的歷史記錄資源悲雳，//index=0相當(dāng)于刷新當(dāng)前頁(yè)面
屏幕屬性
var x=window.screen.width;
var y=window.screen.height;
瀏覽器配置屬性
var a=window.navigator.userAgent;
獲取瀏覽器信息
十挎峦、主體面板屬性（document）
document對(duì)象學(xué)習(xí)
1.document對(duì)象的概念
瀏覽器對(duì)外提供的支持js的用來(lái)操作HTML文檔的一個(gè)對(duì)象，此對(duì)象封存的HTML文檔的所有信息
2.使用document對(duì)象
1）獲取HTML元素對(duì)象對(duì)象
①直接獲取方式
id getElementById 返回值是該元素對(duì)象
name getElementsByName 返回值是一個(gè)名叫NodeList的對(duì)象數(shù)組
通過(guò)標(biāo)簽名 getElementsByTagName 返回值是一個(gè)名叫HTMLCollection的對(duì)象數(shù)組
class getElementsByClass 返回值是一個(gè)名叫HTMLCollection的對(duì)象數(shù)組
返回值都是元素對(duì)象
②間接獲取方式
父子關(guān)系
? 標(biāo)簽內(nèi)有標(biāo)簽
var showdiv=document.getElementById("showdiv");
var children=showdiv.childNodes;//返回值為NodeList數(shù)組
子父關(guān)系
var inp=document.getElementById("inp");
var div=inp.parentNode;
兄弟關(guān)系
var ino=document.getElementById("inp");
var preEle=inp.previousSibling;//前一個(gè)
var nextEle=inp.nextSibling;//后一個(gè)
2）操作HTML元素對(duì)象的屬性
先獲取元素對(duì)象
再操作元素屬性
var inp=document.getElementById("uname");
alert(inp.type+":"+inp.name);//id,value等屬性
//修改元素屬性
inp.value="aaa";
inp.type=button;//type屬性為空或一個(gè)錯(cuò)誤的值時(shí)合瓢，瀏覽器默認(rèn)解析為text
可以操作元素的自定義屬性
需要使用set坦胶、get方法
例如 abc屬性
該方式獲取不到
該用
alert(inp.getAttribute("abc"));
inp.setAttribute("abc","新的值");
當(dāng)使用set、get方法來(lái)獲取固有屬性時(shí)晴楔，設(shè)置可以成功顿苇，但是get只能拿到document內(nèi)的屬性的初試值，拿不到實(shí)時(shí)數(shù)據(jù)
3）操作HTML元素對(duì)象的內(nèi)容和樣式
innerHTML獲取元素對(duì)象內(nèi)所有內(nèi)容滥崩，包括HTML標(biāo)簽
innerText獲取元素對(duì)象內(nèi)所有文本內(nèi)容岖圈，不包括標(biāo)簽
修改
var div=document.getElementById("div01");
div.innerHTML="ssssss";
操作元素樣式=操作元素屬性
//添加讹语、修改钙皮、刪除樣式
var shoudiv=document.getElementById("showdiv");
showdiv.style="backgroud-color:red";//這叫覆蓋，只剩背景顏色屬性了
showdiv.style.backgroudColor="red";
showdiv.style.border="solid 2px red";
showdiv.style.border="";//置空等于刪除元素標(biāo)簽的屬性顽决，但不會(huì)刪除css內(nèi)的屬性
//修改類選擇器
//class關(guān)鍵字在document類中叫className
var div01=document.getElementById("div01");
alert(div01.className);//為元素標(biāo)簽的屬性值
div01.className="";
4）操作HTML的文檔結(jié)構(gòu)
增加節(jié)點(diǎn)
刪除節(jié)點(diǎn)
第一種方式：使用innerHTML
function testAdd(){
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML+="<div><input type='file' name='' id='' value='' /><input type='button' name='' id='' value='刪除' onclick='delInp(this)' /></div>
";
}
function delInp(btn){
//獲取父級(jí)div
var showdiv=document.getElementById("showdiv");
var cdiv=btn.parentNode;
showdiv.removeChild(cdiv);
}
不太適用于有用戶動(dòng)作的時(shí)候
第二種方式：
function testOperation2(){
var showdiv=document.getElementById("showdiv");
var inp=document.createElement("input");
inp.type="file";
var btn=document.createElement("input");
btn.type="button";
btn.value="刪除";
btn.onclick=function(){
showdiv.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
var br=document.createElement("br");
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
5）document操作Form元素
function testform(){
var fm=document.getElementById("fm");
alert(fm);
var frm=document.frm;
alert(frm);//這兩個(gè)相等
}
//獲取form表單元素對(duì)象
fm.elements;//只獲取表單元素短条，其余標(biāo)簽不在里面
form表單的常用方法
fm.submit();//等于提交
fm.reset()；
fm.action="http://www.baidu.com/s";
js表單元素的通用屬性
只讀 readonly
通用 disabled
操作多選框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function testCheckBox(){
//獲取所有多選元素對(duì)象數(shù)組
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
alert(favs[i].value+":"+favs[i].checked);
}
}
function testCheckAll(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=!favs[i].checked;
}
}
</script>
</head>
<body>
<h3>操作表單元素</h3>
<hr />
<b>操作多選框</b><br /><br />
<input type="checkbox" name="fav" id="fav" value="1" />遠(yuǎn)走高飛<br>
<input type="checkbox" name="fav" id="fav" value="2" />當(dāng)<br />
<input type="checkbox" name="fav" id="fav" value="3" />李白<br>
<input type="checkbox" name="fav" id="fav" value="4" />杜甫<br>
<input type="checkbox" name="fav" id="fav" value="5" />see you again<br />
<input type="checkbox" name="fav" id="fav" value="6" />fade<br />
<input type="button" name="" id="" value="播放" onclick="testCheckBox()" />
<input type="button" name="" id="" value="全選" onclick="testCheckAll()" />
</body>
</html>
操作下拉框
<script type="text/javascript">
function testCheckBox(){
//獲取所有多選元素對(duì)象數(shù)組
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
alert(favs[i].value+":"+favs[i].checked);
}
}
function testCheckAll(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=!favs[i].checked;
}
}
function testSel(){
var sel=document.getElementById("address");
// alert(sel.value);
var os=sel.options;
for(var i=0;i<os.length;i++){
if(os[i].selected==true){
alert(os[i].value+":"+os[i].text);
}
}
}
</script>
<select name="" id="address" onchange="testSel()">
<option value ="0">--請(qǐng)選擇--</option>
<option value ="1">北京</option>
<option value ="2">上海</option>
<option value ="3">廣州</option>
</select>
6）document操作表格
rowIndex 返回行對(duì)象角標(biāo)
deleteRow（要?jiǎng)h除的行對(duì)象的角標(biāo)）
insertRow
insertCell
7）document對(duì)象實(shí)現(xiàn)form表單校驗(yàn)
獲取信息
創(chuàng)建校驗(yàn)規(guī)則（正則表達(dá)式）
開(kāi)始校驗(yàn)
輸出校驗(yàn)結(jié)果
例子
onblur=“checkUname（）” //失去焦點(diǎn)時(shí)觸發(fā)函數(shù)
