腳本語言知識總結.

時間 2019-11-30

標籤腳本語言知識總結简体版

原文原文鏈接

腳本語言知識總結.

核心內容概述

1.JavaScript增強，涉及到ECMAScript語法、BOM對象、DOM對象以及事件。javascript

2.Ajax傳統編程。php

3.jQuery框架，九種選擇器爲核心學習內容css

4.JQuery UI插件html

5.jQuery Ajax編程java

6.jQuery第三方插件node

7.反向Ajax編程(彗星)jquery

1、JavaScript基礎增強

JavaScript是在瀏覽器內容運行，無需編譯、解釋執行動態腳本語言，是一種弱類型語言，全部變量使用var定義。web

JavaScript的3個組成部分分別爲：核心(ECMAScript)、文檔對象模型(DOM)、瀏覽器對象模型(BOM)ajax

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);

2、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>

3、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); 該方法能夠返回一個節點的克隆節點，克隆節點包含原節點的屬性和子元素

此節內容有大量的練習，建議你們作寫，加強代碼的熟練度。

4、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

5、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」) 設置集合類型變量別名

6、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>

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。