您的位置：首页 > Web前端 > JQuery

[译]Pro ASP.NET MVC 3 Framework 3rd Edition （Chapter 20 JQuery） 3.Writing jQuery Code 编写jQuery代码

2012-04-01 10:55 295 查看

A couple of tools and techniques make learning and working with jQuery simpler. The first is IntelliSense support for Visual Studio, which adds autocompletion for jQuery functions and variables; however, unlike IntelliSense for C#, we have a little work to do in order to enable this feature. In the ~/Scripts folder, you will find the file jquery-1.5.1-vsdoc.js. To enable jQuery IntelliSense, we have to add a script element that references this file to the layout or view we are working on, as shown in Listing 20-4.

一些工具和技术使学习和使用jQuery变得更加简单。首先就是Visual Studio的智能感知(对jQuery的)支持，添加了对jQuery函数和变量的自动完成的功能；然而，和C#的智能感知不同，我们需要做一些前期工作，才能开启这个特性：在“~/Scripts ”文件夹，你能找到“jquery-1.5.1-vsdoc.js”文件，要开启jQuery智能感知，我们需要在我们工作的视图的布局文件中添加对这个文件的脚本元素的引用，如同列表20-4所示：

列表20-4. Adding jQuery IntelliSense Support to a Layout

...
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
type="text/javascript"></script>
@if (false) {
<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
}
</head>
...

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

We don’t want the browser to actually download this file, because it contains information that is useful only to Visual Studio, so we use Razor to create an if block that always evaluates to false. This looks kind of odd—and it is, we guess—but it gives Visual Studio the information it needs to perform jQuery IntelliSense and stops our users from having to download an otherwise-unneeded file. Once we have added the script element, we can autocomplete jQuery terms just as we would when writing C#, as shown in Figure 20-2.

其实，我们不想让浏览器下载这个文件，因为它包含的信息仅对Visual Studio 有用，因此我们用Razor去创建一个if块会一直认为是false，这看起来有些奇怪-----我们猜它是，----但它提供给Visual Studio的信息时他需要去执行jQuery智能感知并让我们的用户无需下载其他那些无用的文件。一旦我们添加了脚本元素（到布局文件中）,我们就可以像写C#一样自动完成jQuery术语，如图20-2所示：

图20-2. Visual Studio 的jQuery智能感知（Visual Studio IntelliSense for jQuery）

Unfortunately, we have to add the script element shown in Listing 20-4 to every view or layout in which we want jQuery IntelliSense. It isn’t enough to put the reference in a layout, for example. We must also add it to individual views, which can be a little frustrating. That said, the benefits of IntelliSense, especially when learning jQuery, can be worth the inconvenience.

不幸的是，我们不得不如同列表20-4中所示将脚本元素添加到每一个我们需要jQuery智能感知的视图或者布局中。这还不够，例如，它也不能将引用放置到布局中，这让人有点沮丧，我们还必须将其添加到单个的视图中。也就是说，智能感知，尤其是当学习jQuery时，这点不便还是值得的。

Creating a jQuery Sandbox 创建一个jQuery沙箱

It is perfectly possible to learn jQuery using Visual Studio. We edit a view, save the file, reload the browser, and see what effect our script has. If you are new to jQuery, one of the best ways to experiment with jQuery is to use the developer tools available your browser. This approach lets you experiment with jQuery on the fly and see immediate results. The most useful browsers in this regard are Google Chrome and Mozilla Firefox. If you are a die-hard Internet Explorer user, you can use the developer tools in IE9, but they are not as good as those in Chrome or Firefox.

想要学好jQuery，最好使用Visual Studio。我们编辑一个视图，然后保存这个文件，重新加载到浏览器中，可以查看我们的脚本产生了什么效果。如果你是个学习jQuery的新人，一个实验jQuery最好的方法就是用开发工具提供的浏览器。这个方法让你在实验jQuery的时候可以飞快的看到即时结果。在这方面最有帮助的浏览器就是Google的Chrome和Mozilla的FireFox，如果你是个顽固的IE用户，你可以使用IE9中提供的开发者工具，但是它并没有Chome和FireFox那般好用。

Using Firefox 使用FireFox

One of the most popular combinations for writing JavaScript in general is Firefox with the free Firebug add-on. Firebug is an open source tool that neatly integrates into Firefox and provides an excellent set of features for HTML, CSS, and JavaScript development.

一个编写JavaScript的最流行的组合就是Firefox和免费的Firebug插件。Firebug是一个整合在Firefox的开发工具，它为HTML,CSS和Javascript开发提供了一组出色的工具集。

Of particular importance to us is the JavaScript command line, with which we can type and execute JavaScript code on the fly and see the effect it has on the web page immediately. This may not sounds like much, but this is a huge help when trying to get to grips with jQuery.

对我们尤其重要的是Javascript命令行，用它我们可以飞快的键入和执行Javascript代码并且在网页上立刻就可以看到效果。这不见得和听起来一样，但是当你试图掌握jQuery时，它会是一个巨大的帮助。

