Web框架技術(shù)開發(fā)(一)實(shí)驗(yàn)指導(dǎo)書_第1頁
Web框架技術(shù)開發(fā)(一)實(shí)驗(yàn)指導(dǎo)書_第2頁
Web框架技術(shù)開發(fā)(一)實(shí)驗(yàn)指導(dǎo)書_第3頁
Web框架技術(shù)開發(fā)(一)實(shí)驗(yàn)指導(dǎo)書_第4頁
Web框架技術(shù)開發(fā)(一)實(shí)驗(yàn)指導(dǎo)書_第5頁
已閱讀5頁，還剩44頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、Web框架技術(shù)開發(fā)(一)實(shí)驗(yàn)指導(dǎo)書2014.12 WEB框架開發(fā)技術(shù)(一)實(shí)驗(yàn)指導(dǎo)書實(shí)驗(yàn)一 : 掌握J(rèn)query的組件的配置和使用一、實(shí)驗(yàn)?zāi)康?.了解 jQuery核心庫(kù)及使用原理；2.初步掌握jQuery基本語法，認(rèn)識(shí)ready方法；3.掌握解決jQuery沖突的方法；4.能夠運(yùn)用編輯器制作簡(jiǎn)單網(wǎng)頁。二、實(shí)驗(yàn)內(nèi)容1. 使用文本編輯器在網(wǎng)頁中添加jQuery核心庫(kù)，在ready方法中實(shí)現(xiàn)彈框顯示信息的功能。2. 練習(xí)解決jQuery沖突的方法。3.在 IE 瀏覽器中打開編寫的網(wǎng)頁文件，查看運(yùn)行效果。3、 實(shí)驗(yàn)步驟 1. jQuery核心庫(kù)的下載jQuery的最新下載地址其中，Download

2、the compressed, production jQuery 1.9.1下載的是jquery-1.9.1.min.js文件；Download the uncompressed, development jQuery 1.9.1下載的是jquery-1.9.1.js文件。jquery-1.9.1.min.js文件一般用于網(wǎng)站部署，文件小，降低服務(wù)器負(fù)載；我們練習(xí)中建議使用jquery-1.9.1.js文件，便于查看和修改源代碼。jQuery核心庫(kù)的調(diào)用如下代碼所示：<head><meta charset="utf-8"><title>

3、jQuery Sample</title><script type="text/javascript" src="jquery-1.9.1.js"></script></head>2. jQuery核心庫(kù)的使用2.1在ready方法中實(shí)現(xiàn)彈框顯示信息的功能示例一:實(shí)現(xiàn)網(wǎng)頁加載完畢，彈框顯示“HtmlDOM加載完畢，可以操作了！”的信息的效果<body><script>$(document).ready( function() alert('HtmlDOM加載完畢，可以操作了！

4、'); );</script></body>示例二:實(shí)現(xiàn)單擊頁面所有的超鏈接，都能彈出對(duì)話框的效果<body><a href="#">超鏈接1</a><a href="#">超鏈接2</a><script type="text/javascript">$(document).ready( function() $("a").click( function() alert("嗨！你點(diǎn)擊了一個(gè)超鏈接！&qu

5、ot;); ); );</script></body>示例三:練習(xí)如何解決jQuery沖突<body><script>alert($=undefined); / 返回false，此時(shí)變量$存在var dom = ;dom.jq = $.noConflict(true); alert($=undefined); / 返回true，此時(shí)變量$已被刪除alert(jQuery=undefined); / 返回true，此時(shí)變量jQuery已被刪除dom.jq(document).ready( function() alert('HTMLDOM已

6、經(jīng)準(zhǔn)備完畢，現(xiàn)在可以操作了！'); );</script></body>四、實(shí)驗(yàn)要求1.獨(dú)立完成實(shí)驗(yàn)內(nèi)容；2.保存制作的jQuery的頁面；3.記錄實(shí)驗(yàn)過程存在的問題，書寫實(shí)驗(yàn)報(bào)告。五、思考問題1. 思考jQuery的使用范圍2. $.noConflict(true)與$.noConflict()區(qū)別3.了解jQuery解決沖突的源代碼-4-實(shí)驗(yàn)二 : 熟練掌握J(rèn)query的事件處理的編寫和事件注冊(cè)一、實(shí)驗(yàn)?zāi)康?. 理解jQuery對(duì)象及jQuery選擇器；2.熟練掌握并使用jQuery選擇器；3.理解jQuery對(duì)象的結(jié)構(gòu)；4.熟練的掌握對(duì)jQuery對(duì)象的處

7、理。二、實(shí)驗(yàn)內(nèi)容1.使用多種jQuery選擇器獲取指定的jQuery對(duì)象，并對(duì)其進(jìn)行相關(guān)操作；2.使用相關(guān)方法對(duì)jQuery對(duì)象進(jìn)行處理；三、實(shí)驗(yàn)步驟1. jQuery選擇器的使用1.層級(jí)選擇器 層級(jí)選擇器包括后代選擇器$("A B")、直接子元素選擇器$("A>B")、相鄰?fù)?jí)選擇器$("A+B")、相鄰?fù)?jí)連續(xù)選擇器$("AB")：假定網(wǎng)頁存在以下代碼：<body><div> <p>.1</p> <p>.2</p></div&g

