[译]Pro ASP.NET MVC 3 Framework 3rd Edition （Chapter 20 JQuery） 4.Basic jQuery Theory
At the heart of jQuery is a powerful JavaScript function called jQuery (). We use it to query our HTML page’s document object model (DOM) for all elements that match a CSS selector.As a simple example, jQuery("DIV.MyClass") finds all the div elements in our DOM that have the CSS class MyClass.
jQuery功能强大的核心函数是jQuer()，用它我们可以查询匹配CSS选择器的HTML页面的所有DOM元素。一个简单的例子，jQuery(“DIV.MyClass”)函数的作用就是在我们的DOM的所有DIV元素中查找CSS类名叫MyClass的元素。
jQuery () returns a jQuery-wrapped set: an instance of a jQuery object that lists the results and has many extra methods you can call to operate on those results. Most of the jQuery API consists of such methods on wrapped sets. For example, jQuery("DIV.MyClass").hide() makes all the matching div elements suddenly vanish. For brevity, jQuery provides a shorthand syntax, $(), which is exactly the same as calling jQuery(). Table 20-1 contains some further examples.
jQuery()返回一个jQuery-wrapped集：一个jQuery对象的实例，它会列出返回的结果，还包含许多可以操作这些结果的扩展方法。大多数的jQuery API都是由这样封装过的方法集合构成的。例如：jQuery(“DIV.Class”).hide()函数会隐藏掉所有匹配到的div元素。jQuery提供一个简单的语法：$(),和调用jQuery()一样的效果。表格20-1给出进一步的例子：
表格20-1. jQuery简单示例
| 例子 | 描述 |
| $("P SPAN").addClass("SuperBig") | Adds a CSS class called SuperBig to all <span> nodes that are contained inside a <p> node 在<p>节点中的所有<span>节点添加一个叫SuperBig的CSS类标识 |
| $(".SuperBig").removeClass("SuperBig") | Removes the CSS class called SuperBig from all nodes that have it 从所有节点中移除CSS类标识为SuperBig的元素，包含它自身。 |
| $("#options").toggle() | Toggles the visibility of the element with ID options (if the element is visible, it will be hidden; if it’s already hidden, it will be shown) 切换ID为options的元素的可见性(如果该原色当前是显示的，它将会被隐藏；如果它当前是隐藏，会被显示) |
| $("DIV:has(INPUT[type='checkbox']:disabled)").prepend("<i>Hey!</i>") | Inserts the HTML markup <i>Hey!</i> at the top of all div elements that contain a disabled checkbox 在所有div元素的顶部插入一个包含了一个未选中的复选框的HTML元素<i>Hey!</i> |
| $("#options A").css("color", "red").fadeOut() | Finds any hyperlink tags (i.e., <a> tags) contained within the element with ID options, sets their text color to red, and fades them out of view by slowly adjusting their opacity to zero 在所有的超链接标签(即<a>标签)中查找包含了ID为options的元素，把它们的文本颜色设置为红色，通过缓慢的调整它们的不透明度为零让它们淡出我们的视野 |
jQuery is extremely concise, and achieving the same effects as those produced by the examples in the table would take many lines of JavaScript. We picked the examples in the table to illustrate some of the key jQuery features, which we describe briefly in the following sections.
jQuery是极其简练的，如果要达到表中例子所要达成的效果，Javascript则会需要多行代码才能实现。在接下来的各节我们将会通过表中的例子来简要的说明jQuery的一些关键特性。
Understanding jQuery Selectors 理解jQuery选择器
One concept key to understanding jQuery is selectors. One kind of selector is the strings that we pass to the jQuery function to specify the set of elements that we want to operate on. Listing 20-6 highlights the selector in a jQuery statement.
一个理解jQuery的关键概念就是选择器。一种选择器就是我们通过jQuery函数传递字符串给我们想要操作的指定元素。清单20-6在jQuery语句中高亮显示了这个选择器。
Listing 20-6. A jQuery Selector 清单20-6 一个jQuery选择器
$("th").toggle() The selector in this example is th, which selects all the th elements in the document. We then apply the toggle method to the selected elements. As we described in Table 20-1, the toggle method changes the visibility of elements. If we applied this jQuery statement to the HTML generated by our example project, the table headers will be hidden (and if we apply it again, they will reappear). The example in Listing 20-6 demonstrates one of the four basic selectors, which are described in Table 20-2.
在这个例子中，th是这个选择器，它在文档中选择了所有th元素，然后我们将这个切换方法应用到选中的元素。就像我们在表格20-1中描述的那样，这个切换方法(toggle())改变了这些元素的的可见性。如果我们将这些jQuery语句应用到我们示例项目生成的HTML中，标头将会被隐藏(如果我们再次应用它，它又会重新显示)。表格20-2描述了四种基础选择器，而这个例子正是其中一种。
表格20-2. jQuery基础选择器 The Basic jQuery Selectors
| 选择器 Selector | 描述 Description |
| $('*') | Selects all the elements in the document 选中文档中的所有元素 |
| $('.myclass') | Selects all the elements to which the CSS class myclass has been assigned 选中CSS class被赋值为myclass的所有元素 |
| $('element') | Selects all the elements of the type element 选中类型为element的所有元素 |
| $('#myid') | Selects the element with the ID of myid 选中ID为myid的元素 |
jQuery selectors are greedy, meaning they select as many elements as they can in the HTML DOM. One exception to this is the $('#id') selector, which selects the element with the specified ID; element IDs are expected to be unique. We can narrow our selections by providing a selection context, like this:
jQuery选择是非常贪心的，意味着他们会在HTML DOM中尽可能多的选中元素，但是$(‘#id’)这个选择器是一个例外，它是根据指定的标识ID选择元素，元素的标识ID一般都是独一无二的，我们可以通过提供一个选择上下文来缩小我们的选择范围，像这样：
$('td', myElement)
which will match td elements that are descendants of myElement. You can see a selection context in use in Listing 20-17.
这条语句会匹配myElement的子节点中的td元素。你可以在清单20-17中看到这个选择上下文的用法。
| A QUICK NOTE ABOUT ELEMENT IDS 快速了解元素标识 |
If you’re using jQuery, or in fact writing any JavaScript code to work with your MVC Framework application, you ought to be aware of how the HTML helpers render ID attributes. If we call the text box helper as follows, for example:
如果你正在使用jQuery，或者你现行的MVC框架应用中使用了一些Javascript代码，你有必要了解HTML helper类如何渲染这些标准属性。例如，我们如下所示调用text box的助手类方法：
@Html.TextBox("pledge.Amount")it will render the following:
它将被渲染成一下HTML代码：
<input id="pledge_Amount" name="pledge.Amount" type="text" value="" /> （备注：此文电子文档id=“pledge Amount” 少了中间的’_’此处纠正）
Notice that the element name is pledge.Amount (with a dot), but its ID is pledge_Amount (with an underscore). When rendering element IDs, the built-in helper methods replace dot characters with underscores. This makes it possible to reference the elements using a jQuery selector such as $("#pledge_Amount"). Note that it wouldn’t be valid to write $("#pledge.Amount"), because in jQuery (and in CSS) that would mean an element with ID pledge and CSS class Amount.
注意，这个元素的name是pledge.Amount(中间用一个‘.’连接),但是它的id标识是pledge_Amount(用一个下划线连接)，当渲染元素标识的时候，内置的helper类的方法将用下划线替换那个点，这将使它能用类似$(“#pledge_Amount”)这样的jQuery选择器来引用这个元素。这里需要注意，$(“#pledg.Amount”)这样写是无效的，因为在jQuery(和CSS)中，这代表一个ID标识为pledge和CSS的class为Amount的元素。
备注：这里的翻译与给出的代码有些出入，为了确保翻译准确，我亲自试验了这里的代码，原英文电子文档中渲染的HTML代码为“input id="pledge Amount…”中间是空格，而非“_”,但是经过的实际测试，正确的输出应该是“pledge_Amout”,这里需要大家注意，所以这里我将英文原文和译文部分都加上了下划线。
-------------------------------------------------------------------------------------------------------
We can combine the results of multiple selectors by separating each term with a comma, as shown in Listing 20-7.
我们可以通过组合多个以逗号分隔的选择器来获取结果，如清单20-7所示：
清单20-7. 组合选择器 Combining Selections
$('td, th')This statement selects all the td and th elements in the DOM. We can apply selections sequentially by separating the terms with spaces, as shown in Listing 20-8.
这条语句选中了在DOM中的所有td和td元素。我们可以空格分隔来应用连续的选择器，如清单20-8所示：
清单20-8. 应用多个连续的选择器 Applying Multiple Selections Sequentially
$('td input') In this case, we have selected all the input elements contained within td elements. In the case of our example project, this means we select the Delete buttons that are at the end of each table row but not the Reset button at the bottom of the page.
在这种情况下，我们选中了包含在td元素中的所有input元素。在我们的示例项目中，这意味着我们选择了在每行最后的删除按钮，而不是在页面底部的重置按钮。
Using Attribute Selectors 使用属性选择器
In addition to the basic selectors, there are also attribute selectors. As their name suggests, these selectors operate on attributes and their values. Table 20-3 describes the attribute selectors.
除了这些基本选择器，也有属性选择器，顾名思义，这些选择器通过属性和他们的值来操作。表20-3描述了这些选择器。
表20-3. jQuery属性选择器 The jQuery Attribute Selectors
| Selector 选择器 | Description 描述 |
| $('[attr]') | Selects elements that have an attribute called attr, irrespective of the attribute value 选中属性名称叫attr的元素，不考虑属性的值 |
| $('[attr]="val"') | Selects elements that have an attr attribute whose value is val 选中attr属性值为val的元素 |
| $('[attr]!="val"') | Selects elements that have an attr attribute whose value is not val 选中attr属性值不是val的元素 |
| $('[attr]^="val"') | Selects elements that have an attr attribute whose value starts with val 选中attr属性值以val开头的元素 |
| $('[attr]~="val"') | Selects elements that have an attr attribute whose value contains val 选中attr属性值包含val的元素 |
| $('[attr]$="val"') | Selects elements that have an attr attribute whose value ends with val 选中attr属性值以val结尾的元素 |
| $('[attr]|="val"') | Selects elements that have an attr attribute whose value is val or starts with val followed by a hyphen (val-) 选中一个attr属性值是val或者以val开头或者val后跟一个连接符(val-)的元素。 |
------------------------------------------------------------------
We can apply multiple attribute selectors together, in which case we select only those elements that match all of the conditions. Listing 20-9 contains an example.
我们也可以多个属性选择器一起应用，在这种情况下，我们仅仅能选中那些匹配了所有条件的元素。清单20-9包含了一个例子。
清单20-9. 组合属性选择器 Combining Attribute Selectors
$('[type][value="Delete"]') The selects in this statement match those elements that have a type attribute (with any value) and a value attribute whose value is Delete. In the case of our example application’s HTML, this matches the Delete buttons at the end of each table row.
这个语句选中了匹配了含有一个type属性(包含多个value)，其中一个value属性的value值为Delete的元素。
此篇翻译未完，字数比较多，工作忙，翻译中… 先发上来占个位，让大家知道我还在翻译中，哈哈。
TAG:
