[Java面試九]腳本語言知識總結.

本文轉載自查看原文 2016-07-24 23:40 3834 面試技巧

核心內容概述

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進行引入】

<title>JavaScript程序編寫</title>

// 編寫JavaScript代碼

alert(1);

</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:

// 定義所有變量都用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：

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：

// 定義數組使用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核心語法——函數

①：函數定義的三種方式

注意：第二種方式使用越來越多，第三種不常用，第一種常用

// 方式一

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>

<title>Untitled Document</title>

function showOutter(){

// 獲得輸入內容

var content = document.getElementById("content").value;

// 將輸入的內容顯示到主窗體info 中

window.parent.document.getElementById("info").innerHTML = content;

}

</script>

</head>

<body>

</body>

主窗體：1.html

<head>

<title>父子窗體通信</title>

function showContent(){

// 用主窗體讀取子窗體內容

var content = window.frames[0].document.getElementById("content").value;

alert(content);

}

</script>

</head>

<body>

</body>

②：window的open close

<head>

<title>打開關閉窗體</title>

//用一個變量記錄打開的網頁

var openNew;

function openWindow(){

openNew = window.open("http://www.itcast.cn");

}

//關閉的時候需要注意關閉的是打開的網頁，而不是本身

function closeWindow(){

openNew.close();

}

</script>

</head>

<body>

</body>

③：window彈出對話框相關的3個方法

alert()警告框 confirm()確認框 prompt()輸入框

alert("這是警告框！")

var con = confirm("你想好了嗎？");

alert(con);

var msg = prompt("請輸入姓名","張三");

alert(msg);

</script>

④：定時操作setInterval & setTimeout

setInterval：定時任務會重復執行

setTimeout：定時任務只執行一次

在頁面動態顯示當前時間

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>

</body>

2.history 對象

代表歷史記錄，常用來制作頁面中返回按鈕

3.Location 對象

代表瀏覽器導航在js函數中發起href鏈接效果

location.href='跳轉后url' ; 等價於 <a href='xxx'></a>

三、JavaScript文檔對象模型DOM

<html>

<head>

<title>History和Location使用</title>

</head>

<body>

</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

//在每一個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>

</body>

②：獲得node后

如果node是元素，去操作里面的文本內容 innerHTML (HTML頁面內所有元素，一定是HTML 元素，innerHTML 是所有HTML元素通用屬性 )

XML 取得一個元素內部文本內容 element.firstChild.nodeValue(看批注32)

③：通過節點Node相對位置關系訪問元素

childNodes

firstChild

lastChild

nextSibling

parentNode

previousSibling

用2種方式打印——明天休息

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>

function overtest(){

alert("移動到圖片上方");

}

</script>

</head>

<body>

</body>

②：在JS代碼中為元素添加事件

<head>

function overtest(){

alert("移動到圖片上方");

}

window.onload = function(){

document.getElementById("myimg").onmouseover = overtest;

}

</script>

</head>

<body>

</body>

總結：優先使用第二種，將js代碼與HTML元素代碼分離開，更加方便統一管理維護。

問題：HTML 元素添加事件，與JS添加事件是否可以完全等價？

在實際開發中，如果傳參數，使用HTML元素綁定事件，如果不傳參數，使用JS綁定事件。傳參數也可以使用與JS綁定事件【使用匿名函數】。示例代碼如下：

<head>

<title>HTML事件綁定與JS綁定</title>

function clicktest(o){

alert(o);

}