8、t;<!- 這個(gè)是div元素之后的p元素，連續(xù)3個(gè) -><p>.3</p><p>.4</p><p>.5</p><!- 這里出現(xiàn)div元素 -><div id="d2"><p>.11</p>.6</div><!- 這個(gè)也是div元素之后的p元素 -><p>.7</p><div>.8</div><!- 這個(gè)也是div元素之后的p元素，只不過隔了一個(gè)其它元素 ->&l

9、t;h6>.9</h6><p>.10</p><div><p>.12</p></div></body>使用后代選擇器可以將網(wǎng)頁上所有P標(biāo)簽的背景都設(shè)置為綠色的：$("div p").css("background-color", "green");使用直接子元素選擇器可以將網(wǎng)頁上屬于div子元素的P標(biāo)簽的背景設(shè)置為紅色的，那么1、2、11、12這幾行的背景將被設(shè)置為紅色：$("div>p").css("

10、;background-color", "red");使用相鄰?fù)?jí)選擇器可以將網(wǎng)頁上與div同級(jí)且相鄰的P標(biāo)簽的背景設(shè)置為紅色的，那么3和7這兩行的背景將被設(shè)置為紅色：$("div+p").css("background-color", "red");使用相鄰?fù)?jí)連續(xù)選擇器可以將網(wǎng)頁上與div同級(jí)的或相鄰的P標(biāo)簽的背景設(shè)置為紅色的，那么3、4、5、7、10這幾行的背景將被設(shè)置為紅色，特別注意10這一行的背景也會(huì)被設(shè)置為紅色，因?yàn)樗?的那個(gè)div是同級(jí)元素：$("divp").css(

11、"background-color", "red");2.子元素過濾選擇器 子元素過濾選擇器是CSS的幾個(gè)偽類選擇器。假定網(wǎng)頁存在以下代碼：<body> <p>This is a siblings of another P element.0</p> <div> <a href="#">aaa</a> <p>This is a siblings of another P element.1</p> <p>This is a si

12、blings of another P element.2</p> <p>This is a siblings of another P element.3</p> <p>This is a siblings of another P element.4</p> <p>This is a siblings of another P element.5</p> <p>This is a siblings of another P element.6</p> <p>This is

13、 a siblings of another P element.7</p> <p>This is a siblings of another P element.8</p> <p>This is a siblings of another P element.9</p> <p>This is a siblings of another P element.10</p> <p>This is a siblings of another P element.11</p> <p>

14、This is a siblings of another P element.12</p> <p>This is a siblings of another P element.13</p> <p>This is a siblings of another P element.14</p> <p>This is a siblings of another P element.15</p></div><ul><li>博客</li></ul></b

15、ody>$("div p:first-child").css("color", "red");執(zhí)行上述代碼，div中的第一個(gè)p標(biāo)簽中的字體并沒有被設(shè)置成紅色，因?yàn)樗皇莇iv中的第一個(gè)子元素，a標(biāo)簽才是div中的第一個(gè)子元素，此處是算絕對(duì)位置。同理，last-child也是算絕對(duì)位置的最后一個(gè)，此處不再舉例。 $("li:only-child").css("color", "red");執(zhí)行上述代碼，觀察結(jié)果可知，“博客”被設(shè)置為紅色字體。因?yàn)閘i是其父節(jié)點(diǎn)ul下的唯一

16、子節(jié)點(diǎn)，所以滿足該選擇器。 $("p:nth-child(3n+1)").css("color", "red");執(zhí)行上述代碼，將會(huì)發(fā)現(xiàn)以0、3、6、9、12、15等數(shù)字結(jié)尾的行，其字體被設(shè)置為紅色。大家肯定會(huì)質(zhì)疑：為什么以1結(jié)尾的沒被設(shè)置為紅色字體，而以0結(jié)尾的卻符合條件呢？仔細(xì)觀察上述代碼，p之前沒有范圍限制，說明網(wǎng)頁上所有的P標(biāo)簽都行，以數(shù)字0結(jié)尾的p標(biāo)簽，其父節(jié)點(diǎn)是body，當(dāng)n取0時(shí)，正好對(duì)應(yīng)的就是該p標(biāo)簽在body子節(jié)點(diǎn)中的絕對(duì)位置，所以其滿足條件；而以數(shù)字1結(jié)尾的p標(biāo)簽，在其父節(jié)點(diǎn)下的絕對(duì)位置是2，a標(biāo)簽的絕對(duì)位置是1，

