目录
1 前言
1.1 研究背景
互联网通信技术高度发达的今天，我们不再像古代那样通过烽火或者信使来传递消息，仅仅通过网络我们就可以了解到世界各地的发生的实时信息，这是人类的跨时代意义的进步。当然我们了解这些信息需要媒介，而这就是易购网站网站的意义所在。由此一来，我们既节约了传统的报刊杂志的费用的花销，同时又能做到足不出户就能看到天下商品。信息不仅仅与我们的日常生活息息相关，它贯穿各行各业的各个领域，各大中小型企业的发展也离不开信息化，更早的掌握了信息，也就更能够先人一步抓住机会，在企业的竞争中占据有利地位，因而我们借此机会设计出与其相符合的购物网站，更好的发展和利用互联网信息。
1.2 研究目的
1.3 研究意义
伴随着网络的出现，网页逐渐融入人们的生活。快速及时的商品浏览，五彩缤纷的网上信息，使网络与人们的生活息息相关，于是世界上又出现了第三媒体——Internet。它打破了地域限制，真正使信息得以共享，改变了人们的工作和生活方式。制作网页是企业和个人的宣传自己的重要手段，同时也是学习者获取学习信息的重要手段。尤其是在电商领域，，人们对信息的需求有了更新，更高的要求，而网页由于本身所具有的信息量大，传递快速，没有时空限制等特点恰好满足这种要求。所以网页也逐渐成为一种新兴的信息资源。也正是由于网络实现网站的数据信息能够进行实时交互，保证网站数据的实时性。
2 技术分析
2.1 前端开发说明
网页制作是web1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代，用户能做的唯一一件事就是浏览这个网站的文字图片内容，这时用户也不能像现在在大多数网站都可以评论交流（缺乏交互性）。现在大多数人都听过“网页三剑客Dreamweaver+Fireworks+Flash”吧，这个组合就是web1.0时代的产物。
“前端开发”是从“网页制作”演变而来的。
从2005年开始，互联网进入web2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。web2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中进行评论交流、上传和下载文件等（交互性）。这个时代的网页，如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的，那是远远不能满足需求。现在网站开发无论是开发难度，还是开发方式上，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“web前端开发”。
所以，处于web2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”，因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多，例如代码冗余、网站维护困难（学习到后期，你会知道为什么不用这个组合了）。
我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
Dreamweaver即Adobe Dreamweaver。Adobe Dreamweaver，简称“DW”，中文名称“梦想编织者”，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能。
jQuery是一个简洁而快速的JavaScript库，可用于简化事件处理，HTML文档遍历，Ajax交互和动画，以便快速开发网站。
目的是让开发者更容易地在网站上使用JavaScript。它不是一种单独的编程语言，与JavaScript一起工作。使用jQuery，将用更少的资源做更多的事情。
扩展资料
1.JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而且复杂的选择器，另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。
2.JQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。
HTML5是指第5代HTML（超文本标记语言），也指用HTML5语言制作的一切数字产品。
网上的网页，多数都是由HTML写成的。
“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。
浏览器通过解码HTML，就可以把网页内容显示出来。
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
$(this).hide()
演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
$("p").hide()
演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
$("#test").hide()
演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
实例
$("button").click(function(){
$("p").toggle();
});
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery Password Validation（密码验证）
jQuery Password Validation（密码验证）插件扩展了 jQuery Validate 插件，提供了两种组件：
一种评价密码的相关因素的功能：比如大小写字母的混合情况、字符（数字、特殊字符）的混合情况、长度、与用户名的相似度（可选的）。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。
您可以简单地自定义强度显示的外观、本地化消息显示，并集成到已有的表单中。
该插件目前版本是 1.0.0。
使用方式
如需使用 Password Validation（密码验证）插件，请添加一个 class "password" 到 input，同时添加显示强度的基本标记在表单的需要显示的地方：
<form id="register">
<label for="password">Password:</label>
<input class="password" name="password" id="password" />
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</form>
对表单应用 Validate 插件：
$(document).ready(function() {
$("#register").validate();
});
什么是 AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。
您可以在我们的 jQuery Ajax 参考手册学会 jQuery Ajax 的具体应用。
您可以在我们的 AJAX 教程中学到更多有关 AJAX 的知识。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够
jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件（"demo_test.txt"）的内容：
<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：
实例
$("#div1").load("demo_test.txt");
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。
然后我们连同请求（name 和 url）一起发送数据。
"demo_test_post.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
什么是遍历？
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
jQuery 遍历 - 祖先
祖先是父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()
parents()
parentsUntil()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的直接父元素：
$(document).ready(function(){
$("span").parent();
});
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
实例
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：
实例
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
实例
$("button").click(function(){
alert($("#runoob").attr("href"));
});
| $("*") | 所有元素 | |
| $("#lastname") | id="lastname" 的元素 | |
| $(".intro") | class="intro" 的所有元素 | |
| $(".intro,.demo") | class 为 "intro" 或 "demo" 的所有元素 | |
| $("p") | 所有 <p> 元素 | |
| $("h1,div,p") | 所有 <h1>、<div> 和 <p> 元素 | |
| $("p:first") | 第一个 <p> 元素 | |
| $("p:last") | 最后一个 <p> 元素 | |
| $("tr:even") | 所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 | |
| $("tr:odd") | 所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 | |
| $("p:first-child") | 属于其父元素的第一个子元素的所有 <p> 元素 | |
| $("p:first-of-type") | 属于其父元素的第一个 <p> 元素的所有 <p> 元素 | |
| $("p:last-child") | 属于其父元素的最后一个子元素的所有 <p> 元素 | |
| $("p:last-of-type") | 属于其父元素的最后一个 <p> 元素的所有 <p> 元素 | |
| $("p:nth-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素 | |
| $("p:nth-last-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数 | |
| $("p:nth-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素 | |
| $("p:nth-last-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数 | |
| $("p:only-child") | 属于其父元素的唯一子元素的所有 <p> 元素 | |
| $("p:only-of-type") | 属于其父元素的特定类型的唯一子元素的所有 <p> 元素 | |
| $("div > p") | <div> 元素的直接子元素的所有 <p> 元素 | |
| $("div p") | <div> 元素的后代的所有 <p> 元素 | |
| $("div + p") | 每个 <div> 元素相邻的下一个 <p> 元素 | |
| $("div ~ p") | <div> 元素同级的所有 <p> 元素 | |
| $("ul li:eq(3)") | 列表中的第四个元素（index 值从 0 开始） | |
| $("ul li:gt(3)") | 列举 index 大于 3 的元素 | |
| $("ul li:lt(3)") | 列举 index 小于 3 的元素 | |
| $("input:not(:empty)") | 所有不为空的输入元素 | |
| $(":header") | 所有标题元素 <h1>, <h2> ... | |
| $(":animated") | 所有动画元素 | |
| $(":focus") | 当前具有焦点的元素 | |
| $(":contains('Hello')") | 所有包含文本 "Hello" 的元素 | |
| $("div:has(p)") | 所有包含有 <p> 元素在其内的 <div> 元素 | |
| $(":empty") | 所有空元素 | |
| $(":parent") | 匹配所有含有子元素或者文本的父元素。 | |
| $("p:hidden") | 所有隐藏的 <p> 元素 | |
| $("table:visible") | 所有可见的表格 | |
| $(":root") | 文档的根元素 | |
| $("p:lang(de)") | 所有 lang 属性值为 "de" 的 <p> 元素 | |
| $("[href]") | 所有带有 href 属性的元素 | |
| $("[href='default.htm']") | 所有带有 href 属性且值等于 "default.htm" 的元素 | |
| $("[href!='default.htm']") | 所有带有 href 属性且值不等于 "default.htm" 的元素 | |
| $("[href$='.jpg']") | 所有带有 href 属性且值以 ".jpg" 结尾的元素 | |
| $("[title|='Tomorrow']") | 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串 | |
| $("[title^='Tom']") | 所有带有 title 属性且值以 "Tom" 开头的元素 | |
| $("[title~='hello']") | 所有带有 title 属性且值包含单词 "hello" 的元素 | |
| $("[title*='hello']") | 所有带有 title 属性且值包含字符串 "hello" 的元素 | |
| $( "input[id][name$='man']" ) | 带有 id 属性，并且 name 属性以 man 结尾的输入框 | |
| $(":input") | 所有 input 元素 | |
| $(":text") | 所有带有 type="text" 的 input 元素 | |
| $(":password") | 所有带有 type="password" 的 input 元素 | |
| $(":radio") | 所有带有 type="radio" 的 input 元素 | |
| $(":checkbox") | 所有带有 type="checkbox" 的 input 元素 | |
| $(":submit") | 所有带有 type="submit" 的 input 元素 | |
| $(":reset") | 所有带有 type="reset" 的 input 元素 | |
| $(":button") | 所有带有 type="button" 的 input 元素 | |
| $(":image") | 所有带有 type="image" 的 input 元素 | |
| $(":file") | 所有带有 type="file" 的 input 元素 | |
| $(":enabled") | 所有启用的元素 | |
| $(":disabled") | 所有禁用的元素 | |
| $(":selected") | 所有选定的下拉列表元素 | |
| $(":checked") | 所有选中的复选框选项 | |
| .selector | $(selector).selector | 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器 |
| $( "p:target" ) | 选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素 |
jQuery 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序。
下面的表格列出了所有用于处理事件的 jQuery 方法。
| 方法 | 描述 |
| 向元素添加事件处理程序 | |
| 添加/触发失去焦点事件 | |
| 添加/触发 change 事件 | |
| 添加/触发 click 事件 | |
| 添加/触发 double click 事件 | |
| 向匹配元素的当前或未来的子元素添加处理程序 | |
| 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 | |
| 在版本 1.8 中被废弃。添加/触发 error 事件 | |
| 在事件冒泡阶段内的当前 DOM 元素 | |
| 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 | |
| 返回当前调用的 jQuery 事件处理程序所添加的元素 | |
| 返回指定的 event 对象上是否调用了 event.preventDefault() | |
| 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation() | |
| 返回指定的 event 对象上是否调用了 event.stopPropagation() | |
| 返回当事件被触发时指定的命名空间 | |
| 返回相对于文档左边缘的鼠标位置 | |
| 返回相对于文档上边缘的鼠标位置 | |
| 阻止事件的默认行为 | |
| 返回当鼠标移动时哪个元素进入或退出 | |
| 包含由被指定事件触发的事件处理程序返回的最后一个值 | |
| 阻止其他事件处理程序被调用 | |
| 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知 | |
| 返回哪个 DOM 元素触发事件 | |
| 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 | |
| 返回哪种事件类型被触发 | |
| 返回指定事件上哪个键盘键或鼠标按钮被按下 | |
| 事件触发时 META 键是否被按下 | |
| 添加/触发 focus 事件 | |
| 添加事件处理程序到 focusin 事件 | |
| 添加事件处理程序到 focusout 事件 | |
| 添加两个事件处理程序到 hover 事件 | |
| 添加/触发 keydown 事件 | |
| 添加/触发 keypress 事件 | |
| 添加/触发 keyup 事件 | |
| 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 | |
| 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件 | |
| 添加/触发 mousedown 事件 | |
| 添加/触发 mouseenter 事件 | |
| 添加/触发 mouseleave 事件 | |
| 添加/触发 mousemove 事件 | |
| 添加/触发 mouseout 事件 | |
| 添加/触发 mouseover 事件 | |
| 添加/触发 mouseup 事件 | |
| 移除通过 on() 方法添加的事件处理程序 | |
| 向元素添加事件处理程序 | |
| 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 | |
| 接受一个已有的函数，并返回一个带特定上下文的新的函数 | |
| 规定当 DOM 完全加载时要执行的函数 | |
| 添加/触发 resize 事件 | |
| 添加/触发 scroll 事件 | |
| 添加/触发 select 事件 | |
| 添加/触发 submit 事件 | |
| 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数 | |
| 触发绑定到被选元素的所有事件 | |
| 触发绑定到被选元素的指定事件上的所有函数 | |
| 从被选元素上移除添加的事件处理程序 | |
| 从现在或未来的被选元素上移除事件处理程序 | |
| 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件 | |
| 添加事件处理程序到 contextmenu 事件 | |
| 用于暂停或恢复.ready() 事件的执行 |
3 系统流程设计
3.1系统架构图
根据上述分析，得出静态易购网站的设计与实现的功能结构图，如下图所示。
4 系统需求分析与实现
4.1 页面分析
本静态易购电商网站网站主要从实用行方面分别进行了可行性分析。
该系统所需硬件设备，如服务器、PC机及网络配件等，市场上有销售且价格较低，能满足系统功能要求。软件上，本系统采用Dreamweaver进行页面开发和管理用户界面，提示信息完善，界面友好有亲和力。开发环境使用现在特别流行的开源Apache服务器，使用方便、运行稳定、安全可靠。综上所述，本系统在技术方面是可行的。
成本方面：由于我校本来设备就已经完善，服务器也可以在电脑上搭建和在主机屋免费空间上测试，而开发程序所用的软件都是免费的而且关于信息技术方面也是有相当多的有能力的老师，所以我们可以利用已有的资源，不用再付出额外的费用，所以开发本成本是非常低的。效益方面：为用户开发一个较好的静态校园网站网站，可以实现信息的共享，节省了社会资源。
静态电商网站是我们平时生活中就是在用的，一些功能都是大家很熟悉的，不用很复杂的代码的编辑，便能方便的实现我们想要的功能。用户只需懂得上网，就能轻松使用本网站的功能，所以在操作方面开发静态校园网站系统也是可行的。
4.2Logo介绍
一个网站是否给人留下深刻的映像，主要靠logo的设计，易购设计的初衷轻松购物 （容易）购；性价比高 （便宜）购。
4.3首页介绍
网站首页，好比线下的实体店，如果装修不好，很难从外表上新颖人进来点击，正式考虑到这点，网站做的大气、美观，一眼就能看出栏目的分类。
4.3购物车
当用户确定要购买时，可将商品信息放到购物车上，便于客户下单时存储订单数据。
4.4登录窗口
登录窗口是用户购买商品访问的主窗口，只有注册的用户才能登录购买商品，因为是静态页面，这里采用了临时本地存储的方式，将用户注册信息保存到本地，并以本地的方式读取，进行演示登录操作，以下是实现的部分代码：
主要代码： <script>
$(function() {
$("#btn").click(function() {
var ousername = document.getElementById("username").value
var opassword = document.getElementById("password").value
var username = sessionStorage.getItem("username")
var password = sessionStorage.getItem("password")
if (ousername === username && opassword === password && (opassword !== '' && ousername !==
'')) {
window.location.href = "index.html";
} else if (ousername === '' || opassword === '') {
return alert('请输入账号和密码！')
} else {
return alert('账号或密码错误！')
}
});
});
</script>
4.5商品详细页
主要用来展示商品详细信息的，主要包括：价格、商品名称、描述信息、评论、SKU及相关信息。
5网站的测试
编码完成后,就要对源程序进行测试。软件测试的目的在于争取在第一时间发现程序中的错误,以便于及时纠错,增加软件可靠性。它在整个系统设计实施过程中占有相当的分量。
测试是软件开发时期的最后一个阶段,也是软件质量保证中至关重要的一个环节。测试的目的是为了尽可能的发现程序中存在的错误,其任务就是消除网站故障,保证程序的可靠运行,最终把一个高质量的网站系统交给用户使用。
一般来说在每个模块完成之后就要对它作必要的测试,这种测试被称为单元测试模块的测试者也就是编写者。编码和单元测试属于网站生命周期的同一阶段这个阶段结束之后,对网站系统还应该进行各种综合测试,这是网站生命周期的另一个独立的阶段,由专门的测试人员承担在网页中的测试阶段主要是对网站进行测览器兼容性测试。在网页测试的阶段我分别安装了1E8、火狐等浏览器,并且进行了逐个测试。在多次实践中或多或少都遇到了不可调节的DIV浮动问题,但是最后还是在老师的指导和书籍查阅后,嵌入表格完成了页面设计,使页面在各个浏览器中显示正常。
6后续工作
本易购网站以前台静态HTML为主,其中关键是描述DIV+CSS在网页布局中的妙用、巧用。但要真正的去完善一个网站,还需要更多的专业知识,比如说,数据库、其他后台相关语言,网站的安全,网站的发布,日常维护和更新,等等一系列问题,更是还有关于网站后台管理的拓展分布,想要完成一个网站,每一项必不可少的步骤。完成网站后,还要多网站进行整体优化和宣传推广,这样,才能让网站增加人气和点击率。但是由于时间,精力和专业知识的关系就把这一系列事情归纳为后续工作。在以后的时间里不断的去学习、摸索,然后慢慢的去完善这个网站。
7结论
我的毕业设计快要结束了,我在学校的时间也就要划上结束符号,这最后的符号是问号、逗号或者感叹号再有几天也就有结果了。我想在这大学的最后时间里,我们每个人都会对我们一起度过的这儿年生活有点感慨吧,特别是设计这一阶段。
通过此次毕业设计,检验了这三年来学习理论和专业知识的成果是怎样的。让我了解了真正开发一个网站需要具备很多知识和能力,而且积累一定的开发经验也是很重要的。开发设计之前就必须进行充分的需求分析,及时了解用户的需求并听取用户的意见和建议,想实现什么功能,开发之后的作用意义是需求分析中最主要的,应用了平时所学的知识和查阅了许多相关资料,把理论与实践相结合,对java动态网站的开发、Web程序设计、 Dreamweaver网页制作、数据库原理有了更深的理解和认识,也学到了许多新的知识,增强了自主研究设计能力。
在设计过程中,我们遇到了许多困难,程序调试是关键问题,还有系统本身的设计不足的问题。网页规划、网页编辑、美术制作是系统开发必不可少的数据库的设计要保证数据的一致性、完整性,对于代码设计要能理解代码的含义,这些无疑增加了一定的设计难度。但小组成员团结协作,认真地负责各自的模块设计和调试,努力积极克服了设计上的一道道难关。在大家的共同努力下,系统的功能和性能虽然有不完善的地方,但是系统基本上都能成功运行因时间关系,设计有些技术问题没有能了解和掌握,论文的准备还不够充分和完善。
我深刻体会到如果作为一个专业的系统开发人员,没有一定的实力和足够的耐心是不行的。看到系统的运行效果基本上达到了设计目标,感觉自己和其他成员的辛苦努力是有一定价值的。自己也进步了许多,分析问题和解决问题能力有所提高,逻辑思维能力有所增强,也让我认识到只有从实践中锻炼,就能更好地应用所学的理论和发现新的方法去解决问题。毕业设计让我认识到了自己的不足,也让我获益终生。
8结束语
转眼间,毕业设计完成了。在这段时间里,我在老师的指导和同学的帮助下下圆满的完成了毕业设计,在此我衷心的感谢我的指导老师,在百忙之中抽出时间来对我耐心的指导和帮助,并提出了许多宝贵的意见和建议,我的论文才得以顺利完成。为了毕业设计和毕业论文的完成。老师也付出了很多宝贵的时间和精力,对于她的帮助我表示感谢.
设计的这段时间里,虽然很辛苦,但使我获益非浅,我体会到自己在学习的知识方面存在很多的欠缺,特别是在DIV浮动和数据库方面。但最终在毕业设计的制作中,还是不断的把知识慢慢加深,巩固。
在论文即将完成之际,我的心情无法平静,从开始进入课题到论文的顺利完成,有多少可敬的师长、同学、朋友给了我无言的帮助,在这里请接受我诚挚的谢意
[1]李桂林.HTML5在WEB前端开发中的应用研究[J].计算机产品与流通,2020(08):17.
[2]王烨.基于中职计算机的电子资源制作工具选择策略[J].电脑编程技巧与维护,2020(05):25-29.
[3]刘丽媛.基于HTML5技术的微商城设计与实现[J].电脑编程技巧与维护,2020(05):53-55.
[4]吴雯雯,王雪怡,汪丹丹,王远.试谈HTML5技术在地震科普作品创作中的应用[J].电脑编程技巧与维护,2020(05):56-58.
[5]白岚.基于HTML5高职院校校友互动就业指导系统的开发与应用[J].电脑编程技巧与维护,2020(05):103-105+117.
[6]何思洋,李蒙,傅童成,包维卿,刘梦莹,谢光辉.中国畜禽粪便管理政策现状和前景述评[J].中国农业大学学报,2020,25(05):22-37.
[7]唐微,杨椀萍.校园门户网站的Web前端性能优化——以玉林师范学院官方网站首页为例[J].电子商务,2020(05):70-72.
[8]孙梦薇,姚渝琪.关于Python爬虫在网页信息统计中的应用探讨[J].电子世界,2020(09):60-61.
[9]韩思凡.Web开发中的JSP与H T ML的基础应用[J].科学技术创新,2020(14):71-72.
[10]张玮.基于深度学习的Web用户界面代码生成技术研究[J].科学技术创新,2020(14):82-83.
[11]雷英.给前端开发人员的10个安全建议[J].计算机与网络,2020,46(09):54-55.
[12]刘燕,朱陆民.论越南加强与俄罗斯合作的政策[J].战略决策研究,2020,11(03):50-84+106.
[13].电子文献着录格式[J].护理学杂志,2020,35(09):10.
[14]阮建平,瞿琼.“中国威胁”的社会建构及解构对策——以国际传播对中国“北极威胁者”形象建构为例[J].国际观察,2020(03):109-129.
[15]李凯,金子开,邾莹莹,吴可,马文轩,张思雅,郭子为.新型冠状病毒肺炎(COVID-19)中医诊疗防治价值探讨[J].甘肃中医药大学学报,2020,37(02):23-29.
[16]白宇航,张美娜,于世通,张岩.耐火材料行业生产组织系统部分技术介绍[J].电脑知识与技术,2020,16(12):221-222.
[17].电子文献着录格式[J].护理学杂志,2020,35(08):70.
[18].松辽委发布2019年松辽流域部管生产建设项目水土保持方案实施情况公告[J].水土保持应用技术,2020(02):53.
[19]夏连第,余彪.基于HTML5的部队教育训练网站设计与实践[J].信息系统工程,2020(04):97-98.
[20]田维铝,邓梅,王晓华,马宁.置管病人管理系统中H5、TP5关键技术的研究与实现[J].电脑编程技巧与维护,2020(04):86-90.
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
