如何在MVC应用程序中使用Jquery

如何在MVC应用程序中使用Jquery,第1张

如何在MVC应用程序中使用Jquery

(1) 当使用Visual Studio项目模版创建新的ASPNET MVC项目时,它会默认生成使用Jquery需要的所有内容,每个新项目中都回包含一个Scripts文件夹,里面带有很多个js文件,各位可以新建一个mvc项目看看,如图所示:

(2) JQuery核心库是一个名为Jquery-<version>js的文件,因为我使用的VS是2012,所以Jquery的版本是171,这个文件中包含了JQuery源代码的可注释版本。还有一个Jquery-<version>minjs文件,精简的JavaScript文件在他们的名称中包含了“min”,顾名思义,他们占用的空间要小于对应的非精简文件(通常情况下要小一半)。他们不包含不必要的空白字符,也不包含注释,并且所有局部变量名称的长度都是一个字符,如果打开一个精简文件,你会看到一堆不可读的JavaScript代码。如图所示:

(2) 精简的JavaScript脚本文件在客户端的行为以及实现的功能与非精简文件一样,然而,由于精简文件叫较小,因此通常都是尽可能的向客户端发送精简文件(因为它可以减少下载的数据字节数,从而加快加载与运行的速度)。

(3) ASPNET MVC应用程序中默认的布局试图(_Layoutcshtml)通常情况下用下面的脚本标签引用Jquery的精简版本:

<script src="@UrlContent("~/Scripts/jquery-171minjs")" type="text/javascript"></script>

注解:在MVC中如果要使用Jquery,需要将上面的脚本标签通过布局视图放在HTML标记中。

<div id="trr"></div>

<script type="text/javascript">

function test(){

var c=11, b=5, d=c-b;

var suiji = parseInt(Mathrandom()d+b);//取得5到10的随机数字

documentgetElementById('trr')innerHTML=suiji;//5至10之间的随机数插入到id="trr"

}

setInterval(test,1000);//每秒执行一次test()方法

</script>

这个列子和你的想法差不多

一般是这样的,学习jQuery之前应该是先要学习JavaScript的,因为jQuery是JavaScript的一个类库,所以学习了JavaScript一些知识才能更好的理解jQuery。

首先说一下JavaScript和jQuery的联系和区别吧。

简单的说jQuery是JavaScript的一个类库,通俗的说就是jQuery的作者将JavaScript中一些常用的功能或者函数封装称jQuery对象和一些其他的对象供我们使用,使用jQuery可以大大简化我们开发的难度。但是使用jQuery开发和使用JavaScript开发流程是一样的,思路也是一样的,只不过jQuery可以为我们减少一些劳动强度。

具体说一下jQuery的优势。

1、轻量级

JQuery非常轻巧,采用Dean

Edwards编写的Packer压缩后,大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB。

2、强大的选择器

JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及JQuery独创的高级而且复杂的选择器,另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。

3、出色的DOM *** 作的封装

JQuery封装了大量常用的DOM *** 作,使开发者在编写DOM *** 作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的 *** 作,让JavaScript新手也能写出出色的程序。

4、可靠的事件处理机制

JQuery的事件处理机制吸收了JavaScript专家Dean

Edwards编写的事件处理函数的精华,是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面,JQuery也做得非常不错。

5、完善的Ajax

JQuery将所有的Ajax *** 作封装到一个函数$ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XML>

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 60+, FF15+, Safari 20+, Opera 90+),jQuery20及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发更加便捷,例如 *** 作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。

历史

大概在 1992 年,一家称作 Nombas 的公司开发了一种叫做 C 减减(C-minus-minus,简称 Cmm)的嵌入式脚本语言。Cmm 背后的理念很简单:一个足够强大可以替代宏 *** 作(macro)的脚本语言,同时保持与 C (和 C ++)足够的相似性,以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中,它首次向开发人员展示了这种语言的威力。

Nombas 最终把 Cmm 的名字改成了 ScriptEase,原因是后面的部分(mm)听起来过于消极,同时字母 C “令人害怕”。

当 Netscape Navigator 崭露头角时,Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page(浓咖啡般的页面),它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。

当网上冲浪越来越流行时,对于开发客户端脚本的需求也逐渐增大。此时,大部分因特网用户还仅仅通过 288 kbit/s 的调制解调器连接到网络,即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是,仅仅为了简单的表单有效性验证,就要与服务器进行多次地往返交互。设想一下,用户填完一个表单,点击提交按钮,等待了 30 秒的处理后,看到的却是一条告诉你忘记填写一个必要的字段。