17、可它不滿足p標(biāo)簽的條件，所有aaa和以1結(jié)尾的行字體均沒被設(shè)置為紅色。其余的依次類推。3.基本過濾選擇器 基本過濾選擇器類型較多，就不一一列舉，在此選取幾個(gè)較易混淆的模式進(jìn)行講解。假定網(wǎng)頁存在以下代碼：<body><ul><span>aaa</span> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list i

18、tem 5</li> <li>list item 6</li></ul></body>$("ul li:first").css("background-color", "green");執(zhí)行上述代碼，會(huì)發(fā)現(xiàn)以數(shù)字1結(jié)尾的li其背景顏色被設(shè)置為綠色。有的同學(xué)肯定有疑惑，剛才的子元素過濾選擇器中的first-child，以數(shù)字1結(jié)尾的li是不滿足條件的，此處卻可以，這兩種有什么區(qū)別呢！此處的first是指li中的第一個(gè)即可，并沒有強(qiáng)調(diào)該li是ul下的第一個(gè)，所以此處的第一個(gè)li是

19、滿足條件的。同理，將選擇器改為$("ul li:last")的話，以數(shù)字6結(jié)尾的li的背景顏色將被設(shè)置為綠色。$("ul li:gt(2)").css("background-color", "green");/大于索引值2$("ul li:lt(2)").css("background-color", "red");/小于索引值2執(zhí)行上述代碼，會(huì)發(fā)現(xiàn)以數(shù)字1、2結(jié)尾的li的背景顏色被設(shè)置為紅色；以數(shù)字4、5、6結(jié)尾的li的背景別設(shè)置為綠色；唯有數(shù)字3結(jié)尾

20、的li的背景顏色沒被設(shè)置。原因何在呢？此處用到的是索引值，索引值一般都是從0開始算，gt(2)代表索引值大于2的，lt(2)代表索引值小于2的。數(shù)字3結(jié)尾的li，其索引正好是2，既不滿足gt(2)也不滿足lt(2)，所以其背景顏色，沒被設(shè)置，其余的li均被設(shè)置為相應(yīng)的背景顏色。 <input type="button" value="點(diǎn)擊獲取焦點(diǎn)" onClick="$(':focus').css('background-color', 'green')"/>執(zhí)行上述代碼，當(dāng)

21、鼠標(biāo)點(diǎn)擊該按鈕時(shí)，該按鈕的背景顏色變成綠色的。此處，我們?yōu)榘粹o注冊(cè)onClick事件，當(dāng)點(diǎn)擊該按鈕時(shí)，觸發(fā)該事件，此時(shí)按鈕獲取焦點(diǎn)，其背景被設(shè)置為綠色。4.內(nèi)容過濾選擇器 內(nèi)容過濾選擇器就是對(duì)節(jié)點(diǎn)間的內(nèi)容進(jìn)行篩選。下面對(duì)4種內(nèi)容過濾選擇器進(jìn)行講解：假定網(wǎng)頁存在以下代碼：<body><div style="height:20px; width:100px; ">aaa</div><div> <h1>h1</h1><span>span</span></div><di

22、v> <h2>h2</h2></div><ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li></ul> <img src="././Desert.jpg"

23、width="100" height="100"/></body>假定我們需要將包含item 3內(nèi)容的li的背景顏色設(shè)置為紅色，可以使用以下內(nèi)容過濾選擇器：$("li:contains('item 3')").css("background-color","red");若需將含有標(biāo)簽h1的div的背景設(shè)置為綠色，可以使用以下has內(nèi)容過濾選擇器來實(shí)現(xiàn)： $("div:has(h1)").css("background-color&q

24、uot;,"green");當(dāng)執(zhí)行以下代碼時(shí)，$(":empty").css("border-style","solid").css("border-color","green").css("border-width","10px");會(huì)發(fā)現(xiàn)圖片被加上了綠色邊框，有同學(xué)可能會(huì)質(zhì)疑：img標(biāo)簽中明明有內(nèi)容，為何會(huì)滿足條件呢。如果你細(xì)看定義的話，不難發(fā)現(xiàn)“子節(jié)點(diǎn)”的字眼，img沒有單獨(dú)的結(jié)束標(biāo)簽，是自閉的，它只會(huì)有屬性，不可能有子節(jié)點(diǎn)，所有

