jQuery for Designers简介

最新推荐文章于 2024-08-17 12:54:01 发布

dingshi7798

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量122

点赞数

文章标签： javascript 后端 ViewUI

我发现使用jQuery是一种令人生畏的体验，因为我不是开发人员。实现“ JavaScript”是“他们”在网站后端所做的，但是与我为网站创建设计时的流程无关。

但是作为一名设计师，我需要了解各种选择和局限性，在为客户进行设计时可以使用。 jQuery提供了一些惊人的设计选项。如果我想成为这个领域的佼佼者，我觉得我需要把自己从盒子里拿出来，了解整个jQuery到底有什么用。

什么是jQuery？

简而言之，它是一个代码库，可让您告诉网络浏览器如何做一些花哨的东西。简短而技术性更强的描述是，jQuery是一个JavaScript库，可以轻松快速地实现AJAX，CSS和其他Web技术，并在各种浏览器（甚至是移动浏览器）中实现一致的结果。

现在，退后一步，不要害怕（深呼吸！）。正如我将演示的那样，您无需了解所有技术人员的知识，而是可以了解jQuery如何使您的设计更具交互性和刺激性。

为什么我需要了解jQuery？

我知道会有一些人坚决不同意我，但是jQuery是未来。更重要的是，jQuery为您提供了一整套全新的设计工具，您应该作为设计师知道这些工具。如果您不了解某些功能，则永远不会使用它们。 jQuery在桌子上放了一套全新的视觉机会。

至少，作为一名设计师，您需要了解将客户的愿景变为现实的选择。如果您知道如何实现类似jQuery的方法，那么您将变得更加有价值。

jQuery可以为我的设计做什么？

好多从排版升级到图像库，再到精美的注释表单-jQuery已经拥有成千上万个预先构建的随时可用的资源，可以极大地改善设计的外观和感觉。

一旦您对jQuery有一点了解，您的设计选项就会爆炸。您可能会发现该技术非常易于使用，并且可以创建自己的代码。至少，您可以开始寻找您可能尚未开发的设计工具。

实现jQuery有多困难？

这实际上很容易，但是您必须以正确的方式开始。我将向您解释，好像您以前从未使用过HTML一样。您可以将此代码复制并粘贴到文本编辑器中，并将其另存为.HTML文件，它将在浏览器中打开。使用文件名“ example.html”保存文件，以便您和我停留在同一页面上：

<html>
<head>
<title>jQuery for Designers</title>
</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery示例＃1

现在这已成为最基本的东西，对于那些已经非常熟悉HTML的设计师们，我感到抱歉。它很快就会好起来。

现在在

HTML文档的第二部分，我们将使用以下简单代码（突出显示）实现jQuery：

<html>
<head>
<title>jQuery for Designers</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery示例＃2

这里有几个要点。首先，我要引用Google托管的文档。您可以下载该文件并将其托管在您的网站上，但我的首选是让大公司托管这些文件并减轻服务器的压力。您可能要引用Google以外的其他人。该文件的其他两个流行来源是Microsoft和Media Temple 。这些文件位于开发人员社区中称为内容交付网络（CDN）的文件上，并且可供公众使用。

进入代码，我们已经完成的所有工作都被告知浏览器运行JavaScript。如果将其复制并粘贴到新文档中，您将看不到网页的任何更改。至少还没有。

因此，让我们对其进行测试以了解发生了什么。如果您从未深入研究Web开发的深度，这对您来说将是一个激动人心的时刻。新代码突出显示：

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
alert("I made a jQuery!");
});
</script>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery示例＃3

将此粘贴到空白文档中，另存为HTML文件，然后在浏览器中将其打开。使用“我做了一个jQuery！”，您会看到一个漂亮的弹出窗口。信息。为了证明这实际上是一个简单的jQuery实现，而不仅仅是JavaScript，请注释掉jQuery脚本并运行相同的代码：

<html>
<head>
<title>jQuery for Designers</title>

<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->

<script type="text/javascript">
$(document).ready(function(){
alert("I made a jQuery!");
});
</script>
</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery示例＃4

妈你看没有弹出窗口！这是因为您没有调用告诉浏览器警报框应打开的jQuery。删除注释或仅粘贴上面示例2中的代码，以便根据需要获得jQuery代码参考。

所以我做了一个弹出窗口。怎么办？

是的，所以弹出的示例非常简单，但是如果您从未经历过自己实现jQuery的步骤，那么这对您来说是一个巨大的飞跃。因此，尽管您可以随意取笑我的弹出窗口，但不要过分低估它。

接下来要做的是找到您要实现的jQuery。选项比比皆是！根据您的需要，您可以找到各种精美效果可应用于您的网页。

