JQuery：设计师的简易JavaScript

钥匙要点

• > jQuery是一个JavaScript库，简化了使用JavaScript进行Web设计的过程，提供了一系列的预构建功能和工具来提高功能和用户体验。
jQuery允许设计人员以更简化和高效的方式来操纵HTML元素，处理事件，创建动画并进行AJAX调用，以及其他任务。
• > jQuery的关键功能之一是它可以将“链”功能“链接”起来的能力，从而允许在单一的代码行中执行多个操作。这使其成为简化复杂JavaScript任务的功能强大的工具。
>
• > jQuery的加载事件功能允许在页面加载期间完成任务，并在拥有所需的所有零件时就开始工作。这是对传统的撞击方法的改进。
• >尽管具有高端技巧的能力，但Jquery的最大吸引力是它可以快速解决小问题，最少大惊小怪的能力，这使其成为网络设计师的宝贵工具。
• 如果JavaScript的重生是过去两年中最大的主题，那么您可能可以将围绕此主题的大部分谈话分为两个主要领域。
在城镇的Geekier尽头，我们已经看到Smarties利用JavaScript做各种令人惊奇的，偶尔会荒谬的 - 与Ajax一起做事。

> 但是，对于像我这样的前端家伙来说，大部分脚本的嘶嘶声和泡沫一直集中在改装您的标记上 - 也就是说，使用JavaScript使您的标记在浏览器上后使您的标记效果更好。在过去的几年中，设计视图新闻通讯的长期读者可能会记住我自己的一些实验：

在使用DOM的造型图像时，我们使用JavaScript将圆角添加到图像中。

>在DOM文本阴影中，我们使用JavaScript在标题文本上构建阴影。

在水平规则中！好吧！，我们使用JavaScript修复了狡猾的人力资源元素。

>
>尽管这些脚本中的每个脚本都有一个完全不同的目的，但它们都涉及向浏览器发送整洁的语义标记，并使用JavaScript来修复或扩展那些足够智能的浏览器的能力。在大多数情况下，这涉及在更多标记中“包装”标记的某些部分。今天，我们将研究一种简单，通用的方法，该方法将使我们随时随地执行此操作：jQuery。
那么，什么是jQuery？
• >
> jQuery是另一个JavaScript库，它加入了已经拥挤的空间，其中包括原型，Scriptaculous，Rico，Moo.fx和其他十几个。要使用它，只需将.js文件附加在页面头的头部：神奇地，您可以访问许多预构建的功能和Gizmos。

问：为什么您可能希望另一个Arcane JavaScript库来处理？ 答：jQuery的关键吸引力是它可以在使用它的前10分钟内为您提供。 不久前，我们花了一些时间来改善Sitepoint市场运营的方式。在寻找一种优雅的方式来允许卖家展示大型屏幕截图，统计信息，图形和其他图像而不离开主拍卖页面时，我遇到了Cody Lindley的厚箱，该盒子由John Resig的JQuery JQuery JavaScript库提供支持。下图显示了厚箱的作用。
>

>仅五分钟用厚的箱子玩耍后，您就会开始看到它的潜力。在市场上，我能够将链接的图像和完整的HTML文档都拉到厚的窗口窗口，同时启动页面调暗（但不会丢失）。使用JavaScript被禁用或不可用的浏览器的用户直接将其直接带到项目（即图像或页面）。这是一个非常聪明，可用且可访问的解决方案，解决了“扩大此缩略图”问题。 但是，由于我们已经决定在页面中包含jQuery库（很小 - 大约10kb），所以我认为找出它可以为我们做些什么是一个好主意。>

一个小时后，我是一个jQuery convert。

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

作为此代码的快速摘要，浏览器等待页面完成加载，然后再通过DOM，以找到HR的每个出现。每当它找到一个时，它会创建一个新的DIV，将其赋予类名称为“线”，将其插入HR的位置，并将旧的HR弹出新的Div中，以实现实现此特殊效果所需的标记。除了语义谱系外，该脚本的最终结果是我们能够达到所需的结果而无需更改数百页。

>当时，我认为对于12行代码来说，这还不错。但是，让我们看一下如何使用jQuery实现相同的结果。

>

我不骗你。

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

将其分解（不是有太多破坏）：>

>第一行和第三行是jQuery的加载事件，它们从上面替换了旧窗口。我们希望在页面加载期间要完成的任何任务都可以在这些卷发括号内放置。>

>这是旧的Onload方法的一个很好的改进，因为Jquery的功能并没有等到所有内容都观看所需的所有内容，而是在拥有所需的所有零件时就开始工作。真的很整洁。

明显地，第二行更简单：

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

>“美元对象” - $（“ HR”） - 我们需要告诉jQuery以获取此页面上的每个水平规则，而包裹是我们将对这些HR元素做的。

>

> jQuery的内置包装功能接收我们给它的任何HTML（在这种情况下，“

”），并将其包裹在我们页面中的每个HR周围 - 无需循环或测试。>

>我们在这里使用了一个div，但是我们可以很容易地修改或包装B，SPAN或A元素。

