Demo 代码学习+基础学习

最新推荐文章于 2025-06-19 17:35:33 发布

Xiao_yanling

最新推荐文章于 2025-06-19 17:35:33 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：代码学习

本文链接：https://blog.csdn.net/Xiao_yanling/article/details/94982297

代码学习专栏收录该内容

0 篇文章

订阅专栏

本文介绍了前端框架Demo中的JQuery基础，包括其概念、下载与使用步骤、对象区别，以及DOM操作。同时讲解了AJAX的异步交互原理及实现方式。最后，概述了ASP.NET的WebForm和MVC两种开发模式及其优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Demo框架

1.前端：HTML+jQuery+ajax
2.后端：asp.net的wcf service

前端基础学习

JQuery

1.概念：
一个JavaScript框架。简化JS开发：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

本质上就是一些js文件，封装了js的原生代码而已。
代码1：自定义js框架：
在这里插入图片描述

2.步骤：
（1）下载JQuery
jquery-xxx.js和jquery-xxx.min.js的区别：
jquery-xxx.js：开发版本。给程序员看到，有良好的缩进和注释
jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些，程序加载更快。
（2）导入JQuery的js文件：导入jquery-xxx.min.js
（3）使用
代码2：JQuery获取对象
在这里插入图片描述
3.JQuery对象和JS对象的区别：
（1）JQuery对象在操作时更加方便。
（2）JQuery对象和js对象方法不通用。
（3）两者相互转换：jq–>js:jq对象[索引]或者jq对象.get(索引)；js—>jq:$(js对象).
代码3：
4.选择器：筛选具有相似特征的元素（标签）
1.基本语法：
（1）事件绑定

</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="button" value="点我" id="b1">

<script>
//给b1添加单击事件
//获取b1按钮
$('#b1').click(function(){alert("abc")});//事件注册
</script>

（2）入口函数

window.onload=function(){
$('#b1').click(function()
{alert("abc")});//事件注册
}

//JQuery入口函数（dom文档加载完成之后执行该函数中的代码）
$(function(){
	//获取b1按钮
	$('#b1').click(function()
		{alert("abc")});//事件注册
});
/*window.onload和$(function())区别：
 * window.onload只能定义一次，如果定义多次，后面的会覆盖掉前面的。
 */

（3）样式控制

 $(function(){
	 $("#div1").css("background-color","red");
	 $("#div2").css("backgroundColor","pink");
 });

2.分类
（1）基本选择器
①标签选择器（元素选择器）：获得所有匹配标签名称的元素

//Change the backgroud color of all elements whose name is <div> into pink
	$("#b2").click(function(){
		$("div").css("backgroundColor","pink");
	});

②id选择器：获得所有与id属性值匹配的元素

//Change the background color of all elements whose id equals to one into pink
	$("#b1").click(function(){
		$("#one").css("backgroundColor","pink");
	});

③类选择器：获得与指定的class属性值匹配的元素

//Change the backgroud color of all elements whose class is mini into pink
	$("#b3").click(function(){
		$(".mini").css("backgroundColor","pink");
	});

④并集选择器：获得多个选择器选中的所有元素

//Change the backgroud color of all <span> elements and all elements whose id equals to two into pink
	$("#b3").click(function(){
		$("span,#two").css("backgroundColor","pink");
	});

（2）层级选择器
①后代选择器：选择A元素内部的所有B元素

//后代
$("#b1").click(function(){
	$("body div").css("backgroundColor","pink");
});

②子选择器：选择A元素内部的所有B子元素

//儿子
$("#b2").click(function(){
	$("body>div").css("backgroundColor","pink");
});

（3）属性选择器

<script>
$(function(){
	//有title属性
	$("#b1").click(function(){
	$("div[title]").css("backgroundColor","pink");
});
	//title属性等于test
	$("#b2").click(function(){
	$("div[title='test']").css("backgroundColor","pink");
});
	//title属性不等于test
	$("#b3").click(function(){
	$("div[title!='test']").css("backgroundColor","pink");
});
	//title属性以te开始
	$("#b4").click(function(){
	$("div[title^='te']").css("backgroundColor","pink");
});
	//title属性以est结束
	$("#b5").click(function(){
	$("div[title$='est']").css("backgroundColor","pink");
});
	//title属性包含es
	$("#b6").click(function(){
	$("div[title*='es']").css("backgroundColor","pink");
});
	//既有id属性，title属性又包含es
	$("#b7").click(function(){
		$("div[id][title*='es']").css("backgroundColor","pink");
	});
})
</script>