您能告诉我如何实现jQuery插件吗？

当然！我将使用Davatron5000的（新的）我最喜欢的jQuery插件之一– Lettering向您介绍一个示例。

首先，您需要下载几乎总是一个.JS文件的jQuery代码，例如上述示例中的“ jquery.min.js”。您可以从Github下载Lettering.js 。将代码复制到空白文本文档中，并将其另存为Lettering.js，与example.html文件位于同一文件夹中。

其次，将Davatron5000中的脚本添加到上面的示例＃2代码中：

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="Lettering.js"></script>
<script>
$(document).ready(function() {
$("#triple_threat").lettering('lines');
});

</script>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery示例5 –添加Lettering.js并调用'lines'函数

因此，让我们放慢一点。在顶部的第五行中，我们引用了您的新Lettering.js文件。您可以将此文件放在Web服务器上，并在某个时候直接引用它。

接下来，我们看到我们的脚本。我称这个小美人为“ triple_threat”，因为我要将版式分为三行。 Lettering.js可以做很多令人惊奇的事情，包括自动将每个字母分解成自己的CSS类，以便您可以轻松地操作每个字母。

我只想讲三行，而不是逐个进行每个字母的动议。为此，我引用了代码“ lettering（'lines'）”，正如您在第八行看到的那样。您还可以通过将代码留空-.lettering（）;来分解每个字母。或者，通过使用“单词”，您可以自动将每个单词分解。

为了确保我们在同一页面上，文件夹的内容应如下所示：

现在，Lettering.js已使用jQuery分解了HTML的代码行，我们需要一些CSS来发挥作用。从上面将代码添加到示例5中：

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Lettering.js"></script>
<script>
$(document).ready(function() {
$("#triple_threat").lettering('lines');
});
</script>

<style type="text/css">
#triple_threat .line1{
font-size: 38px;
text-transform: uppercase;
display:block;
text-align:center;
letter-spacing: 8px;
}

#triple_threat .line2{
font-size: 21px;
text-transform: lowercase;
font-style: italic;
display:block;
text-align:center;
margin-bottom: 6px;
}

#triple_threat .line3{
font-size: 13px;
text-transform: uppercase;
display:block;
text-align:center;
line-height: 24px;
}
</style>

</head>
<body>
Lots of insightful stuff here.
</body>
</html>

jQuery示例＃6 –添加CSS

我们现在拥有一些CSS类。您可以引用“ triple_threat”类并查看结果。因此，让我们将类添加到我们的example.html中。请记住，我们需要三行，因此我们将使用
标签以创建这些标签。对于那些刚接触HTML的人来说，我知道这是很多信息，但是现在就复制并粘贴，以后再根据需要研究这些概念。

<html>
<head>
<title>jQuery for Designers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="Lettering.js"></script>
<script>
$(document).ready(function() {
$("#triple_threat").lettering('lines');
});
</script>
<style type="text/css">
#triple_threat .line1{font-size: 38px; text-transform: uppercase; display:block; text-align:center; letter-spacing: 8px; } #triple_threat .line2{font-size: 21px; text-transform: lowercase; font-style: italic; display:block; text-align:center; margin-bottom: 6px; } #triple_threat .line3{font-size: 13px; text-transform: uppercase; display:block; text-align:center; line-height: 24px; }
</style>
</head>
<body>

<p id="triple_threat">Lots of insights!<br />
I wouldn't go so far as to say "genius".<br />
But you can say that if you really want to.<br />
</p>

</body>
</html>

jQuery示例＃7 –实现jQuery

我合并CSS以节省空间，并添加了“ triple_threat”段落。结果并不惊人，但是如果您成功地转换了字符，那么您就实现了jQuery！

我上瘾了！在哪里可以找到更多信息？

我很高兴你问。 jQuery代码端的主要来源已在jQuery.com上结束。

对于今天可以使用的jQuery插件，请查看以下资源：

欢迎来到jQuery的世界，您是精明的设计师，您！请务必让我知道哪些jQuery插件成为您的收藏！

From: https://www.sitepoint.com/an-introduction-to-jquery-for-designers/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery for Designers简介

我发现接近的jQuery是一个吓人的经历，因为我不是一个开发商。实现JavaScript的是什么“他们”在网站的后台做了，但是有一点创建一个网站设计时与我的过程。但是，作为一个设计师，我需要知道的全方位的选择 - 和限制 - 建设一个客户端的设计时，我有我的处置。 jQuery的提出了设计一些惊人的选项。如果我想在我的领域的顶端，我觉得我需要强迫自己走出我的盒子和学习的挫折感这整个jQu...
复制链接

扫一扫