25、它肯定滿足條件。$("div:parent").css("background-color","red");執(zhí)行上述代碼，可發(fā)現(xiàn)所有有子節(jié)點(diǎn)的div的背景全被設(shè)置為紅色了，包括只含有文本的aaa的div也被設(shè)置了。所以在內(nèi)容過濾選擇器中，文本節(jié)點(diǎn)也被視為子節(jié)點(diǎn)。四、實(shí)驗(yàn)要求1. 根據(jù)指導(dǎo)書實(shí)例和操作步驟，獨(dú)立完成網(wǎng)頁設(shè)計(jì)實(shí)驗(yàn)內(nèi)容。2.記錄實(shí)驗(yàn)中出現(xiàn)的問題，以及解決辦法。五、思考問題1. 各選擇器之間的區(qū)別與聯(lián)系；2. 分析各層級(jí)選擇器的作用； 3. 總結(jié)jQuery選擇器。實(shí)驗(yàn)三 : 基本的Jquery的Ajax的組件的Ajax使用一

26、、實(shí)驗(yàn)?zāi)康?掌握jQuery獲取表單元素；2掌握jQuery操作下拉框；3掌握jQuery操作單選按鈕；二、實(shí)驗(yàn)內(nèi)容1對(duì)表單元素進(jìn)行非空驗(yàn)證；2驗(yàn)證用戶輸入信息的長(zhǎng)度是否足夠；3驗(yàn)證Email的格式；4獲取單選按鈕的值；5獲取下拉框的文字和值；三、實(shí)驗(yàn)步驟本次實(shí)驗(yàn)，主要來學(xué)習(xí)如何使用jQuery來驗(yàn)證表單。主要對(duì)表單元素進(jìn)行非空驗(yàn)證、格式驗(yàn)證、長(zhǎng)度驗(yàn)證及相關(guān)值的獲取及顯示，并對(duì)驗(yàn)證結(jié)果進(jìn)行提示。制作如下的前臺(tái)頁面：頁面布局的示例代碼如下所示：從上述代碼可以看出，每一行后面都帶有span標(biāo)簽，該標(biāo)簽用來顯示驗(yàn)證結(jié)果。首先，先看用戶名的非空驗(yàn)證。示例代碼如下：我們定義用戶名文本框失去焦點(diǎn)事件來觸發(fā)

27、驗(yàn)證，判斷當(dāng)前獲取的id為name的jQuery對(duì)象的val來判斷當(dāng)前元素是否為空。為空時(shí)，通過id為nameTip的jQuery元素進(jìn)行“用戶名不能為空”的提示，并將提示字體顏色設(shè)置為紅色；非空時(shí)，也顯示相應(yīng)的提示信息，并設(shè)置字體顏色為綠色。再來看一下兩個(gè)密碼的驗(yàn)證。這里我們需要對(duì)兩個(gè)密碼進(jìn)行非空驗(yàn)證，同時(shí)還要對(duì)密碼的長(zhǎng)度進(jìn)行驗(yàn)證，還需對(duì)2個(gè)密碼的一致性進(jìn)行驗(yàn)證。示例代碼如下：同樣是在兩個(gè)文本框的blur事件中進(jìn)行驗(yàn)證。非空驗(yàn)證此處不再解釋，看一下長(zhǎng)度的驗(yàn)證，這里用到了length屬性來判斷當(dāng)前值的長(zhǎng)度；兩次密碼的一致性是通過兩個(gè)jQuery對(duì)象的val來進(jìn)行判斷的。同樣進(jìn)行不同情況下驗(yàn)證信

28、息的設(shè)置及顯示。Email格式驗(yàn)證需要考慮的比較多，在這里我們拆開來分析。此處不再提非空驗(yàn)證。驗(yàn)證Email中必須包含關(guān)鍵字“.”和“”時(shí)，我們需要用到indexOf函數(shù)。indexOf函數(shù)是用來判斷指定字符在總字符中的位置。如總字符中存在關(guān)鍵字的話，將返回其索引值，否則返回-1。示例代碼如下：我們通過判斷indexOf返回值是否是-1，來判斷用戶所輸入的Email中是否包含這兩個(gè)特殊字符。還需要判斷關(guān)鍵字“.”和“”的相對(duì)位置；關(guān)鍵字“.”必須在“”前面，且兩者還不能緊挨著。示例代碼如下：此處仍然用到indexOf函數(shù)來判斷其位置，并用兩者的位置之差來判斷它們的相對(duì)位置。Email格式還要求

29、不能以“.”開頭，不能以“”結(jié)尾。這兩種驗(yàn)證要如何完成呢？我們?nèi)孕栌玫絠ndexOf函數(shù)和length屬性來進(jìn)行驗(yàn)證。示例代碼如下：此處需要注意的是：這里用$(this).val().indexOf("")和$(this).val().length-1的是否相等來判斷是否是以“”結(jié)尾。這里為什么是$(this).val().length-1呢？因?yàn)閕ndexOf函數(shù)返回的是索引值，是從0開始算起的，所以此處是跟length-1進(jìn)行比較。Email的驗(yàn)證實(shí)現(xiàn)仍是在blur事件中，同學(xué)們自己定義，并將非空驗(yàn)證和正確輸入兩種情況補(bǔ)全。下面來看一下jQuery如何獲取單選按鈕的值。

