jQuery 遍历 - first() 方法 概述
jQuery 2022-06-01 17:59:08小码哥的IT人生shichen
jQuery 遍历 - first() 方法
实例
高亮显示段落中的第一个 span ：
$("p span").first().addClass('highlight');
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>.highlight{background-color: yellow}</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p><span>Look:</span> <span>This is some text in a paragraph.</span> <span>This is a note about it.</span></p>
<script>$("p span").first().addClass('highlight');</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
first() 将匹配元素集合缩减为集合中的第一个元素。
语法
.first()
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.first() 方法会用第一个匹配元素构造一个新的 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').first().css('background-color', 'red');
完整实例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<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>
<script>
$('li').first().css('background-color', 'red');
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
这次调用的结果是，第一个项目被设置为红色背景。
