jQuery first（）和last（）函数示例

最新推荐文章于 2021-09-03 17:50:20 发布

cunchi4221

最新推荐文章于 2021-09-03 17:50:20 发布

阅读量816

点赞数

文章标签： java js javascript jquery python ViewUI

原文链接：https://www.journaldev.com/5252/jquery-first-and-last-functions-example

版权

In the last jQuery tutorial, we look into some of the tree traversing functions for parent and child elements. Today we will look into two of the simple traversing functions – first() and last().

在上一个jQuery教程中，我们研究了父元素和子元素的一些树遍历函数。今天，我们将研究两个简单的遍历函数– first()和last() 。

jQuery first（）函数 (jQuery first() function)

The jQuery first() method is used to get the first element from the selected HTML elements. You can perform desired actions on the returned element.

jQuery的first（）方法用于从选定HTML元素中获取第一个元素。您可以对返回的元素执行所需的操作。

This is the syntax for using jQuery first():

这是使用jQuery first（）的语法：

first()
第一（）

This method does not take any arguments.

此方法不带任何参数。

jQuery first（）示例 (jQuery first() example)

Following example demonstrates the jQuery first() method usage.

以下示例演示了jQuery first（）方法的用法。

jquery-first.html

<html>
<head>
<title>jQuery Traversing First</title>

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<style>
  .highlight{
    background-color: yellow
  }
  </style>
<script>
$(document).ready(function(){
  $("p span").first().addClass("highlight");
});
</script>
</head>
<body>

<h1>Journal Dev</h1>
<p>This is the <span>first</span> span element.</p>
<p>This the  <span>second</span> span element.</p>
<p>This is the <span>third</span> span element.</p>

</body>
</html>

In this example, there are three <p> elements in this code. The first() method returns the first span element of the first p element and changes the background color to yellow. We have used jQuery addClass() method to include the CSS style class defined in the code.

在此示例中，此代码中包含三个<p>元素。 first（）方法返回第一个p元素的第一个span元素，并将背景色更改为黄色。我们已经使用jQuery addClass（）方法来包含代码中定义CSS样式类。

Below image shows the output produced by the above HTML page.

下图显示了以上HTML页面产生的输出。

jQuery last（）函数 (jQuery last() function)

The jQuery last() method is used to get the last element from the selected HTML elements. You can perform desired actions on the returned element.

jQuery last（）方法用于从选定HTML元素中获取最后一个元素。您可以对返回的元素执行所需的操作。

This is the syntax for using jQuery last():

这是使用jQuery last（）的语法：

last()
持续（）

This method does not take any arguments.

此方法不带任何参数。

jQuery last（）示例 (jQuery last() example)

Following example demonstrates the jQuery last() method usage.

以下示例演示了jQuery last（）方法的用法。

jquery-last.html

<html>
<head>
<title>jQuery Traversing Last</title>

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<style>
  .highlight{
    background-color: yellow
  }
  </style>
<script>
$(document).ready(function(){
  $("p span").last().addClass("highlight");
});
</script>
</head>
<body>

<h1>Journal Dev</h1>
<p>This is the <span>first</span> span element.</p>
<p>This the  <span>second</span> span element.</p>
<p>This is the <span>last</span> span element.</p>

</body>
</html>

In this example, there are three <p> elements in this code. The last() method returns the last span element of the last p element and changes the background color to yellow. We have used addClass() method in jQuery to include the CSS style class defined in the code.

在此示例中，此代码中包含三个<p>元素。 last（）方法返回最后一个p元素的最后一个span元素，并将背景色更改为黄色。我们已经在jQuery中使用addClass（）方法来包含代码中定义CSS样式类。

Below is the output produced by the above HTML page, notice the last span element background color.

以下是上述HTML页面产生的输出，请注意最后一个span元素的背景色。

That’s all for now, we will look into more jQuery traversing methods in coming posts.

到此为止，我们将在以后的文章中研究更多的jQuery遍历方法。

翻译自: https://www.journaldev.com/5252/jquery-first-and-last-functions-example

cunchi4221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery first（）和last（）函数示例

In the last jQuery tutorial, we look into some of the tree traversing functions for parent and child elements. Today we will look into two of the simple traversing functions – first() and last(). 在上一个...
复制链接

扫一扫