>尽管我们在此处使用了非常简单的选择规则（所有HRS），但我们可以很容易地对我们的目标更具体。使用熟悉的旧CSS语法，我们可以使用以下任何一个：

>

$（“ hr.separate”） - 获取带有类名为“独立”的HR元素。
• >
$（“ li：唯一的孩子”） - 获取自己的列表项目。
• >
$（“ ul> li”） - 仅获取带有未订购父母列表的列表项目。

>我亲自发现包装是最有用的jQuery函数，但它只是众多，包括hide，show，vadeout（“ slow”）和slideup（“ fast”），仅举几例。您可能可以猜测这些功能中的每一个。 JQuery首发网站上的Jquery首发教程是一个非常温和的初学者指南，并带您浏览一些最常见的功能。

>

>但也许jQuery的单一最整洁的功能是它“链”起作用的能力。换句话说，如果由于某种疯狂的原因，我想在我们的人力资源元素中添加第二个div，我可以简单地将另一个调用函数添加到代码末尾的包装函数，例如：

>

$(document).ready(function(){ <br>
  $("hr").wrap("<div class='line'></div>"); <br>
});

太容易了，这太疯狂了。像狐狸一样疯狂！

>

卖出您的市场网站部分为您提供了另一个派上用场的例子，如下所示。

>当我们开发此页面时，我想在每个缩略图的底部添加一个小图标。这要求将每个IMG元素包裹在容器div中，另一个DIV显示要位于容器div的图标>再次，jQuery代码只是一行（我在这里将其拆分，因为我们可以使用有限的列宽度）。

>

>用普通的英语，此代码只要求：

$(document).ready(function(){ <br>
  ... <br>
});

• 在#thumbnails内部的li元素中找到所有图像。
>将这些图像包裹在称为“ wrap”的Div中。
• > 在我的图像之前，我的“包裹” div中的另一个div（带有图标图形的一个）
• 现在我们有了结构，CSS完成了其余的工作。
> 当然，如果关闭JavaScript，则缩略图直接链接到原始图像文件，并且不需要图标。现在，这就是我所说的优雅退化。

>与大多数其他JavaScript库一样，jQuery能够进行一些非常高端的技巧（我们在上一篇文章中介绍了其Ajax功能），但是对我来说，最大的吸引力是它可以快速解决小问题，最小的麻烦。

您可能会说，我已经是一个很大的JQuery粉丝。我希望您也会发现它也有用。

>当然，如果您要扩展自己的JavaScript范围，请不要忘记升级到Joe Hewitt的Firebug扩展名的最新版本，该版本现在是无可争议的JavaScript Debugger的国王。

本文最初发表在设计视图＃23。

经常询问有关设计师的jQuery和JavaScript的问题

> jquery和javaScript？

> javaScript是一种编程语言，可让您在网页上实现复杂的功能。另一方面，jQuery是一个快速，小且功能丰富的JavaScript库。它使HTML文档遍历和操纵，事件处理和动画之类的东西变得更加简单，可以易于使用易于使用的API，可在许多浏览器中使用。本质上，JQuery是一组JavaScript库，旨在简化HTML文档遍历，活动处理和动画。您可以从官方的jQuery网站下载它，也可以直接从内容交付网络（CDN）中包含它。一旦库包含在项目中，您就可以通过使用$符号开始使用jQuery函数（选择html元素）和jQuery操作（在选定的元素上执行）。>>

jQuery的jQuery的某些常见用途是在网络设计中的某些常见用途？单击或鼠标的动作），创建动画并进行AJAX调用以检索或将数据发送到服务器。它还用于创建交互式功能，例如图像滑块，表单验证和动态内容加载。

> jQuery如何简化使用JavaScript？

> jQuery通过为常见的Web任务提供易于使用的API来简化JavaScript，从而抽象复杂的JavaScript功能。它还处理编写原始JavaScript时可能会出现的许多跨浏览器兼容性问题，使您的代码更易于编写和维护。

我可以与其他JavaScript库一起使用jQuery？

是的，是的，可以与其他Javascript库一起使用JQuery。它提供了一个称为Noconflict Mode的功能，它允许您与其他也使用$符号的库一起使用jQuery。官方的jQuery网站提供了全面的文档和教程。 Codecademy，Udemy和Khan Academy等其他在线平台也提供了JQuery的课程。

我如何调试jQuery代码？

>调试jQuery代码类似于调试JavaScript。您可以使用浏览器的开发人员工具来检查元素，查看控制台日志并逐步浏览代码。此外，jQuery提供了一些方法，例如。 jQuery cdn用于更快的加载时间。

>如何优化我的jQuery代码以获得更好的性能？

>

>有几种方法可以优化您的jQuery代码以获得更好的性能。其中包括：最小化DOM操作，使用ID选择器代替类选择器，缓存jQuery对象以及使用.ON（）方法进行事件绑定。

我可以将jQuery用于移动Web开发吗？

是，是的，jQuery有一个特定的移动网络开发图书馆，用于移动网络开发的特定库。它为所有流行的移动设备平台提供了一个统一的，基于HTML5的用户界面系统。

以上是JQuery：设计师的简易JavaScript的详细内容。更多信息请关注PHP中文网其他相关文章！