jquery项目实战 jquery案例

编程之家2026-07-031091次浏览

这篇文章给大家聊聊关于jquery项目实战，以及jquery案例对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

新手如何学习 jQuery

从零开始学习jQuery(一)开天辟地入门篇

从零开始学习jQuery(二)万能的选择器

从零开始学习jQuery(三)管理jQuery包装集

从零开始学习jQuery(四)使用jQuery操作元素的属性与样式

从零开始学习jQuery(五)事件与事件对象

从零开始学习jQuery(六) AJAX快餐

从零开始学习jQuery(七) jQuery动画-让页面动起来!

从零开始学习jQuery(九) jQuery工具函数

从零开始学习jQuery(十) jQueryUI常用功能实战

从零开始学习jQuery(十一)实战表单验证与自动完成提示插件

一.摘要

本系列文章将带您进入jQuery的精彩世界,其中有很多作者具体的使用经验和解决方案,即使你会使用jQuery也能在阅读中发现些许秘籍.

本篇文章是入门第一篇,主要是简单介绍jQuery,通过简单示例指导大家如何编写jQuery代码以及搭建开发环境.详细讲解了如何在Visual Studio中配合使用jQuery.

转载请注明子秋出品!博客园首发!

二.前言

首先道个歉!"从零开始学习ASP.NET MVC"系列文章在即将介绍Filter时就没有更新了,原因就是最近我一直在研究和学习jQuery.看到本系列的名称和文章标题,看过我的MVC系列文章的人会感到很熟悉.不久要给公司的人做培训,所以特意制作了本教程.

在写作的同时我参考了网上jQuery的系列教程文章,在博客园和Google上并没有找到让我满意的系列教程.我喜欢将知识系统的,深入浅出的讲解.不喜欢写那种"学习笔记"式的文章.同时本系列将很快全部写完(有工作压力就是有动力),随后如果时间允许我会继续更新MVC系列文章.再一次对等待MVC文章的朋友们说声抱歉!

另外本系列文章的大部分知识点来源于图灵出版社的"jQuery实战"一书.推荐大家购买此书,是jQuery书籍中的经典之作.

下面让我们开始jQuery之旅.

三.什么是jQuery

jQuery是一套Javascript脚本库.在我的博客中可以找到"Javascript轻量级脚本库"系列文章. Javascript脚本库类似于.NET的类库,我们将一些工具方法或对象方法封装在类库中,方便用户使用.

注意jQuery是脚本库,而不是脚本框架."库"不等于"框架",比如"System程序集"是类库,而"ASP.NET MVC"是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事.

脚本库能够帮助我们完成编码逻辑,实现业务功能.使用jQuery将极大的提高编写javascript代码的效率,让写出来的代码更加优雅,更加健壮.同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery,天天喝茶水"--因为我们已经站在巨人的肩膀上了.

创建一个ASP.NET MVC项目时,会发现已经自动引入了jQuery类库. jQuery几乎是微软的御用脚本库了!完美的集成度和智能感知的支持,让.NET和jQuery天衣无缝结合在一起!所以用.NET就要选用jQuery而非Dojo,ExtJS等.

jQuery有如下特点:

1.提供了强大的功能函数

使用这些功能函数,能够帮助我们快速完成各种功能,而且会让我们的代码异常简洁.

2.解决浏览器兼容性问题

javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦,常常一个页面在IE7,Firefox下运行正常,在IE6下就出现莫名其妙的问题.针对不同的浏览器编写不同的脚本是一件痛苦的事情.有了jQuery我们将从这个噩梦中醒来,比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的,从前要根据event获取事件触发者,在ie下是event.srcElements而ff等标准浏览器下下是event.target. jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象.

3.实现丰富的UI

