第2章ASPNET网站文件及jQuery_第1页
第2章ASPNET网站文件及jQuery_第2页
第2章ASPNET网站文件及jQuery_第3页
第2章ASPNET网站文件及jQuery_第4页
第2章ASPNET网站文件及jQuery_第5页
已阅读5页，还剩56页未读， 继续免费阅读

下载本文档

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

文档简介

Web程序设计

——ASP.NET实用网站开发网络开发技术吴冬芹yzwudongqin@2第2章ASP.NET4.5网站文件及jQuery3本章要点：了解ASP.NET4.5网站组成。熟悉.html文件及XHTML5常用元素。理解Web窗体页的两种模型：单文件模型和代码隐藏页模型熟悉CSS3样式定义、存放位置。了解JavaScript常识，熟悉代码存放位置。了解jQuery，熟悉jQuery的功能和使用方法。了解XML常识，熟悉XML文件结构。熟悉Web.config配置文件结构和Global.asax文件。4目录2.1.htm文件和XHTML52.2.aspx文件2.3.CSS文件和CSS常识2.4.js文件和JavaScript常识2.5jQuery2.6.XML文件和XML常识2.7web.config2.8Global.asax2.7小结52.1.htm文件和XHTML5.htm文件是一种静态网页文件，不包含任何服务器控件，由HTML元素组成。客户端浏览器访问.htm文件时，IIS不经过任何处理就直接送往浏览器，由浏览器解释执行。XHTML（eXtensibleHyperTextMarkupLanguage）可扩展超文本标记语言是被国际标准化组织机构W3C认定，用于替代HTML的标记语言。能被所有浏览器识别，是网页生成的基础。6拓展：W3C万维网联盟（WorldWideWebConsortium），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯·李。W3C制定了包括Html、XML和CSS等的众多影响深远的标准规范。但是，W3C制定的web标准似乎并非强制而只是推荐标准。2011年1月，腾讯签约加入W3C，共同参与包括webApp、HTML5等新互联网技术标准的研究和制定。2011年9月，百度加入，加入后，将能够与全球500家IT和互联网企业联手，共同研究互联网开放平台及无线互联网技术等相关标准。2013年1月21日，W3C宣布将北京航空航天大学(BUAA)加入其主机构列表中，使其成为全球第四所具备该机构主机资格的高校以及近15年来的首个全新加入的主要机构。北航成为继麻省理工学院、法国INRIA、日本庆应义塾大学之后的第四所高校主机机构。7拓展：html，xhtml，html5WHATWG：WebHypertextApplicationTechnologyWorkingGroup，网页超文本应用技术工作小组一个以推动网络HTML5标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。WHATWG成立的原因是W3C意图放弃HTML，而力图发展XML。2007-7-10,MozillaFoundation,Apple,OperaSoftware建议W3C跟随WHATWG’的HTML5，将新的HTML（标准通用标记语言下的一个应用）命名为"HTML5".2007-4-7,新的HTML工作组采纳了他们的建议。82.1.htm文件和XHTML5在VSEW2012中默认使用XHTML5文件类型。XHTML5与HTML5使用相同的元素，但XHTML5具有更严格的规则。“XHTML5是标记语言的顶峰”所有包含ASP.NET元素的动态页面最终都要转化为包含相应XHTML元素的静态页面才能被浏览器识别。92.1.1.htm文件结构<!DOCTYPEhtml><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title></head><body>…</body></html><!--…-->表示注释。<!DOCTYPEhtml>表示文档类型为HTML5。<html>…</html>表示这是一个HTML文档。<head>…</head>表示文档头部信息。<meta>表示文档的元信息。<title>…</title>表示浏览器标题栏中显示的信息，应包含于<head>…</head>中。<style>…</style>表示CSS样式信息，应包含于<head>…</head>中。102.1.2常用XHTML5元素<body>…</body>表示文档主体部分。<header>…</header>表示整个显示页面的标题信息。<aside>…</aside>表示与旁边内容相关的标题信息。<section>…</section>表示显示页面的内容区域。<article>…</article>表示显示页面中与上下文不相关的独立内容。<footer>…</footer>表示显示页面中的脚注信息。<nav>…</nav>表示显示页面中的导航链接区域。<h1>…</h1>表示一级标题，共六级标题。<div>…</div>表示显示页面中的一块内容，俗称“层”，常用CSS样式表统一其中的显示格式。<p>…</p>表示一个段落。112.1.2常用XHTML5元素<br/>表示换行。<hr/>表示水平线。<table>……</table>表示一个表格，其中<tr>表示一行，<td>表示一个单元格。<ahref="intro.htm">我的简介</a>表示在浏览器上显示超链接“我的简介”，点击后链接到intro.htm。<ahref="mailto:kxsg@21">我的邮箱</a>表示浏览器上显示超链接“我的邮箱”，单击链接后给kxsg@21发邮件。12常用的实体符号表13实例2-1认识常用XHTML5元素注意：单击浏览器“查看”→“源文件”可看到.htm文件的源代码，将浏览看到的效果与源代码中的XHTML元素对比，从而了解XHTML元素的作用。源程序：HTML5.html14实例2-1认识常用XHTML元素<!DOCTYPEhtml><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="keywords"content="MyPetShop,XHTML5"/><metaname="description"content="XHTML5页面示范"

