ASP.NET程序设计教程(C#版)第4版 课件 第8、9章 使用jQuery、数据库基础和数据访问控件_第1页
ASP.NET程序设计教程(C#版)第4版 课件 第8、9章 使用jQuery、数据库基础和数据访问控件_第2页
ASP.NET程序设计教程(C#版)第4版 课件 第8、9章 使用jQuery、数据库基础和数据访问控件_第3页
ASP.NET程序设计教程(C#版)第4版 课件 第8、9章 使用jQuery、数据库基础和数据访问控件_第4页
ASP.NET程序设计教程(C#版)第4版 课件 第8、9章 使用jQuery、数据库基础和数据访问控件_第5页
已阅读5页,还剩36页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第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使用NuGet

NuGet是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类是否已被应用,若是则移除,否则应用该CSS类。8.3通过jQuery操作DOM8.3.2样式操作3.css()方法

css()方法是jQuery1.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内容操作2.text()方法text()方法用于读取或设置匹配元素的文本内容,其语法格式及使用方法与html()方法相同。

text()方法与html()方法的区别在于,text()方法只能返回或设置匹配元素的纯文本内容,不能包含HTML标记。3.val()方法

val()方法用于获取或设置表单元素的值,包括文本框、下拉列表框、单选和复选框等元素。当元素允许多选时,返回一个包含被选项的数组。

参阅源代码:ex8-58.3通过jQuery操作DOM8.3.4jQuery常用特效方法show()和hide()方法show()方法和hide()方法可以通过递增或递减元素的width、height和opacity(透明度)属性值实现元素的显示和隐藏,其语法格式如下所示。8.3通过jQuery操作DOM8.3.4jQuery常用特效方法2.slideDown()、slideUp()和slideToggle()方法

slideDown()和slideUp()方法,以向下或向上滑动的动画效果隐藏或显示匹配的元素。这样的动画效果实际上是通过改变匹配元素的height属性值来实现的。slideToggle()方法可将匹配元素隐藏的显示出来,将显示的隐藏起来。8.3通过jQuery操作DOM8.3.4jQuery常用特效方法3.fadeIn()、fadeOut()和fadeTo()方法

fadeIn()、fadeOut()和fadeTo()方法通过修改匹配元素的不透明度来显示或隐藏它们。

fadeOut()方法将不透明度设置为0,使元素完全透明,然后将CSSdisplay属性设置为“none”来实现完全隐藏元素;

fadeTo()方法允许指定一个0到1之间的不透明度值,来控制元素的透明程度;fadeIn()与fadeOut()相反,它将匹配元素的不透明度设置为1,使元素完全不透明(正常显示)。8.3通过jQuery操作DOM8.3.4jQuery常用特效方法4.animate()方法animate()方法是一个功能强大的动画效果设计方法,它可以在动画实现的过程中指定众多完善动画效果的属性。8.3通过jQuery操作DOM8.3.5jQuery事件处理和事件绑定“事件处理”是指某一时刻页面元素对某种由系统或用户引发的操作的响应及处理,是系统与用户进行交换的主要途径。如,前面已经使用过的页面加载、按钮被单击、文本框得到或失去焦点等事件发生时,自动调用对应的函数。jQuery中的事件处理是在JavaScript的基础上扩充、完善而构成的,功能更加强大,使用更加便利。所谓“事件绑定”是指将页面元素的事件类型与事件处理函数关联起来。当事件触发时调用事先绑定的函数进行处理。在JavaScript中通常采用在元素标记中添加属性的方式绑定事件处理函数8.3通过jQuery操作DOM8.3.5jQuery事件处理和事件绑定1.on()方法on()方法用于将事件处理函数绑定到元素的某个事件,其语法格式如下所示。对于常用事件(如,click、mouseover、mouseout等)jQuery允许省略on关键字,将事件绑定代码简化为类似如下的形式。8.3通过jQuery操作DOM8.3.5jQuery事件处理和事件绑定2.one()方法one()方法用于将元素的某个事件绑定到一个一次性(只被执行一次)的事件处理函数。3.hover()方法hover()方法用于处理鼠标指向事件。当鼠标指针进入元素区域时触发第一个函数,离开时触发第二个函数,第二个函数为可选项,省略时表示鼠标离开时不执行任何操作。8.4实训使用jQuery特效8.4.1实训目的通过实训进一步理解使用jQuery实现页面效果的常用方法和手段;掌握通过jQuery处理客户端事件的代码编写方法。8.4.2实训要求

在.aspx页面中设计一个用于显示职工信息的HTML表格,初次打开页面时显示图8-10所示的奇偶行背景色不同的效果。

当用户通过单击行首单选按钮选择某行时,单选按钮呈选中状态,选中行的文本和背景色也呈高亮色显示,如图8-11所示。

如果用户单击了表格中某行而未单击单选按钮,则只改变该行文本和背景色呈高亮色显示,不改变该行单选按钮的状态。第9章数据库基础和数据访问控件本章讲述的主要内容9.1使用数据库系统9.2使用数据控件访问数据库9.3实训使用数据访问控件查询数据库

9.1使用数据库系统9.1.1创建MicrosoftSQLSever数据库在VS2015中内置了SQLServer2014ExpressLocalDB版(安装升级包后,可自动更新为LocalDB2016),LocalDB是SQLServerExpress的一种运行模式,也可以理解为超轻量级的SQLServer,特别适合在开发环境使用。1.新建数据库和数据表在VisualStudio中提供了一个简单的,操作远程SQLServer数据库的“服务器资源管理器”。

9.1使用数据库系统9.1.1创建MicrosoftSQLSever数据库1.新建数据库和数据表

新建数据库9.1使用数据库系统9.1.1创建MicrosoftSQLSever数据库1.新建数据库和数据表

新建表9.1使用数据库系统9.1.1创建MicrosoftSQLSever数据库2.SQLServer中常用数据类型

(1)char(n)(2)varchar(n)(3)text和varchar(MAX)(4)int(5)real和float(6)datetime9.1使用数据库系统9.1.2常用SQL语句1.查询语句(Select)SELECT语句主要用于从数据库中返回需要的数据集,其语法格式为:SELECTselect_list[INTOnew_table_name]FROMtable_list[WHEREsearch_conditions][GROUPBYgroup_by_list][HAVINGsearch_conditions][ORDERBYorder_list[ASC|DESC]]9.1使用数据库系统9.1.2常用SQL语句2.插入记录语句(Insert)

使用Insert语句可以向表中插入记录,该语句的语法格式为:INSERTINTO表名称(字段名)VALUE(字段值)3.修改记录语句(Update)使用Update语句可更新(修改)表中的数据,其语法格式为:UPDATE表名称SET字段名=值WHERE条件4.删除记录语句(Delete)使用DELETE语句可以删除数据表中指定行,其语法格式为:DELETEFROM表名称WHERE条件9.1使用数据库系统9.1.3MicrosoftSQLServer常用操作1.创建存储过程9.1使用数据库系统9.1.3MicrosoftSQLServer常用操作2.分离和附加数据库(1)分离数据库

9.1使用数据库系统9.1.3MicrosoftSQLServer常用操作3.分离和附加数据库(2)附加数据库首先需要将从其他计算机分离复制过来或从Internet中下载的数据库文件复制到安装有SQLServerExpressLocalDB的计算机中(通常需要复制到网站下的App_Data文件夹中)。启动VS,在服务器资源管理器中右键单击“数据连接”,在弹出的快捷菜单中执行“新建连接”命令,按向导提示即可完成操作。9.1

使用数据库系统9.1.4

MicrosoftAccess

Access数据库管理系统是MicrosoftOffice的一个组件,是最常用的本地数据库之一。在C#中可以方便地使用数据库对象,操作Access数据库。

1.创建数据库

2.创建数据表9.2使用数据控件访问数据库9.2.1使用数据源控件1.AccessDataSource

AccessDataSource数据源控件是专门为连接Access数据库而设计的。2.SqlDataSource

SqlDataSource数据源控件是专门为连接MicrosoftSQLServer数据库而设计的。使用SqlDataSource控件还能建立与Oracle、ODBC、OLEDB、等数据库的连接,并对这些数据库执行查询、插入、编辑或删除操作。3.LinqDataSource4.XmlDataSource5.SiteMapDataSource9.2使用数据控件访问数据库9.2.2使用GridView控件

GridView控件用于配合数据源控件实现对数据库进行浏览、编辑、删除等操作。数据源控件主要包括用于连接Access数据库的AccessDataSource和用于连接SQLServer数据库的SqlDataSource。1.添加数据源控件2.添加GridView控件3.设置GridView控件的属性参阅源代码:ex9-19.2使用数据控件访问数据库9.2.3

使用FormView数据控件

FormView控件与前面介绍过的GridView控件相似,也是用于浏览或操作数据库的数据控件。它与GridView相比主要的不同在于显示在FormView中的数据记录是分页的,即每页只显示一条记录。9.2使用数据控件访问数据库9.2.3

使用FormView数据控件9.2

使用数据控件访问数据库9.2.4

使用Repeater控件

Repeater控件是一个数据绑定列表控件(数据浏览控件),它允许通过为列表中显示的

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论