jQuery：面向设计师的简易JavaScript

如果JavaScript的重生是过去两年中最大的主题，那么您可以将围绕该主题的大部分讨论分为两个主要领域。

在城镇的比较末端，我们已经看到聪明人利用JavaScript使用Ajax进行各种令人惊奇的（有时甚至是荒谬的）事情。

但是，对于像我这样的前端人员来说，许多脚本编写的泡沫和泡沫都集中在重新调整标记上-也就是说，使用JavaScript使标记在进入浏览器后可以更好地工作。 设计视图时事通讯的长期读者可能会记住我在过去几年中沿这些思路所做的一些实验：

• 在使用DOM设置图像样式中 ，我们使用JavaScript向图像添加圆角。
• 在DOM Text Shadows中 ，我们使用JavaScript在标题文本上建立阴影。
• 在水平尺上！ 好！ ，我们使用JavaScript修复了躲闪的hr元素。

尽管这些脚本的用途各有不同，但它们都涉及向浏览器发送简洁的语义标记，并使用JavaScript修复或扩展那些足够聪明的浏览器的功能。 在大多数情况下，这涉及在某些标记中“包装”标记的某些部分。 今天，我们将研究一种简单，通用的方法，该方法将使我们可以随时随地执行此操作：jQuery。

那么，什么是jQuery？

jQuery是另一个JavaScript库，它加入了已经很拥挤的空间，其中包括Prototype，Scriptaculous，Rico，Moo.Fx以及其他十几种。 要使用它，只需将.js文件附加在页面顶部：神奇的是，您可以访问许多预构建的函数和小控件。

问：为什么您可能想要另一个神秘的JavaScript库来处理？
答： jQuery的主要吸引力在于它可以在您使用它的前10分钟内为您提供。

不久前 ，我们花了一些时间来改善SitePoint市场的运作方式。 在寻找一种优雅的方式来允许卖家在不离开拍卖主页面的情况下显示大屏幕截图，统计数据，图表和其他图像的同时，我遇到了Cody Lindley的Thickbox ，它由John Resig的jQuery JavaScript库提供支持 。 下图显示了thickbox的运行情况。

在使用Thinbox玩了五分钟之后，您将开始看到它的潜力。 在市场中，我能够将链接的图像和完整的HTML文档都拉到Thinbox窗口中，同时使启动页面变暗（但不会丢失）。 使用禁用了JavaScript或浏览器不可用的浏览器的用户将直接直接进入该项目（即图像或页面）。 对于“放大此缩略图”问题，这是一个非常聪明，可用且可访问的解决方案。

但是，由于我们已经决定在页面中包括jQuery库（它很小-大约10kB），所以我认为最好找出它还能为我们做些什么。

一个小时后，我进行了jQuery转换。

jQuery的真正美在于它的简单性。 单行的jQuery代码可以代替一打普通的JavaScript，但它仍然非常基础和灵活。 让我用一个例子说明这一点。 在两年前的“水平规则修复程序”中，我们使用了以下脚本：

function fancyRules() {  

  if (!document.getElementsByTagName) return;  

    var hr = document.getElementsByTagName("hr"); 

  for (var i=0; i<hr.length; i++) {  

    var newhr = hr[i];  

    var wrapdiv = document.createElement('div'); 

    wrapdiv.className = 'line';   

    newhr.parentNode.replaceChild(wrapdiv, newhr);   

    wrapdiv.appendChild(newhr);   

  }  

}  


window.onload = fancyRules;

作为此代码的快速摘要，浏览器等待页面完成加载，然后浏览DOM以查找每次出现的hr。 每次找到一个div ，它都会创建一个新的div ，并为其赋予类名“ line”，将其插入hr所在的位置，然后将旧的hr弹出到新的div ，以实现实现此特定效果所需的标记。 除了语义学方法之外，此脚本的最终结果是我们无需更改数百页就可以实现所需的结果。

