[Java面試九]指令碼語言知識總結.
[Java面試九]指令碼語言知識總結.
核心內容概述
1.JavaScript加強，涉及到ECMAScript語法、BOM物件、DOM物件以及事件。
2.Ajax傳統程式設計。
3.jQuery框架，九種選擇器為核心學習內容
4.JQuery UI外掛
5.jQuery Ajax程式設計
6.jQuery第三方外掛
7.反向Ajax程式設計(彗星)
一、JavaScript基礎加強
JavaScript是在瀏覽器內容執行，無需編譯、解釋執行動態指令碼語言，是一種弱型別語言，所有變數使用var定義。
JavaScript的3個組成部分分別為：核心(ECMAScript)、文件物件模型(DOM)、瀏覽器物件模型(BOM)
1.ECMAScript核心語法
①：程式碼編寫位置
分為內部JS和外部JS【使用src進行引入】
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>JavaScript程式編寫</title>
<!-- 內部JS -->
<script type="text/javascript">
// 編寫JavaScript程式碼
alert(1);
</script>
<!-- 外部JS-->
<script type="text/javascript" src="1.js"></script>
②：學習順序
JavaScript依次從變數(標示符、關鍵字)，運算子，程式結構(if while for)，以及函式來進行學習。
(1)所有的變數使用var來定義，是弱型別變數，不代表沒有型別，變數本身還是有型別的。【var a=10，var b=1.5；他們分別為整數以及浮點數型別】
(2)每行結尾分號可有可無，建議編寫。
(3)註釋和Java類似，支援單行註釋(//)和多行註釋(/* */)
③：資料型別
JavaScript分為原始資料型別和引用資料型別，分別儲存於棧和堆中。
原始資料型別：number、string、boolean、null和undefined
引用資料型別：存在很多種，每種都是object物件
可以使用typeof檢視資料型別，使用instanceof判斷變數資料型別
Demo:
<script type="text/javascript">
// 定義所有變數都用var，但是變數本身具有型別
var a = 10; // 整數
var b = 1.5; // 浮點數
var c = true; // 布林
var d = "abc"; // 字串 基本資料型別
var e = 'abc'; // 字串
// 通過typeof檢視資料型別
alert(typeof d);
// 通過instanceof判斷變數資料型別
alert(d instanceof Object);//falae
alert(a instanceof Object);//falae
var s = new String("abc"); // 物件型別
alert(s instanceof Object);
</script>
④：null和undefined的區分
null：物件不存在；
undefined：物件存在，訪問屬性或者方法不存在(物件未初始化)
2.ECMAScript物件
ECMAScript常用的有7個物件，依次為String、Number、Boolean、Math、Date、Array以及Regxp。
①：String型別常用屬性方法
建議檢視手冊，這裡需要注意的為length屬性以及match方法
charAt()、concat()、indexOf()、lastIndexOf()、match()、replace()、split()、substr()、substring()、toLowerCase()、toUpperCase()
Java中提供matches方法 例如："1234".matches("\\d+") ---- 返回true
JavaScript 與 matches方法等價的那個方法，是 RegExp 物件提供test方法
例如：/^\d+$/.test("1234") --- 返回true
/^\d+$/ 等價於 new RegExp("^\\d+$")
"1234".match("^\\d+$") 返回是匹配正則表示式內容，而不是布林值，等價於 /^\d+$/.exec("1234")
②：Math常用屬性和方法
PI 屬性
round(x) 把數四捨五入為最接近的整數
random() 返回 0 ~ 1 之間的隨機數
pow(x,y) 次冪
sqrt(x) 平方根
③：Date常用屬性和方法
toLocaleString() 返回當地本地化日期格式 2012年12月12日 11:07:52
getTime() 返回從1970年1月1日到目前為止 毫秒值
Demo：
<script type="text/javascript">
var s1 = "abc"; // s1是基本資料型別
var s2 = new String("abc") ; // s2是物件型別
//alert(s1 == s2); //
//alert("98"==98);// true
//alert("true"==true); // false
//alert(1==true); // true
var d = 010;// 八進位制
var d2 = 0x10; // 十六進位制
// match方法 類似 Java中 matches，有區別
//alert(/^\d+$/.test("1234abc")); // 等價於 java中matches
//alert("1234".match("^\\d+$")); // math方法返回的是匹配正則表示式內容，而不是布林值
//alert(/^\d+$/.exec("1234abc1234"));// 返回匹配的內容
// Date使用
var date = new Date(); //當前日期
alert(date.toLocaleString());// 返回當地國際化日期格式
var dateStr = date.getFullYear()+"-"+date.getMonth()
+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()
+":"+date.getSeconds();
alert(dateStr);
</script>
④：Array常用屬性方法
push() 加入元素到陣列
pop() 從陣列移除最後一個元素
reverse()反轉
join() 連線陣列元素 通過特定內容 返回字串
sort() 排序
slice() 擷取陣列中指定元素 從start到end
Demo：
<script type="text/javascript">
// 定義陣列 使用Array物件
// 方式一
var arr1 = [1,2,3];
// 陣列的遍歷 通過長度和下標
for(var i=0;i< arr1.length ; i++){
//alert(arr1[i]);
}
// 方式二
var arr2 = new Array(3);// 定義長度為3的陣列
arr2[0] = "aa";
arr2[1] = "bb";
arr2[2] = "cc"
arr2["100"] = "dd";
//alert(arr2.length);
//alert(arr2[4]);
// 方式三
var arr3 = new Array(1,2,3);// 陣列三個元素 1, 2 ,3
//alert(arr3.join("-")); // 1-2-3
alert(arr3.slice(1,3)); // 從1下標，擷取到3下標，1下標包含，3下標不包含
</script>
3.ECMAScript核心語法——函式
①：函式定義的三種方式
注意：第二種方式使用越來越多，第三種不常用，第一種常用
<script type="text/javascript">
// 方式一
function add(a,b){ // 沒有返回值，形參不需要宣告型別
return a+b; // 可以返回
}
//alert(add(1,2));
// 方式二 function 匿名函式， sub成為函式名稱
var sub = function(a,b){
return a-b;
}
//alert(sub(10,8));
// 方式三 使用Function物件 定義函式
// 語法 new Funtion(arg1,arg2 ... , body)
var mul = new Function("a","b","return a*b;"); // 不常用
//alert(mul(10,20));
// 所有函式 都是Function例項
alert(mul instanceof Function);// true
</script>
②：JavaScript全域性函式(內建函式)
一組與編碼解碼相關的函式
encodeURI()&decodeURI()
encodeURIComponent()&decodeURIComponent()
escape()&unescape()
此塊具體內容請參照W3C文件檢視。
4.ECMAScript核心——JavaScript面向物件程式設計
Java是面向物件，寫Java程式，寫類和物件。JavaScript是基於物件，寫Js，不用建立類，使用Js內部已經定義好的物件。
①：定義JavaScript物件的兩種方式
方式一：使用已經存在的物件，通過關鍵字進行建立
var s = new String("aaaa");
var o = new Object();
var date = new Date();
//alert(date instanceof Object);// true
// JS物件 類似一個map結構
var arr = new Array(3);
arr[0] = 100;// 使用陣列下標 為陣列元素賦值
arr['aaa'] = 1000; // 定義物件屬性
//alert(arr['aaa']);
arr.showInfo = function(){// 定義物件方法
alert(arr.join(","));
};
//arr.showInfo(); //100, ,
Js其實就是一個類似map結構，key為屬性名和方法名，value為屬性值和方法定義
方式二：通過{}建立
var obj = {
name : '張三',
age : 20,
getName : function(){
// 訪問物件屬性 通過關鍵字 this
return this.name;
}
};
// 訪問物件 屬性 [] 和 .
//alert(obj.name);
//alert(obj["age"]);
alert(obj.getName());
// 新增一個方法到 obj物件
obj.getAge = function(){
return this.age;
}
alert(obj.getAge());
JavaScript中的物件是通過 new function建立的，在Js中function等同於一個類結構
// 定義類 結構
var Product = function(name,price){
this.name = name; // 儲存name的值 到物件屬性中
this.price = price;
}
// 基於類結構建立物件，使用new 關鍵字
var p1 = new Product("冰箱",1000);
var p2 = new Product("洗衣機",1500);
//alert(p1.name);
//alert(p1.price);
function本身代表一個函式，JavaScript物件通過new function來獲得的，理解function就是物件建構函式
②：Object和function的關係
JavaScript中所有引用型別都是物件Object例項 ------- Function instanceOf Object //true
JavaScript 中所有物件都是通過 new Function例項(function) 獲得 ------ Object instance Function //true
JavaScript所有物件建構函式都是function例項；JavaScript所有物件都是object例項，function也是object例項。
使用JavaScript的傳遞性進行推論！
A：function是用來定義一個函式，所有函式例項都是Function物件
B：JavaScript中，所有物件都是通過new function得到的
Var Object = function(){...}
Var String = function(){...}
Var Array = function(){...}
Var Date = function(){...}
結論：所有物件構造器都是Function例項
alert(String instanceOf Function) //true
alert(Object instanceOf Function) //true
C：建立一個物件，需要使用new function
Var s = new String()
Var o = new Object()
Var arr = new Array()
Var date = new Date()
結論：JavaScript中，一切物件都是object例項
alert(s instanceOf Object) //true
alert(Function instanceOf Object) //true
var f = new Function(); // 例項化Function物件
var o = new Object(); // 例項化Object物件
alert(f instanceof Function); // true
alert(f instanceof Object); // true
alert(o instanceof Function); // false
alert(o instanceof Object); // true
③：function原型屬性
JavaScript所有物件都由function建構函式得來的 ，通過修改 function建構函式 prototype屬性，動態修改物件屬性和方法。
④：繼承
A：使用原型鏈完成JavaScript單繼承
var A = function(){
this.name = 'xxx';
}
var B = function(){
this.age = 20;
}
// 方式一 可以通過 prototype原型完成單繼承 B的原型指向A
B.prototype = new A(); // 從A例項中，繼承所有屬性
var b = new B();
alert(b.name);
// 練習：通過prototype為String類新增一個trim方法
String.prototype.trim = function(){
return this.replace(/(^\s*)(\s*$)/g, "");
}
B：物件冒充完成多繼承
var C = function(){
this.info = 'c';
}
var D = function(){
this.msg = 'd';
}
var E = function(){
// 同時繼承C和D
this.methodC = C;
this.methodC();
delete this.methodC;
this.methodD = D;
this.methodD();
delete this.methodD;
this.desc = 'e';
}
var e = new E();
//alert(e.info);
//alert(e.msg);
//alert(e.desc);
⑤：動態方法呼叫
可以改變this的指向，可以完成物件多繼承
// 定義函式
function printInfo(){
alert(this.name);
}
// 屬性name 值 張三
var o = {name: '張三'};
//o.printInfo();// 函式不屬於物件o
// JS提供動態方法呼叫兩個方法，允許一個物件呼叫不是屬於它自己的方法(call apply)
//printInfo.call(o);
//printInfo.apply(o);
function add(a,b){
this.sum = a+b;
}
// call傳 多個引數
//add.call(o,8,10);
// apply 傳遞引數陣列
add.apply(o,new Array(8,10));
//alert(o.sum);
// 動態方法呼叫 ，實現多重繼承，原理就是物件冒充
var A = function(){
this.info = 'a';
}
var B = function(){
// 動態方法呼叫繼承
A.call(this);
}
var b = new B();
alert(b.info);
二、JavaScript瀏覽器物件BOM
DOM Window 代表窗體
DOM History 歷史記錄
DOM Location 瀏覽器導航
DOM Navigator 瀏覽器資訊 不講
DOM Screen 螢幕 不講
重點：window、history、location ，最重要的是window物件
1.window物件
Window 物件表示瀏覽器中開啟的視窗，如果文件包含框架（frame 或 iframe 標籤），瀏覽器會為 HTML 文件建立一個 window 物件，併為每個框架建立一個額外的 window 物件
window.frames 返回視窗中所有命名的框架
parent是父視窗（如果視窗是頂級視窗，那麼parent==self==top）
top是最頂級父視窗（有的視窗中套了好幾層frameset或者iframe）
self是當前視窗（等價window）
opener是用open方法開啟當前視窗的那個視窗
①：父子窗體之間的通訊
在頁面內嵌入一個iframe，在iframe中提供一個輸入項，輸入後，在iframe外面視窗中顯示內容
顯示結果如上圖所示，實現思路如下：
子窗體：2.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Untitled Document</title>
<script type="text/javascript">
function showOutter(){
// 獲得輸入內容
var content = document.getElementById("content").value;
// 將輸入的內容顯示到主窗體info 中
window.parent.document.getElementById("info").innerHTML = content;
}
</script>
</head>
<body>
<h1>子窗體</h1>
<input type="text" id="content" />
<input type="button" value="顯示到主窗體" onclick="showOutter();"/>
</body>
主窗體：1.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>父子窗體通訊</title>
<script type="text/javascript">
function showContent(){
// 用主窗體讀取子窗體內容
var content = window.frames[0].document.getElementById("content").value;
alert(content);
}
</script>
</head>
<body>
<h1>主窗體</h1>
<div id="info"></div>
<!-- 在主窗體中獲得子窗體內容 -->
<input type="button" value="獲取子窗體輸入內容" onclick="showContent();" />
<iframe src="2.html"></iframe>
</body>
②：window的open close
<head>
<title>開啟關閉窗體</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
//用一個變數記錄開啟的網頁
var openNew;
function openWindow(){
openNew = window.open("http://www.itcast.cn");
}
//關閉的時候需要注意關閉的是開啟的網頁，而不是本身
function closeWindow(){
openNew.close();
}
</script>
</head>
<body>
<input type="button" value="開啟傳智播客網頁" onclick="openWindow()">
<input type="button" value="關閉傳智播客網頁" onclick="closeWindow()">
</body>
③：window彈出對話方塊相關的3個方法
alert()警告框 confirm()確認框 prompt()輸入框
<script type="text/javascript">
alert("這是警告框！")
var con = confirm("你想好了嗎？");
alert(con);
var msg = prompt("請輸入姓名","張三");
alert(msg);
</script>
④：定時操作setInterval & setTimeout
setInterval：定時任務會重複執行
setTimeout：定時任務只執行一次
在頁面動態顯示當前時間
<script type="text/javascript">
window.onload = function(){
var date = new Date();
document.getElementById("time1").innerHTML =date.toLocaleString();
document.getElementById("time2").innerHTML =date.toLocaleString();
setInterval("show1();",1000); //間隔1秒後重復執行
setTimeout("show2();",1000);//1秒後執行，執行1次
}
function show1(){
var date = new Date();
document.getElementById("time1").innerHTML =date.toLocaleString();
}
function show2(){
var date = new Date();
document.getElementById("time2").innerHTML =date.toLocaleString();
setTimeout("show2();",1000);//不終止
}
</script>
<body>
<div id="time1"></div>
<div id="time2"></div>
</body>
2.history 物件
代表歷史記錄，常用來製作頁面中返回按鈕
<input type="button" value="返回" onclick="history.back();" />
<input type="button" value="返回" onclick="history.go(-1);" />
3.Location 物件
代表瀏覽器導航 在js函式中發起href連結效果
location.href='跳轉後url' ; 等價於 <a href='xxx'></a>
三、JavaScript文件物件模型DOM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>History和Location使用</title>
</head>
<body>
<input type="button" value="返回" onclick="history.back();" />
</body>
</html>
DOM 解析模型，將文件載入到 記憶體，形成一個樹形結構 <html> 就是根節點，每個標籤會成為一個元素節點、標籤的屬性成為屬性節點，標籤內部的文字內容成為文字節點
注意：屬性節點，它不屬於DOM樹形結構，不屬於任何節點父節點，也不屬於任何節點的子節點 ，屬性節點依附於元素節點上 一種附加節點
【上面程式碼 產生6個元素節點，5個屬性節點，9個文字節點】
HTML 本身也是 XML，所有可以使用XML DOM API規範
DOM Element
DOM Attr
DOM Text
DOM Document
HTML DOM是對XML DOM的擴充套件， HTML DOM比XML DOM 開發JS來說更加簡單方便！
HTML DOM最優秀的地方是，操作form物件和table資料
1.BOM和HTML DOM關係圖
學習DOM 程式設計，從Document物件開始，document代表當前HTML網頁文件物件，是window物件一個屬性，可以直接使用 ，所有HTML DOM物件都是Document子物件
2.DOM程式設計開發
window.document 代表整個HTML文件
①：通過document獲得Node節點物件
document.forms 獲得頁面中所有form元素集合
document.body 訪問頁面中<body> 元素
document.cookie 用JS操作網頁cookie資訊
全域性檢索提供了三個重要的方法：
document.getElementById():通過id屬性檢索，獲得Node節點（Element元素）
document.getElementsByName 通過name 屬性檢索 ，獲得NodeList
document.getElementsByTagName 通過標籤元素名稱 獲得NodeList
其中NodeList可以作為陣列進行操作
Demo:在每一個h1標籤後追加itcast
<script type="text/javascript">
//在每一個h1標籤內追加一個itcast
window.onload = function(){
var nodeList = document.getElementsByTagName("h1");
for(var i=0; i<nodeList.length;i++){
// var h1 = nodeList[i];
var h1 = nodeList.item(i);
alert(h1.innerHTML);
h1.innerHTML += "itcast";
}
}
</script>
<body>
<h1>AAA</h1>
<h1>BBB</h1>
<h1>CCC</h1>
<h1>DDD</h1>
</body>
②：獲得node後
如果node是元素，去操作裡面的文字內容 innerHTML (HTML頁面內所有元素，一定是HTML 元素，innerHTML 是所有HTML元素通用屬性 )
XML 取得一個元素內部文字內容 element.firstChild.nodeValue(看批註32)
③：通過節點Node相對位置關係訪問元素
childNodes
firstChild
lastChild
nextSibling
parentNode
previousSibling
用2種方式列印——明天休息
<h1 id="h1">明天休息</h1> <br>
var h1 = document.getElementById("h1");
alert(h1.innerHTML);//方式一
alert(h1.firstChild.nodeValue);//方式二
3.DOM元素常見操作
DOM 獲取節點：節點查詢 參上
DOM 改變節點： 元素屬性修改setAttribute(name,value)
內部文字元素的修改 innerHTML
DOM 刪除節點：removeChild 刪除子元素 、removeAttribute(name)刪除節點指定屬性
* 要刪除節點o o.parentNode.removeChild(o)
DOM 替換節點：replaceChild：父節點.replaceChild(新節點,被替換節點) ;
如果對於一個已經存在節點，執行 appendChild、 replaceChild都會造成該節點一個移動效果，可以採取先克隆再複製來消除此效果。
DOM 建立節點：document物件提供createElement() 建立元素、createAttribute(name) 建立屬性、createTextNode() 建立文字節點
DOM 新增節點 appendChild 父元素.appendChild(新的子節點) ;
insertBefore 父節點.insertBefore(新子節點, 已經存在子節點)
DOM 克隆節點 源節點.cloneNode(true); 該方法可以返回一個節點的克隆節點， 克隆節點包含原節點的屬性和子元素
此節內容有大量的練習，建議大家做寫，增強程式碼的熟練度。
四、JavaScript事件
事件通常與函式配合使用，這樣就可以通過發生的事件來驅動函式執行。事件是基於物件存在，事件通常可以修飾多種物件。
1.為物件新增事件的2種方式
①：在HTML元素中新增物件的事件
<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
function overtest(){
alert("移動到圖片上方");
}
</script>
</head>
<body>
<img src="1.jpg" width="200" height="300" onmouseover = "overtest()";/>
</body>
②：在JS程式碼中為元素新增事件
<head>
<title>事件</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
function overtest(){
alert("移動到圖片上方");
}
window.onload = function(){
document.getElementById("myimg").onmouseover = overtest;