jQuery基础与动画入门指南
发表时间: 2020-12-29 19:56
jQuery和基本jQuery动画简介 作者：守护者
我本打算讲一个完全不同的主题，但是由于我的上一个教程是关于SASS / SCSS的，所以决定，我最好继续进行此领域的工作，并在jQuery上进行简短的撰写。众所周知，jQuery是Java的顶级库之一。Java不仅是一种有用的语言，而且与那里的其他编程语言相比，它也要容易得多。简而言之，jQuery使它更加优雅和方便。现在让我们举一个简单的例子：
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html: charset=utf-8' /> <title>jQuery</title> <script type='text/javascript' src='jquery.js'></script> </head> <body> <input type='button' value='Don\'t touch' id='btn' /> </body> </html> 上面的HTML仅包含一个输入字段。假设一旦按钮被按下，我们希望发生一些事情。请注意，我们需要在客户端完成此操作。仍然适用（但不推荐）的旧方法是使用内联Javascript事件监听器，如下所示：
<input type='button' value='Don\'t touch' id='btn' onClick='alert(0);' /> 这种方法的问题在于，我们需要专门在HTML中指定侦听特定事件的事件以及事件发生后的处理方式。在编程中，这是真正的坏习惯，而在HTML中，这是更糟糕的做法。因此，更好的选择是让其他用户监听页面上的任何事件（例如，一个BigBrother监视所有事件）。在这种情况下，根本不需要更改HTML，从正面来看，我们可以在实时执行中添加或删除此类内容（听或不听）。因此，让我们看看如何使用jQuery实现这一目标。
$('#btn').click(function(){ alert(0); }); 美元符号称为选择器（我将在后面说明）。我们选择几乎是“ btn”的ID，然后使用lambda（匿名）函数对其执行点击操作。对于那些不知道匿名函数是谁的人来说，这是一个之前从未声明过的函数，这是我们第一次使用它而不为其命名。基本上，这可能有效或无效。这取决于是否已加载DOM。如果由于某种原因首先加载了按钮，则可以使用。但是由于脚本是在输入字段上方定义的，因此它不能真正选择它，因为它根本不存在，因此该动作将不会发生。在某些情况下，事情会以相反的方式发生，但是它们很少存在。
为了解决这个问题，我们可以很容易地在HTML下面编写脚本，但是，这不是一个好主意，因此不应付诸实践。您也可以将onLoad事件用于body标签，但是具有相同的逻辑。在那种情况下，jQuery有一个名为ready（）的特殊功能。我们通过以下方式使用它：
$(document).ready(function(){ $('#btn').click(function(){ alert(0); }); }); 这意味着一旦文档被加载，此函数范围内的代码将仅在那时执行。要查看是否已选择ID，可以检查控制台，但在此之前，请执行以下操作：
var a = $('#btn'); console.log(a); 如果选择正确，您将获得[div＃content]。选择一个元素的目的是操纵它。一旦获得它，我们就有权使用大量的内置功能。因此，假设我们要修改整个HTML页面。我们可以这样做：
a.html('random text'); 那么document.getElementById（）和使用jQuery选择id之间有什么区别？主要区别在于使用纯Javascript（如果要选择），比如说所有具有“名称”类的元素，则必须编写循环，检查等。使用jQuery时，我们可以一行完成。
$('.name'); 其他一些示例选择器如下：
$('*') 全部选择。整个文件的内容。
$('code, #id_example, .class_example') 组合选择器。如果我们要获取所有具有id的元素-id_example和所有具有名称class_example的类，则可以用逗号分隔它们。
让我们采用以下HTML代码段，以更好地可视化正在发生的事情。当我们要选择列表元素时，我们将编写以下内容：
<ul> <li>Example1</li> <li class='two'>Example2</li> <li>Example3</li> <li>Example4</li> <li><a href='#'>Example5</a></li> </ul> <h1>Text</h1> <h5>Another</h5> $('li:first') 从一组有序/无序列表中选择第一个列表元素。
$('li:last') 从一组有序/无序列表中分别选择最后一个元素。
$('li:not(li:first)') 从一组有序/无序列表中选择所有列表元素，第一个除外。
$('li:even') 从位置为偶数的一组有序/无序列表中选择所有列表元素。
$('li:odd') 从位置为奇数的一组有序/无序列表中选择所有列表元素。
$('li:eq(1)') 从位置等于一个的一组有序/无序列表中选择所有列表元素。
$('li:gt(2)') 从位置大于两个的有序/无序列表组中选择所有列表元素。
$('li:lt(2)') 从位置小于两个的有序/无序列表组中选择所有列表元素。
$(':header') 选择所有标题标签。这些措施包括<h1>，<h2>，<h3>，<h4>，<h5>和<h6>。
$('li:has(a)') 从一组有标签的有序/无序列表中选择所有列表元素。
$('p:parent') 选择段落的父元素。
现在，要完成本教程，我们需要将它们付诸实践。我们的想法是使用jQuery制作有效的动画，因此我们首先假设这是我们的HTML文档，其中包含位于几个divs中的两个图像。
<body> <div id='menu'> <a href='#'><img src='img/basketball.png' align='left' class='b'></a> <div id='abs'> <a href='#'><img src='img/football.png' align='left' class='c'></a> </div> </div> </body> 确保您的head tag中也有这些：
<script type='text/javascript' src='js/jquery.js'></script><script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
第一个文件是jQuery库本身，第二个文件是我已决定使用的过渡效果插件。您可以从此处下载。而且，不要忘记我们的样式表，它们实际上将对齐元素并赋予它们更好的外观。
body { background-color: #000; } .b, .c { width: 70px; heigh: 70px; border: none; opacity: 0.4; margin-top: 50px; padding-left: 40px; } #menu { margin: 100px auto auto auto; width: 500px; height: 200px; } #abs { width: 200px; height: 100px; position: absolute; left: 50px; top: 200px; } 我们要对图像进行的处理是应用一种效果，该效果将使它们上下反弹，上下左右移动等等。为了实现这一点，我们应该依赖animate（）函数，该函数几乎是jQuery动画效果的核心。有一些自定义函数，例如fadeOut（），fadeIn（）等，但仅限于其参数和功能。首先，正如我在本教程前面所指出的那样，我们需要使用ready（）函数检查文档的可用性。
$(document).ready(function(){}); 其中一个事件将在悬停状态下发生，而另一事件将在单击状态下发生。为了使篮球球弹起，我们假设以下内容：我们将首先选择该类并将其附加到变量中，以便更轻松地使用它。
var button = $('.b'); 现在我们需要对其进行动画处理（请记住，'b'类拥有我们的篮球形象）。
button.hover(function(){ $(this).stop().animate({ opacity: 1, marginTop: '0px' }, 800); 由于我们已经指定了20像素的页面空白，因此现在将其取回，以使图像上升。opacity属性也是如此。悬停按钮时要应用的功能指定了两个属性，并允许在800毫秒的时间表内进行此操作。这是一秒的80％（换句话说，1000毫秒将是一整秒）。
所述止动件（）函数防止多个悬停迫使图像输入号码的动画（）迭代。简而言之，如果我们省略了stop（）函数，那么一旦将鼠标悬停多次，图像就会不断地上下移动（这很烦人）。到目前为止，我们仅对第一个效果应用了动画，这意味着一旦鼠标不再位于图像上方，我们仍然需要将球放下。
function(){ $(this).stop().animate({ opacity: 0.6, marginTop: '50px' }, 800, "easeOutBounce"); }); }); 通常，如我们在上面的示例中所做的那样，我们使用stop（）函数绕过任何不必要的重复，并将margin-top属性更改为50个像素，这会将球移至文档中的原始位置。现在，“ easeOutBounce”作为参数与动画的发生时间一起发挥作用。缓动插件附带了许多过渡效果，但我选择了此效果，以便在返回初始状态时实现反弹效果。
像上面这样结合以上所有内容：
$(document).ready(function(){ var button = $('.b'); button.hover(function(){ $(this).stop().animate({ opacity: 1, marginTop: '0px' }, 800); }, function(){ $(this).stop().animate({ opacity: 0.6, marginTop: '50px' }, 800, "easeOutBounce"); }); }); 正如我们希望的那样，最终为篮球球带来了不错的效果。因此，现在对于足球图像，我们想像将其踢起一样向上和向左移动。因此，让我们准备好ready（）函数：
$(document).ready(function(){ $('#abs').click(move); }); 并对图像进行动画处理，如下所示：
function move(){ $('#abs').animate({ left:'+=50px', top:'-=30px' }, 300); } 函数move（）正在为div元素选择abs ID，并将animate（）函数以及一些规范应用于该元素。在+ =意味着图像将与50个像素的左右移动，每次也将保持其流传至今的距离。top属性也是如此。由于底部属性对此不起作用，因此我们对顶部属性使用负值。
希望这对即将与jQuery会面的新手开发人员有所帮助。
鲁公网安备37020202000738号