/><metaname="author"content="ssgwcyxxd@,阿毛"/><metahttp-equiv="refresh"content="3"/><title>认识常用XHTML5元素</title><styletype="text/css">aside{float:left;width:15%;}section{float:right;width:85%;}footer{clear:both;}</style></head><body><header><h1style="background-color:#C0C0C0">网站Logo</h1></header><aside><navstyle="background-color:#C0C0C0"><ahref="Default.aspx">介绍</a><br/><ahref="Database.aspx">数据库设计</a></nav></aside><section><h3>MyPetShop</h3><article>MyPetShop是本书提供的一个综合实例，用来展示ASP.NET4.5网站开发技术。</article><article><h4>功能模块</h4>MyPetShop包括前台商品浏览、用户管理、购物车、订单结算、后台管理等模块。</article></section><footerstyle="background-color:#C0C0C0">Copyright2014MyPetShop</footer></body></html><meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的

名称/值

对15程序说明<metahttp-equiv="refresh"content="3"/>表示页面每隔3秒自动刷新一次。<htmlxmlns="/1999/xhtml">xmlns是xmlnamespace的缩写，也就是XML命名空间，xmlns属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于URL，它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。16拓展阅读：为什么需要xmlns？在xhtml5中，允许使用各个不同的DTD文件，有可能不同的DTD文件中包含了相同的标识，这样就会出现标志冲突。如在a.dtd中和b.dtd中都包含<table>，如果一个xhtml5文件同时包含了这两个dtd文件，而且使用了标志<table>，就会出现标志冲突问题，为了解决冲突，就可以使用xmlns区分使用的是哪个dtd文件中的标志。<htmlxmlns:a=""><htmlxmlns:b=""><a:table...><b:table...>172.2.aspx文件.aspx文件（Web窗体）在ASP.NET4.5网站中占据主体部分。直接或间接地继承自System.Web.UI.Page类。每个Web窗体中的代码包括两部分：一部分是处于<body>元素之间的用于界面显示的代码；另一部分是包含事件处理等的C#代码。C#代码存储时有两种模型：1、单文件页模型2、代码隐藏页模型。181、单文件页模型显示界面代码和逻辑处理代码（事件、函数处理等）都放在同一个.aspx文件中。逻辑处理代码包含于<script>元素中。<script>元素位于位于<html>元素之上，且包含runat=“server”属性。实例2-2单文件页模型本实例包含TextBox、Label、Button控件各一个，当在TextBox1中输入内容后再单击Button1，则在Label1中显示“不管您输什么，我都喜欢ASP.NET!”。源程序：SimplePage.aspxrunat=“server”，表示这是服务器端控件。在服务器端运行，然后生成相应的客户端代码，可以在服务器端的后台代码文件.cs文件中（例如C#、VB）中访问这个控件。普通的HTML控件，如果不加这个的话，直接在客户端运行。19说明：

