ASP.NET程序设计教程（C#版）第4版 PPT 第8章 使用jQuery.ppt

第8章使用jQuery本章讲述的主要内容8.1jQuery概述8.2jQuery语法基础8.3通过jQuery操作DOM8.4实训使用jQuery特效 8.1jQuery概述jQuery是一个快速的，简洁的JavaScript库，它使用户能更方便地处理DOM（DocumentObjectModel，文档对象模型）、Events（事件）、实现动画效果等，并且能方便地为网站提供Ajax交互。概括的说，jQuery是基于JavaScript语言的框架编程，根据实际应用中的常见需求对JavaScript的功能进行了封装，提供函数接口，简化了JavaScript的操作，提倡“以更少的代码，做更多的事情”（WriteLess,DoMore）。8.1jQuery概述8.1.1使用NuGetNuGet是VS中默认的添加第三方库的方法，使用NuGet不但可以向项目中添加jQuery，也可以添加其它一些第三方库。8.1jQuery概述8.1.2在.aspx和.html中引用jQuery通过NuGet将jQuery添加到网站后，还需要在希望使用jQuery功能的.aspx或.html页面中添加相关引用语句。其语法格式与向页面中添加普通.js文件引用完全相同。例如：8.2jQuery语法基础8.2.1jQuery代码的书写位置要求1.使用ready()函数ready()的函数可以将包括在其中的代码推迟至DOM对象加载完毕再执行。8.2jQuery语法基础8.2.1jQuery代码的书写位置要求2.在引用了母版页的内容中书写jQuery代码①如果使用该母版页的所有或绝大多数内容页都需要使用jQuery，则可将jQuery引用语句书写在母版页的head和/head之间。将jQuery功能实现代码书写在内容页的asp:ContentID=Content2……和/asp:Content标记区域的最下方。②使用该母版页的内容页中只有个别内容页需要使用jQuery，则可将引用语句书写在内容页的asp:ContentID=Content1……和/asp:Content标记之间。将jQuery功能实现代码书写在内容页的asp:ContentID=Content2……和/asp:Content标记区域的最下方。8.2jQuery语法基础8.2.2jQuery选择器基本选择器(1)通用选择器：通用选择器$(*)用于返回页面中所有元素。(2)元素选择器：元素选择器$(元素名)用于返回指定类型的所有元素。(3)ID选择器：ID选择器$(#元素ID)用于返回指定元素ID值代表的单一元素。(4)类选择器：类选择器$(.类名称)用于返回使用指定类名称的所有元素。(5)组合选择器：组合选择器可以将多种选择器组合在一起，返回所有符合条件的元素。8.2jQuery语法基础8.2.2jQuery选择器3.过滤选择器使用过滤选择器可以按照预设过滤规则（条件）筛选出所需要的页面元素。参阅源代码：ex8-28.3通过jQuery操作DOM8.3.1属性操作attr()和removeAttr()方法attr()方法用于获取所匹配元素集合中第一个元素的属性，也可以用来设置所匹配元素的一个或多个属性值，attr()方法有如下所示的4种语法格式。8.3通过jQuery操作DOM8.3.1属性操作2.prop()和removeProp()方法prop()方法用于获取所匹配元素集合中第一个元素的属性，也可以用来设置所匹配元素的一个或多个属性值。参阅源代码：ex8-38.3通过jQuery操作DOM8.3.2样式操作jQuery提供了一些用于控制、修改页面元素外观样式的方法，如addClass()、removeClass()、toggleClass()和前面使用过的css()方法。此外，使用上节介绍的attr()方法，也可以实现对元素外观的控制和修改。1.addClass()和removeClass()方法8.3通过jQuery操作DOM8.3.2样式操作2.toggleClass()方法toggleClass()方法用于实现元素样式的添加或移除。当元素的指定样式存在时，移除该样式，否则添加该样式。 toggleClass(classname);其中，classname表示css类名，toggleClass()方法被调用时首先判断指定的CSS