《ASP.NET 4.0网站开发实例教程 教学课件 ppt 作者 978-7-302-30496-8 ch10》由会员分享，可在线阅读，更多相关《ASP.NET 4.0网站开发实例教程 教学课件 ppt 作者 978-7-302-30496-8 ch10（63页珍藏版）》请在金锄头文库上搜索。
1、2019年5月23日,第1页,第10章 使用jQuery,教学目标 本章内容,2019年5月23日,第2页,教学目标,jQuery简介 jQuery选择器 jQuery筛选器 使用jQuery增强页面 使用jQuery插件 jQuery与Ajax,2019年5月23日,第3页,本章内容,10.1 jQuery简介 10.2 jQuery语法 10.3 jQuery扩展应用 10.4 本章小结 10.5 思考和练习,2019年5月23日,第4页,本章内容,10.1 jQuery简介 10.2 jQuery语法 10.3 jQuery扩展应用 10.4 本章小结 10.5 思考和练习,2019年5
2、月23日,第5页,10.1 jQuery简介,jQuery最早由John Resig在2006年1月开发和发布，现在已经成长为一个备受欢迎的客户端框架。Microsoft也注意到jQuery的强大功能，并决定在自己的产品中附送这个框架。最初，jQuery随Microsoft ASP.NET MVC框架一起提供，现在Visual Studio和Visual Web Developer 2010中也包含了这个框架。,2019年5月23日,第6页,jQuery的特点,语法简练、语义易懂、学习快速、丰富文档。 jQuery是一个轻量级的脚本，其代码非常小巧，最新版的jQuery框架文件仅有30KB左右
3、。 jQuery支持CSS1CSS3定义的属性和选择器，以及基本的xPath技术。 jQuery是跨浏览器的，它支持几乎所有主流的浏览器，包括IE 6.0+、FireFox 1.5+、Safari 2.0+和Opera 9.0+等。 可以很容易地为jQuery扩展其他功能。 能将JavaScript脚本与HTML源代码完全分离，便于后期编辑和维护。 插件丰富，除了jQuery自身带有的一些特效外，可以通过插件实现更多功能，如表单验证、Tab导航、拖放效果、表格排序、DataGrid、树形菜单、图像特效以及Ajax上传等。,2019年5月23日,第7页,在Web站点中引入jQuery,要在Web
4、站点中包含jQuery，有如下方法： 只在需要jQuery的网页或者用户控件中添加对jQuery库的引用。这种方式可以减小页面大小。当用户浏览没有使用jQuery的页面时，就不需要下载jQuery库文件。而当他们下载了库文件以后，浏览器就会缓存库文件的一个副本，从而使得在以后访问页面时，不需要再次下载这些文件。 在Web站点的母版页中添加对jQuery库的引用，从而使所有的页面都可以使用jQuery库。这种方式十分方便，因为所有基于该母版页创建的页面都会自动获得对jQuery的访问权。但是，这会对Web站点第一个页面的性能造成冲击，因为需要从服务器上下载库文件。,2019年5月23日,第8页,
5、jQuery示例,在标记中添加如下代码引入jQuery库： “文档就绪函数”示例： $(document).ready(function() / Remainder of the code skipped ); ,2019年5月23日,第9页,本章内容,10.1 jQuery简介 10.2 jQuery语法 10.3 jQuery扩展应用 10.4 本章小结 10.5 思考和练习,2019年5月23日,第10页,10.2 jQuery语法,ready函数 选择器 筛选器 对匹配集中的项应用CSS 添加事件处理 访问jQuery对象 文档处理 使用jQuery的效果,2019年5月23日,第11
6、页,ready函数,大部分jQuery代码都是在浏览器完成页面加载后执行。等到页面完成DOM加载后再执行代码十分重要。DOM(Document Object Model，文档对象模型)是Web页面的一种分层表示，包含所有HTML元素、脚本文件、CSS、图像等的一个树形结构。如果借助编程修改DOM(例如，使用jQuery代码)，那么这种修改将反映在浏览器中显示的页面上。如果过早执行jQuery代码(例如，在页面的最顶端)，那么DOM可能还没有加载完成脚本中引用的全部元素时就产生了错误。幸运的是，可以使用jQuery中的ready函数，将代码的执行推迟到DOM就绪。,2019年5月23日,第12页
7、,ready函数的快捷方式,当页面准备就绪，可以执行DOM操作时，添加到起始和结束大括号之间的全部代码都将执行。jQuery也提供了ready函数的一个快捷方式，下面的代码段与前面的效果相同： $(function() / DOM 就绪后执行此处的代码 );,2019年5月23日,第13页,选择器,在jQuery中，可以使用美元符号($)作为在页面中查找元素的快捷方式。找到并返回的元素称为匹配集。$方法的基本语法如下所示： $(选择器) 在引号(可以使用单引号或者双引号，只要前后两端配对即可)之间，输入一个或多个选择器，接下来就将讨论这方面的内容。 通过jQuery选择器可以找到页面的文档对象
8、模型中的一个或多个元素，以便向它们应用各种类型的jQuery方法。,2019年5月23日,第14页,通用选择器,与对应的CSS选择器一样，通用选择器使用通配符*，会匹配页面中的全部元素。$方法返回0个或多个元素，然后可以使用多种jQuery方法操作返回的这些元素。例如，要将页面中所有元素的字体都设置为Arial，可以使用下面的代码： $(*).css(font-family, Arial);,2019年5月23日,第15页,ID选择器,和对应的CSS选择器一样，这个选择器通过元素的id来查找和获取元素。例如，要为名为tabel1的表格设置CSS类，可以使用如下代码： $(#table1).ad
9、dClass(myClass); 当这行代码使用addClass方法设置CSS类时，将会遵循标准的CSS规则。 jQuery的$(#table1)和ASP.NET AJAX的$get(table1)都会获得对id为table1的一个元素的引用。那么应该选择哪一个方法呢？一般来说，当对结果应用任意jQuery方法(例如css方法)时，都应该使用jQuery的$方法。而在操作单个元素，并且想要修改该元素的某个标准属性时，则可以使用$get代替。在这种情况下，也可以使用jQuery的$，但是因为所有的jQuery选择器都返回一个对象集合，所以需要通过索引方式，使用0或get(0)得到第一个元素。,2
10、019年5月23日,第16页,元素选择器,元素选择器获得与特定的标记名相匹配的0个或多个元素的引用。例如，下面的代码将页面中的所有二级标题的文本颜色设置为蓝色。 $(h2).css(color, blue);,2019年5月23日,第17页,类选择器,类选择器获得与特定的类名相匹配的0个或多个元素的引用。例如，如果有下面的HTML代码段： 标题1 标题2 如果有一天我不再在乎你了 请记住，曾经也没人听过我的心事 上述4个元素中有两个元素都有一个名为Highlight的CSS类。通过jQuery的类选择器，可以选择第一个标题和第一个段落，然后将其背景色修改为红色，而保持其他元素不变： $(.Hi
11、ghlight).css(background-color, red);,2019年5月23日,第18页,分组与合并选择器,和CSS一样，可以分组或合并选择器。下面的分组选择器将修改页面中所有h1和h2元素的文本颜色为橙色： $(h1, h2).css(color, orange); 通过使用合并选择器，可以找出被其他一些元素包含着的特定元素。例如，下面的jQuery只修改MainContent元素中包含的三级标题，而保持其他的不变： $(#MainContent h3).css(color, red);,2019年5月23日,第19页,层级选择,jQuery支持4类层级选择器，分别如下： a
12、ncestor descendant：在指定祖先元素下匹配所有的后代元素，与CSS中的包含选择器对应。 parent child：在给定的父元素下匹配所有的子元素，与CSS中的子选择器对应。 prev + next：匹配所有紧接在prev元素后的next元素，与CSS中的相邻选择器对应。 prev siblings：匹配prev元素之后的所有siblings元素。,2019年5月23日,第20页,筛选器,在jQuery中，可以使用筛选器进一步过滤选择器得到的结果集，从而可以找到特定的元素，如第一个元素、最后一个元素、所有奇数行元素、所有偶数行元素、所有的标题或者特定位置的项等。 $(#Tabl
13、eId tr:first).css(background-color, red); $(#TableId tr:last).css(background-color, red); 首先，使用#TableId找到表。然后使用tr找到表的全部行。最后，使用:first和:last筛选器找到第一行和最后一行 详见表10-1,2019年5月23日,第21页,高级筛选器,jQuery还支持其他很多筛选器，它们可以用来根据项包含的文本、是否可见、以及它们包含的任意属性获取项。另外，还有一些筛选器可以获得表单元素(例如按钮、复选框、单选按钮等)，以及大量可以用来选择子元素、父元素、兄弟元素和后代元素的选择器
14、。 详见表10-2所示。,2019年5月23日,第22页,对匹配集中的项应用CSS,有了匹配集之后，就需要对它执行一些操作，如前面例子中使用过的css方法。本节将介绍如何对匹配集中的项应用CSS类或者样式。 jQuery以几种不同的方式支持CSS。首先，可以使用css方法来检索特定的CSS值(如某个项的颜色)，以及设置一组元素的一个或多个CSS属性。其次，使用addClass、removeClass、toggleClass和hasClass等方法可以修改或检查对元素应用的CSS类。再次，有几种方法可以用来修改元素的尺寸和位置。,2019年5月23日,第23页,css(name,value),这
15、个方法前面已经用过很多次了，它用来设置某个匹配元素上的特定的CSS属性。name参数是引用一个CSS属性的名称(如border、color等)，value定义了要应用的样式。下面的代码将修改h1元素的背景色为绿色： $(h1).css(background-color, green);,2019年5月23日,第24页,css(name),这个方法基于传递给它的属性检索特定的CSS值。下面的示例将弹出对话框，内容是二级标题中包含的span元素的font-style属性值。 alert($(h2 span).css(font-style); 可以在jQuery脚本中使用这个值；例如，可以用来在斜体
16、和普通字体之间切换font-style，或者将多个元素设置为相同的类型。,2019年5月23日,第25页,css(properties),这是一个功能强大的方法，因为它可以用来同时设置匹配元素的多个属性。每个属性和属性值直接由冒号(:)分隔，而每个属性/属性值对之间由逗号分隔。完整的属性集包含在一对花括号()之间。例如： $(#TableId td).css(color : red, font-family : Verdana, padding : 10px);,2019年5月23日,第26页,addClass、removeClass和toggleClass,addClass和removeClass方法分别用来在元素中添加和删除类。与普通的CSS一样，使用这些方法，比使用css(properties)方法进行内联CSS赋值更好。这样就更容易在一个集中的位置定义CSS类，从而使得它们更易于维护和重用。
