核心內容概述
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;
}
</script>
</head>
<body>
<img src="1.jpg" width="200" height="300" id="myimg";/>
</body>
總結:優先使用第二種,將js代碼與HTML元素代碼分離開,更加方便統一管理維護。
問題:HTML 元素添加事件, 與JS添加事件是否可以完全等價?
在實際開發中,如果傳參數,使用HTML元素綁定事件,如果不傳參數,使用JS綁定事件。傳參數也可以使用與JS綁定事件【使用匿名函數】。示例代碼如下:
<head>
<title>HTML事件綁定與JS綁定</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script type="text/javascript">
function clicktest(o){
alert(o);
}
window.onload = function(){
document.getElementById("mybutton").onclick = function(){
clicktest('次奧');
}
}
</script>
</head>
<body>
<input type="button" id="mybutton" value="點擊我!">
<input type="button" value="別碰我!" onclick = "clicktest('次奧')"/>
</body>
2.鼠標移動事件
Mousemove: 鼠標移動時觸發事件 鼠標跟隨效果
Mouseover: 鼠標從元素外,移動元素之上,信息提示、字體變色
Mouseout: 鼠標從元素上,移出元素范圍,和mouseover一起使用
3.鼠標點擊事件(左鍵相關事件)
click 鼠標單擊事件
dbclick 鼠標雙擊事件
mousedown/mouseup 鼠標按下、按鍵彈起 click = mousedown + mouseup;
oncontextmenu 鼠標右鍵菜單事件 (不是瀏覽器兼容事件)
4.聚焦離焦事件
focus 聚焦 頁面焦點定位到目標元素
blur 離焦 頁面焦點由目標元素移開
Demo:
<script type="text/javascript">
window.onload= function(){
//頁面加載后,在輸入框加入默認值,並以灰色顯示
document.getElementById("username").value= "用戶名";
document.getElementById("username").style.color="gray";
//聚焦事件
document.getElementById("username").onfocus= function(){
document.getElementById("username").value="";
document.getElementById("username").style.color="black";
}
//離焦事件
document.getElementById("username").onblur=function(){
var name = document.getElementById("username").value;
if(name==""){
document.getElementById("username").value="張三";
document.getElementById("username").style.color="gray";
}
}
}
</script>
</head>
<body>
請輸入用戶名:<input type="text" id="username"><br/>
</body>
5.鍵盤事件
使用場景:沒有提交按鈕,我們一般采用回車進行提交
Demo:
<script type="text/javascript">
window.onload = function(){
document.getElementById("message").onkeypress = function(e){
// 判斷用戶 按鍵是否為 回車鍵
if(e && e.which){
// 火狐瀏覽器
if(e.which == 13){
alert("提交")
}
}else{
// IE瀏覽器
if(window.event.keyCode ==13 ){
alert("提交")
}
}
}
}
</script>
<body>
發送消息 <input type="text" name="message" id="message"/>
</body>
IE 中window對象,提供event屬性,所以在IE中可以直接使用 event對象
火狐沒有全局event對象,必須在發生事件時,產生一個event對象 ,傳遞默認方法
6.form的提交、重置事件
submit/reset
onsubmit = "return validateForm" 對表單進行校驗
7.改變事件
onchange 制作select聯動效果 ---- 省市聯動
重點 : onclick 、onchange 、onblur、 onsubmit
8.默認事件的阻止和傳播阻止
使用場景極為常見,超鏈接用戶點擊后,取消了不發生跳轉。
<script type="text/javascript">
// 阻止默認事件發生
function confirmDel(e){
var isConfirm = window.confirm("確認刪除嗎?");
if(!isConfirm){// 用戶選擇了取消
// 阻止默認事件
if(e && e.preventDefault){
// 火狐
e.preventDefault();
}else{
// IE
window.event.returnValue = false;
}
}
}
// 阻止事件冒泡
function aclick(e){
alert("a");
if(e && e.stopPropagation){
// 火狐瀏覽器
e.stopPropagation();
}else{
// IE 瀏覽器
window.event.cancelBubble = true;
}
}
function divclick(){
alert("div");
}
</script>
<body>
<h1>默認事件</h1>
<!-- 刪除時,詢問用戶是否刪除,然后再跳轉-->
<a href="del?id=1" onclick="confirmDel(event);">這是一個鏈接</a>
<h1>事件傳播</h1>
<!-- 事件冒泡傳播 -->
<div onclick="divclick();"><a href="#" onclick="aclick(event);">這個鏈接 會觸發兩個事件執行</a></div>
</body>
HTML DOM Event對象
提供preventDefault()用於阻止默認事件的發生, 該方法IE 不支持 ,在IE中使用 returnValue
提供stopPropagation()用與阻止事件傳播,該方法IE不支持,在IE中 cancelBubble
五、Ajax編程入門
1.web交互的2種模式對比
①:2種交互模式的流程
②:2種交互模式用戶體驗
同步交互模式:客戶端提交請求,等待,在響應回到客戶端前,客戶端無法進行其他操作
異步交互模型:客戶端將請求提交給Ajax引擎,客戶端可以繼續操作,由Ajax引擎來完成與服務武器端通信,當響應回來后,Ajax引擎會更新客戶頁面,在客戶端提交請求后,用戶可以繼續操作,而無需等待 。
2.Ajax快速入門
①:開發步驟
1).創建XMLHttpRequest對象
2).將狀態觸發器綁定到一個函數
3).使用open方法建立與服務器的連接
4).向服務器端發送數據
5).在回調函數中對返回數據進行處理
Demo:
<script type="text/javascript">
// 第一步 創建XMLHttpRequest
function createXMLHttpRequest(){
try {
xmlHttp = new XMLHttpRequest();
}catch (tryMS) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (otherMS) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
xmlHttp = null;
// 這里可以報一個錯誤,無法獲得 XMLHttpRequest對象
}
}
}
return xmlHttp;
}
var xmlHttp = createXMLHttpRequest();
// 第二步 響應從服務器返回后,Ajax引擎需要更新頁面,綁定一個回調函數
xmlHttp.onreadystatechange = function(){
// 第五步,響應返回后執行
// 狀態依次 是 0 - 4
// 0 未初始化 1 正在加載 2 已經加載 3 交互中 4 響應完成
if(xmlHttp.readyState == 4){
// 判斷數據是否正確
if(xmlHttp.status == 200){
// 響應有效
alert("響應返回了..." + xmlHttp.responseText);
}
}
};
// 第三步 建立與服務器連接
//xmlHttp.open("GET","helloworld?name=張三");//helloworld代表 Servlet URL
xmlHttp.open("POST","helloworld");
// 第四步 發送數據
// xmlHttp.send(null);
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xmlHttp.send("name=李四");
</script>
②:XMLHttpRequest對象的屬性及方法
屬性:
1)onreadystateonchange:狀態回調函數
2)readystate:對象狀態
3)status:服務器返回的http狀態碼
4)reqsponseText/responseXML:服務器響應的字符串
5)statusText:服務器返回的http狀態信息
方法:
1)open:
2)send:
③:客戶端向服務器提交數據
1)get方式發送數據
xmlHttp.open("GET","url?key=value"); // 參數已經在url上
xmlHttp.send(null);
2)post方式發送數據
xmlHttp.open("POST","url"); // 不需要寫參數
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); // post發送參數前,需要設置編碼格式
xmlHttp.send("name=xxx&pwd=xxx"); // 發送post數據
④:Ajax編程圖解
說明:查看時,請將文檔放到為180%較為合適!
結合編程圖解,我們將第一個案例的代碼進行解剖:
3.三種不同服務器響應數據類型編程
常見的服務器響應數據類型:html片段、JSON格式數據、xml格式數據
①:HTML片段的數據處理
練習1:驗證用戶名是否有效
Ø 通過xmlhttp.responseText獲得返回數據
Ø 通過Dom查找獲得元素
Ø 調用元素的innerHTML進行操作
說明:三個文件的具體內容請雙擊方框內的圖標即可查看,這里推薦使用Notepad++進行關聯
效果圖展示:(數據使用list存儲,abc和def存在)
注意:在register.html文件中,與服務器建立連接是,url一定要寫對,否則返回數據時出現404錯誤!【"/Ajax/CheckUsernameServlet?username="】
②:JSON格式數據處理
練習2:通過鏈接獲得table數據,顯示 --- 返回HTML片段
通過product.jsp 生成HTML片段,返回客戶端,客戶端Ajax引擎接收,通過innerHTML 將table元素嵌入到頁面內部,其思路與案例一類似,這里不做詳細介紹。這里需要提出的是第二種解決方案JSON(HTML片段容易造成返回數據帶回過多冗余的HTML標簽元素)
JSON是一種JavaScript輕量級數據交互格式,主要應用於Ajax編程。易於人閱讀和編寫,同時也易於機器解析和生成。
格式一: {key:value,key:value,key:value } 鍵值對直接用 , 分開,鍵值之間用 : 鍵本身必須是字符串常量
{name : '張三'}
{'name':'張三'}
是等價的。
值加不加引號,是有區別的,不加引號是變量,加引號是常量字符串
格式二: [值1, 值2 ,值3 ] 數組結構
組合后復雜格式
[{name:'aaa'}, {name:'bbb'}, {name:ccc}] 表示三個對象數組
JSON應用場景: AJAX請求參數和響應數據
問題: 服務器端如何生成 json格式數據------->>依賴第三方開源類庫
③:JSON-lib的使用
是java類庫 ,支持javabean map list array轉換json格式字符串, 支持將json字符串轉換javabean對象(反過來只支持這一種,使用很少)
在使用JSON-lib時必須導入至少5個jar包
開發時我們使用6個jar包,雙擊json-lib-all.zip即可獲取所需jar包。
1)將數組/list集合解析成JSON串
使用JSONArray可以解析Array類型
JSONArray jsonArray = JSONArray.fromObject(list變量);
2)將Javabean/Map解析成JSON串
使用JSONObject可以解析javabean類型
JSONObject jsonObject = JSONObject.fromObject(javabean);
3)對象屬性過濾轉換JSON串
通過JsonConfig對象配置對象哪些屬性不參與轉換。
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{"price"});
運行效果:
④:XML格式數據處理
練習3:select完成省級聯動
1) XStream的使用
問題:服務器端如何將java對象,生成XML格式數據?需要第三方類庫支持XStream
XStream is a simple library to serialize objects to XML and back again.
XStream主要完成Java對象的序列化(xstream-1.3.1.jar)以及解析(xpp3_min-1.1.4c.jar)
2) XStream的核心方法
Ø xStream.toXML(obj):將對象序列化XML
Ø xStream.fromXML(inputStream/xml片段):將xml信息解析成對象
Ø xStream.alias(String name,Class):將類型解析或者序列化時,取一個別名
代碼案例:(序列化)
解析xml時,要注意別名的命名規則要與序列化時保持一致!
3) XStream注解
在Javabean中進行注解
把某屬性的名稱取別名為city:@XStreamAlias(value="city")
注解生效:xStream.autodetectAnnotations(true);
@XStreamAsAttribute 設置變量生成屬性
@XStreamOmitField 設置變量不生成到XML
@XStreamImplicit(itemFieldName = “hobbies”) 設置集合類型變量別名
六、jQuery框架
jQuery 1.4 是企業主流版本,從jQuery1.6 開始引入大量新特性。最新版本 2.1.1,這里講解以1.8.3為主(新版本主要是瀏覽器兼容問題以及新特性)
jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js
jquery-1.8.3.js jQuery框架源碼,沒有被精簡,體積較大 (主要用來研究 jQuery源碼),企業開發時,需要導入 jquery-1.8.3.min.js (精簡過)
1.jQuery程序快速入門
window.onload = function() {...}
等價於$(document).ready(function(){...});
①:jQuery基本使用
傳統Js寫法:
<script type="text/javascript">
window.onload = function(){
alert("傳統JS,Ok");
}
</script>
jQuery寫法:
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
alert("ok");
});
$(document).ready(function(){
alert("OK");
});
</script>
②:jQuery核心函數
1)jQuery(callback) // 頁面onload 函數
2)jQuery(expression, [context]) // 查找指定對象 ------ 九種選擇器
3)jQuery(elements) // 將dom對象轉換為jQuery對象
* document 是DOM對象 jQuery(document) 成為了jQuery對象
4)jQuery(html, [ownerDocument]) // 將html轉換jQuery對象
* jQuery("<p>hello</p>") ----- 得到 jQuery對象
Demo:
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 獲得div對象
var domObject = document.getElementById("mydiv"); // 獲得DOM對象
domObject.innerHTML = "ITCAST";
// 通過包裝DOM對象,成為jQuery對象
var $jQueryObject = $(domObject); // DOM對象成為 jQuery對象
$jQueryObject.html("傳智播客"); // html()是jQuery對象的方法
// 通過訪問jQuery對象下標0 元素,獲得DOM對象
var dom1 = $jQueryObject[0]; // 轉換jQuery對象為DOM對象
var dom2 = $jQueryObject.get(0);
dom2.innerHTML = "傳智播客ITCAST";
});
</script>
<body>
<div id="mydiv">hello</div>
</body>
jQuery對象無法使用DOM對象屬性方法,DOM對象也無法使用jQuery對象屬性方法。但是我們可以使用jQuery提供方法,將DOM對象通過jQuery()函數包裝成為jQuery對象,同樣我們可以把jQuery對象轉化成DOM對象。
jQuery--->DOM對象:$jQuery對象[0]或者$jQuery對象.get(0);
DOM對象--->jQuery:$(DOM對象)
2.jQuery九種選擇器
選擇器是jQuery 的根基, 在 jQuery 中, 對事件處理, 遍歷 DOM 和 Ajax 操作都依賴於選擇器
jQuery(expression, [context]) 在核心函數jQuery中傳入表達式,對頁面中元素進行選擇======================jQuery核心函數第二種!
①:基本選擇器
根據元素id屬性、class屬性、元素名稱 對元素進行選擇
id選擇器: $("#元素id屬性")
class選擇器:$(".元素class屬性")
元素名稱選擇器:$("元素名稱")
多個選擇器同時使用 selector1,select2 例如 : $("#xxid ,.xxxclass") 同時選擇id 和 class匹配兩類元素
練習1:
² 通過each() 在每個div元素內容前 加入 “傳智播客”
² 通過size() / length 打印頁面中 class屬性為 itcast 的元素數量
² 通過index() 打印 id屬性為foo 的div標簽 是頁面內的第幾個div標簽
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 選中所有div 得到集合
$("div").each(function(){
// 在每個div內容前加入“傳智播客”
//this.innerHTML = "傳智播客" + this.innerHTML ;
$(this).html("傳智播客" + $(this).html());
});
// 通過size() / length 打印頁面中 class屬性為 itcast 的元素數量
//alert($(".itcast").size());
alert($(".itcast").length);
// 通過index() 打印 id屬性為foo 的div標簽 是頁面內的第幾個div標簽
alert($("div").index($("#foo")));
});
</script>
<body>
<div>DIVAAAA</div>
<div class="itcast">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<div class="itcast">DIVEEEE</div>
<div id="foo">DIVFFFF</div>
<p>PAAAA</p>
<p class="itcast">PBBBB</p>
<p>PCCCC</p>
</body>
②:層級選擇器
根據祖先、后代、父子關系、兄弟關系 進行選擇
ancestor descendant 獲取ancestor元素下邊的所有元素 $("form input")
parent > child 獲取parent元素下邊的所有直接child 子元素 $("form > input")
prev + next 獲取緊隨pre元素的后一個兄弟元素 $("label + input")
prev ~ siblings 獲取pre元素后邊的所有兄弟元素 $("form ~ input")
練習2:
² 將class屬性值為itcast的元素下所有a元素字體變為紅色
² 將class屬性值為itcast的元素下直接a元素字體變為藍色
² 將div元素后所有兄弟a元素,字體變為黃色,大小變為30px
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 將class屬性值為itcast的元素下所有a元素字體變為紅色
$(".itcast a").css("color","red");
// 將class屬性值為itcast的元素下直接a元素字體變為藍色
$(".itcast>a").css("color","blue");
// 將div元素后所有兄弟a元素,字體變為黃色,大小變為30px
$("div~a").css({color:'yellow','font-size':'30px'});
</script>
<body>
<div class="itcast">
<a>div link</a>
<p>info
<a>p link</a>
</p>
</div>
<a>link</a>
<p class="itcast">
<a>p link</a>
</p>
<a>link</a>
</body>
③:基本過濾選擇器
:first 選取第一個元素 $("tr:first")
:last 選取最后一個元素 $("tr:last")
:not(selector) 去除所有與給定選擇器匹配的元素 $("input:not(:checked)")
:even 選取所有元素中偶數索引的元素,從 0 開始計數 $("tr:even") ----- 選取奇數元素
:odd 選取所有元素中奇數索引的元素 ,從0 開始計數 $("tr:odd") ------ 選取偶數元素
:eq(index) 選取指定索引的元素 $("tr:eq(1)")
:gt(index) 選取索引大於指定index的元素 $("tr:gt(0)")
:lt(index) 選取索引小於指定index的元素 $("tr:lt(2)")
:header 選取所有的標題元素 如:h1, h2, h3 $(":header")
:animated 匹配所有正在執行動畫效果的元素
練習3:
² 設置表格第一行,顯示為紅色
² 設置表格除第一行以外 顯示為藍色
² 設置表格奇數行背景色 黃色
² 設置表格偶數行背景色 綠色
² 設置頁面中所有標題 顯示為灰色
² 設置頁面中正在執行動畫效果div背景黃色,不執行動畫div背景綠色
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 設置表格第一行,顯示為紅色
$("tr:first").css("color","red");
// 設置表格除第一行以外 顯示為藍色
//$("tr:not(:first)").css("color","blue");
$("tr:gt(0)").css("color","blue");
// 設置表格奇數行背景色 黃色 /設置表格偶數行背景色 綠色
$("tr:even").css("background-color","yellow");
$("tr:odd").css("background-color","green");
// 設置頁面中所有標題 顯示為灰色
$(":header").css("color","gray");
// 設置頁面中正在執行動畫效果div背景黃色,不執行動畫div背景綠色
// 無法選中正在執行動畫的元素
$("div:not(:animated)").css("background-color","green");
$("div").click(function(){
$(this).css("background-color","yellow"); //設置執行動畫元素
});
});
</script>
<body>
<h1>表格信息</h1>
<h2>這是一張商品表</h2>
<table border="1" width="600">
<tr>
<th>商品編號</th>
<th>商品名稱</th>
<th>售價</th>
<th>數量</th>
</tr>
<tr>
<td>001</td>
<td>冰箱</td>
<td>3000</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>洗衣機</td>
<td>2000</td>
<td>50</td>
</tr>
<tr>
<td>003</td>
<td>熱水器</td>
<td>1500</td>
<td>20</td>
</tr>
<tr>
<td>004</td>
<td>手機</td>
<td>2188</td>
<td>200</td>
</tr>
</table>
<div>
slideDown(speed, [callback])
概述
通過高度變化(向下增大)來動態地顯示所有匹配的元素,在顯示完成后可選地觸發一個回調函數。
這個動畫效果只調整元素的高度,可以使匹配的元素以“滑動”的方式顯示出來。在jQuery 1.3中,上下的padding和margin也會有動畫,效果更流暢。
參數
speedString,Number三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)
callback (可選)FunctionFunction在動畫完成時執行的函數
</div>
<div>
fadeOut(speed, [callback])
概述
通過不透明度的變化來實現所有匹配元素的淡出效果,並在動畫完成后可選地觸發一個回調函數。
這個動畫只調整元素的不透明度,也就是說所有匹配的元素的高度和寬度不會發生變化。
參數
speedString,Number三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如:1000)
callback (可選)Function在動畫完成時執行的函數
</div>
</body>
④:內容過濾選擇器
內容選擇器是對子元素和文本內容的操作
:contains(text) 選取包含text文本內容的元素 $("div:contains('John')") 文本內容含有john 的所有div
:empty 選取不包含子元素或者文本節點的空元素 $("td:empty") td元素必須為空
:has(selector) 選取含有選擇器所匹配的元素的元素 $("div:has(p)").addClass("test"); 含有p子元素的div
:parent 選取含有子元素或文本節點的元素 $("td:parent") 所有不為空td元素選中
練習4:
² 設置含有文本內容 ”傳智播客” 的 div 的字體顏色為紅色
² 設置沒有子元素的div元素 文本內容 ”這是一個空DIV“
² 設置包含p元素 的 div 背景色為黃色
² 設置所有含有子元素的span字體為藍色
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 設置含有文本內容 ”傳智播客” 的 div 的字體顏色為紅色
$("div:contains('傳智播客')").css("color","red");
// 設置沒有子元素的div元素 文本內容 ”這是一個空DIV“
$("div:empty").html('這是一個空DIV');
// 設置包含p元素 的 div 背景色為黃色
$("div:has(p)").css("background-color","yellow");
// 設置所有含有子元素的span字體為藍色
$("span:parent").css("color","blue");
</script>
<body>
<div>今天是個晴天</div>
<div>明天要去傳智播客學 java</div>
<div><span>JavaScript</span> 是網頁開發中腳本技術</div>
<div>Ajax 是異步的 JavaScript和 XML</div>
<div> <p>jQuery</p> 是 JavaScript一個 輕量級框架</div>
<div></div>
</body>
⑤:可見性過濾選擇器
根據元素的可見與不可見狀態來選取元素
:hidden 選取所有不可見元素 $("tr:hidden")
:visible 選取所有可見的元素 $("tr:visible")
練習5:
² 為表單中所有隱藏域 添加 class屬性,值為itcast
² 設置table所有 可見 tr 背景色 黃色
² 設置table所有 隱藏tr 字體顏色為紅色,顯示出來 ,並輸出tr中文本值
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 為表單中所有隱藏域 添加 class屬性,值為itcast
$("input:hidden").addClass("itcast");
// 設置table所有 可見 tr 背景色 黃色
$("tr:visible").css("background-color","yellow");
// 設置table所有 隱藏tr 字體顏色為紅色,顯示出來 ,並輸出tr中文本值
$("tr:hidden").each(function(){
alert($(this).text());
});
$("tr:hidden").css("color","red");
$("tr:hidden").css("display","block");
});
</script>
<body>
<form>
訂單號 itcast-xxxx 金額 100元
<!-- 隱藏令牌號 -->
<input type="hidden" name="token"
value="12312-0xccx-zx-asd-21-asd-gdfgd" />
<input type="submit" value="確認支付" />
</form>
<table>
<tr style="display:none;">
<td>冰箱</td>
</tr>
<tr style="visibility:hidden;">
<td>洗衣機</td>
</tr>
<tr>
<td>熱水器</td>
</tr>
</table>
</body>
⑥:屬性過濾選擇器
通過元素的屬性來選取相應的元素
[attribute] 選取擁有此屬性的元素 $("div[id]")
[attribute=value] 選取指定屬性值為value的所有元素
[attribute !=value] 選取屬性值不為value的所有元素
[attribute ^= value] 選取屬性值以value開始的所有元素
[attribute $= value] 選取屬性值以value結束的所有元素
[attribute *= value] 選取屬性值包含value的所有元素
練習6:
² 設置所有含有id屬性的div,字體顏色紅色
² 設置所有class屬性值 含有itcast元素背景色為黃色
² 對所有既有id又有class屬性div元素,添加一個點擊事件,打印div標簽中內容
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 設置所有含有id屬性的div,字體顏色紅色
$("div[id]").css("color","red");
// 設置所有class屬性值 含有itcast元素背景色為黃色
$("[class *= 'itcast']").css("background-color","yellow");
// 對所有既有id又有class屬性div元素,添加一個點擊事件,打印div標簽中內容
$("div[id][class]").click(function(){
});
});
</script>
<body>
<div>AAAA</div>
<div id="mydiv" class="itcast1">BBBB</div>
<div class="itcast2">CCCC</div>
<div id="mydiv2">DDDD</div>
<div class="divclass">EEEE</div>
<div id="xxx" class="itcast3">FFFF</div>
<p class="p-itcast">PPPPPP</p>
</body>
⑦:子元素過濾選擇器
對某元素中的子元素進行選取
:nth-child(index/even/odd) 選取索引為index的元素、索引為偶數的元素、索引為奇數的元素 ----- index 從1開始 區別 eq
:first-child 選取第一個子元素
:last-child 選取最后一個子元素
:only-child 選取唯一子元素,它的父元素只有它這一個子元素
練習7:
² 選擇id屬性mytable 下3的倍數行,字體顏色為紅色
² 表格 奇數行 背景色 黃色
² 表格 偶數行 背景色 灰色
² 只有一個td的 tr元素 字體為 藍色
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 選擇id屬性mytable 下3的倍數行,字體顏色為紅色
$("#mytable tr:nth-child(3n)").css("color","red");
// 表格 奇數行 背景色 黃色 / 表格 偶數行 背景色 灰色
$("table tr:nth-child(even)").css("background-color","gray");
//$("table tr:nth-child(odd)").css("background-color","yellow"); // 從1計數
$("tr:even").css("background-color","yellow");// 從0計數
// 只有一個td的 tr元素 字體為 藍色
$("tr td:only-child").css("color","blue");
</script>
</head>
<body>
<table border="1" width="400" id="mytable">
<tr><td>1</td><td>冰箱</td></tr>
<tr><td>2</td><td>洗衣機</td></tr>
<tr><td>3</td><td>熱水器</td></tr>
<tr><td>4</td><td>電飯鍋</td></tr>
<tr><td>5</td><td>電磁爐</td></tr>
<tr><td>6</td><td>豆漿機</td></tr>
<tr><td>7</td><td>微波爐</td></tr>
<tr><td>8</td><td>電視</td></tr>
<tr><td>9</td><td>空調</td></tr>
<tr><td>10</td><td>收音機</td></tr>
<tr><td>11</td><td>排油煙機</td></tr>
<tr><td>12</td><td>加濕器</td></tr>
<tr><td>13 電暖氣</td>加濕器</tr>
</table>
</body>
⑧:表單過濾選擇器
選取表單元素的過濾選擇器
:input 選取所有<input>、<textarea>、<select >和<button>元素
:text 選取所有的文本框元素
:password 選取所有的密碼框元素
:radio 選取所有的單選框元素
:checkbox 選取所有的多選框元素
:submit 選取所有的提交按鈕元素
:image 選取所有的圖像按鈕元素
:reset 選取所有重置按鈕元素
:button 選取所有按鈕元素
:file 選取所有文件上傳域元素
:hidden 選取所有不可見元素
練習8:
² 對所有text框和password框,添加離焦事件,校驗輸入內容不能為空
² 對button 添加 點擊事件,提交form表單
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 對所有text框和password框,添加離焦事件,校驗輸入內容不能為空
$(":text,:password").blur(function(){
// 獲得表單元素內容 val()
var value = $(this).val(); // 獲得value 屬性
// 將輸入內容 trim
if($.trim(value) == "" ){
alert("用戶名和密碼不能為空");
}
});
// 對button 添加 點擊事件,提交form表單
$(":button").click(function(){
$("#myform").submit();
});
});
</script>
<body>
<form action="regist" method="post" id="myform">
用戶名 <input type="text" name="username" /><br/>
密碼 <input type="password" name="password" /><br/>
性別 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女"/><br/>
城市 <select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
個人簡介 <textarea rows="5" cols="60" name="introduce"></textarea>
<input type="button" value="提交"/>
</form>
</body>
⑨:表單對象屬性過濾選擇器
選取表單元素屬性的過濾選擇器
:enabled 選取所有可用元素
:disabled 選取所有不可用元素
:checked 選取所有被選中的元素,如單選框、復選框
:selected 選取所有被選中項元素,如下拉列表框、列表框
練習9:
² 點擊button 打印radio checkbox select 中選中項的值
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 點擊button 打印radio checkbox select 中選中項的值
$("#mybutton").click(function(){
// 打印選中性別的值
$("input[name='gender']:checked").each(function(){
alert($(this).val());
});
// 打印愛好
$("input[name='hobby']:checked").each(function(){
alert($(this).val());
});
// 打印城市
$("select[name='city'] option:selected").each(function(){
alert($(this).val());
});
});
</script>
</head>
<body>
性別 :<input type="radio" name="gender" value="男" /> 男
<input type="radio" name="gender" value="女"/> 女 <br/>
愛好: <input type="checkbox" name="hobby" value="體育" />體育
<input type="checkbox" name="hobby" value="讀書" />讀書
<input type="checkbox" name="hobby" value="音樂" />音樂
<input type="checkbox" name="hobby" value="旅游" />旅游 <br/>
城市 :<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
</select><br/>
<input type="button" value="獲取選中的值 " id="mybutton" />
</body>
3.jQuery選擇器總結
①:對象訪問核心方法
each(function(){}) 遍歷集合
size()/length屬性 返回集合長度
index() 查找目標元素是集合中第幾個元素
②:CSS樣式操作
css(name,value) css({name:value,name:value}); 同時修改多個CSS樣式
基本過濾選擇器與 篩選過濾 API功能是相同
$("tr:first") 等價於 $("tr").first()
③:九種選擇器重點
l 基本選擇器和層級選擇器 鎖定元素
l 使用屬性過濾選擇器和內容過濾選擇器 具體選中元素
l 表單操作 :checked :selected 選中 表單選中元素
配合基本過濾選擇器,縮小選中的范圍
4.jQuery的DOM操作
使用jQuery的九種選擇器可以基本選中需要操作的對象,但是為了提高jQuery的查詢效率,可以結合jQuery的內置查找函數一起使用
①:查詢
children([expr]) 獲取指定的子元素
find(expr) 獲取指定的后代元素
parents([expr]) 獲得祖輩元素
parent() 獲取父元素
next([expr]) 獲取下一個兄弟元素
prev([expr]) 獲取前一個兄弟元素
siblings([expr]) 獲取所有兄弟元素
在XML 解析中 find 方法使用最多
對查找結果進行遍歷操作 each(function(){… }) ,在each函數中可以通過this 獲得DOM對象,$(this) 獲得jQuery對象
②:屬性操作
設置屬性 attr(name,value)
讀取屬性 attr(name)
同時設置多個屬性 attr({name:value,name:value... });
attr("checked","true") 等價於 prop("checked")
練習1:
² 點擊一個button,動態設置 div的屬性 id name class
² 嘗試能否設置一個不存在的屬性?
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 點擊一個button,動態設置 div的屬性 id name class
// 嘗試能否設置一個不存在的屬性?
$(function(){
$("#mybutton").click(function(){
// 可以設置一個不存在屬性
$("#mydiv").attr({'id':'xxxdiv','name':'xxxxname','class':'xxxclass','itcastinfo':'xxxxitcast'});
});
</script>
</head>
<body>
<div id="mydiv">itcast</div>
<input type="button" value="設置屬性" id ="mybutton" />
</body>
③:CSS操作
通過attr屬性設置/獲取 style屬性
attr('style','color:red'); // 添加style屬性
設置CSS樣式屬性
css(name, value) 設置一個CSS樣式屬性
css(properties) 傳遞key-value對象,設置多個CSS樣式屬性
設置class屬性
addClass(class) 添加一個class屬性
removeClass([class]) 移除一個class屬性
toggleClass(class)如果存在(不存在)就刪除(添加)一個類
練習2:
² 點擊button,使一個div的背景顏色變為 黃色
² 通過toggleClass(class) 實現點擊 字體變為紅色,再點擊樣式還原
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 點擊button,使一個div的背景顏色變為 黃色
$("#button1").click(function(){
$("#div1").css("background-color","yellow");
});
// 通過toggleClass(class) 實現點擊 字體變為紅色,再點擊樣式還原
$("#button2").click(function(){
$("#div1").toggleClass("divclass");
});
});
</script>
.divclass {
color:red;
}
</style>
<body>
<div id="div1">AAAAAA</div>
<input type="button" value="背景顏色變為黃色" id="button1" />
<input type="button" value="字體顏色開關" id="button2" />
</body>
④:HTML代碼&文本&值操作
l 讀取和設置某個元素中HTML內容
html() 讀取innerHTML
html(content) 設置innerHTML
l 讀取和設置某個元素中的文本內容
text() 讀取文本內容
text(content) 設置文本內容
l 文本框、下拉列表框、單選框 選中的元素值
val() 讀取元素value屬性
val(content) 設置元素value屬性
練習3:
² <div><p>傳智播客</p></div> 獲取div中 html和text 對比
² 使用val() 獲得文本框、下拉框、單選框選中的value
² 測試能否通過 val() 設置單選框、下拉框的選中效果
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// <div><p>傳智播客</p></div> 獲取div中 html和text 對比
var $obj = $("<div><p>傳智播客</p></div>");
//alert($obj.html());
//alert($obj.text());
//使用val() 獲得文本框、下拉框、單選框選中的value
$("#mybutton").click(function(){
alert($("#username").val());
alert($("input[name='gender']:checked").val());
alert($("#city").val());
});
//測試能否通過 val() 設置單選框、下拉框的選中效果
$("#city").val("廣州");
$("input[name='gender']").val(['女']);
</script>
</head>
<body>
用戶名 <input type="text" id="username" /> <br/>
性別 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" /> 女<br/>
城市 <select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
</select> <br/>
<input type="button" value="獲取val" id="mybutton"/>
</body>
設置 val控制radio select checkbox 選中
$("#city").val("廣州");
$("input[name='gender']").val(['女']);
練習4:
² 輸出所有select元素下的所有option元素中對應的文本內容
例如:<option value="中專">中專^^</option> 輸出--->中專^^
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#edu option").each(function(){
alert($(this).text());
});
});
</script>
</head>
<body>
<select id="edu">
<option>博士</option>
<option>碩士</option>
<option>本科</option>
<option>大專</option>
</select>
⑤:jQuery添加元素
l 創建元素
拼接好HTML代碼片段 $(html片段) ---- 產生jQuery對象
l 內部插入:
$node.append($newNode) 內部結尾追加
$node.prepend($newNode) 內部開始位置追加
l 外部插入:
$node.after($newNode) 在存在元素后面追加 -- 兄弟
$newNode.insertBefore($node) 在存在元素前面追加
練習5:
² 在id=edu下增加<option value="大專">大專</option>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 追加 option 內容大專
// 創建元素
var $newNode = $("<option value='大專'>大專</option>");
// 添加元素
//$("#edu").append($newNode); // 內部結尾
//$("#edu").prepend($newNode); // 內部開始
//$("option[value='本科']").after($newNode);
$newNode.insertBefore($("option:contains('高中')"));
});
<body>
<select id="edu">
<option value="博士">博士</option>
<option value="碩士">碩士</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
</select>
⑥:jQuery刪除元素
選中要刪除元素.remove() ---- 完成元素刪除
選中要刪除元素.remove(expr) ----- 刪除特定規則元素
remove刪除節點后,事件也會刪除
detach刪除節點后,事件會保留 從1.4新API
練習6:
² 分別使用detach和remove 刪除帶有click事件的p標簽,刪除后再將p 重新加入body 查看事件是否存在
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("p").click(function(){
alert($(this).text());
});
// 使用remove方法刪除 p元素,連同事件一起刪除
//var $p = $("p").remove();
// 使用detach刪除,事件會保留
var $p = $("p").detach();
$(document.body).append($p);
});
</script>
</head>
<body>
<p>AAA</p>
<div>BBB</div>
</body>
練習7:
² 表格數據添加與刪除練習
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#mybutton").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
// DOM添加
var $tr =
$("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='javascript:void(0)' onclick='del(this)'>刪除</a></td></tr>");
$("table").append($tr);
});
});
function del(o) {
// 對象o 代表a 標簽
$(o).parents("tr").remove();
}
</script>
</head>
<body>
<form>
姓名 <input type="text" id="name" />
郵箱 <input type="text" id="email" />
手機<input type="text" id="phone" /> <br/>
<input type="button" value="提交" id="mybutton"/>
</form>
<table border="1" width="400">
<tr>
<th>姓名</th>
<th>郵箱</th>
<th>手機</th>
<th>刪除</th>
</tr>
</table>
⑦:jQuery復制和替換
l 復制節點
$(“p”).clone(); 返回節點克隆后的副本,但不會克隆原節點的事件
$(“p”).clone(true); 克隆節點,保留原有事件
l 替換節點
$("p").replaceWith("<b>ITCAST</b>"); 將所有p元素,替換為"<b>ITCAST</b>“
$(“<b>ITCAST</b>”).replaceAll(“p”); 與replaceWith相反
⑧:全選以及左右移動練習
練習8:
² 全選練習
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 全選/ 全不選
$("#checkallbox").click(function(){
var isChecked = this.checked;
$("input[name='hobby']").each(function(){
this.checked = isChecked;
});
});
// 全選
$("#checkAllBtn").click(function(){
$("input[name='hobby']").attr("checked","checked");
});
// 全不選
$("#checkAllNotBtn").click(function(){
$("input[name='hobby']").removeAttr("checked");
});
// 反選
$("#checkOppoBtn").click(function(){
$("input[name='hobby']").each(function(){
this.checked = !this.checked;
});
});
</script>
<body>
請選擇您的愛好<br/>
<input type="checkbox" id="checkallbox" /> 全選/全不選 <br/>
<input type="checkbox" name="hobby" value="足球" /> 足球
<input type="checkbox" name="hobby" value="籃球" /> 籃球
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
<input type="button" value="全選" id="checkAllBtn" />
<input type="button" value="全不選" id="checkAllNotBtn" />
<input type="button" value="反選" id="checkOppoBtn" />
</body>
練習9:
² 左右移動練習
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//選中的去右邊
$("#chooseToRight").click(function(){
$("#right").append($("#left option:selected"));
});
// 全去右邊
$("#allToRight").click(function(){
$("#right").append($("#left option"));
});
// 全去左邊
$("#allToLeft").click(function(){
$("#left").append($("#right option"));
});
//選中的去左邊
$("#chooseToLeft").click(function(){
$("#left").append($("#right option:selected"));
});
});
</script>
</head>
<body>
<select id="left" multiple="multiple" size="15">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>杭州</option>
<option>武漢</option>
<option>廣州</option>
<option>深圳</option>
<option>南京</option>
</select>
<input type="button" value="-->" id="chooseToRight" />
<input type="button" value="==>" id="allToRight" />
<input type="button" value="<--" id="chooseToLeft" />
<input type="button" value="<==" id="allToLeft" />
<select id="right" multiple="multiple" size="15">
<option>鄭州</option>
</select>
</body>
5.jQuery事件
①:事件綁定
傳統js 一般一個對象只能綁定某種事件一個函數
jQuery 支持對同一個對象,同一個事件可以綁定多個函數
寫法一
$("div").click(function(){
……
});
取消綁定:$("div").unbind("click");
*** live 為滿足條件對象,實時追加綁定 、取消live事件用die方法
Demo:
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 使用live綁定
$("div").live("click",function(){
alert($(this).text());
});
//$("div").click(function(){
//alert($(this).text());
//});
// 解除綁定
//$("div").unbind("click");
// 新加入div元素沒有之前div元素綁定事件
$(document.body).append($("<div>CCC</div>"));
</script>
</head>
<body>
<div>AAA</div>
<div>BBB</div>
</body>
②:事件一次性綁定和自動觸發
一次性事件 one(type, [data], fn) 為對象綁定一次性事件,只有一次有效
觸發事件 trigger(type, [data]) 觸發目標對象指定的事件執行
練習1:
² 為頁面內所有p 元素綁定 一次性事件,點擊打印p元素中內容
² 頁面內有兩個按鈕,點擊按鈕1, 觸發按鈕2的 click事件執行
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//為頁面內所有p 元素綁定 一次性事件,點擊打印p元素中內容
$("p").one("click",function(){
alert($(this).text());
});
//頁面內有兩個按鈕,點擊按鈕1, 觸發按鈕2的 click事件執行
$("#mybutton1").click(function(){
alert("點擊了按鈕一");
// 觸發2 click事件
$("#mybutton2").trigger("click");
});
$("#mybutton2").click(function(){
alert("點擊了按鈕二");
});
});
</script>
<body>
<p>傳智播客</p>
<input type="button" value="按鈕一" id="mybutton1" />
<input type="button" value="按鈕二" id="mybutton2" />
</body>
③:事件切換
hover(mouseover,mouseout) 模擬鼠標懸停事件
toggle(fn1,fn2,fn3...) ; 鼠標點擊一次 觸發一個函數
練習1:
² 編寫一個div元素,光標移動上去 字體變為紅色,移開后 變為藍色
² 建立三張圖片,頁面顯示第一張,點擊切換到第二張,點擊切換到第三張
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 編寫一個div元素,光標移動上去 字體變為紅色,移開后 變為藍色
$("div").hover(function(){
// over
$(this).css("color","red");
},function(){
// out
$(this).css("color","blue");
});
// 建立三張圖片,頁面顯示第一張,點擊切換到第二張,點擊切換到第三張
$("img").toggle(function(){
$(this).attr("src","2.jpg");
},function(){
$(this).attr("src","3.jpg");
},function(){
$(this).attr("src","4.jpg");
});
});
</script>
<body>
<div>鼠標移動上 會變色的內容!</div>
<img src="1.jpg" width="240" height="180" />
</body>
④:事件阻止默認動作和傳播
l 默認動作阻止
$("a").click(function(event){
event.preventDefault();
// do something
});
l 取消事件冒泡
$("p").click(function(event){
event.stopPropagation();
//do something
});
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 通過event阻止默認事件
$("#dellink").click(function(event){
var isConfirm = window.confirm("確認刪除嗎?");
if(!isConfirm){
event.preventDefault();
}
});
$("div").click(function(){
alert($(this).html());
});
// 阻止事件冒泡
$("p").click(function(event){
alert($(this).html());
event.stopPropagation();
});
});
</script>
<body>
<a href="del?id=1" id="dellink">刪除資料</a>
<div><p>信息</p></div>
</body>
七、jQuery的Ajax編程
1.回顧傳統Ajax開發步驟
①:創建xmlHttpRequest對象
var xmlHttp = creatHttpRequest();
②:綁定回調函數
xmlHttp.onreadystatechange = function(){……}
③:建立連接
xmlHttp.open(“GET”,”url”);
④:發送數據
xmlHttp.send(null) //GET請求
如果是POST請求需要設置編碼格式:
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xmlHttp.send(“key=value?key=value”)
⑤:書寫回調函數
if(readyState == 4){
if(status ==200){
……
//操作xmlHttp.responseText主要針對返回HTML片段和json
//操作xmlHttp.responseXML主要針對返回XML片段。
}
}
2.jQuery的Ajax開發
jQuery提供了最底層的Ajax調用方法:$.ajax
$.ajax{
type:”POST”
url: “some.php”
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
}
// 因為使用比較繁瑣,所以在實際開發中,應用很少
為了簡化Ajax開發,jQuery提供了對$.ajax()進一步的封裝方法$load、$get、$post。這三個方法不支持跨域,$getJSON、$getScript支持跨域。
①:load方法
load方法是jQuery中最為簡單和常用的Ajax方法,處理HTML片段此方法最為合適。
語法
$("jquery對象").load("url","data") ;
url:Ajax訪問服務器地址
data:請求參數
返回內容HTML片段 ,自動放入$("jquery對象")innerHTML 中(如果返回的數據需要處理,我們可以使用get或者post)
load()方法的傳遞參數根據參數data來自動自定。如過沒有參數的傳遞,采用GET方式傳遞,否則采用POST方式
練習一:校驗用戶名是否存在
此練習在第五章的第三小節有實現代碼,這里使用jQuery的方式進行簡要的列出核心代碼:
$(function(){
// 為用戶名添加離焦事件
$("input[name='username']").blur(function(){
// 獲得當前輸入 username
var username = $(this).val();
// 提交Ajax校驗
$("#info").load("/Ajax/checkUsername" , {'username': username});
});
});
<form>
<!-- div display:block 自動換行效果 span display:inline; 不會換行 -->
用戶名 <input type="text" name="username" /> <span id="info"></span> <br/>
密碼 <input type="password" name="password"/><br/>
<input type="submit" value="注冊" />
</form>
②:get方法和post方法
語法 :
$.get/$.post("url","parameter",function(data){...});
url Ajax訪問服務器地址
parameter 代表請求參數
function 回調函數 data 代表從服務器返回數據內容
這里data代表各種數據內容 : HTML片段、JSON、XML
如果傳遞參數給服務器使用 $.post , 不需要傳參數 可以使用 $.get