jquery 循环li元素_jQuery和基本jQuery动画简介

jQuery和基本jQuery动画简介 作者：守护者

我本打算讲一个完全不同的主题，但是由于我的上一个教程是关于SASS / SCSS的，所以决定，我最好继续进行此领域的工作，并在jQuery上进行简短的撰写。众所周知，jQuery是Java的顶级库之一。Java不仅是一种有用的语言，而且与那里的其他编程语言相比，它也要容易得多。简而言之，jQuery使它更加优雅和方便。现在让我们举一个简单的例子：

                  jQuery

上面的HTML仅包含一个输入字段。假设一旦按钮被按下，我们希望发生一些事情。请注意，我们需要在客户端完成此操作。仍然适用(但不推荐)的旧方法是使用内联Javascript事件监听器，如下所示：

这种方法的问题在于，我们需要专门在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代码段，以更好地可视化正在发生的事情。当我们要选择列表元素时，我们将编写以下内容：

Example1 Example2 Example3 Example4 Example5

Text

Another

$('li:first')  

从一组有序/无序列表中选择第一个列表元素。

$('li:last')  

从一组有序/无序列表中分别选择最后一个元素。

$('li:not(li:first)')  

从一组有序/无序列表中选择所有列表元素，第一个除外。

$('li:even')  

从位置为偶数的一组有序/无序列表中选择所有列表元素。

$('li:odd')  

从位置为奇数的一组有​​序/无序列表中选择所有列表元素。

$('li:eq(1)')  

从位置等于一个的一组有序/无序列表中选择所有列表元素。

$('li:gt(2)')  

从位置大于两个的有序/无序列表组中选择所有列表元素。

$('li:lt(2)')  

从位置小于两个的有序/无序列表组中选择所有列表元素。

$(':header')  

选择所有标题标签。这些措施包括

，

，

，

，

和

。

$('li:has(a)')  

从一组有标签的有序/无序列表中选择所有列表元素。

$('p:parent')  

选择段落的父元素。

现在，要完成本教程，我们需要将它们付诸实践。我们的想法是使用jQuery制作有效的动画，因此我们首先假设这是我们的HTML文档，其中包含位于几个divs中的两个图像。

确保您的head tag中也有这些：

第一个文件是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会面的新手开发人员有所帮助。