30、示例代碼如下：我們對(duì)單選按鈕的jQuery對(duì)象定義click事件，在該事件中實(shí)現(xiàn)獲取單選按鈕選中值的功能。此處仍然是用val來獲取值，不過這里獲取到的是單選按鈕的value屬性，這里我們通過三元條件判斷式還將其值轉(zhuǎn)化成其對(duì)應(yīng)的文本信息。我們來解釋下這個(gè)三元條件判斷式：(ustype=1)? 企業(yè):個(gè)人，當(dāng)ustype=1為true時(shí)，ustypemsg將被賦值為“企業(yè)”；若返回false時(shí)，ustypemsg將被賦值為“個(gè)人”。這樣就將value：0或1轉(zhuǎn)化成對(duì)應(yīng)的文本：個(gè)人或企業(yè)了。最后看一下如何來獲取下拉框中選中的option的value和text。示例代碼如下：此處用find遍歷函數(shù)還獲

31、取下拉框中選中的option，在通過text函數(shù)來獲取下拉框中選中項(xiàng)的文本信息；直接通過val函數(shù)就能獲取下拉框中選中項(xiàng)的value。四、實(shí)驗(yàn)要求1.獨(dú)立完成實(shí)驗(yàn)內(nèi)容；2.記錄實(shí)驗(yàn)過程存在的問題，書寫實(shí)驗(yàn)報(bào)告。五、思考問題1.思考Email格式驗(yàn)證中如何驗(yàn)證用戶所輸入的Email中只含有一個(gè)“.”和一個(gè)“”；2.思考如何用jQuery獲取下拉框中選中項(xiàng)的索引值；3. 思考下拉框如何實(shí)現(xiàn)多選，并顯示所選中的值。實(shí)驗(yàn)四 : 基本的Jquery的Ajax的組件與Struts2的結(jié)合使用一、實(shí)驗(yàn)?zāi)康?掌握jQuery的事件綁定；2掌握jQuery的事件處理函數(shù)；3掌握jQuery的遍歷方法；4. 掌握

32、jQuery的動(dòng)態(tài)添加元素；5. 使用jQuery選擇器及jQuery對(duì)象。二、實(shí)驗(yàn)內(nèi)容1對(duì)訂單記錄進(jìn)行刪除操作；2對(duì)訂單記錄進(jìn)行修改操作；3動(dòng)態(tài)添加訂單記錄；4實(shí)現(xiàn)訂單的全選功能；5實(shí)現(xiàn)訂單的批量刪除功能；三、實(shí)驗(yàn)步驟制作如下的前臺(tái)頁面頁面布局的示例代碼如下所示：在單擊修改的時(shí)候，刪除和修改按鈕將變?yōu)榇_定和取消按鈕，并將數(shù)量變成文本框可編輯模式。效果如下：所以需要事先定義刪除、修改、確定及取消的按鈕對(duì)象及文本框?qū)ο螅纠a如下：對(duì)于添加按鈕的功能，需要達(dá)到動(dòng)態(tài)添加一列的效果，我們創(chuàng)建ck對(duì)象用于表示checkbox，創(chuàng)建newTr對(duì)象來存放新列的內(nèi)容。示例代碼如下：在拼湊列時(shí)，就用到了事先

33、定義好的btnDelete和btnUpdate兩個(gè)按鈕對(duì)象。先來實(shí)現(xiàn)刪除功能。刪除操作應(yīng)給用戶提示，用于確認(rèn)是否需要執(zhí)行刪除操作，在此我們使用confirm函數(shù)來實(shí)現(xiàn)，通過它的返回結(jié)果，我們可以獲取用戶是否確認(rèn)執(zhí)行刪除操作。若用戶確認(rèn)刪除，可以通過$(this).closest("tr")函數(shù)找到該列所在的行，在調(diào)用remove()進(jìn)行刪除。在此之后還需判斷“全選”按鈕是否被選中，通過prop函數(shù)，對(duì)“全選”按鈕的checked屬性進(jìn)行設(shè)置。示例代碼如下：其中，調(diào)用了jQuery的遍歷方法：closest()來實(shí)現(xiàn)從元素本身開始，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素

34、；使用了jQuery的操作屬性的方法prop來對(duì)指定屬性進(jìn)行設(shè)置。這里通過判斷所有的checkbox的個(gè)數(shù)和選中的checkbox的個(gè)數(shù)是否相等，來判定“全選”按鈕是否選中。更新按鈕，需要實(shí)現(xiàn)的操作是：將數(shù)量給出文本框的格式，并在文本框中顯示原本的數(shù)量，并將“刪除”和“修改”按鈕改成“確認(rèn)”和“取消”按鈕。這里我們要用到find函數(shù)，基本過濾選擇器eq和html函數(shù)。示例代碼如下：其中：用到了jQuery的遍歷函數(shù)：find() 方法用于獲得當(dāng)前元素集合中每個(gè)元素的后代，通過選擇器、jQuery 對(duì)象或元素來篩選。此處，我們使用“td”標(biāo)簽來篩選，在此篩選出來的集合上再使用基本過濾選擇器eq來

