jQuery中prev()方法用法实例
简介
prev()是jQuery中的一个方法，主要用于获取匹配元素集合中每个元素前面的兄弟元素。该方法的返回值为匹配元素集合中前一个兄弟元素。
语法
$(selector).prev(filter);
其中，selector是用来定位元素的选择器，filter是用来筛选匹配元素集合中前面的兄弟元素的选择器，可以为空。
实例1
<!DOCTYPE html>
<html>
<head>
<title>jQuery中prev()方法用法实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li class="highlight">item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
$(document).ready(function() {
$(".highlight").prev().css("color", "red");
});
</script>
</body>
</html>
在这个例子中，我们先通过CSS给item3添加了一个class为highlight的样式类，然后通过jQuery选中了它，通过调用prev()方法得到了item2元素，再通过调用css()方法可以修改其颜色为红色。
实例2
<!DOCTYPE html>
<html>
<head>
<title>jQuery中prev()方法用法实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: #f2f2f2;
margin: 10px;
}
.highlight {
background-color: #666;
}
</style>
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
<div class="highlight">Box 3</div>
<div>Box 4</div>
<div>Box 5</div>
<script>
$(document).ready(function() {
$(".highlight").prevAll().css("opacity", "0.3");
});
</script>
</body>
</html>
这个例子中，我们给所有的div元素都设置了一些样式，并将第三个div元素设置了一个class为highlight的样式类。在jQuery代码中，我们先选中了这个元素，再调用了prevAll()方法得到了它前面的所有兄弟元素，最后调用了css()方法将这些元素的不透明度设置为0.3。
注意，这里使用了prevAll()方法而不是prev()方法，因为我们需要获取所有前面的兄弟元素。使用prevAll()方法可以得到一个由所有前面的兄弟元素组成的集合。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中prev()方法用法实例 - Python技术站
微信扫一扫 
支付宝扫一扫 