ASPNET程序设计教程第8章--使用jQuery课件

1、第8章 使用jQuery本章讲述的主要内容8.1 jQuery概述8.2 jQuery语法基础8.3 通过jQuery操作DOM8.4 实训 使用jQuery特效8.1 jQuery概述 jQuery是一个快速的，简洁的JavaScript库，它使用户能更方便地处理DOM（Document Object Model，文档对象模型）、Events（事件）、实现动画效果等，并且能方便地为网站提供Ajax交互。 概括的说，jQuery是基于JavaScript语言的框架编程，根据实际应用中的常见需求对JavaScript的功能进行了封装，提供函数接口，简化了JavaScript的操作，提倡“以更少的

2、代码，做更多的事情”（Write Less, Do More）。8.1 jQuery概述8.1.1 使用NuGet NuGet是VS中默认的添加第三方库的方法，使用NuGet不但可以向项目中添加jQuery，也可以添加其它一些第三方库。8.1 jQuery概述8.1.2 在.aspx和.html中引用jQuery 通过NuGet将jQuery添加到网站后，还需要在希望使用jQuery功能的.aspx或.html页面中添加相关引用语句。其语法格式与向页面中添加普通.js文件引用完全相同。 例如：8.2 jQuery语法基础8.2.1 jQuery代码的书写位置要求1. 使用ready()函数 r

3、eady()的函数可以将包括在其中的代码推迟至DOM对象加载完毕再执行。8.2 jQuery语法基础8.2.1 jQuery代码的书写位置要求2. 在引用了母版页的内容中书写jQuery代码 如果使用该母版页的所有或绝大多数内容页都需要使用jQuery，则可将jQuery引用语句书写在母版页的和之间。将jQuery功能实现代码书写在内容页的和标记区域的最下方。 使用该母版页的内容页中只有个别内容页需要使用jQuery，则可将引用语句书写在内容页的asp:Content ID=Content1和标记之间。将jQuery功能实现代码书写在内容页的和标记区域的最下方。8.2 jQuery语法基础8.

4、2.2 jQuery选择器基本选择器(1) 通用选择器：通用选择器$(*)用于返回页面中所有元素。(2) 元素选择器：元素选择器$(元素名)用于返回指定类型的所有元素。(3) ID选择器：ID选择器$(#元素ID)用于返回指定元素ID值代表的单一元素。(4) 类选择器：类选择器$(.类名称)用于返回使用指定类名称的所有元素。(5) 组合选择器：组合选择器可以将多种选择器组合在一起，返回所有符合条件的元素。8.2 jQuery语法基础8.2.2 jQuery选择器3. 过滤选择器 使用过滤选择器可以按照预设过滤规则（条件）筛选出所需要的页面元素。参阅源代码：ex8-28.3 通过jQuery操作

5、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()、removeCl

6、ass()、toggleClass()和前面使用过的css()方法。此外，使用上节介绍的attr()方法，也可以实现对元素外观的控制和修改。1. addClass()和removeClass()方法8.3 通过jQuery操作DOM8.3.2 样式操作2. toggleClass()方法 toggleClass()方法用于实现元素样式的添加或移除。当元素的指定样式存在时，移除该样式，否则添加该样式。toggleClass(classname); 其中，classname表示css类名，toggleClass()方法被调用时首先判断指定的CSS类是否已被应用，若是则移除，否则应用该CSS类。8.

7、3 通过jQuery操作DOM8.3.2 样式操作3. css()方法 css()方法是jQuery 1.9以上版本新增内容，用于获取或设置匹配元素的CSS样式，其语法格式有如下4种形式。参阅源代码：ex8-48.3 通过jQuery操作DOM8.3.3 内容操作 内容操作是指使用jQuery提供的方法获取或修改元素或表单的内容。jQuery常用的内容操作方法有，html()、text()和val()方法。1. html()方法 html()方法用于获取或设置第一个匹配元素的HTML内容，该方法仅对HTML和XHTML文档有效，不能用于XML文档。8.3 通过jQuery操作DOM8.3.3

8、内容操作2. text()方法 text()方法用于读取或设置匹配元素的文本内容，其语法格式及使用方法与html()方法相同。 text()方法与html()方法的区别在于，text()方法只能返回或设置匹配元素的纯文本内容，不能包含HTML标记。3. val()方法 val()方法用于获取或设置表单元素的值，包括文本框、下拉列表框、单选和复选框等元素。当元素允许多选时，返回一个包含被选项的数组。 参阅源代码：ex8-58.3 通过jQuery操作DOM8.3.4 jQuery常用特效方法show()和hide()方法 show()方法和hide()方法可以通过递增或递减元素的width、he

9、ight和opacity（透明度）属性值实现元素的显示和隐藏，其语法格式如下所示。8.3 通过jQuery操作DOM8.3.4 jQuery常用特效方法2. slideDown()、slideUp()和slideToggle()方法 slideDown()和slideUp()方法，以向下或向上滑动的动画效果隐藏或显示匹配的元素。这样的动画效果实际上是通过改变匹配元素的height属性值来实现的。slideToggle()方法可将匹配元素隐藏的显示出来，将显示的隐藏起来。8.3 通过jQuery操作DOM8.3.4 jQuery常用特效方法3. fadeIn()、fadeOut()和fadeTo

10、()方法 fadeIn()、fadeOut()和fadeTo()方法通过修改匹配元素的不透明度来显示或隐藏它们。 fadeOut()方法将不透明度设置为0，使元素完全透明，然后将CSS display属性设置为“none”来实现完全隐藏元素； fadeTo()方法允许指定一个0到1之间的不透明度值，来控制元素的透明程度；fadeIn()与fadeOut()相反，它将匹配元素的不透明度设置为1，使元素完全不透明（正常显示）。8.3 通过jQuery操作DOM8.3.4 jQuery常用特效方法4. animate()方法 animate()方法是一个功能强大的动画效果设计方法，它可以在动画实现的

11、过程中指定众多完善动画效果的属性。8.3 通过jQuery操作DOM8.3.5 jQuery事件处理和事件绑定 “事件处理”是指某一时刻页面元素对某种由系统或用户引发的操作的响应及处理，是系统与用户进行交换的主要途径。如，前面已经使用过的页面加载、按钮被单击、文本框得到或失去焦点等事件发生时，自动调用对应的函数。jQuery中的事件处理是在JavaScript的基础上扩充、完善而构成的，功能更加强大，使用更加便利。 所谓“事件绑定”是指将页面元素的事件类型与事件处理函数关联起来。当事件触发时调用事先绑定的函数进行处理。在JavaScript中通常采用在元素标记中添加属性的方式绑定事件处理函数8

12、.3 通过jQuery操作DOM8.3.5 jQuery事件处理和事件绑定1. on()方法 on()方法用于将事件处理函数绑定到元素的某个事件，其语法格式如下所示。 对于常用事件（如，click、mouseover、mouseout等）jQuery允许省略on关键字，将事件绑定代码简化为类似如下的形式。8.3 通过jQuery操作DOM8.3.5 jQuery事件处理和事件绑定2. one()方法 one()方法用于将元素的某个事件绑定到一个一次性（只被执行一次）的事件处理函数。3. hover()方法 hover()方法用于处理鼠标指向事件。当鼠标指针进入元素区域时触发第一个函数，离开时触发第二个函数，第二个函数为可选项，省略时表示鼠标离开时不执行任何操作。8.4 实训 使用jQuery特效8.4.1 实训目的 通过实训进一步理解使用jQuery实现页面效果的常用方法和手段；掌握通过jQuery