【文章內(nèi)容簡(jiǎn)介】 帶有 src 屬性的全部元素。$([ src =39。javascript:void(0)39。]) 選取頁(yè)面上帶有 src值等于 39。javascript:void(0) 的全部元素。$([ src!=39。39。javascript:void(0)39。]) 選取頁(yè)面上帶有 src值不等于 39。javascript:void(0) 的全部元素。$([ src ^=39。//39。]) 選取頁(yè)面上 src值以 // 開(kāi)頭的全部元素。$([ src $=39。end39。]) 選取頁(yè)面上 src值以 39。end39。 結(jié)尾的全部元素。事件處理：直接綁定指定事件，事件類型即方法名，支持click、focus、blur、submit等。$(user).click(function(){//這里填寫(xiě)點(diǎn)擊后的邏輯})。用on來(lái)綁定事件，off來(lái)解綁事件。，之前使用的是bind等方法。$(button).on(39。click39。,function(){//這里填寫(xiě)點(diǎn)擊后的邏輯})。AJAX：jQuery $.get() 方法：$.get (請(qǐng)求地址, 返回函數(shù))。jQuery $.post() 方法：$. post (請(qǐng)求地址,請(qǐng)求參數(shù),回調(diào)函數(shù))。jQuery $.ajax() 方法(即我通常使用的方法)： $,ajax({ url:”xxx”, 請(qǐng)求的地址 type:”post”, 請(qǐng)求的方式 data:{ xx:xx, xxx:xxx}, 請(qǐng)求的參數(shù)async:false, 是否異步請(qǐng)求cache:false, 是否緩存dataType:”json”, 返回值類型success:function(){ }, 請(qǐng)求成功執(zhí)行方法error:function(){ } 請(qǐng)求失敗執(zhí)行方法})。更多的方法和具體如何的使用可以去查詢jQuery的API。 Bootstrap Bootstrap是一個(gè)基于CSS、JS和html的前端UI框架，最開(kāi)始出現(xiàn)在Twitter上面，因其簡(jiǎn)潔美觀的界面而非常受歡迎。Bootstrap是一款如同其它框架設(shè)計(jì)的有相同原則的框架，主要目的就是自由簡(jiǎn)單，讓開(kāi)發(fā)人員的開(kāi)發(fā)更加的高效便捷。它的設(shè)計(jì)師是來(lái)自Twitter的Jacob Thornton和Mark Otto，他們二人用動(dòng)態(tài)的CSS語(yǔ)言Less合作設(shè)計(jì)出了這個(gè)優(yōu)秀的HTML/CSS框架。因環(huán)境所致，大部分小的web開(kāi)發(fā)公司并不會(huì)有美工這個(gè)的職業(yè)，讓形象在大多數(shù)人心中并不友好的程序員來(lái)進(jìn)行頁(yè)面的規(guī)劃還是不現(xiàn)實(shí)的，Bootstrap以其優(yōu)美大方的界面而受眾多程序員的歡迎，并且在開(kāi)源代碼庫(kù)GitHub上一直很熱門，包括在美國(guó)航空航天局的微軟全國(guó)廣播公司的Breaking News頁(yè)面用的都是這個(gè)框架。在我國(guó)的一些移動(dòng)端的開(kāi)發(fā)人員所熟悉的WeX5等開(kāi)源UI框架也是對(duì)Bootstrap的源碼進(jìn)行優(yōu)化后設(shè)計(jì)出來(lái)的。Bootstrap中有著非常充足的Web組件，一般的常用組件都有，不常用的也可以基于部分的組件組合而成，具體包括的組件有：分頁(yè)、進(jìn)度條、縮略圖、下拉菜單、按鈕下拉菜單、按鈕組、導(dǎo)航、導(dǎo)航條、路徑導(dǎo)航等。Bootstrap自還有13個(gè)基于jQuery的動(dòng)態(tài)加載的插件，這些插件使Bootstrap中的相關(guān)組件更加的靈活。其中就有：模式對(duì)話框、下拉菜單、滾動(dòng)監(jiān)聽(tīng)、按鈕等。Bootstrap同時(shí)還可以根據(jù)自己的需求對(duì)展示主體和效果進(jìn)行一個(gè)定制，只要輸入自己滿意的樣式就可下載響應(yīng)的js和css包。因?yàn)檫@些功能，用它搭建一個(gè)完整美觀的網(wǎng)站就非常的容易了。 EasyUIEasyUI包含了豐富的基于jQuery的UI插件，它的目標(biāo)就是使web開(kāi)發(fā)人員可以更快捷、更輕松、更方便的開(kāi)發(fā)出一個(gè)界面友好，功能強(qiáng)大的網(wǎng)站。EasyUI使用戶摒棄了復(fù)雜的JS程序，并且不需要過(guò)多的去了解CSS，只需要對(duì)html的標(biāo)簽有著熟悉的使用就可以了。EasyUI提供的UI插件快捷方便，比如：Layout、Menu與Button、Form、Window、DataGrid和Tree等等，并且可以對(duì)多個(gè)功能組合使用和擴(kuò)展，比如說(shuō)樹(shù)形表格、可編輯的表格和報(bào)表等等。相對(duì)于extjs來(lái)說(shuō)，EasyUI就是一個(gè)輕量級(jí)的框架，雖然功能沒(méi)有前者豐富，但是頁(yè)面上更加美觀，并且可以在官網(wǎng)上進(jìn)行主題的定制，同時(shí)還有多個(gè)主題供用戶選擇，這一點(diǎn)還是非常的不錯(cuò)的。EasyUI相比較而言有如下的幾個(gè)特點(diǎn)：它是以jQuery為基礎(chǔ)的，并且擁有豐富的UI組件和插件。提供和服務(wù)器有交互插件的數(shù)據(jù)加工和渲染。EasyUI有直接寫(xiě)成JS和在標(biāo)簽上加屬性兩種方式來(lái)對(duì)組件進(jìn)行加工渲染。在對(duì)應(yīng)標(biāo)簽添加dataoptions這個(gè)屬性就可以完美的支持HTML5。對(duì)一個(gè)頁(yè)面進(jìn)行開(kāi)發(fā)時(shí)使用EasyUI會(huì)更加快速。使用起來(lái)非常簡(jiǎn)便，而且功能相當(dāng)豐富?？梢园凑兆约旱男枨髮?duì)相關(guān)組件進(jìn)行組合、擴(kuò)展，還有多種主題可供選擇。現(xiàn)在仍在繼續(xù)更新，所以可以繼續(xù)的改進(jìn)和彌補(bǔ)自己的不足之處。 HTML語(yǔ)言HTML的全稱叫做Hyper Text Markup Language，中文叫超文本標(biāo)記語(yǔ)言，是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用。因?yàn)閔tml頁(yè)面可以包含圖片、音樂(lè)、視頻、鏈接等非文本模塊，所以叫做“超文本”。一個(gè)html頁(yè)面包括head和body兩個(gè)部分，head部分就是這個(gè)頁(yè)面的相關(guān)信息，比如說(shuō)編碼、標(biāo)題、設(shè)計(jì)者之類的；body部分就是這個(gè)頁(yè)面上展現(xiàn)的具體內(nèi)容。Web上把一個(gè)包含多種模塊如文字、圖片、音樂(lè)等多種媒體的文檔叫做一個(gè)頁(yè)面。當(dāng)訪問(wèn)一個(gè)網(wǎng)頁(yè)的時(shí)候，輸入網(wǎng)址首先展現(xiàn)的頁(yè)面叫做首頁(yè)，或者叫主頁(yè)，往往一個(gè)首頁(yè)里面會(huì)有很多點(diǎn)擊會(huì)跳轉(zhuǎn)到其他頁(yè)面或下載相關(guān)文件的超鏈接，超鏈接就是點(diǎn)擊了之后可以跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面或者下載對(duì)應(yīng)的內(nèi)容得一個(gè)URL，這是html被大范圍使用的一個(gè)非常重要的原因。通常的網(wǎng)站是指用于展示特定內(nèi)容的相關(guān)整體網(wǎng)頁(yè)的集合。HTML的設(shè)計(jì)主要是用來(lái)制作網(wǎng)頁(yè)的顯示內(nèi)容和查找網(wǎng)頁(yè)的相關(guān)信息。網(wǎng)頁(yè)設(shè)計(jì)代碼的本質(zhì)就是HTML語(yǔ)言，搭配其它的諸如CSS、JavaScript和服務(wù)器程序等Web技術(shù)就可以設(shè)計(jì)元素多樣化、功能齊全的網(wǎng)頁(yè)。所以說(shuō)Web的編程設(shè)計(jì)是以HTML為基礎(chǔ)進(jìn)行實(shí)現(xiàn)和拓展的。超文本標(biāo)記語(yǔ)言因?yàn)樵谖谋局邪鼣U(kuò)了多個(gè)具有超鏈接功能的點(diǎn)擊模塊，所以被叫做超文本標(biāo)記語(yǔ)言。HTML主要通過(guò)定義的元素和對(duì)應(yīng)屬性來(lái)標(biāo)記一個(gè)頁(yè)面中的不同模塊和功能的展示效果，它實(shí)際上是一種規(guī)范，一種現(xiàn)在的頁(yè)面設(shè)計(jì)都遵守的一個(gè)標(biāo)準(zhǔn)。html文件就是一個(gè)文本文件，然后在對(duì)應(yīng)的部分加入元素和定義相關(guān)的屬性，就相當(dāng)于把一個(gè)人的肖像描述給一個(gè)畫(huà)家來(lái)聽(tīng)，然后畫(huà)家根據(jù)描述的內(nèi)容進(jìn)行繪畫(huà)，完成一個(gè)人物的展現(xiàn)，這里面的畫(huà)家角色主要由瀏覽器擔(dān)任。瀏覽器從頭到尾的對(duì)網(wǎng)頁(yè)文件進(jìn)行分析，然后根據(jù)HTML的標(biāo)準(zhǔn)對(duì)相關(guān)的元素和屬性進(jìn)行渲染和展示，如果在編寫(xiě)的過(guò)程中出錯(cuò)，瀏覽器并不會(huì)停止解析，指導(dǎo)一個(gè)文本文件全部渲染完畢，從而展示一個(gè)頁(yè)面，開(kāi)發(fā)人員只能根據(jù)最后的顯示效果和自己設(shè)定的模樣進(jìn)行分析調(diào)整錯(cuò)誤代碼，從而達(dá)到一個(gè)頁(yè)面的設(shè)計(jì)完成。這邊需要指出一點(diǎn)就是不同的畫(huà)師會(huì)有不同的繪畫(huà)風(fēng)格，即不同瀏覽器對(duì)不同元素或者屬性的解析也是有不同效果的，所以這一點(diǎn)還是要開(kāi)發(fā)人員進(jìn)行注意和調(diào)整的。雖然HTML的編寫(xiě)十分簡(jiǎn)單，但是它有著強(qiáng)大的功能，同時(shí)在一個(gè)html文本文件中可以包含多種不同數(shù)據(jù)格式的文件，這也是現(xiàn)在萬(wàn)維網(wǎng)使用范圍如此廣泛的一個(gè)原因，它主要由如下的幾個(gè)特點(diǎn)：簡(jiǎn)易性：HTML的升級(jí)主要是在老的版本上進(jìn)行一個(gè)內(nèi)容的擴(kuò)展，而且不改變已有元素和屬性，因此更為靈活，版本更新也不會(huì)有負(fù)效果?？蓴U(kuò)展性：由于HTML的廣泛應(yīng)用，所以必不可少的有功能擴(kuò)展和元素增加等使用需求，因?yàn)槠涫褂玫氖亲宇愒氐脑O(shè)計(jì)方式，所以保證了對(duì)系統(tǒng)進(jìn)行擴(kuò)展的性能。平臺(tái)無(wú)關(guān)性：不同人員會(huì)使用不同的電腦，不同的電腦也會(huì)有不同的操作系統(tǒng)，不同的操作系統(tǒng)就涉及到不同的編程語(yǔ)言，HTML語(yǔ)言在多個(gè)平臺(tái)上都可以很好的使用，這是萬(wàn)維網(wǎng)使用廣泛的另外的一個(gè)原因。通用性： HTML一種簡(jiǎn)單、通用的全置標(biāo)記語(yǔ)言，是現(xiàn)在的網(wǎng)絡(luò)上的通用語(yǔ)言,。開(kāi)發(fā)人員可以用它制作文本、圖片甚至音樂(lè)、視頻互相結(jié)合的復(fù)雜的網(wǎng)頁(yè)，并且無(wú)論用戶使用的是什么類型的瀏覽器，都可以訪問(wèn)到對(duì)應(yīng)的網(wǎng)站?，F(xiàn)如今手機(jī)的部分軟件界面都可以用HTML進(jìn)行設(shè)計(jì)，新出的HTML5大有替代安卓手機(jī)軟件界面設(shè)計(jì)方式的趨勢(shì)，手機(jī)淘寶等頁(yè)面替換頻繁的軟件也都是用設(shè)計(jì)簡(jiǎn)單靈活的HTML替代iOS和安卓原生編程語(yǔ)言的一個(gè)完整的網(wǎng)站是以多個(gè)HTML文本文件組合而成的。通?？梢陨蒚XT文本文件的編輯器都可以用來(lái)編寫(xiě)HTML文件。一個(gè)標(biāo)準(zhǔn)的HTML文件都會(huì)有標(biāo)準(zhǔn)的整體結(jié)構(gòu)，即標(biāo)記頁(yè)面頭部的head標(biāo)簽、標(biāo)記頁(yè)面實(shí)體的body標(biāo)簽和標(biāo)記頁(yè)面整體的html標(biāo)簽，一般的標(biāo)簽都是有結(jié)尾標(biāo)志的，比如說(shuō)文件實(shí)體部分的結(jié)尾就需要用/body來(lái)結(jié)束，也有部分獨(dú)立標(biāo)簽，比如說(shuō)input/和img/等，由此可見(jiàn)標(biāo)簽的結(jié)尾即加上一個(gè)“/”就可以了。 本章小結(jié)本章主要介紹了本系統(tǒng)所涉及的框架以及技術(shù)，開(kāi)發(fā)語(yǔ)言主要涉及JAVA和HTML，前端框架主要是jQuery、Bootstrap和EasyUI，后端框架是SpringMVC，數(shù)據(jù)庫(kù)交互用的是iBATIS,數(shù)據(jù)庫(kù)使用的是MySQL，好的工具對(duì)開(kāi)發(fā)是有很大的助力的，好的框架不僅可以使代碼規(guī)范化，而且表現(xiàn)的形式也是比自己設(shè)計(jì)的好很多，熟練使用這些工具和框架是我能開(kāi)發(fā)出本系統(tǒng)的基本條件。第三章 需求分析與總體設(shè)計(jì)隨著餐飲行業(yè)的不斷創(chuàng)新，現(xiàn)代信息技術(shù)的不斷發(fā)展，人民飲食效率的不斷提高，在線點(diǎn)餐成為大勢(shì)所趨。學(xué)生學(xué)習(xí)生活的緊迫，餐飲行業(yè)的人員緊張以及如何有效率的訂餐和管理成為了現(xiàn)階段餐飲行業(yè)的問(wèn)題，由于學(xué)生的接受能力出色，并且他們需要一種更快捷，更高效的的飲食習(xí)慣，從而有更多的時(shí)間來(lái)學(xué)習(xí)，而且餐飲行業(yè)的人員問(wèn)題也可以得到解決，并且有個(gè)更直觀的訂單管理的方式，同時(shí)還可以有效的接受客戶意見(jiàn)并做出改進(jìn)。所以，校園在線訂餐系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)是一項(xiàng)必不可少的任務(wù)。在進(jìn)行校園在線訂餐系統(tǒng)設(shè)計(jì)開(kāi)發(fā)所達(dá)到的需求，這其中就包括買家的餐品購(gòu)買和賣家的商品管理。系統(tǒng)提供商品的不登錄瀏覽，查看詳情以及評(píng)價(jià)，餐廳商品的分類還有系統(tǒng)公告的查看。新用戶可以注冊(cè)賬號(hào)，填好餐廳所需要的信息即可進(jìn)行登錄，然后就可以購(gòu)買商品，添加購(gòu)物車等操作。添加至購(gòu)物車的商品可以刪除也可以購(gòu)買，購(gòu)買的商品可以以評(píng)價(jià)的方式對(duì)餐廳提出自己的建議以及評(píng)價(jià)。商品管理模塊則是賣家操作的后臺(tái)管理模塊，賣家登錄了后可以對(duì)買家的賬號(hào)進(jìn)行鎖定，也可以對(duì)管理員的賬號(hào)進(jìn)行修改，最主要的功能就是對(duì)商品進(jìn)行管理，也可對(duì)商品進(jìn)行分類操作，同時(shí)賣家也可對(duì)買家的評(píng)價(jià)進(jìn)行一個(gè)查看，相關(guān)模塊的搜索功能也是必須要有的，從而簡(jiǎn)化賣家的操作，本系統(tǒng)還特意設(shè)置一個(gè)公告欄對(duì)賣家想要發(fā)布的信息進(jìn)行修改和增加，從而達(dá)到賣家和買家的雙向互動(dòng)。根據(jù)系統(tǒng)的需求，初步擬定的系統(tǒng)架構(gòu)總體設(shè)計(jì)如圖31校園在線訂餐系統(tǒng)買家登錄賣家登錄餐品選擇賬號(hào)設(shè)置餐品購(gòu)買餐品信息設(shè)置餐品出售統(tǒng)計(jì)賬號(hào)設(shè)置圖31 系統(tǒng)結(jié)構(gòu)圖據(jù)圖32所示，將在線訂餐系統(tǒng)分為兩個(gè)模塊，分別為買家模塊和賣家。其中買家模塊又分為餐品選擇、餐品購(gòu)買和賬號(hào)設(shè)置，賣家模塊則包括餐品管理、餐品統(tǒng)計(jì)和賬號(hào)設(shè)置。用戶分為賣家和買家兩個(gè)模塊，由于默認(rèn)為單家餐廳，即賣家也是管理員，不同用戶登錄有不同的功能。對(duì)部分模塊不登錄的用戶進(jìn)行攔截。 賣家功能1）商品管理：對(duì)商品進(jìn)行簡(jiǎn)單的增加，刪除，上架下架等基礎(chǔ)操作。2）類別管理：對(duì)商品類別進(jìn)行管理，從而在前臺(tái)首頁(yè)進(jìn)行推薦。3）訂單管理：對(duì)已購(gòu)買的訂單的進(jìn)行搜索和信息查看。4）公告管理：對(duì)首頁(yè)餐廳的公告欄進(jìn)行修改。5）用戶管理：對(duì)買家進(jìn)行管理。6）賬戶設(shè)置：修改和添加管理員。7）賬戶登出：賣家退出系統(tǒng)。1）買家注冊(cè)：可以注冊(cè)成會(huì)員并登陸訂餐。2）購(gòu)物車：對(duì)添加的餐品進(jìn)行管理。3）個(gè)人中心：對(duì)個(gè)人賬號(hào)的設(shè)置，個(gè)人信息的修改。4）訂餐功能