jquery 获取可见元素|极客教程

jquery 获取可见元素

在web开发中，我们经常需要根据用户操作或者其他条件来获取页面中的一些可见元素。jQuery是一个流行的JavaScript库，它可以帮助我们方便地操作DOM元素。

在本文中，我们将探讨如何使用jQuery来获取页面中可见的元素。

方法介绍

:visible选择器

jQuery提供了一个很方便的选择器:visible，用来选择页面中可见的元素。通过这个选择器，我们可以快速地获取页面中当前可见的元素。

$(window).scrollTop() 和 $(window).height()

除了:visible选择器外，我们还可以使用$(window).scrollTop()和$(window).height()方法来获取浏览器窗口的滚动高度和窗口高度。通过这两个方法的组合，我们可以计算出当前可见区域的范围。

filter() 方法

在获取所有元素后，我们可以使用jQuery的filter()方法来筛选出可见的元素，这个方法接受一个回调函数作为参数，我们可以在回调函数中自定义判断条件。

实例演示

接下来，让我们通过一个实例来演示如何使用jQuery来获取页面中可见的元素。

假设我们有一个包含很多子元素的<div>，我们希望获取当前可见的子元素，并给这些子元素添加一个特定的样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Visible Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.child {
    width: 100%;
    height: 100px;
    background-color: gray;
    margin-bottom: 10px;
}
.visible {
    background-color: yellow;
}
</style>
</head>
<body>
<div id="parent" style="height: 300px; overflow-y: scroll;">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
    <div class="child">Child 5</div>
    <div class="child">Child 6</div>
    <div class="child">Child 7</div>
    <div class="child">Child 8</div>
    <div class="child">Child 9</div>
    <div class="child">Child 10</div>
    <div class="child">Child 11</div>
    <div class="child">Child 12</div>
</div>

<script>
 $(document).ready(function() {$ (window).scroll(function() {
        var scrollTop =  $(window).scrollTop(); var windowHeight =$ (window).height();
        var visibleTop = scrollTop;
        var visibleBottom = scrollTop + windowHeight;

         $(".child").each(function() { var elementTop =$ (this).offset().top;
            var elementBottom = elementTop +  $(this).outerHeight(); if ((elementTop >= visibleTop && elementTop <= visibleBottom) || (elementBottom >= visibleTop && elementBottom <= visibleBottom)) {$ (this).addClass("visible");
            } else {
                $(this).removeClass("visible");
            }
        });
    });
});
</script>
</body>
</html>

在这个实例中，我们首先定义了一个父元素<div>，高度为300px，内部包含12个子元素，每个子元素的高度为100px。父元素设置了overflow-y: scroll;，使得子元素超出父元素会出现滚动条。

在JavaScript部分，我们监听了scroll事件，通过计算子元素的位置和窗口的滚动高度来判断子元素是否可见。如果子元素可见，我们给它添加了visible类，从而改变了其背景颜色。