我发现使用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>
<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/