35、獲取到具體的列，再通過html函數(shù)來設(shè)置節(jié)點(diǎn)中的內(nèi)容。確認(rèn)按鈕的功能與修改是反向的，需要把本文框去掉，把將“確認(rèn)”和“取消”按鈕改成“刪除”和“修改”按鈕 。用到的方法給修改按鈕一致。示例代碼如下：取消按鈕是對(duì)修改按鈕的撤銷，所以這里我們需要建一個(gè)全局變量oldvalue用來存放修改前的數(shù)量，在取消事件中，將數(shù)量還原成原本的值。示例代碼如下：實(shí)現(xiàn)了“確認(rèn)”、“取消”、 “刪除”和“修改”按鈕后。我們?cè)賮砜纯疵恳恍械腸heckbox的功能。checkbox有2種狀態(tài)：選中、沒選中，設(shè)置每一行的checkbox選中狀態(tài)的同時(shí)，還需判斷并設(shè)置“全選”按鈕的狀態(tài)。示例代碼如下：添加按鈕需要實(shí)現(xiàn)動(dòng)態(tài)添加

36、一列，這個(gè)列的內(nèi)容就是我們事先定義好的newTr對(duì)象。這里使用append函數(shù)在指定的jQuery對(duì)象下添加元素。這里還注意的一個(gè)細(xì)節(jié)就是：添加完新的一列，若原本已選中的“全選”按鈕，將需要重新判斷是否選中。示例代碼如下：“批量刪除”的功能如何實(shí)現(xiàn)呢？就是循環(huán)執(zhí)行刪除操作。這里我們使用each來實(shí)現(xiàn)批量刪除的操作。示例代碼如下：可以看出就是在原本的刪除功能上加循環(huán)操作，對(duì)所有checkbox為的checked的行執(zhí)行刪除行的功能，在重新判斷“全選”按鈕的選中狀態(tài)。其中：each() 方法規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)。四、實(shí)驗(yàn)要求1.獨(dú)立完成實(shí)驗(yàn)內(nèi)容；2.記錄實(shí)驗(yàn)過程存在的問題，書寫實(shí)驗(yàn)報(bào)告

37、。五、思考問題1.思考jQuery屬性操作下的prop（）和attr（）的區(qū)別和聯(lián)系；2.思考事件綁定方法live和bind的區(qū)別及使用場(chǎng)合；3. 思考jQuery遍歷中closest和find的區(qū)別。實(shí)驗(yàn)五 :建立一個(gè)Struts2 工程Ø 1在MyEclipse中新建web工程Ø 2在struts--allstruts-解壓struts2-blank.war( 最基礎(chǔ)的示例程序 )Ø 3進(jìn)入struts-appsstruts2-blankWEB-INFclasses下把struts.xml拷到web工程的src下面，因

38、為工程編譯完它默認(rèn)就把src下的文件放到class文件下面。、Ø 4.拷類庫(kù)，在這個(gè)項(xiàng)目的lib文件下面拷把jar放入lib后看不見jar文件，是因?yàn)镸yEclipse默認(rèn)視圖是package Explorer，如果要看硬盤上對(duì)應(yīng)的視圖，應(yīng)該打開windows-Show View-other-navigatior4.配置web.xml,參考struts自帶的web.xml，把filter的配置拷過來<filter> <filter-name>struts2</filter-name> <filter-class>org.apache.s

39、truts2.dispatcher.ng.filterNg：next generation下一代的filter，用的是2.1的；跟2.0有區(qū)別，2.0用的filter用的是：org.apache.struts2.dispatcher.FilterDispatcher.StrutsPrepareAndExecuteFilter通過這個(gè)名字可以看出跟2.0的區(qū)別，這里調(diào)用了兩個(gè)filter，一個(gè)是prepare一個(gè)是execute filter.</filter-class> </filter> <filter-mapping> <filter-name&

