使用 jQuery Lab 学习 jQuery
4.79/5 (46投票s)
通过实际示例解释 jQuery 的理论。
介绍
jQuery 是一个 JavaScript 库，可以帮助开发者编写兼容浏览器且代码量更少的 JavaScript 代码。jQuery 库完全由 JavaScript 编写。DOM 是一团糟，并且在数量众多的浏览器中其行为也各不相同。因此，为了在 DOM 上创建一个通用层来处理 DOM 在所有浏览器中的各种怪异行为，jQuery 和其他类似的库应运而生。总有一天，没有人会直接编写 JavaScript 代码来进行 DOM 的操作、遍历和任何其他行为更改。JavaScript 将成为机器或库级别的语言，人们将使用 DOJO、Prototype、YUI 或 jQuery 等库的实用方法来进行 DOM 操作、遍历等。因为这些库节省了开发者的时间、测试工作量、代码行数，并提高了他们的生产力和开发效率。
背景
jQuery 是一个复杂的 JavaScript 对象。我们可以说它是一个包装器，封装了选定的 DOM 元素，并扩展了 jQuery 功能。在 jQuery 命令中，每个命令归结为两件事：选择 DOM 元素，然后对其执行某些操作。当我们通过传递搜索表达式来编写 jQuery 命令时，jQuery Sizzle 选择器引擎 会搜索给定的搜索表达式。DOM 中存在的选定元素会被组合成一个数组，并且该数组会被包装在 jQuery 对象中并返回。因此，可以再次利用 jQuery 功能对选定的 DOM 元素进行操作。这就像一连串的选定 DOM 元素在每次执行 jQuery 命令后都会返回。
我们要解决什么问题？
为了学习 jQuery，首先应该从简单的 jQuery 命令开始。但是，问题在于在哪里编写、执行和查看命令的结果。因此，我创建了一个 Asp.Net Web 应用程序，通过它，人们可以执行 jQuery 命令，运行它们，查看结果，并快速学习 jQuery。
我称之为 jQuery Lab。这个 jQuery Lab 的想法来源于 《JQuery in Action》一书。我通过彻底阅读这本书学习了 jQuery。我强烈推荐阅读这本书，它非常有帮助，并且很好地解释了 jQuery 概念。通过实践方式学习新语言确实是一种有趣且更快的学习方法。
jQuery Lab 是我们问题的解决方案
jQuery Lab 是一个 .net Web 应用程序，它将允许您执行 jQuery 命令并显示结果。它包含一个虚拟 DOM，您可以在其上运行 jQuery 命令。其源代码可以从链接下载：下载 jQueryLab.zip - 43.64 KB。下载此应用程序后，将其 Lab.aspx 页面设为启动页面即可运行。以下是源代码和 Lab.aspx 页面的屏幕截图。
jQuery Lab 页面包含以下内容
- 示例 DOM
DOM 将有一个 GridView 和一个 DIV。GridView 包含一些行，DIV 将为空。DIV 将具有名为empty的类。我们将通过在此示例 DOM 上运行示例查询来学习 jQuery。以下是 jQuery Lab 中使用的示例 DOM 的 HTML。<div id="domWrapper"> <asp:GridView ID="gvLab" runat="server" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" AutoGenerateColumns="false"> <Columns> <asp:BoundField HeaderText="Name" DataField="Name" /> <asp:BoundField HeaderText="Town" DataField="Town" /> <asp:BoundField HeaderText="Age" DataField="Age" /> <asp:BoundField HeaderText="Employee Id" DataField="Id" /> <asp:BoundField HeaderText="Skills" DataField="Skills" /> </Columns> <RowStyle BackColor="#F7F7DE" /> <FooterStyle BackColor="#CCCC99" /> <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" /> <HeaderStyle CssClass="header" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> </div> <div class="empty" id="emptydiv"> Empty Container </div> - 文本编辑器
有一个黑色背景的文本区域，可以在其中编写/粘贴 jQuery 命令。 - 执行按钮
在给定的文本区域中编写 jQuery 代码后，如果用户点击“执行”按钮，它将执行查询。选定的元素将在页面左侧显示的示例 DOM 上用粗红色边框突出显示。突出显示选定元素的工作将仅由 Lab 内部代码完成，以显示您选定的元素。所以，不要对为什么选定的元素会被突出显示感到困惑 :) - DOM 按钮
点击 DOM 按钮后，它将在按钮下方显示所选元素的 HTML。 - 重置按钮
点击“重置”按钮后，它将重置文本区域。
$ 是 jQuery 对象的别名。在页面中引用 jQuery 文件，通过编写 <script src="jquery-1.5.1.js" type="text/javascript"></script> ，jQuery 对象或 $ 就可以全局可用。我们将使用 jQuery 的别名来学习/编写 jQuery 示例命令。在 $ 的参数中，我们可以传递搜索表达式或新的 HTML 来创建元素。
jQuery 示例命令及其解释
让我们从头开始使用 jQuery Lab 学习 jQuery。以下是 jQuery 示例命令。在 jquery lab 项目中有一个 samples.js 文件，其中包含本文中列出和讨论的所有示例代码。我使用了几个 CSS 类，这些类可以在源代码中的 lab.css 文件中找到。请阅读解释并逐个在 jQuery Lab 上运行以下命令来学习。
我们将从基本的 jQuery 选择器开始学习。在下面的讨论中，我将首先提出问题，然后编写代码来解决该问题，然后解释相同的代码。
搜索所有表格
$('table');
在上面的查询中，我们传递元素名称 'table' 作为 $ 参数中的搜索表达式。因此，jQuery 将搜索页面 DOM 中存在的所有表格元素。假设 DOM 中有 3 个表格，那么上面用于搜索表格的 jQuery 命令将返回一个包装器对象，该对象将包装一个包含 3 个选定表格对象的数组、jQuery 实用方法和一些其他必需的 JavaScript 对象。请参阅下面的屏幕截图以了解详情。
搜索所有行
$('tr');
此查询将搜索 DOM 中存在的所有 TR 元素，并返回 tr 对象的数组。如果您在 jQuery Lab 中运行上面的代码，您将看到所有行都将以红色边框突出显示，并且所选行的 HTML 将显示在 DOM 部分的按钮下方。
搜索所有单元格
$('td');
此查询将搜索 DOM 中存在的所有 TD 元素，并返回 tr 对象的数组。如果您在 jQuery Lab 中运行上面的代码，您将看到所有表格单元格都将以红色边框突出显示。
按类名搜索
$(".empty");
.empty 是搜索表达式，它将查找所有类名为 empty 的元素。jQuery 将返回一个包装器对象，其中包含类名为 empty 的元素数组。
创建新的 DIV 元素
$("Hi");
使用 jQuery，我们可以在客户端在运行时创建元素。在上面的代码中，我们正在创建 div 元素并将其包装在 jQuery 对象上。现在，这个新创建的 div 可以在任何地方被利用/追加。
遍历
在 DOM 中，最困难的部分是遍历。困难一词表示可以遍历元素，但用于遍历元素的 JavaScript 代码在所有浏览器中都不相同。如果某些代码在 Mozilla 中有效，那么它可能在 IE 中无效。但是，如果我们使用 jQuery，那么我们只需编写更少的代码，并且无需担心浏览器兼容性。jQuery 会处理这个问题。jQuery 代码将在所有浏览器中同质运行。因此，开发人员可以更多地关注功能，而不是编写 100 行代码来处理多个浏览器的 DOM 遍历行为。因此，jQuery 非常棒，它为编写在所有浏览器中运行的代码制定了标准。
子元素（children）
$("table").children().children();
.children() 是一个命令，用于获取选定元素内部的所有元素。假设有一个表格，当你调用 table.children() 时，它将获取表格内部的元素，也就是 tbody。正如我之前所说，jQuery 命令返回自身以及选定的 DOM 元素包装集。因此，可以再次调用 jQuery 命令来操作选定的 DOM 元素。因此，如果你看到 "$('table').children().children()"，在这个命令中，我们编写了两次 .children() 命令。第一次 $('table').children()，选定的 DOM 只是表格，我们正在查找它的子元素。第二次 "$('table').children().children()"，选定的 DOM 是 tbody，因为表格的第一个子元素是 tbody。然后我们再次查找 tbody 的子元素。最终，整个查询将返回 tbody 内部的所有行。
加法
$("table>tbody tr").add("td") ;
在这段代码中，我们使用了特殊字符 >，这意味着它将获取所选元素的所有直接子元素。$("table>tbody") 将获取 Tbody 元素。在我们的搜索表达式中，我们有一个空格和 tr，这意味着在选定的 Tbody 内部查找所有 TRs。因此，$("table>tbody tr") 将返回 tbody 的所有 trs。我们也可以使用 jQuery 的 .find 方法来完成此操作，例如 $("table>tbody").find("tr")。之后，我们使用了 add 命令。它在选定的 DOM 元素之上添加另一组包装的 DOM 元素。所以在我们的命令中，我们首先选择了所有 TRs，然后将所有 TDs 添加到选定的 trs 之上。
add 命令有助于合并多组包装元素。例如，假设您希望所有链接/锚点都显示为绿色，并且您希望具有 href 属性的链接具有粗体字重。您可以在此处使用 add 命令。代码将是 $('a').css("color","green").add('a[href^=http]').css("font-weight","bold");
过滤器 (filter)
$("table>tbody>tr").filter("td");
在上面的查询中，我们使用了 filter 命令。Filter 命令将返回在过滤表达式中写入的元素。因此，在此命令中，它将只返回所有 td。
not
$("table>tbody>tr").add("td").not("tr");
这里我们使用了 not 命令。Not 命令会移除所有在 not 表达式中写入的元素，或者你可以说它不返回搜索表达式中存在的元素。在上面写入的查询中，它只会返回 td。
end
$("table>tbody>tr").add("td") //all TDs are being returned
$("table>tbody>tr").add("td").end(); //all Trs are being returned.
这里我们使用了 end 命令。为了理解 end 命令，我们必须首先理解 jQuery 中的一个重要概念，即 STACK。在 jQuery 中，每个命令执行后，选定的 DOM 元素都会被放置在一个栈中，这样，当用户想要返回到最初选定的包装 DOM 集合时，用户可以返回并再次操作它们。让我们通过代码中的示例来理解栈，我们首先搜索了 TR，然后添加了 TD。因此，jQuery 将在内部创建一个栈，首先存储 TR 的包装集合，然后存储 TD 的包装集合。当我们说 end 时，它将返回并从栈中获取所有 TR 并将其返回给您。所以 end 只是向后一步。
操纵
操作意味着通过注入新的 DOM 或移除现有 DOM 或操作大小、偏移等来更改 DOM 布局。正如我之前所说，在 DOM 中操作很困难，因为它在不同浏览器中行为不同。因此，应该学习 jQuery 操作命令来编写标准代码，以便在所有浏览器中统一操作 DOM。jQuery 选择所有满足搜索表达式的元素，然后一次性将操作命令应用于所有选定的元素。因此，我们不必循环每个元素并单独应用命令。这是 jQuery 的一个非常强大的优点，因为它减少了代码行数。DOM 操作会导致 DOM 重排，从而增加页面渲染时间。可以使用有组织的方式使用 jQuery 命令来避免 DOM 重排。
empty
$("table").empty();
这里我们使用了 empty 命令。它将从表格中移除所有行，因此只剩下没有行的表格元素。
假设执行前您有以下 HTML
| header |
|---|
| column |
移除
$("table").remove();
remove 命令会从 DOM 中完全删除选定的元素。当我们通过将 HTML 元素注入 DOM 来在运行时显示一些 UI 元素，并在使用后通常将其隐藏时，这非常有用。但是，如果我们隐藏它，它将增加页面大小。因此，与其隐藏，我们不如将其从 DOM 中完全删除。
执行前
| header |
|---|
| column |
//No Table element present. It was removed completely from DOM
appendTo
$("Appended in empty div").appendTo(".empty");
appendTo 命令将选定的元素追加到目标 HTML 元素，即 (源)appendTo(目标)。在上述命令中，我们在运行时创建了一个 DIV，并将其追加到类名为 empty 的元素中。执行上述查询后，将创建一个新的 DIV，并将其移动并追加到现有具有 .empty 类名的 DIV 中。
执行前
执行后
Appended in empty div
append
$(".empty").append("I have been appended dynamically")
append 命令将给定参数中的元素追加到选定的 DOM 元素，即 (目标)append(源)。在上述查询中，我们在 append 的参数中创建并传递了一个新的 DIV。执行上述查询后，新的 DIV 将追加到包含类名 empty 的 DIV 中。
执行前
执行后
Appended in empty div
after
$(".empty").after($("I am after the empty"))
after 命令将给定参数中的元素追加到所选 DOM 元素之后。在上述查询中，我们在 after 命令的参数中创建并传递了一个新的 DIV。执行上述查询后，新的 DIV 将追加到包含类名 empty 的 DIV 之后。
执行前
执行后
I am after the empty
before
$(".empty").before($("I am before the empty"))
before 命令将给定参数中的元素追加到所选 DOM 元素之前。在上述查询中，我们在 before 命令的参数中创建并传递了一个新的 DIV。执行上述查询后，新的 DIV 将追加到包含类名 empty 的 DIV 之前。
执行前
执行后I am after the empty
wrap
$("table").wrap("")
wrap 是一个强大而有用的方法。它将选定的元素包装在提供的 HTML 元素下。在上面的查询中，我们正在创建一个新的 fieldset，并将 table 包装在 fieldset 内部。您可以在 jQuery Lab 中运行此查询，以查看 wrap 的实际效果。
执行前
选择符
除了元素名称、ID、类名等选择器外，jQuery 还支持 CSS3 选择器。它使用户能够使用 CSS3 搜索表达式搜索元素。让我们学习一些选择器查询。
选择偶数行（:even）
$("table>tbody>tr:even td")
我们可以使用一些过滤命令，如 :even 和 :odd。:even 命令将返回选定的偶数包装元素集合。:odd 命令将返回选定的奇数包装元素集合。上面的查询将返回所有偶数行，包括 GridView 的页脚。
:last
$("table>tbody>tr:last td")
:last 命令将返回最后选定的包装元素集。上述查询将返回最后一行（即页脚）的所有单元格。
选择页眉（:first）
$("table>tbody>tr:first th")
:first 命令将返回第一个选定的包装元素集合。上述查询将返回第一行（即页眉）的所有单元格。
选择页眉和页脚（:last, :first）
$("table>tbody>tr:last td, :first th")
在 Gridview 中，总是需要对页眉和页脚进行操作，例如设置背景颜色或其他。我们可以使用上述命令来选择页眉和页脚。选择它们之后，我们可以应用背景颜色或执行任何需要的操作。我们上面的查询将返回页眉和页脚单元格。
选择偶数行，不包括页眉和页脚
$("table>tbody>tr:not(:first,:last):even td")
我们使用了 :not 和 :first, :last, :even。此命令将通过过滤掉页眉和页脚行来返回所有偶数行。
contains
$("#gvLab>tbody>tr>td:contains('Rupesh')")
:contains 搜索精确的单词，并且区分大小写。它返回包含所搜索单词的 DOM 元素。在上面的查询中，它将返回所有包含 "Rupesh" 单词的单元格。
$("#gvLab>tbody td:not(:contains('Rupesh'))")
在上面的查询中，它将返回所有不包含 "Rupesh" 单词的单元格。
:button
$(":button")
我们可以根据元素的类型进行搜索。例如 :button、:checkbox、:submit 等。上述命令将返回 DOM 中存在的所有按钮。
$("input:reset")
我们还可以对元素名称应用过滤器，以缩小搜索范围。在上面的查询中，我们编写了 input，因此它只会查找类型为 reset 的所有 input 元素。上述查询将返回所有类型为 reset 的 input 元素。
按属性搜索
$("[ID^=btn]")
在 .Net Web 应用程序中，我们面临着使用 ID 名称选择元素的问题，因为在渲染时它们的 ID 名称会发生变化。因此，我们可以在那里使用 jQuery 属性选择器轻松获取元素。
我们可以通过编写元素的属性名称和值来搜索元素。假设我们想查找 ID 属性值以 btn 开头的元素。那么我们可以编写上面给出的查询，它将返回所有 ID 以“btn”开头的元素。假设有 ID 为 btnSet、id=btnSubmit 或 id=btnReset 的按钮，那么所有这些按钮都将被包装并返回。我们还可以使用其他匹配条件，例如
-
[ID$=btn]这里的$=表示ends with（以...结尾），它将返回所有 ID 以“btn”结尾的元素。ID 名称可以是$l101Control_btnSubmit或$l102Control_btnSearch。如果您想要 btnsubmit，则可以编写$("[ID$=btnSubmit]")。 - 同样，我们可以使用其他条件，例如：
==表示精确匹配。 -
*=表示任何匹配。
属性和 CSS
在操作中，有时需要更改元素的属性或元素的 CSS 样式。这也可以使用 jQuery 命令在所有浏览器中统一完成。
更改 CSS 规则
$("#gvLab").css("font-size","18px")
要更改 CSS 样式，我们可以在 CSS 方法的参数中传递样式键和值。上面编写的查询将选择 ID 为 gvLab 的 GridView，并将其字体大小更改为 18px。
更改多个 CSS 规则
$("#gvLab>tbody>tr:first").css({"backgroundColor":"green","color":"Orange"})
如果我们想一次创建/更新多个 CSS 规则，我们可以将一个包含 CSS 规则键和值的对象传递给 CSS 方法的参数。在上面的查询中，我们创建了一个包含 backgroundColor 和 color 值的对象。执行此命令后，网格的第一行（即标题）的背景颜色将变为绿色，字体颜色将变为橙色。
将红色应用于所有偶数行。
$("table>tbody>tr:even").css("backgroundColor","red")
在我们的 Web 应用程序开发中，总是需要更改 GridView 备用行的颜色。这可以用 jQuery 的一行代码实现。如果希望所有偶数行都具有红色背景颜色，则可以执行上述查询。
更改页眉和页脚的背景颜色
$("table>tbody>tr:last,tr:first").css("backgroundColor","red")
此查询将把页眉和页脚的背景颜色更改为红色。
更改所有偶数行，但排除页眉和页脚
$("table>tbody>tr:not(:first,:last):even").css("backgroundColor","red")
以上查询将把偶数行的背景颜色更改为红色，但页眉和页脚除外。
addClass
$("#gvLab td").addClass("blackTheme")
addClass 是一个非常有用的命令，它将类名应用于选定的元素。在我们的上述查询中，我们正在选择 GridView 的所有单元格，并向它们应用 blackTheme 类。如果您在 jQuery Lab 中运行此查询，您将看到网格将具有黑色背景颜色。
removeClass
$("#gvLab td").removeClass("blackTheme")
removeClass 执行 addClass 的反向操作。它从选定的元素中移除给定的类名。在我们的上述查询中，我们正在从 ID 为 gvLab 的 GridView 的所有单元格中移除 blackTheme 类。
应用/修改属性 (.attr)
$("#gvLab td:first").attr("title","My Name").css("cursor","hand")
$("#gvLab td:first").attr({"title":"My Name", "class":"MyClass"}); //passing object of attributes key and vlues.
我们可以使用 .attr 命令更改元素的属性。在我们的上述查询中，我们首先选择所有第一个单元格，然后为它们应用 title 属性，然后我们还应用了一个 CSS 规则。类似于 .css 方法，在 .attr 方法中我们也可以传递一个包含多个属性的对象。
更改内部 HTML (.html)
$(".empty").html($("#gvLab").attr("class"))
我们可以使用 .html 命令更改元素的内部 html。在我们上面编写的查询中，我们正在内部 html 中传递 GridView 的类名。执行上述查询后，DIV 将显示 GridView 的类名。
.hasClass
$(".empty").html($("#gvLab").hasClass("blackTheme"))
hasClass 是一个方法，它检查选定元素是否具有给定的类名。如果它发现选定元素具有提供的类名，则返回 true，否则返回 false。在此查询中，$("#gvLab").hasClass("blackTheme")，我们正在检查 GridView 是否具有名为 blackTheme 的类。
:hidden
$(".empty").text( $("#gvLab").is(":hidden"))
:hidden 是一个用于搜索的筛选条件，它会检查元素是否隐藏。如果元素具有 style="display:none"，则返回 true。上述查询将根据 GridView 的隐藏状态显示 true 或 false。您可以在 jQuery Lab 中运行此查询并查看结果。
绑定事件
点击和颜色带来的乐趣
$("#gvLab>tbody>tr>td:nth-child(2)") //finding the 2nd column of the grid.
.click(function(){ //binding click event
$(this).css("backgroundColor","pink"); //applying backgroundcolor pink.
})
.mouseleave(function(){ //binding mouseleave event
$(this).css("backgroundColor","yellow"); //applying backgroundcolor yellow.
})
.mouseenter(function(){ //binding mouseenter event
$(this).css("backgroundColor","aqua"); //applying backgroundcolor aqua.
});
我们可以使用 jQuery 将事件绑定到元素上。jQuery 支持许多事件。jQuery 支持标准的事件名称，如 click、mouseenter、mouseleave、change 等。在我们的上述查询中，我们使用了 nth-child()，这是一个基于 1 索引的搜索条件。它获取给定索引号（索引从 1 开始）处的子元素。在这里，我们首先找到了第二列 $("#gvLab>tbody>tr>td:nth-child(2)")，然后我们将 click 事件绑定到第二列位置的所有单元格上。在 click 事件中，我们将背景颜色设置为粉色。同样，我们绑定了 mouseleave 和 mouseenter 事件。如果您在 jQuery Lab 中执行此查询，您将看到，如果您将鼠标悬停在单元格上，它将变为水绿色；点击单元格时，它将变为粉色；一旦您离开单元格，它将变为黄色。
让我们展示自定义工具提示
//Search cells that contians "Rupesh"
$('table>tbody>tr>td:contains("Rupesh")')
.css('cursor','pointer') //apply css with cursor as pointer
.click( function(event) { //binding click event on selected cell
$("") //creating new div element on click event.
.css({ //assigning few styles to the new DIV
backgroundColor:'khaki',
color:'black',
padding:'20px',
left:event.pageX,
top:event.pageY,
position:'absolute',
width:'56px'
})
.html($(this).text()) //on the new DIV, we are putting the text of the cell.
.click(function(){ //binding click event on newly created DIV element.
$(this).hide() //here this is the newly created DIV. We are hiding the div itself on click of it.
})
.appendTo("body") //Finally, we are appending this div in the body to show in the UI.
});
在我们的上述查询中，点击 GridView 的第二个单元格时，我们会在运行时创建一个新的 div，然后将其显示为工具提示框。这只是一个想法，可以对其进行改进并创建更华丽的工具提示。
效果
jQuery 提供了各种效果和动画。许多前端开发人员学习 jQuery 是因为它提供的效果和动画。这些命令非常容易理解和实现。
隐藏（hide）
$("#gvLab>tbody>tr:not(:contains('Rupesh'))").hide()
hide 将隐藏选定的元素
切换（toggle）
$("#gvLab").toggle("slow")
toggle 是一个方法，它根据选定元素的初始值更改其 style=display 属性。如果 display 值已经隐藏，则 toggle 命令会将其值设为显示，反之亦然。我们可以传递 "slow"、"normal" 和 "fast"，这些是动画速度的值。
淡化到（fadeTo）
$("#gvLab>tbody>tr>td:contains('Rupesh')").fadeTo("fast",.5);
fadeTo 是一个方法，它将元素淡化到给定数字的程度。在我们的上述查询中，我们传递了 0.5。
淡出（fadeOut）
$('td').mouseover(function(){
$(this).fadeOut();
});
fadeOut 是一个方法，用于隐藏选定的元素。
淡入（fadeIn）
$("#gvLab").fadeIn("slow")
fadeIn 是一个方法，用于显示选定的元素。
向上滑动（slideUp）
$("#gvLab").slideUp()
slideUp 是一个隐藏选定元素的方法。在隐藏元素时，它会从底部开始隐藏。看起来就像百叶窗向上拉。
向下滑动（slideDown）
$("#gvLab").slideDown()
slideDown 是一个显示选定元素的方法。在显示元素时，它会从顶部开始淡入。它看起来就像百叶窗向下放。
滑动切换（slideToggle）
$("#gvLab").slideToggle()
slideToggle 是一个方法，它会记住选定元素的初始样式。如果最初是隐藏的，它会将其变为可见，反之亦然，并带有滑动效果。
动画
$("td:first")//selecting first td.
.css({//adding css rules to selected td element
position:'absolute',
top: $("td:first").offset().top,
left: $("td:first").offset().left
})
.animate(//calling animate method
{top:0,left:0}//final position of the animated element.
,4000 //total time for animation
,'linear' //easing of animation.
,function(){ //callback method after animation done
alert("done!!")
}
);
在 jQuery 中，我们可以使用 animate 方法来动画化元素。该方法的第一个参数是元素将移动到的最终位置，第二个参数是动画的总持续时间，第三个参数是动画的方式或缓动，可以是 "linear" 或 "swing"，其中 swing 是默认的缓动。第四个参数是动画完成后将自动调用的回调方法。在我们的上述查询中，我们正在动画化 GridView 的第一个单元格，并将其移动到屏幕的左上角。请在 jQuery Lab 中运行它，看看其中的乐趣。
使用 jQuery 进行 Ajax
使用 jQuery 实用方法进行 Ajax 调用非常简单。
load
$('.empty').load(//calling load method on the div having empty class name.
'default.aspx' //loading this page.
,{} // passing empty javascript object to the server.
,function(){ //callback method that would be executed automatically after the successful load of page.
alert("data.htm page is loaded successfully")
});
在 jQuery 中，我们有 load 方法，此方法异步地将页面加载到选定的元素中。第一个参数是我们要加载的页面名称，第二个参数是我们传递给页面的数据，它可以是任何 JavaScript 对象，第三个参数是页面成功加载后调用的回调方法。如果在获取/加载给定页面时出现任何错误，则不会触发回调方法。
$('.empty').load('default.aspx li:first',{},function(){alert("data.htm page is loaded successfully")})
在将页面加载到选定元素中时，我们可以过滤我们想要从页面中获取的 DOM 元素。在我们的上述第二个查询中，请看我们在页面名称本身中放置了搜索表达式 'default.aspx li:first'。这将获取 default.aspx 页面，然后搜索第一个列表项 li:first 并仅获取它。因此，在空容器 DIV 中，我们将只加载默认页面的第一个列表项。
这种在获取前进行过滤的方式很酷，可以节省大量带宽，如果您只想要页面中的一个元素，那么您应该只获取该元素，而不是完全获取然后进行过滤。同样，还有一些其他的 ajax 实用方法，例如 $.get 进行 get 调用，$.getJSON 获取从服务器传递的 json 对象等等。
高级 Ajax
所有 jQuery 的 Ajax 实用方法内部都会调用 $.ajax 方法。如果您使用 $.get 方法，它将使用 type:get 调用相同的 Ajax 方法。因此，jQuery 的主要/通用 Ajax 方法是 $.ajax。如果我们想对 Ajax 调用有更多的控制，并想利用 Ajax 调用的高级功能，那么我们应该只使用 $.ajax 方法。
使用 get 命令加载默认页面
$.ajax({ //making ajax call, it is same as $.get method call
url:"default.aspx", //url to fetch
success:function(data){ //success calback method
alert(data);
},
type:"get" //passing type as get.
});
在我们的上述查询中，我们使用 $.ajax 方法并通过传递 type:get 来加载 default.aspx 页面。我们使用了 Success 事件，这是在 Ajax 调用成功完成时自动触发的事件。在这里，在页面成功加载后，我们调用 alert 方法来显示页面数据。
加载默认页面并使用 complete 和 beforeSend 事件。
$.ajax({
url : "default.aspx" //url of the page to fetch
,success : function(data) { //callback method called on successful load.
alert(data);
}
,type : "get" //making get call.
,complete : function( ) { //creating event handler for complete event.
$(".load").remove();//removing the dynamic div after completion of the ajax call.
},
,beforeSend : function( ) {
$("body").append($("Loading")) //creating
}
});
在上面的查询中，我们使用了 Ajax 方法的以下事件
-
beforeSend，此事件将在进行 Ajax 调用之前自动触发。在此回调方法中，我们创建了一个带有消息loading的动态 div 并显示它。这就像在从服务器获取数据时显示进度条一样。 -
complete，此事件将在 Ajax 调用完成时自动触发。在此回调方法中，我们正在删除动态创建的loadingdiv。
使用 jQuery Ajax 调用 WebService
使用 $.ajax 方法，我们可以调用 WebService webmethods、WCF methods 或 .aspx 页面中的静态方法。让我们看一个使用 jQuery ajax 方法调用 webservice 方法的例子。
$.ajax({
type:"POST" //type is post because, we are sending few data from client side.
,dataType:"json" //datatype says that the response type from the server.
,contentType: "application/json; charset=utf-8" //contenttype is the formate of communication protocol, it could be html or json.
,url:"mySvc.asmx/getEmpByName('Rupesh')" //method name with svc name and parameter to be passed.
,success:function(data){ //callback method on suceess.
$(".empty").html(data[0].Name);
}
,error:function(data){ //callback method on error.
$(".empty").html(data.message);
}
,beforeSend:function ( ) { //callback method on before making ajax call
$("body").append($("div",{"id":"dynDiv","class":"load"}))}
,complete:function(){ //callback method on completion of the ajax call.
$(".load").remove()
}
})
在上面的查询中，我们正在调用 webservice mySvc.asmx 的 getEmpByName 方法。在调用 webservice 时，应注意一些事项，例如传递默认数据为字符串 "{}"，以及在 $.ajax 方法中传递 contentType: "application/json; charset=utf-8"。我推荐阅读 Dave 的文章。
插件
如果您想让 jQuery 更有用，并通过引入自己的自定义方法来扩展其功能，那么您可以创建包含您自己方法的插件，一旦您加载这些插件与 jQuery 文件一起，jQuery 就会获得这些方法。假设您想创建自己的方法 $.myPlugin()，此方法在 jQuery 中不存在。要将其添加到 jQuery 对象中，您必须创建自己的插件。请参阅下面的代码
我的第一个插件
//creating plugin.
$(
function(){ //creating anonymous method and passing it in the argument of $.
$.fn.myPlugin = function(){ //adding on method myPlugin into prototype of jquery object.
return $(this).each(function(){ //returning the selected elements to continue the chain.
$(this).css('background-color','green'); //chaing background color to green
});
};
}
);
//calling our own method on odd rows of gridview.
$("table>tbody>tr:odd").myPlugin()
编写插件时，应注意以下几点：
- 在 DOM 的
ready 事件中编写您的插件方法。当 DOM 创建并准备好解析时，jQuery 会触发 ready 事件。这是将事件绑定到 HTML 元素或向 jQuery 对象添加自定义方法的正确阶段。可以通过在匿名方法中编写代码并将其作为参数传递给$()方法来挂接 ready 事件。$(function(){ // write line of codes for getting executed on the ready event of the DOM //$('button').click(function ( ){ }); //binding events to elements. //...write plugin related code. });因此，您可以在我们的上述查询中看到，我们已经开始在匿名方法中编写与插件相关的代码。 - 将您的插件方法附加到 jQuery 对象的 原型 中。
$.fn是 jQuery 对象原型的别名。在上面的示例中，我们将新方法myPlugin添加到了 jQuery 的原型对象中。 - 使用
$.each辅助方法。在插件方法中，我们应该对选定的元素使用 each 方法，这样它将遍历每个选定的元素并对其应用更改。 - 返回选定的包装元素集，在选定的包装元素集上编写插件方法后，我们应该返回它，以便链继续下去，并且可以再次对选定的包装元素集应用所需的 jQuery 命令。
myPlugin 将选定的 DOM 元素的背景颜色更改为绿色。请在 jQuery Lab 中运行此插件并查看其效果。
参考文献
在线教程
我建议阅读在线教程，例如 Visual jQuery、jQuery。同时强烈推荐阅读 《jQuery in Action》一书。
使用 jQuery Lab 的 jQuery 视频教程
我曾举办过一场关于“使用 jQuery Lab 的 JQuery”的讲座。在讲座中，我通过在 jQuery Lab 上运行上面列出的 jQuery 示例代码来解释 jQuery。因此，在观看视频时，可以从本文中复制示例代码或从 sample.js 文件中获取并在 jQuery Lab 中运行。
视频教程分为两部分：JQuery Part 1 和 JQuery Part 2。希望这些视频能帮助您更好地学习 jQuery。
这是我在视频演讲中使用的演示幻灯片的副本。
http://www.slideshare.net/roopkt/basics-of-j-query
结论
我在这篇文章中尝试解释了 jQuery 的基础知识。现在 jQuery 已经发布了 1.6.4 版本。我在本文中讨论的所有内容都适用于所有 jQuery 版本。因为我讨论的是 jQuery 的基础知识，这些基础知识在所有版本中都是相同的。然而，在最新版本的 jQuery 中，他们引入了更多创建元素的快捷方式，提高了 append 方法和几个其他方法的执行速度，将一些表达式转换为方法，并做了许多其他改进。您可以阅读它们并保持更新。欢迎任何建议、问题或反馈！