protectedvoidButton1_Click(objectsender,EventArgse){Label1.Text="不管您输什么，我都喜欢ASP.NET!";}objectsender指的是事件监视的对象；EventArgs就是事件所需要的数据，而e是EventArgs类型的参数，它包含了事件所携带的信息,在运行时由系统调用的，比如说一个按钮控件，当它的单击事件被引发时，系统会自动把这个按钮对象作一个类型强制转换然后赋值给Sender，然后传递e。202、代码隐藏页模型适用于多个开发人员共同创建网站的情形。显示界面的代码包含于.aspx文件逻辑处理代码包含于对应的.aspx.cs文件，包含事件处理方法和自定义方法等；.aspx文件不包含<script>元素，但在@page指令中需包含引用的外部文件。当用户请求页面时，通过页面的Page指令，Web服务器自动将逻辑代码文件和布局代码结合到一起，形成组合代码：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="CodeBehind.aspx.cs“Inherits="Chap2_CodeBehind"%>212、代码隐藏页模型<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="CodeBehind.aspx.cs“Inherits="Chap2_CodeBehind"%>AutoEventWireup=“true”指定页面事件自动绑定到指定的方法。CodeFile=“CodeBehind.aspx.cs”指定后台编码文件。Inherits="Chap2_CodeBehind"指定继承的类名。222、代码隐藏页模型实例2-3代码隐藏页模型源程序：CodeBehind.aspx232.3.CSS文件和CSS常识为什么需要CSS？XHTML5能限定浏览器中网页元素的显示格式，但可控性不强，如统一网站风格需要逐个网页去修改。CSS（CascadingStyleSheet）级联样式表应用于网页中元素的样式规则，为各类浏览器所接受。在XHTML基础上，CSS提供了精确定位和重新定义XHTML元素属性的功能。一个CSS文件可以作用到多个XHTML文件，要同时改变多个XHTML网页风格时，只要修改CSS样式文件即可。版本：CSS1、CSS2、CSS3。242.3.1定义CSS3样式每个CSS3样式有两个主要部分：选择器（如h1、p）选择器适用于页面中的所有元素，常用于全局设置。例如，将页面中所有元素的字体设为Arial的CSS3样式为：*{font-family:Arial;}声明：声明由属性和值组成。如：如color:blue252.3.1定义CSS3样式根据定义的不同用途，CSS样式包括1、基于元素的样式2、基于类的样式3、基于ID的样式。注意：当这三种样式运用于同个XHTML元素时，基于ID的样式优先级最高，其次是基于类的样式，最后是基于元素的样式。262.3.1定义CSS样式1、基于元素的样式元素选择器的取名即为XHTML元素名，用于重新定义指定的XHTML元素的属性。例如，对所有<p>和</p>之间的段落设置文本对齐格式为居中的CSS3样式为：p{background-color:#99FF99;}属性选择器27CSS3样式说明[attr]{…}选择attr属性的元素[attr=val]{…}选择attr属性值为val的元素[attr~=val]{…}选择attr属性值中包含val值（必须以空格间隔）的元素[attr|=val]{…}选择attr属性值中以val值（必须以下划线间隔）开始的元素[attr^=val]{…}选择attr属性值中以val值开始的元素[attr$=val]{…}选择attr属性值中以val结尾的元素[attr*=val]{…}选择attr属性值中包含val值的元素282.3.1定义CSS3样式2、基于类的样式类选择器可以应用于不同的XHTML元素或某个XHTML元素的子集。定义时，要在选择器名前加“.”，如对类名intro定义为红色的样式规则为：.intro{color:#ff0000;}在页面中，用class="类名"的方法调用，如：

<pclass="intro">292.3.1定义CSS3样式3、基于ID的样式应用于由ID值确定的XHTML元素的属性，且常用于单个XHTML元素的属性设置。定义时，需在选择器（ID名）前加“#”。在网页CSS布局中主要靠层“div”实现，而“div”的样式常采用基于ID的样式。如要对定义的层<divid="menubar">…</div>设置背景色为绿色的样式规则为：#menubar{background-color:#008000;}302.3.2CSS3样式位置CSS样式规则可以放在不同的位置包括：与XHTML元素的内联、位于页面的<style>元素中和外部样式表（.css文件）中。不同位置CSS样式规则的优先级是1、内联样式最高（可通过style属性设置）;2、其次是页面中的CSS样式;3、最后是外部样式表。312.3.2CSS3样式位置1、创建内联样式当要为单个元素定义属性而不想重用该样式时，可以使用内联样式。内联样式规则在XHTML元素的style属性中定义，如： <pstyle=“font-weight:bold;font-style:italic”><pstyle=“text-align:center;color:#FFFF00;”>直接在相应元素属性窗口的style属性中设置，设置完成后自动生成样式规则。322.3.2CSS3样式位置2、创建特定页的CSS样式当要为特定页中的元素设置样式规则时，可以在<head>元素中的<style>元素内定义。定义时可采用:基于元素的样式、基于类的样式或基于ID的样式。实例2-4运用页面样式源程序：Interior.aspx33补充说明：Font-styleitalic和oblique都是向右倾斜的文字,但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.inherit是继承父类的属性，一般用于字体、颜色、背景text-transformcapitalize;/*首字大写*/uppercase;/*英文大写*/lowercase;/*英文小写*/

34补充说明：font-variant:small-caps，针对英文字母的，意思是小型大写，大小跟小写字母一样，样式是大写text-decorationBlink属性：很多浏览器不支持blink属性.所以建议不要使用text-decoration的blink.

如果实在是想要blink,那么可以使用js实现.

352.3.2CSS3样式位置3、创建外部样式表外部样式表中的样式规则常应用于整个网站，这些规则包含于独立的.css文件中。在调用时，使用<link>元素可以将样式表链接到网页，如将“1-3.css”文件中的样式规则应用于当前页的代码为： <linkrel="stylesheet"type="text/css"href="1-3.css"/>实例2-5运用外部样式表源程序：Exterior.css源程序：Exterior.aspx362.4.js文件和JavaScript常识JavaScript是由NetScape公司开发的基于对象和事件驱动的解释型语言。作为一种脚本语言可以直接嵌入到XHTML页面中，不需要Web服务器端的解释执行即可由浏览器实现动态网页处理。目前的浏览器均支持JavaScript。37典型的JavaScript用途在XHTML中创建动态文本。响应客户端事件。可以读取并改变XHTML元素的内容。在数据提交到服务器之前，验证这些数据。可检测访问者的浏览器，并根据检测到的浏览器类型载入相应的页面。用来创建cookies。关闭窗口。页面上显示时间。382.4.1JavaScript代码位置1、在<head>元素中2、在<body>元素中3、独立的.js文件中391、在<head>元素中<head>元素中的JavaScript代码包含于<scripttype=“text/JavaScript”>…</script>元素之间，只有在被调用或当事件被触发时才会执行。实例2-6：<head>元素中的JavaScript代码源程序：HeadJS.aspx40源程序：headJS.aspx<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="HeadJS.aspx.cs"Inherits="Chap2_HeadJS"%><!DOCTYPEhtml><htmlxmlns="/1999/xhtml"><headrunat="server"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>熟悉<head>元素中的JavaScript代码</title>

<script>functionmessage(){alert("在\<head\>元素中");

}</script></head><bodyonload="message()“><formid="form1"runat="server"></form></body></html>当网页执行到<body>元素时，触发load事件，调用message()函数。注意：JavaScript中采用首字符为小写字母的方式命名对象、函数等。412、在<body>元素中<body>元素中的JavaScript代码要包含于<scripttype=“text/JavaScript”>…</script>之间。实例2-7<body>元素中的JavaScript代码源程序：BodyJS.aspx程序说明：页面载入时执行docment.write方法输出XHTML文本“在<body>元素中”，浏览器上显示效果是“在<body>元素中”。42源程序：BodyJS.aspx<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="BodyJS.aspx.cs"Inherits="Chap2_BodyJS"%><!DOCTYPEhtml><htmlxmlns="/1999/xhtml"><headrunat="server"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>熟悉<body>元素中的JavaScript代码</title></head><body><formid="form1"runat="server"><div>

<script>document.write("在<body>元素中");</script></div></form></body></html>包含于<body>元素中的JavaScript肯定会执行，而<head>元素中的JavaScript只有被调用才执行。注意：“<”在程序中用“<”表示；“>”用“>”表示。433、在独立的.js文件中独立的.js文件常用于多个页面需要调用相同JavaScript代码的情形。把所有.js文件放在同一个脚本文件夹中，易于管理。调用外部JavaScript文件时，需在<script>元素中加入src属性值。源程序：FileJS.aspx44源程序：FileJS.aspx<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="FileJS.aspx.cs"Inherits="Chap2_FileJS"%><!DOCTYPEhtml><htmlxmlns="/1999/xhtml"><headrunat="server"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>运用独立的.js文件</title>

<scriptsrc="../Scripts/FileJS.js"></script></head><bodyonload="message()"><formid="form1"runat="server"></form></body></html>functionmessage(){alert("JavaScript代码在FileJS.js文件中!")}当网页执行到<body>元素时，触发load事件并调用FileJS.js中的message()函数。注意：js文件中不要包含<script>元素。实例2-9实现图片动态变化效果45源程序：ChangeImg.aspx程序说明：页面载入后显示mouseOut.jpg。getElementById()返回指定id的XHTML元素。当鼠标指针指向图片时触发mouseover事件后调用mouseOver()函数显示mouseOver.jpg，移开时触发mouseout事件后调用mouseOut()函数显示mouseOut.jpg。单击后链接到。46源程序：ChangeImg.aspx<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ChangeImg.aspx.cs"Inherits="Chap2_ChangeImg"%><!DOCTYPEhtml><htmlxmlns="/1999/xhtml"><headrunat="server"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>实现图片动态变化效果</title>

<script>

functionmouseOver(){document.getElementById("mouse").src="../Images/mouseOver.jpg";

}functionmouseOut(){document.getElementById("mouse").src="../Images/mouseOut.jpg";

}</script></head><body><formid="form1"runat="server"><div><ahref=""target="_blank"><imgid="mouse"alt="访问sina!"src="Images/mouseOut.jpg"onmouseover="mouseOver()"onmouseout="mouseOut()"/></a></div></form></body></html>当网页执行到<body>元素时，触发load事件并调用FileJS.js中的message()函数。注意：js文件中不要包含<script>元素。实例2-10实现一个简易时钟47源程序：Timer.aspx程序说明：当页面载入时，触发<body>元素的load事件，执行自定义的startTimer()函数，该函数过1秒后重复调用自身，连续地在div层divTimer上显示当前系统时间。其中，时间数据来源于客户端。48源程序：Timer.aspx……<script>functionstartTimer(){vartoday=newDate();//获取客户端当前系统日期

varh=today.getHours();varm=today.getMinutes();vars=today.getSeconds();m=checkTime(m);s=checkTime(s);document.getElementById("divTimer").innerHTML=h+":"+m+":"+s;

setTimeout("startTimer()",1000);//过1秒后重复调用自定义的startTimer()函数

}//checkTime(i)检查i参数值。如果i<10，就在数字前加0functioncheckTime(i){if(i<10){i="0"+i;}returni;}</script></head><bodyonload="startTimer()"><formid="form1"runat="server"><divid="divTimer"></div></form></body>……2.5jQuery49jQuery由JohnResig于2006年初创建。一个优秀的JavaScript框架，提供JavaScript库。访问和管理（包括插入、修改、删除等操作）XHTML元素，设置XHTML元素的CSS样式，处理XHTML元素的事件，实现XHTML元素的动画特效，为网站提供Ajax交互。支持XHTML5和CSS3，提供的jQueryMobile可以方便地用于智能手机和平板电脑的Web应用程序开发。绝大多数浏览器均支持jQuery。2.5jQuery50在VSEW2012中，通过NuGet程序包管理器安装jQuery安装完成后，在网站根文件夹下的Scripts文件夹中会自动添加最新的由jQuery提供的JavaScript库。在VSEW2012中，要使用jQuery提供的JavaScript库，需要在页面的<head>元素中添加相应的引用，示例代码如下：<scriptsrc="Scripts/jquery-2.1.0.min.js"></script>2.5.1jQuery基础语法51格式：$(selector).action()Selector用于选择浏览器对象（如表示浏览器窗口的window对象，表示XHTML文档的document对象等），也可以用于选择XHTML元素。action()通过调用jQuery已定义的方法或编写自定义方法，对选择的对象执行具体的操作。常用的jQuery选择器52选择器示例示例含义*选择器$("*")选择所有元素元素选择器$("p")选择所有<p>元素属性选择器$("[attr]")选择所有带有attr属性的元素$("[attr='val']")选择所有attr属性的值等于val的元素$("[attr!='val']")选择所有attr属性的值不等于val的元素类选择器$(".intro")选择所有class="intro"的元素id选择器$("#menubar")选择id="menubar"的元素first选择器$("p:first")选择第一个<p>元素contains选择器$(":contains('W3C')")选择包含指定字符串W3C的所有元素常用的jQuery方法53方法含义attr()设置或返回被选择元素的属性和值bind()向被选择的元素添加事件处理代码click()触发或将函数绑定到被选择元素的click事件css()设置或返回被选择元素的样式属性fadeIn()从隐藏到可见，逐渐地改变被选择元素的不透明度fadeOut()从可见到隐藏，逐渐地改变被选择元素的不透明度fadeToggle()对被选择元素进行隐藏和显示的切换hide()隐藏被选择的元素jQuery.ajax()执行异步HTTP（Ajax）请求，常用于实现页面的局部刷新load()触发或将函数绑定到被选择元素的load事件mouseout()触发或将函数绑定到被选择元素的mouseout事件mouseover()触发或将函数绑定到被选择元素的mouseover事件ready()在HTML文档就绪时触发ready事件，然后执行定义的函数text()设置或返回被选择元素的内容实例2-11利用jQuery管理XHTML元素

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论