jQuery可以实现比如渐变弹出,图层移动等动画效果,让我们获得更好的用户体验.单以渐变效果为例,从前我自己写了一个可以兼容ie和ff的渐变动画,使用大量javascript代码实现,费心费力不说,写完后没有太多帮助过一段时间就忘记了.再开发类似的功能还要再次费心费力.如今使用jQuery就可以帮助我们快速完成此类应用.

4.纠正错误的脚本知识

这一条是我提出的,原因就是大部分开发人员对于javascript存在错误的认识.比如在页面中编写加载时即执行的操作DOM的语句,在HTML元素或者document对象上直接添加"onclick"属性,不知道onclick其实是一个匿名函数等等.拥有这些错误脚本知识的技术人员也能完成所有的开发工作,但是这样的程序是不健壮的.比如"在页面中编写加载时即执行的操作DOM的语句",当页面代码很小用户加载很快时没有问题,当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery提供了很多简便的方法帮助我们解决这些问题,一旦使用jQuery你就将纠正这些错误的知识--因为我们都是用标准的正确的jQuery脚本编写方法!

5.太多了!等待我们一一去发现.

即将发布的jQuery3有哪些新特性_jquery

jQuery的横空出世，至今已有十个年头了，而它的长盛不衰显然不是没有理由的。jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

在未来的几周内，jQuery就将抵达一个重要的里程碑——正式发布 3.0版本。jQuery 3修复了大量的 bug，增加了新的方法，同时移除了一些接口，并修改了少量接口的行为。在这篇文章中，我将为大家重点讲解 jQuery 3所引入的那些最重要的变化。

新增特性

我们先来讨论 jQuery 3中最重要的几个新增特性。

for...of循环

在 jQuery 3中，我们可以用 for...of循环语句来迭代一个 jQuery集合中的所有 DOM元素。这种新的迭代方法是 ECMAScript 2015（即 ES6）规范中的一部分。这个方法可以对“可迭代对象”（比如 Array、Map、Set等）进行循环。

当使用这种新的迭代方法时，你在循环体内每次拿到的值并不是一个 jQuery对象，而是一个 DOM元素（译注：这一点跟.each()方法类似）。当你在对一个 jQuery集合进行操作时，这个新的迭代方法可以少许改善你的代码。

为了搞清楚这种迭代方法到底是怎么工作的，我们来假设一个场景——你需要给页面中的每个 input元素分配一个 ID。在 jQuery 3之前，你可能会这样写：

代码如下:var$inputs=$('input');for(var i= 0; i$inputs[i].id='input-'+ i;

}

而在 jQuery 3中，你就可以这样写了：

代码如下:var$inputs=$('input');var i= 0;

for(var input of$inputs){

input.id='input-'+ i++;

}

（译注：其实 jQuery自己是有个.each()方法的，可读性也不赖。）

$.get()和$.post()函数的新签名

jQuery 3为$.get()和$.post()这两个工具函数增加了新签名，从而使得它们和$.ajax()的接口风格保持一致。新签名是这样的：

代码如下:$.get([settings])

$.post([settings])

settings是一个对象，它包含多个属性。它的格式和你以前传给$.ajax()的参数格式是一样的。如果你想更清楚地了解这个参数对象，请参考$.ajax()页面中的相关描述。

$.get()和$.post()的参数对象与传给$.ajax()的参数相比，唯一的区别就是前者的 method属性总是会被忽略。原因其实也很简单，$.get()和$.post()本身就已经预设了发起 Ajax请求的 HTTP方法了（显然$.get()就是 GET，而$.post()就是 POST）。也就是说，正常人类应该是不会想用$.get()方法来发送一个 POST请求的。

假设有以下一段代码：