window.onload = function(){

document.getElementById("mybutton").onclick = function(){

clicktest('次奧');

}

</script>

</head>

<body>

</body>

2.鼠標移動事件

Mousemove：鼠標移動時觸發事件鼠標跟隨效果

Mouseover：鼠標從元素外，移動元素之上，信息提示、字體變色

Mouseout：鼠標從元素上，移出元素范圍，和mouseover一起使用

3.鼠標點擊事件（左鍵相關事件）

click 鼠標單擊事件

dbclick 鼠標雙擊事件

mousedown/mouseup 鼠標按下、按鍵彈起 click = mousedown + mouseup;

oncontextmenu 鼠標右鍵菜單事件（不是瀏覽器兼容事件）

4.聚焦離焦事件

focus 聚焦頁面焦點定位到目標元素

blur 離焦頁面焦點由目標元素移開

Demo:

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:

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.默認事件的阻止和傳播阻止

使用場景極為常見，超鏈接用戶點擊后，取消了不發生跳轉。

// 阻止默認事件發生

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>

<a href="del?id=1" onclick="confirmDel(event);">這是一個鏈接</a>

<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：

// 第一步創建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"});

重構練習2

運行效果：

④：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寫法：

window.onload = function(){

alert("傳統JS，Ok");

}

</script>

jQuery寫法：

$(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:

$(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標簽

$(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

$(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>

<p>info

</p>

</div>

</p>

</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背景綠色

$(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"); //設置執行動畫元素

$(this).slideUp("slow");

});

</script>

<body>

<h2>這是一張商品表</h2>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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字體為藍色

$(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>

</body>

⑤：可見性過濾選擇器

根據元素的可見與不可見狀態來選取元素

:hidden 選取所有不可見元素 $("tr:hidden")

:visible 選取所有可見的元素 $("tr:visible")

練習5：

² 為表單中所有隱藏域添加 class屬性，值為itcast

² 設置table所有可見 tr 背景色黃色

² 設置table所有隱藏tr 字體顏色為紅色，顯示出來，並輸出tr中文本值

$(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" />

</form>

<table>

</tr>

</tr>

<tr>

</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標簽中內容

$(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(){

alert($(this).html());

});

</script>

<body>

<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元素字體為藍色

$(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>

</body>

⑧：表單過濾選擇器

選取表單元素的過濾選擇器

:input 選取所有<input>、<textarea>、<select >和<button>元素

:text 選取所有的文本框元素

:password 選取所有的密碼框元素

:radio 選取所有的單選框元素

:checkbox 選取所有的多選框元素

:submit 選取所有的提交按鈕元素

:image 選取所有的圖像按鈕元素

:reset 選取所有重置按鈕元素

:button 選取所有按鈕元素

:file 選取所有文件上傳域元素

:hidden 選取所有不可見元素

練習8：

² 對所有text框和password框，添加離焦事件，校驗輸入內容不能為空

² 對button 添加點擊事件，提交form表單

$(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>

用戶名 <input type="text" name="username" /><br/>

密碼 <input type="password" name="password" /><br/>

性別 <input type="radio" name="gender" value="男" />男

城市 <select name="city">

</select>

個人簡介 <textarea rows="5" cols="60" name="introduce"></textarea>

</form>

</body>

⑨：表單對象屬性過濾選擇器

選取表單元素屬性的過濾選擇器

:enabled 選取所有可用元素

:disabled 選取所有不可用元素

:checked 選取所有被選中的元素，如單選框、復選框

:selected 選取所有被選中項元素，如下拉列表框、列表框

練習9：

² 點擊button 打印radio checkbox select 中選中項的值

$(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="checkbox" name="hobby" value="體育" />體育

<input type="checkbox" name="hobby" value="讀書" />讀書

<input type="checkbox" name="hobby" value="音樂" />音樂

城市：<select name="city">

</select><br/>

</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

² 嘗試能否設置一個不存在的屬性？

// 點擊一個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>

</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) 實現點擊字體變為紅色，再點擊樣式還原

$(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>

</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() 設置單選框、下拉框的選中效果

$(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="男" />男

城市 <select id="city">

</select> <br/>

</body>

設置 val控制radio select checkbox 選中

$("#city").val("廣州");

$("input[name='gender']").val(['女']);

練習4：

² 輸出所有select元素下的所有option元素中對應的文本內容

例如:<option value="中專">中專^^</option> 輸出--->中專^^

$(function(){

$("#edu option").each(function(){

alert($(this).text());

});

</script>

</head>

<body>

</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>

$(function(){

// 追加 option 內容大專

// 創建元素

var $newNode = $("<option value='大專'>大專</option>");

// 添加元素

//$("#edu").append($newNode); // 內部結尾

//$("#edu").prepend($newNode); // 內部開始

//$("option[value='本科']").after($newNode);

$newNode.insertBefore($("option:contains('高中')"));

});

</script>

<body>

</select>

⑥：jQuery刪除元素

選中要刪除元素.remove() ---- 完成元素刪除

選中要刪除元素.remove(expr) ----- 刪除特定規則元素

remove刪除節點后，事件也會刪除

detach刪除節點后，事件會保留從1.4新API

練習6：

² 分別使用detach和remove 刪除帶有click事件的p標簽，刪除后再將p 重新加入body 查看事件是否存在

$(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>

</body>

練習7：

² 表格數據添加與刪除練習

$(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/>

</form>

<hr/>

<tr>

</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：

² 全選練習

$(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" name="hobby" value="足球" /> 足球

<input type="checkbox" name="hobby" value="籃球" /> 籃球

<input type="checkbox" name="hobby" value="游泳" /> 游泳

</body>

練習9：

² 左右移動練習

$(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>

<input type="button" value="-->" id="chooseToRight" />

<input type="button" value="==>" id="allToRight" />

</select>

</body>

5.jQuery事件

①：事件綁定

傳統js 一般一個對象只能綁定某種事件一個函數

jQuery 支持對同一個對象，同一個事件可以綁定多個函數

綁定事件函數到對象有兩種寫法

寫法一

$("div").click(function(){

……

});

取消綁定：$("div").unbind("click");

*** live 為滿足條件對象，實時追加綁定、取消live事件用die方法

Demo:

$(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>

</body>

②：事件一次性綁定和自動觸發

一次性事件 one(type, [data], fn) 為對象綁定一次性事件，只有一次有效

觸發事件 trigger(type, [data]) 觸發目標對象指定的事件執行

練習1：

² 為頁面內所有p 元素綁定一次性事件，點擊打印p元素中內容

² 頁面內有兩個按鈕，點擊按鈕1，觸發按鈕2的 click事件執行

$(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>

</body>

③：事件切換

hover(mouseover,mouseout) 模擬鼠標懸停事件

toggle(fn1,fn2,fn3...) ; 鼠標點擊一次觸發一個函數

練習1：

² 編寫一個div元素，光標移動上去字體變為紅色，移開后變為藍色

² 建立三張圖片，頁面顯示第一張，點擊切換到第二張，點擊切換到第三張

$(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>

</body>

④：事件阻止默認動作和傳播

l 默認動作阻止

$("a").click(function(event){

event.preventDefault();

// do something

});

l 取消事件冒泡

$("p").click(function(event){

event.stopPropagation();

//do something

});

$(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>

</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>

用戶名 <input type="text" name="username" /> <span id="info"></span> <br/>

密碼 <input type="password" name="password"/><br/>

</form>

②：get方法和post方法

語法：

$.get/$.post("url","parameter",function(data){...});

url Ajax訪問服務器地址

parameter 代表請求參數

function 回調函數 data 代表從服務器返回數據內容

這里data代表各種數據內容： HTML片段、JSON、XML

如果傳遞參數給服務器使用 $.post , 不需要傳參數可以使用 $.get

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Lua腳本語言基礎知識 Shell腳本語言學習總結 Java動態調用腳本語言Groovy java+win7+eclipse+Maven+sikuli 配置總結---圖形腳本語言 bash腳本語言 VBscript腳本語言什么是腳本語言常用的腳本語言有哪些腳本語言 ES 什么是腳本語言