40、gt;struts2</filter-name> <url-pattern>/*</url-pattern></filter-mapping>l 第一個(gè)示例程序Hello Struts<struts><constant name="struts.devMode" value="true" />Struts常量的配置，struts.devMode開發(fā)模式，開發(fā)模式改為true之后，修改配置文件可以馬上生效,不用重啟服務(wù)器。<package name="default&q

41、uot; namespace="/" extends="struts-default"> <action name="hello"> <result>/hello.jsp</result> </action> </package></struts>http:/localhost:8080/strust2_0100_Introduction/這里的“/”對(duì)應(yīng)namespace的“/”,因?yàn)閍ction 的name屬性為hello，所以敲 http:/local

42、host:8080/strust2_0100_Introduction/hello 或者h(yuǎn)ttp:/localhost:8080/strust2_0100_Introduction/hello.action默認(rèn)的aciton是可以省略的跳轉(zhuǎn)到hello.jsp，第一個(gè)示例程序成功！l Struts2讀源碼配置文件中的 <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>一看就應(yīng)該知道它是對(duì)應(yīng)一個(gè)類，在jar文件中找到對(duì)應(yīng)的源碼編

43、譯完的class文件，查看源碼: jar文件點(diǎn)右鍵-àproperties-àJava Source AttachmentàExternal Folder (外部文件)àstruts--all/struts-/src/core/src/main/java 點(diǎn)擊class文件可以查看源碼了,假如想看它的doc文檔，同樣的方法jar文件點(diǎn)右鍵-àproperties-àJavadoc Location-à導(dǎo)入doc就可以在源碼中右鍵或者F1觀察對(duì)應(yīng)的文檔了。l 敲尖括號(hào)不提示的問題Struts.xml

44、文件頭定義了<!DOCTYPE struts PUBLIC "-/Apache Software Foundation/DTD Struts Configuration 2.0/EN""/dtds/struts-2.0.dtd在這個(gè)url這里定義了當(dāng)前這篇xml語法的位置。可以這個(gè)位置每次它要去網(wǎng)上拿，所以不一定能生效。">配置：windows-preferences-catalog-。xmlxml CatalogAddAdd入本地定義當(dāng)前xml的dtd文件：找到struts2-core-2.2.

45、1.1.jar解壓開找到struts-2.1.7.dtd這就是我們寫xml要參考的那個(gè)文件完成，驗(yàn)證代碼提示成功！l Struts2的運(yùn)行機(jī)制當(dāng)你在客戶端敲http:/localhost:8080/strust2_0100_Introduction/hello首先找到：strust2_0100_Introduction這個(gè)web application，找到后去執(zhí)行這個(gè)web application下的web.xmlTomcat接收到請(qǐng)求之后，會(huì)發(fā)現(xiàn)這個(gè)web.xml下面，配了一個(gè)filter，而這個(gè)filter過濾所有的url地址，所以當(dāng)我們?cè)诘刂窓谇胔ttp:/localhost:8080

46、/strust2_0100_Introduction/hello后，會(huì)被StrutsPrepareAndExecuteFilter接收到<filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>s

47、truts2</filter-name> <url-pattern>/*</url-pattern></filter-mapping>StrutsPrepareAndExecuteFilter接收到后url情求后，它首先看namespaceStruts.xml<package name="default" namespace="/" extends="struts-default"> <action name="hello" > <res

48、ult>/hello.jsp</result> </action></package>查到“/”后面的hello，它就會(huì)去package下面查是否有name屬性叫“hello”的action，有的話，找里面對(duì)應(yīng)的result是誰-àhello.jspStruts的好處就是：我可以把“請(qǐng)求”和“視圖展現(xiàn)”分開，而不是寫死。分開的好處就是：如果要換成其他視圖，配一下就好了，所以更加靈活。Struts核心的本質(zhì)就是解決了：把你的請(qǐng)求和最后的結(jié)果分開。Important!面試！l Struts的namespace示例工程Struts2_0200_Na

49、mespaceStruts.xml<struts> <constant name="struts.devMode" value="true" /> <package Java的package給我們的類打包，避免類重名，java的package作用也是一樣。比如我們有兩個(gè)action都叫index，一個(gè)前臺(tái)一個(gè)后臺(tái)，就用package name=”front” package name=”backgroud”name="front" extends="struts-default" na

50、mespacenamespace是什么，你想訪問的action前面就應(yīng)該加上什么。比如這里就是/front/index.action=Namespace是可以不寫的，默認(rèn)為空！"/front"> <action name="index"> <result>/Namespace.jsp</result> </action> </package> <package name="main" extends="struts-default" names

51、pace=""Namespace不寫等于Namespace為空，Namespace等于空，意味著：只要你在url敲index.action不管你在哪里敲，路勁多么深，只有最后是“index.action”就可以訪問這個(gè)action。> <action name="index"> <result>/Namespace.jsp</result> </action> </package></struts>所以namespace為空意味著：只要找到一個(gè)index.action，沒有找到

52、精確的對(duì)應(yīng)的namespace，全部都交給namespace為空的這個(gè)package去處理，所以這個(gè)package囊括了其他所有package處理不了的action。l Struts自定義具體視圖的返回示例工程Struts2_0300_Actionl 修改jsp模板字符編碼：windows-preferences- JSP 修改編碼為UTF-8即可IndexAction1.javapublic class IndexAction1 public String execute() return "success"IndexAction2.javapublic class In

53、dexAction2 implements Action public String execute() return "success"真正企業(yè)開發(fā)只用這第三種！另外兩種忘記！IndexAction3.javapublic class IndexAction3 extends ActionSupport public String execute() return "success"<struts> <constant name="struts.devMode" value="true" /&g

54、t; <package name="front" extends="struts-default" namespace="/"> <action name="index" class="com.bjsxt.struts2.front.action.IndexAction1假如沒有配class這個(gè)屬性，默認(rèn)執(zhí)行的是Struts2自帶的action：ActionSupport，在struts2里面沒有ActionSupport這個(gè)類的源碼，因?yàn)閟truts2用到了xwork這個(gè)框架，所以想看

55、到ActionSupport的話，必須下載xwork的源碼"Class屬性表示，當(dāng)你訪問index這個(gè)action的時(shí)候，它會(huì)去執(zhí)行IndexAction1這個(gè)類里面的execute()方法.> <result name="success">/ActionIntroduction.jsp</result> </action> </package></struts>具體視圖的返回可以由用戶自己定義的Action來決定具體的手段是根據(jù)返回的字符串找到對(duì)應(yīng)的配置項(xiàng)，來決定視圖的內(nèi)容具體Action的實(shí)現(xiàn)可

56、以是一個(gè)普通的java類，里面有public String execute方法即可或者實(shí)現(xiàn)Action接口不過最常用的是從ActionSupport繼承，好處在于可以直接使用Struts2封裝好的方法如果不配置class屬性，默認(rèn)執(zhí)行xwork框架的ActionSupport這個(gè)action，這個(gè)action就有execute這個(gè)方法，return success。l Struts路徑問題示例工程：Struts2_0400_Pathstruts2中的路徑問題是根據(jù)action的路徑而不是jsp路徑來確定，所以盡量不要使用相對(duì)路徑。雖然可以用redirect方式解決，但redirect方式并非必

57、要。 解決辦法非常簡(jiǎn)單，統(tǒng)一使用絕對(duì)路徑。（在jsp中用request.getContextRoot方式來拿到webapp的路徑） 或者使用myeclipse經(jīng)常用的，指定basePath先點(diǎn)擊鏈接http:/localhost:8080/Struts2_0400_Path/path/path.action 跳轉(zhuǎn)到path.jsp 頁面在path.jsp頁面上有鏈接<a href="index.jsp">index.jsp</a>雖然在webRoot上面index.jsp和path.jsp同級(jí)，但是點(diǎn)擊index.jsp卻跳到http:/localh

58、ost:8080/Struts2_0400_Path/path/index.jsp如果改成<a href="/index.jsp">index.jsp</a>跳到http:/localhost:8080/index.jsp 因?yàn)镴SP中“/”代表整個(gè)站點(diǎn)的根路徑而不是應(yīng)用的根路徑。解決方案是：永遠(yuǎn)使用絕對(duì)路徑。 <%String path = request.getContextPath();String basePath = request.getScheme()+":/"+request.getServerName()+

59、":"+request.getServerPort()+path+"/"%><base Base標(biāo)簽的意思是當(dāng)前所有url鏈接前面都會(huì)自動(dòng)加上base標(biāo)簽配置的href路徑href="<%=basePath%>" />request.getContextPath()會(huì)拿到webapplication的名稱：Struts2_0400_Pathrequest.getScheme()拿到“http”字符串request.getServerName()拿到“l(fā)ocalhost”request.getServerP

60、ort()拿到“8080” l 動(dòng)態(tài)方法調(diào)用<body>Action執(zhí)行的時(shí)候并不一定要執(zhí)行execute方法可以在配置文件中配置Action的時(shí)候用method=來指定執(zhí)行哪個(gè)方法也可以在url地址中動(dòng)態(tài)指定（動(dòng)態(tài)方法調(diào)用DMI）（推薦）<a href="<%=context %>/user/userAdd">添加用戶</a><a href="<%=context %>/user/user!add重點(diǎn)只用這一種，叫做動(dòng)態(tài)方法調(diào)用DMI.">添加用戶</a>前者會(huì)產(chǎn)生太多

61、的action，所以不推薦使用</body><struts> <constant name="struts.devMode" value="true" /> <package name="user" extends="struts-default" namespace="/user"> <action name="userAdd" class="com.bjsxt.struts2.user.action.User

62、Action" method="add用method參數(shù)指定執(zhí)行的方法。默認(rèn)是execute(),通過method參數(shù)可以改變，不過不推薦用，因?yàn)樗鼤?huì)產(chǎn)生太多的action，可以忘記。"> <result>/user_add_success.jsp</result> </action> <action name="user" class="com.bjsxt.struts2.user.action.UserAction"> <result>/user_add_success.jsp</result> </action> </package></struts> 實(shí)驗(yàn)六:Action接收參數(shù)的方式Action有三種接收參數(shù)的方式1. 屬性接收參數(shù)2. 用

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論