jquery 元素前插入元素_jQuery-查找元素并完成动画

jQuery是用于创建动态网页的流行JavaScript库。 在本文中，我们将研究如何在Web应用程序中使用jQuery。

:file 选择器

我们可以使用:file选择器获取类型file的元素

例如，如果我们有：

  OptionButton

我们可以这样写：

$("input:file").css({  background: "yellow",  border: "3px red solid"});

.filter()

利用filter函数可以从wrapper set中过滤符合条件的dom元素。

例如：

list item 1 list item 2 list item 3 list item 4 list item 5 list item 6

我们可以得到li处于偶数位置的，并通过编写以下内容为其添加红色背景：

$("li").filter(":nth-child(2n)").css("background-color", "red");

因此， 第2，第4和第6个li元素具有红色背景。

.find()

find()函数用于选取每个匹配元素的符合指定表达式的后代元素，并以jQuery对象的形式返回。

这里的表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象。

例如：

I II A B 1 2 3 C III

然后，我们可以li从li类中获得的item-ii，并通过编写以下内容为其添加红色背景：

$("li.item-ii").find("li").css("background-color", "red");

.finish()

finish()函数用于立即完成队列中的所有动画。

finish()会停止当前正在运行的动画，删除所有队列中的动画，并完成匹配元素的所有动画。

例如，如果我们具有以下HTML：

Go finish

CSS：

.box {  position: absolute;  top: 10px;  left: 10px;  width: 15px;  height: 15px;  background: black;}

然后，当我们单击Go按钮时，可以通过以下代码为div 创建动画：

const horiz = $("#path").width() - 20,  vert = $("#path").height() - 20;$("#go").on("click", function() {  $(".box")    .clearQueue()    .stop()    .css({      left: 10,      top: 10    })    .animate({      top: vert    }, 3000)    .animate({      left: horiz    }, 3000)    .animate({      top: 10    }, 3000);});const finish = () => {  $("div.box").finish();}

finish当我们单击完成按钮以跳过动画到最后时，将调用该函数。

.first()

.first()函数用于获取当前jQuery对象所匹配的元素中的第一个元素，并返回封装该元素的jQuery对象。

例如：

list item 1 list item 2 list item 3 list item 4 list item 5

然后我们得到第一个，li并通过接线为其添加红色背景：

$("li").first().css("background-color", "red");

结论

我们可以获得各种元素，并使用jQuery完成动画。