当时，我认为12行代码的结果还不错。 但是，让我们看看如何使用jQuery实现相同的结果。

$(document).ready(function(){ 

  $("hr").wrap("<div class='line'></div>"); 

});

我不骗你

分解（不是有很多要分解的）：

$(document).ready(function(){ 

  ... 

});

第一和第三行是jQuery的load事件，它们从上方替换了旧的window.onload 。 我们希望在页面加载期间完成的任何任务都可以放在这些花括号内。

这是对旧的onload方法的一个重大改进，因为jQuery的功能不是等待所有内容完成加载，而是监视其中的所有内容，并在包含所有需要的部分后立即开始工作。 真的非常整洁。

值得注意的是，第二行更为简单：

  $("hr").wrap("<div class='line'></div>");

我们只需要告诉jQuery抓取此页面上的每个水平规则，便是“美元对象” — $("hr") ，而wrap就是我们将要对这些hr元素进行的操作。

jQuery的内置wrap函数接受我们提供的任何HTML（在这种情况下为"<div class='line'></div>" ），并将其包装在页面中的每个hr内-无需循环或测试。

我们使用一个div在这里，但我们可以很容易地被修改或包裹一b ，跨度，或a元素。

尽管我们在这里（所有hr ）都使用了非常简单的选择规则，但是我们可以很轻松地针对目标对象进行更加具体的选择。 使用熟悉的旧CSS语法，我们可以使用以下任何一种方法：

• $("hr.separate") —获得具有类名称"separate "的hr元素。
• $("li:only-child") -获取列表项。
• $("ul > li") —仅获取具有未排序父列表的列表项。

尽管我个人发现wrap是最有用的jQuery函数，但它只是其中的一种，包括hide，show， fadeOut("slow")和slideUp("fast") ，仅举几例。 您可能会猜出这些功能中的每一个功能。 jQuery站点上的jQuery入门教程是一个非常柔和的入门指南，并带您了解一些最常用的功能。

但是，也许jQuery的最整洁的功能就是其将功能“链接”在一起的能力。 换句话说，如果出于某种疯狂的原因想要向我们的hr元素添加第二个div ，则可以在代码末尾添加另一个对wrap函数的调用，如下所示：

$("hr").wrap("<div></div>").wrap("<div></div>");

很简单，很疯狂。 像狐狸一样疯狂！

市场的“出售您的网站”部分为您提供了另一个方便使用的示例，如下所示。

在开发此页面时，我想在每个缩略图的底角添加一个小图标。 这要求将每个img元素包装在容器div ，另一个div显示图标放置在容器div 。

同样，jQuery代码只是一行（我在这里将其拆分，因为我们使用的列宽有限）。

  $("#thumbnails li img") 

.wrap("<div class='wrap'></div>") 

.before("<div class='thumb'></div>");

用简单的英语来说，这段代码只是要求jQuery：

• 在#thumbnails内部的li元素中找到所有图像。
• 将这些图像包装在称为"wrap"的div 。
• 在我的图片之前，在我的"wrap" div挤压另一个div （带有图标图形的div 。

现在我们有了结构，其余的工作由CSS完成。

当然，如果关闭JavaScript，则缩略图会直接链接到原始图像文件，并且不需要图标。 现在，这就是我所说的优雅降级。

像大多数其他JavaScript库一样，jQuery具有一些非常高端的技巧（我们已经在上一篇文章中介绍了它的Ajax功能），但是对我来说，最大的吸引力在于它能够快速解决最小的问题，并且最少大惊小怪。

如您所知，我已经是jQuery的忠实粉丝。 我希望您也会发现它有用。

当然，如果您要扩展JavaScript的视野，请不要忘记升级到Joe Hewitt的Firebug扩展的最新版本，该扩展现在已成为JavaScript调试器无可争议的王者。

本文最初发布在Design View＃23中 。

From: https://www.sitepoint.com/jquery-javascipt-designers/