If you are a Firefox user, install Firebug (available from http://getfirebug.com), and load the HTML page you want to experiment with. This can be any page at all, including, of course, a page generated by an MVC Framework application. When the page is loaded, click the Firebug button at the top of the browser window, as shown in Figure 20-3

如果你是一个Firefox用户，安装Firebug（可以从http://getfirebug.com 获取），将你想试验的HTML页面载入进来。这可以是任意页面，当然，包括由MVC框架应用程序生成的页面。当页面加载进来后，单击浏览器顶部的Firebug按钮，如图20-3所示：

图20-3.使用Firefox浏览器中的Firebug （Using Firebug in the Firefox browser）

Switch to the Console tab and, if required, click the Enable link to switch on the command-line feature. If we are working with a web page that already loads the jQuery library, then we can just type jQuery statements into the console and see their effect immediately. If we are working with a page that doesn’t include jQuery, then we need to type the JavaScript statements shown in Listing 20-5 (as a single line).

切换到控制台选项卡，如果需要的话，单击激活命令行特性开关的链接，如果我们正在处理一个已经加载了jQuery库的Web页面，然后我们可以只键入jQuery命令就可以看到效果；如果我们正在处理的Web也卖弄没有加载jQuery库，然后我们就需要如列表20-5中那样键入jQuery命令(作为单行)：

列表20-5. 将jQuery载入一个Web页面（Loading jQuery into a Web Page）

var s=document.createElement('script'); s.setAttribute('src','http://jquery.com/src/jquery-
latest.js'); document.getElementsByTagName('body')[0].appendChild(s);

■ Tip You can save these statements as a bookmarklet or get one ready-made from www.learningjquery.com/2006/12/jquerify-bookmarklet.

■ 提醒：你可以把这些语句作为书签存储起来或者从www.learningjquery.com/2006/12/jquerify-bookmarklet 得到现成的。

The URL from which the jQuery library is obtained is shown in bold. We have taken the latest version of the library from the http://jquery.com web site, but you can change the URL to point to the Microsoft CDN or to the jQuery file contained within your MVC Framework project.

获取jQuery库的URL以粗体显示。我们已经从 http://jquery.com网站上获取到了库的最新版本，但是你可以更改指向微软CDM或者包含在你的MVC框架项目中的jQuery文件的URL。

Once we are set up, we can enter jQuery statements (or any other JavaScript statements, for that matter) into the console and see their effect immediately. In the figure, we have loaded the Microsoft home page, imported jQuery, and entered the statement jQuery('a').hide(). We’ll explain the basics of jQuery syntax later, but as soon as we press the Enter key, jQuery will find all the a elements in the web page and hide them, as shown in Figure 20-4.

一旦我们设置了，我们可以在控制台输入jQuery语句(在此处也可以是其他Javascript语句)，并且我们立即就能看到效果。在图中，我们载入了包含了jQuery的微软主页，并且输入语句“jQuery(‘a’).hide()”。我们后面会说明jQuery的基础语法，但是当我们按下Enter键，jQuery会找到网页中的所有页面元素并将它们隐藏掉，如图20-4所示：

图20-4. 隐藏微软主页的页面元素（Hiding the a elements in the Microsoft web page ）

Hiding the anchor elements is a trivial example, but it shows how we can use Firefox and Firebug to create a sandbox for playing around with jQuery.

隐藏锚元素是个微不足道的例子，但是它向我们展示了我们怎么如何通过FireFox和Firebug为玩转jQuery而建立一个沙箱。

Using Chrome 使用Chrome浏览器

If you are a Chrome user, as we both are, then you don’t need an add-on like Firebug. The built-in developer tools are pretty good and include a JavaScript console. There is a version of Firebug—called Firebug Lite—that adds many of the Firebug features that are available in the Firefox version, but using this is strictly optional.

如果你是一个Chrome用户，当然我们都是，那么你就不需要像Firebug这样的插件，它内置的开发工具非常好，还包含了一个Javascript控制台。Firebug有一个Firebug Lite版本--可以在Firefox中使用许多Firebug特性，但是它是可选的(插件)。

Once you have loaded a web page in Chrome, click the Customize and Control Google Chrome button (the one with the spanner icon), and select Tools ➤ JavaScript Console. Or as a shortcut, just press Ctrl+Shift+J on any web page. Figure 20-5 shows the result.

一旦你将一个Web页面载入到Chrome中，点击Google Chrome浏览器的自定义控制按钮（一个扳手图标），然后选择 Tools(工具)>Javascript 控制台(Console)，还有一个更快捷的方式，只需要在任意Web页面按下Ctrl+Shift+J组合键，图20-5显示了结果：

图20-5. 使用Chrome的Javascript控制台（Using the Chrome JavaScript console）

We can then enter jQuery statements into the console and see their effects immediately. If we want to experiment with web pages that do not use jQuery, then we must import the library using the statements shown in Listing 20-5.

这个时候我们在控制台键入jQuery语句，可以马上看到效果。如果我们想试验一下不用jQuery的Web页面效果的话，那么我们就必须使用列表20-5中的语句来导入库。

《小节完，下节--jQuery基础理论》

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航