那时正处于技术革新最前沿的 Netscape,开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。

当时工作于 Netscape 的 Brendan Eich,开始着手为即将在 1995 年发行的 Netscape Navigator 20 开发一个称之为 LiveScript 的脚本语言,当时的目的是在浏览器和服务器(本来要叫它 LiveWire)端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。

就在 Netscape Navigator 20 即将正式发布前,Netscape 将其更名为 JavaScript,目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报,JavaScript 从此变成了因特网的必备组件。

因为 JavaScript 10 如此成功,Netscape 在 Netscape Navigator 30 中发布了 11 版。恰巧那个时候,微软决定进军浏览器,发布了 IE 30 并搭载了一个 JavaScript 的克隆版,叫做 JScript(这样命名是为了避免与 Netscape 潜在的许可纠纷)。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉,但也成为 JavaScript 语言发展过程中的重要一步。

在微软进入后,有 3 种不同的 JavaScript 版本同时存在:Netscape Navigator 30 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是,JavaScript 并没有一个标准来统一其语法或特性,而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加,这个语言的标准化显然已经势在必行。

2006年1月,jQuery的第一个版本面世,至今已经有10年多了(注:这个时间点是截止至出书时间)。虽然过了这么久,但它依然以其简洁、灵活的编程风格让人一见倾心。在本篇文章中,我们将讲述jQuery的发展 历史 ,让读者对jQuery有更多的了解。

在jQuery迅速发展的同时,一些大的厂商也看中了商机。2009年9月,微软和诺基亚公司正式宣布支持开源的jQuery库,另外,微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员,其他成员还有Google,Intel,IBM,Intuit等公司。

2009年1月,jQuery 13版发布,它使用了全新的选择符引擎Sizzle,在各个浏览器下全面超越其他同类型JavaScript框架的查询速度,程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法,使用live()方法可以为当前及将来增加的元素绑定事件,在13版之前,如果要为将来增加的元素绑定事件,需要使用livequery插件,而在13版中,可以直接用live()方法。 2005年8月,John Resig提议改进Prototype的“Behaviour”库,于是他在blog上发表了自己的想法,并用了3个例子做说明。

2010年2月,jQuery 142版发布,它新增了有关事件委托的两个方法:delegate()和undelegate()。delegate()用于替代132中的live()方法。这个方法比live()来的方便,而且也可以达到动态添加事件的作用。比如给表格的每个td绑定hover事件

特点

1动态特效

2AJAX

3通过插件来扩展

4方便的工具 - 例如浏览器版本判断

5渐进增强

6链式调用

7多浏览器支持,支持Internet Explorer60+、Opera90+、Firefox2+、Safari20+、Chrome10+(在200中取消了对Internet Explorer6,7,8的支持)

历史 版本

jQuery 10

(2006年8月):该库的第一个稳定版本,已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。

jQuery 11

(2007年1月):这一版大幅简化了API。许多较少使用的方法被合并,减少了需要掌握和解释的方法数量。

jQuery 113

(2007年7月):这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。

jQuery 12

(2007年9月):这一版去掉了对XPath选择符的支持,原因是相对于CSS语法它已经变得多余了。这一版能够支持对效果的更灵活定制,而且借助新增的命名空间事件,也使插件开发变得更容易。

jQuery UI(2007年9月):这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件(widget),以及一组用于构建高级元素(例如可拖放的界面元素)的工具。

jQuery 126

(2008年5月):这一版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中。

jQuery 13

(2009年1月):这一版使用了全新的选择符引擎Sizzle,库的性能也因此有了极大提升。这一版正式支持事件委托特性。

jQuery 132

(2009年2月):这次小版本升级进一步提升了库的性能,例如改进了:visible/:hidden选择符、height()/width()方法的底层处理机制。另外,也支持查询的元素按文档顺序返回。

jQuery 14

(2010年1月14号):对代码库进行了内部重写组织,开始建立一些风格规范。老的corejs文件被分为attributejs,cssjs,datajs,manipulationjs,traversingjs和queuejs;CSS和attribute的逻辑分离。

重要变化:

1 Ajax重写

Ajax模块完全进行了重写。新增一个jXHR对象,为不同浏览器内置的XML>

以上就是关于如何在MVC应用程序中使用Jquery全部的内容,包括:如何在MVC应用程序中使用Jquery、JQ获取随机5到10之间的随机数字,并在图片下面显示出来,点击第二张图片后前面的随机数字消失!、学jQuery之前是不是必须先学Javascript等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zz/10110847.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-05
下一篇2023-05-05

发表评论

登录后才能评论

评论列表(0条)

    保存