代码如下:$.get({

url:'',

method:'POST'// This property is ignored

//这个属性将被忽略});

不管我们把 method属性写成什么，这个请求总是会以 GET的方式发出去的。

采用 requestAnimationFrame()来实现动画

所有现代浏览器（包括 IE10及以上）都是支持 requestAnimationFrame的。jQuery 3将会在内部采用这个 API来实现动画，以便达到更流畅、更省资源的动画效果。

unwrap()方法

jQuery 3为 unwrap()方法增加了一个可选的 selector参数。这个方法的新签名是这样的：

代码如下:unwrap([selector])

有了这个特性，你就可以给这个方法传入一个包含选择符表达式的字符串，用它来在父元素内进行匹配。如果存在匹配的子元素，则这个子元素的父层将被解除；如果没有匹配，则不进行操作。

有变更的特性

jQuery 3还修改了一些特性的行为。

:visible和:hidden

jQuery 3将会修改:visible和:hidden过滤器的含义。只要元素具有任何布局盒，哪怕宽高为零，也会被认为是:visible。举个例子，br元素和不包含内容的行内元素现在都会被:visible这个过滤器选中。

因此，如果你的页面中包含如下的结构：

代码如下:

然后运行以下语句：

代码如下:console.log($('body:visible').length);

在 jQuery 1.x和 2.x中，你得到的结果会是 0；但在 jQuery 3中，你会得到 2。

data()方法

另一个重要的变化是跟 data()方法有关的。现在它的行为已经变得跟 Dataset API规范一致了。jQuery 3将会把所有属性键名转换成驼峰形式。我们来详细看一下，以如下元素为例：

代码如下:

当我们在用 jQuery 3以前的版本时，如果运行如下代码：

代码如下:var$elem=$('#container');

$elem.data({'my-property':'hello'});console.log($elem.data());

将会在控制台得到如下结果：

代码如下:{my-property:"hello"}

而在 jQuery 3中，我们将会得到如下结果：

代码如下:{myProperty:"hello"}

请注意，在 jQuery 3中，属性名已经变成了驼峰形式，横杠已经被去除了；而在以前的版本中，属性名会保持全小写，并原样保留横杠。

Deferred对象

jQuery 3还改变了 Deferred对象的行为。Deferred对象可以说是 Promise对象的前身之一，它实现了对 Promise/A+协议的兼容。这个对象以及它的历史都相当有意思。如果想要深入了解，你可以去阅读 jQuery官方文档，也可以去看我写的书《jQuery实战（第三版）》——这本书也涵盖了 jQuery 3。

在 jQuery 1.x和 2.x中，传给 Deferred的回调函数内如果出现未捕获的异常，会立即中断程序的执行（译注：即静默失败，其实 jQuery绝大多数回调函数的行为都是这样的）。而原生的 Promise对象并非如此，它会抛出异常，并不断向上冒泡，直至到达 window.onerror（通常冒泡的终点是这里）。如果你没有定义一个函数来处理这个错误事件的话（通常我们都不会这么做），那这个异常的信息将会被显示出来，此时程序的执行才会停止。

jQuery 3将会遵循原生 Promise对象的模式。因此，回调内产生的异常将会导致失败状态（rejection），并触发失败回调。一旦失败回调执行完毕，整个进程就将继续推进，后续的成功回调将被执行。

为了让你更好地理解这个差异，让我们来看一个小例子。比如我们有如下代码：

代码如下:var deferred=$.Deferred();

deferred

.then(function(){ throw new Error('An error');

})

.then( function(){ console.log('Success 1');

}, function(){ console.log('Failure 1');

}

)

.then( function(){ console.log('Success 2');

}, function(){ console.log('Failure 2');

}

);

deferred.resolve();

在 jQuery 1.x和 2.x中，只有第一个函数（也就是抛出错误的那个函数）会被执行到。此外，由于我们没有为 window.onerror定义任何事件处理函数，控制台将会输出“Uncaught Error: An error”，而且程序的执行将中止。

而在 jQuery 3中，整个行为是完全不同的。你将在控制台中看到“Failure 1”和“Success 2”两条消息。那个异常将会被第一个失败回调处理，并且，一旦异常得到处理，那么后续的成功回调将被调用。

SVG文档

没有哪一个 jQuery版本（包括 jQuery 3）曾官方宣称支持 SVG文档。不过事实上有很多方法是可以奏效的，此外还有一些方法在以前是不行的（比如操作类名的那些方法），但它们在 jQuery 3中也得到了更新。因此，在 jQuery 3中，你应该可以放心使用诸如 addClass()和 hasClass()这样的方法来操作 SVG文档了。

已废弃、已移除的方法和属性

在增加了上述改进的同时，jQuery也移除、废弃了一些特性。

废弃 bind()、unbind()、delegate()和 undelegate()方法

jQuery在很久以前就引入了 on()方法，它提供了一个统一的接口，用以取代 bind()、delegate()和 live()等方法。与此同时，jQuery还引入了 off()这个方法来取代 unbind()、undelegated()和 die()等方法。从那时起，bind()、delegate()、unbind()和 undelegate()就已经不再推荐使用了，但它们还是一直存在着。

jQuery 3终于开始将这些方法标记为“废弃”了，并计划在未来的某个版本（很可能是 jQuery 4）中将它们彻底移除。因此，请在你的项目中统一使用 on()和 off()方法，这样你就不用担心未来版本的变更了。

移除 load()、unload()和 error()方法

jQuery 3彻底抛弃了 load()、unload()和 error()等已经标记为废弃的方法。这些方法在很早以前（从 jQuery 1.8开始）就已经被标记为废弃了，但一直没有去掉。如果你正在使用的某款插件仍然依赖这些方法，那么升级到 jQuery 3会把你的代码搞挂。因此，在升级过程中请务必留意。

移除 context、support和 selector属性

jQuery 3彻底抛弃了 context、support和 selector等已经标记为废弃的属性。同上，在升级到 jQuery 3时，请留意你正使用的插件。

已修复的 Bug

jQuery 3修复了以往版本中的一些非常重要的 bug。在本节中，我将着重介绍其中两处，因为这两者应该会对你写代码的习惯带来显著影响。

width()和 height()的返回值将不再取整

jQuery 3修复了 width()、height()和其它相关方法的一个 bug。这些方法的返回值将不再舍入取整，因为这种取整行为在某些情况下不便于对元素进行定位。

我们来详细看一看。假设你一个宽度为 100px的容器元素，它包含了三个子元素，宽度均为三分之一（即 33.333333%）：

代码如下:

My name

Aurelio De Rosa

在 jQuery 3以前的版本中，如果你尝试通过以下代码来获取子元素的宽度??

代码如下:$('.container div').width();

??那么你得到结果将是 33。原因在于 jQuery会把 33.33333这个值取整。而在 jQuery 3中，这个 bug已经被修复了，因此你将会得到更加精确的结果（即一个浮点数）。

wrapAll()方法

jQuery 3还修复了 wrapAll()方法中的一个 bug，这个 bug出现在把一个函数作为参数传给它的情况下。在 jQuery 3以前的版本中，当一个函数被传给 wrapAll()方法时，它会把 jQuery集合中的每个元素单独包裹起来。换句话说，这种行为和把一个函数传给 wrap()时的行为是完全一样的。

在修复这个问题的同时，还引入了另外一个变更：由于在 jQuery 3中，这个函数只会调用一次了，那就无法把 jQuery集合中每个元素都传给它。因此，这个函数的执行上下文（this）将只能指向当前 jQuery集合中的第一个元素。

如何下载 jQuery 3 beta 1

既然你已经读到了这里，那说明你很可能想试试 jQuery 3的第一个 beta测试版。你可以通过以下两个地址来获取这个版本：

未压缩版：

压缩版：

当然，你还可以通过 npm来下载：

[code]npm install jquery@3.0.0-beta1[/code]

结论

很多人一直在唱衰 jQuery，说它在现代网页开发中已经没有一席之地了。但不管怎样，jQuery的开发仍在继续，客观的统计数据（在排名前一百万名的网站中占有率高达 78.5%）也让这些论调不攻自破。

在本文中，我已经带你了解了一遍 jQuery 3将会带来的一些重大变化。或许你已经察觉到了，这个版本并不太可能搞挂你的既有项目，因为它引入的破坏性变更其实寥寥无几。不过，在升级到 jQuery 3的过程中，你还是有必要牢记一些关键点，比如 Deferred对象的改进等等。同样，在升级某个第三方库时，也有必要检查一下该项目的兼容性情况，以便尽早发现任何非预期行为，避免某些功能失效。

译注

除了本文所提及的变更之外，jQuery 3.0最大的变化就是彻底放弃对 IE8的支持。jQuery团队做出这个决定的原因在于，微软已经在今年年初宣布停止对 IE 8～10的支持。因此，jQuery在 3.0 alpha阶段所发布的 jQuery Compat项目也就没有继续存在的必要了。

不过，由于 IE8仍然是中国大陆最流行的浏览器之一，对国内的开发者来说，在短期（甚至中期）内还不得不停留在 jQuery 1.x版本。

好吧，最后还是说个好消息吧。为帮助用户平滑升级，此次 jQuery同样会为 3.0版本提供迁移插件（jQuery Migrate plugin）。在把 jQuery升级到 3.0之后同时运行这个插件，即可确保基于 jQuery 1.x或 2.x的既有业务代码正常运行；同时，它还将在控制台向你报告既有代码与 jQuery 3不兼容的地方。当你修复了这些不兼容问题之后，就可以安全地移除这个插件了。

怎么选择使用jQuery版本

这次给大家带来怎么选择使用jQuery版本，选择使用jQuery版本的注意事项有哪些，下面就是实战案例，一起来看一下。

这篇文章主要给大家介绍了关于如何选择jQuery版本，是1.x? 2.x?还是3.x?在选择使用jquery之前我们常常会考虑jQuery应该选择什么版本?现在jquery一般用什么版本以及jquery ie8的兼容版本和jquery什么版本稳定等问题，下面通过这篇文章来看看详细的介绍吧。

前言

大家在选择版本的时候，一般原则是越新越好，但其实不然，jQuery版本是在不断进步和发展的，最新版是当时最高技术水平，也是最先进的技术理念。如何选择jQuery版本是个值得思考的问题，下面来看看详细的介绍吧。

目前jQuery有三个大版本：

1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4(2016年5月20日)

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

1.X大版本下，细分版本非常多，各个版本的函数都会有一定的差异。网上看到的很多教程大多是1.x版本的。

jquery官方手册：

维护ie678是意见头疼的事情，一般我们都会额外加载一个css和js单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，电脑端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对ie678的支持。

官方关于浏览器支持的说明截图：

该如何去选择jQuery版本？

现状

就目前来说，国内IE占领的市场份额还是比较大的，直接过度到2.x是不现实的。下面是一份来自Net Market Share的数据，可以看出虽然IE浏览器的使用有所下降，但是依然占据了一半的比重。而就IE浏览器各版本来看，IE 8.0占据的市场份额相对其他版本也比较大。

各浏览器占据的市场份额

各浏览器版本占据的市场份额

jQuery 2.x适合谁?

既然jQuery 2.x不支持老旧浏览器，那么为什么要开发这个版本？

要说明的是，这个版本主要是用于目前一些比较高级的JS环境，也即是版本比较新的浏览器。这些JS和老旧IE没有多大关系，而jQuery 1.x中有大部分代码是对老旧浏览器做的兼容，这个就增加了运行的负担，影响了运行效率。

以下是官方推荐使用的情况：

推荐的JS环境

jQuery下载使用

这里给大家推荐一个可以下载jQuery各个版本的页面：

下面给大家推荐一些常用的jquery静态资源库，大家可以直接在页面中引用。

新浪cdn用的jquery：

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！