（4）过滤选择器

<script>
$(function(){
	//第一个div
	$("#b1").click(function(){
	$("div:first").css("backgroundColor","pink");
});
	//class不为one
	$("#b2").click(function(){
		$("div:not(.one)").css("backgroundColor","pink");
	});
	//偶数
	$("#b3").click(function(){
	$("div:even").css("backgroundColor","pink");
});
	//...
</script>

（5）表单过滤选择器
在这里插入图片描述
5.DOM操作
（1）内容操作
①html()：获取/设置元素的标签体内容
②text()：获取/设置元素的标签体纯文本内容
③val()：获取/设置元素的value属性值

（2）属性操作
①通用属性操作：
attr()：获取/设置元素的属性
removeattr()：删除属性
prop()：获取/设置元素的属性
removeProp()：删除属性

attr()和prop()的区别：
如果操作的是元素固有属性，用prop；自定义属性用attr。

②对class属性操作：
addClass()：添加class属性值
removeClass()：删除class属性值
toggleClass()：切换class属性

//toggleClass("one"):判断如果元素对象上存在class=“one”，则将属性值one删除掉。如果 对象上不存在class=“one”，则添加。

AJAX

1.概念：异步的JavaScript和XML（客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。）

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2.实现方式：
（1）原生的JS实现方式
（2）JQuery实现方式
① $. a j a x () ②$ .get()
③$.post()
在这里插入图片描述

ASP.NET

一、ASP.Net的两种开发模式
1.1 ASP.Net WebForm的开发模式
（1）处理流程
　　在传统的WebForm模式下，我们请求一个例如http://www.aspnetmvc.com/blog/index.aspx的URL，那么我们的WebForm程序会到网站根目录下去寻找blog目录下的index.aspx文件，然后由index.aspx页面的CodeBehind文件(.CS文件)进行逻辑处理，其中或许也包括到数据库去取出数据(其中的经过怎样的BLL到DAL这里就不谈了)，然后再由index.aspx页面来呈现给用户。

在WebForm模式下：一个URL请求的是在服务器与该URL对应路径上的物理文件(ASPX文件或其他)，然后由该文件来处理这个请求并返回结果给客户端。

（2）开发方式

• 服务器端控件
　　• 一般处理程序+Html静态页+Ajax
　　• 一般处理程序+Html模板引擎
1.2 ASP.Net MVC的开发模式
（1）处理流程

在 ASP.Net MVC中，客户端所请求的URL是被映射到相应的Controller去，然后由Controller来处理业务逻辑，或许要从Model中取数据，然后再由Controller选择合适的View返回给客户端。运行的 ASP.NET MVC程序访问的http://www.aspnetmvc.com/Home/Index这个URL，它访问的其实是HomeController中的Index这个Action。

（2）显著特点

• 2009年第一个开源项目版本发布，至今已过去5年，发展逐渐完善
　　• 更加简洁，更加接近原始的“请求-处理-响应”
　　• 更加开发、更多的新的特点、社区活跃
　　• 不会取代WebForm
　　• 底层跟WebForm都是一样的，只是管道上不同的处理而已
　　
二、MVC模式的两种不同解读
　　MVC 模式两种理解：一种是表现模式，另外一种是架构模式。它将应用程序分成三个主要组件即：视图（View）、控制器（Controller）和模型（Model）。现在，我们来看看M-V-C分别代表什么？
　　M：Model 主要是存储或者是处理数据的组件；Model其实是实现业务逻辑层对实体类相应数据库操作，如：CRUD。它包括数据、验证规则、数据访问和业务逻辑等应用程序信息。（补充：ViewModel：视图模型）
　　V：View 是用户接口层组件。主要是将Model中的数据展示给用户。aspx和ascx文件被用来处理视图的职责；
　　C： Controller 处理用户交互，从Model中获取数据并将数据传给指定的View；

MVC作为架构模式的理解
作为架构模式时，View的职责就是负责展示数据，而Controller则负责获取View传递来的数据，然后调用业务逻辑层处理完成的数据传递给View进行展示。而Model则处理业务逻辑，并把结果返回给Controller。从传统三层架构上来看，View和Controller都属于UI层，而Model则横跨BLL与DAL层。

三、WebForm vs MVC
（1）WebForm
优点:
1.提供了大量的服务器端控件，可以实现快速开发；
2.ViewState回传数据很方便；
3.学习成本低；
缺点:

封装太强，虽然学习成本低，很多底层东西让初学者不是很明白；
自定义控制不灵活，不利于美工和开发人员的配合，往往那些服务器控件处理稍有不慎就会导致出错；
ViewState在页面中的传递会造成大量的流量消耗；

（2）MVC
优点: 1.很容易将复杂的应用分成Model(ViewModel)、View、Controller三个组件模型，将处理后台逻辑代码与前台展示逻辑进行了很好的分离，属于松耦合关系，在大项目应用中，更易于敏捷开发与测试驱动开发，有很强的可扩展性；
2.因为没有服务器端控件，所以程序员控制的会更加灵活，页面更加干净，没有ViewState；
3.通过修改路由规则，可以控制生成自定义的url，因此控制生成SEO友好的URL将更加容易；
4.强类型View实现、Razor视图、Model绑定机制、Model的验证机制，更安全高效；
缺点: 学习成本高，结构复杂，对未变化数据的不必要的频繁访问，也将损害操作性能。

四、第一个ASP.Net MVC程序
1 新建项目后的文件组织结构
（1）新建一个ASP.Net MVC 4项目，选择“基本”配置与“ASPX”视图引擎（暂时不用Razor引擎）。
（2）VS默认帮我们创建好了Models、Views以及Controllers的三个文件夹，这三个文件夹就构成了ASP.Net MVC模式的项目。其中，Controllers是所有控制器的类文件所在，而Models则是所有模型的类文件所在，而Views则是所有cshtml或aspx的文件所在。

2 控制器的“约定大于配置”
　　在Controllers中新建一个控制器，取名为HomeController。在默认的Index这个Action中新建一个视图，默认名为Index即可。
（1）Controller放到controllers文件夹中，并且命名方式以Controller结尾
（2）每个Controller都对应View中的一个文件夹，文件夹的名称跟Controller名相同
（3）Controller中的方法名都对应一个View视图（非必须，但是建议这么做）而且View的名字跟Action的名字相同
（4）控制器必须是非静态类，并且要实现IController接口
（5）Controller类型可以放到其他项目中
3 视图的相关约定
（1）所有的视图必须放到Views目录下
（2）不同控制器的视图用文件夹进行分割，每个控制器都对应一个视图目录
（3）一般视图名字跟控制器的Action相对应（非必须）
（4）多个控制器公共的视图放到Shared：例如公用的错误页、列表模板页、表单模板页等等；
4 数据传递的桥梁-ViewData与ViewBag
　　首先，ViewData是一个Key/Value对的字典集合数据结构，用于在Controller和View之间构建起传递数据的桥梁。
（1）ViewData是Controller的属性，此属性是继承ControllerBase而来。
（2）ViewPage下也有一个ViewData的一个属性
（3）控制器的Action方法执行完成后，返回ViewResult，然后MVC框架在执行ExcuteResult方法时，Controller中的ViewData数据会传递给ViewPage类，其实就是把Controller的ViewData赋值给ViewPage页面的ViewData属性。
（4）ViewBag传递数据：我们对ViewBag的动态属性进行赋值，值实际上是存到了ViewData中，动态属性的名存成了ViewDataDictionary的键，动态属性的值存成了ViewDataDictionary的值。
ViweBag其实是就一个包含了一层Dynamic的ViewData，两个兄弟共用的是一个容器
（5）如何在程序中使用ViewData与ViewBag
①在Controller中的代码

public ActionResult Index()
        {
            ViewData["Name"] = "Edison Chou";
            ViewBag.Name = "Edison Chou";
            return View();
        }

②在View中的代码

<body>
    <div>
        <h1>Hi,ASP.Net MVC First Demo!</h1>
        <%
            for (int i = 0; i < 5; i++)
            {
                Response.Write("Hello World!<br/>");
            }
        %>
        <p><%: ViewData["Name"] %></p>
        <p><%: ViewBag.Name %></p>
    </div>
</body>