jQuery-查找元素并完成动画_jquery 操作path 动画-CSDN博客

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

:file 选择器

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

例如，如果我们有：

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="password">
  <input type="radio">
  <input type="reset">
  <input type="submit">
  <input type="text">
  <select>
    <option>Option</option>
  </select>
  <textarea></textarea>
  <button>Button</button>
</form>

我们可以这样写：

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

.filter()

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

例如：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

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

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

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

.find()

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

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

例如：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

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

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

.finish()

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

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

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

<div class="box"></div>
<div id="path">
  <button id="go">Go</button>
  <br>
  <button id="bf" class="b" onclick="finish()">finish</button>
</div>

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对象。

例如：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

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

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

结论

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