《台技术设计与应用net第八章v》由会员分享，可在线阅读，更多相关《台技术设计与应用net第八章v（86页珍藏版）》请在金锄头文库上搜索。
1、1,1,1,电子政务平台技术设计与应用 ASP.NET高级应用 Version 2,南大滨海学院法政学系 张一鸣 2016年2月12日,电子政务平台技术设计与应用,南大滨海学院法政学系 张一鸣,2,2,2,ASP.NET高级应用 第8章 Jquery技术,南大滨海学院法政学系 张一鸣 2016年2月12日,电子政务平台技术设计与应用,3,3,本章主要内容,本章主要介绍使用JQuery技术开发应用程序的方法。,JQuery简介,3,2,1,在页面中使用jQuery,JQuery的应用,用JQuery进行表单验证,4,5,用JQuery实现订单管理,3,4,4,8.1 JQuery简介,jQuer
2、y，即JavaScript和查询（Query），是辅助JavaScript开发的库。它是继prototype之后又一个优秀的兼容多浏览器的JavaScript轻量级的库，核心理念是write less, do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。,4,5,5,JQuery的特点,jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计使开发者更加便捷地操作文档对象、选择DOM元素、制作动画效果、事件处理、
3、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。 如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。,5,6,6,JQuery的发展演变,从2006年8月发表JQuery库的第一个稳定版本1.0到2014年5月1日，jQuery 2.1.1版发布，期间Jquery先后推出了近20个发展版本。目前最新的已经发展到了2.1.1版。,6,7,7,JQuery的版本,jQuery可以下载使用，有两个版本的 jQuery 可供下载
4、： Production version - 用于实际的网站中，已被精简和压缩。 Development version - 用于测试和开发（未压缩，是可读的代码）。,7,8,jQuery 1.8.0版压缩前后的对比,这两个版本都可以从 jQ官网下载。,8,9,9,jQuery的下载引用,可以从多个公共服务器中选择引用。把jQuery存储在CDN公共库上可加快网站载入速度。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。国外的有Google、Microsoft等多家公司给jQuery提供CDN服务，国内由新浪云计算(SAE) 、百度云(BAE)等提供。,9,jQuery的下载引用
5、（续）,10,8.2 JQuery的基础语法,基础语法：$ (selector).action ( ) 其中： 美元符号“$”表示后边的内容是JQuery 选择符(selector)“查询”和“查找”HTML元素 action ( )执行对所找到的元素的操作 例如： $(this).hide() 隐藏当前元素 $(“p“).hide() 隐藏所有段落,11,例子8.1 JQuery的简单应用,建立新项目，在其中的主页 加入调用JQuery库的语句 和显示4次“Hello”的语句,12,包含JQuery的脚本文件,app.js脚本文件的内容,调用脚本文件app.js,13,例子8.1 的运行结果
6、（前）,14,修改脚本文件隐藏点击的文本,注释原语句,选择点击的段落执行隐藏当前段落的函数,15,例子8.1 的运行结果（后）,16,JQuery对象和JQuery选择器,$(“#myELement“) 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(“div“) 选择所有的div标签元素，返回div元素数组 $(“.myClass“) 选择使用myClass类的css的所有元素 $(“*“) 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$(“#myELement,div,.myclass“),1
7、7,JQuery选择器分类：层叠选择器,$(“A B“) 查找A元素下面的所有子节点，包括非直接子节点 $(“AB“) 查找A元素下面的直接子节点 $(“A+B“) 查找A元素后面的兄弟节点，包括非直接子节点 $(“AB“) 查找A元素后面的兄弟节点，不包括非直接子节点 $(“form input“) 选择所有的form元素中的input元素 $(“#main *“) 选择id值为main的所有的子元素 $(“label + input“) 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $(“#pre
8、v div“) 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签,18,$(“tr:first“) 选择所有tr元素的第一个 $(“tr:last“) 选择所有tr元素的最后一个 $(“input:not(:checked) + span“) 过滤掉：checked的选择器的所有的input元素 $(“tr:even“) 选择所有的tr元素的第0，2，8. .个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） $(“tr:odd“) 选择所有的tr元素的第1，3，5. .个元素 $(“td:eq(2)“) 选择所有的td元素中序号为2的那个
9、td元素 $(“td:gt(4)“) 选择td元素中序号大于4的所有td元素 $(“td:ll(4)“) 选择td元素中序号小于4的所有的td元素 $(“:header“) $(“div:animated“),JQuery选择器分类:基本过滤选择器,19,$(“div:contains(John)“) 选择所有div中含有John文本的元素 $(“td:empty“) 选择所有的为空（也不包括文本节点）的td元素的数组 $(“div:has(p)“) 选择所有含有p标签的div元素 $(“td:parent“) 选择所有的以td为父节点的元素数组,JQuery选择器分类:内容过滤选择器,20,
10、$(“div:hidden“) 选择所有的被hidden的div元素 $(“div:visible“) 选择所有的可视化的div元素,JQuery选择器分类:可视化过滤选择器,21,$(“divid“) 选择所有含有id属性的div元素 $(“inputname=newsletter“) 选择所有的name属性等于newsletter的input元素 $(“inputname!=newsletter“) 选择所有的name属性不等于newsletter的input元素 $(“inputname=news“) 选择所有的name属性以news开头的input元素 $(“inputname$=ne
11、ws“) 选择所有的name属性以news结尾的input元素 $(“inputname*=man“) 选择所有的name属性包含news的input元素,JQuery选择器分类:属性过滤选择器,22,$(“ul li:nth-child(2)“),$(“ul li:nth-child(odd)“),$(“ul li:nth-child(3n + 1)“) $(“div span:first-child“) 返回所有的div元素的第一个子节点的数组 $(“div span:last-child“) 返回所有的div元素的最后一个节点的数组 $(“div button:only-child“)
12、返回所有的div中只有唯一一个子节点的所有子节点的数组,JQuery选择器分类:子元素过滤选择器,23,$(“:input“) 选择所有的表单输入元素，包括input, textarea, select 和 button $(“:text“) 选择所有的text input元素 $(“:password“) 选择所有的password input元素 $(“:radio“) 选择所有的radio input元素 $(“:checkbox“) 选择所有的checkbox input元素 $(“:submit“) 选择所有的submit input元素 $(“:image“) 选择所有的image
13、 input元素 $(“:reset“) 选择所有的reset input元素 $(“:button“) 选择所有的button input元素,JQuery选择器分类:表单元素选择器,24,$(“:file“) 选择所有的file input元素 $(“:hidden“) 选择所有类型为hidden的input元素或表单的隐藏域 $(“:enabled“) 选择所有的可操作的表单元素 $(“:disabled“) 选择所有的不可操作的表单元素 $(“:checked“) 选择所有的被checked的表单元素 $(“select option:selected“) 选择所有的select 的子
14、元素中被selected的元素,表单元素选择器（续）,25,26,8.3 JQuery的应用,在ASP.NET应用程序里可以混合使用JQuery与AJAX技术。但在程序里使用JQuery前，要先到下载最新版本的js代码，再写代码： 当然，由于微软已经把JQuery集成到VS里，所以可以到WWW.ASP.NET/ajax查看。,26,27,（1）下载jQuery类库文件，并将其包含到项目中,下载jQuery类库文件， 并将其包含到项目中,例子8.2 用JQuery弹出消息框,27,（2）在资源管理器上双击default.aspx页面，打开aspx页面的源视图,28,(3)在源文件的标签中间，引入
15、jQuery类库文件，即直接将jQuery文件拖动到源文件中。,29,（4） 在引入文件的下面，直接写调用的jQuery函数就行,30,（5） 运行本网站程序,31,32,8.4 使用JQuery进行表单验证,使用JQuery可以对表单中录入的信息进行各种验证，包括对表单元素进行非空验证、格式验证、长度验证及相关值的获取及显示，并对验证结果进行提示。本节将通过实例8.1来介绍如何使用jQuery来验证表单。,32,33,例子8.3 使用jQuery进行表单验证,本实验主要介绍如何使用jQuery来验证表单。内容包括： 1对表单元素进行非空验证； 2验证用户输入信息的长度是否足够； 3验证Ema
16、il的格式； 8.获取单选按钮的值； 5获取下拉框的文字和值； 首先制作如下的前台页面：,33,例子8.3 程序的运行界面,34,例子8.3 页面布局的代码,每一行后面都带有span标 签，它用来显示验证结果,35,jQuery 事件的blur() 方法,当元素失去焦点时发生 blur 事件。 blur() 函数触发 blur 事件，如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。 语法 $(selector).blur() 提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。,36,对用户名的非空验证代码,定义用户名文本框失去焦点事件来触发验证，判断当前获取的id为name的jQuery对象的val来判断当前元素是否为空。为空时，通过id为nameTip的jQuery元素进行“用户名不能为空”的提示，并将提示字体颜色设置为红色；非
