jQuery是一种流行的JavaScript库，它可以轻松地用于许多不同的网站应用中。其中，遮罩效果是一个常见的功能。遮罩效果可以让用户在进行特定操作时，暂停页面上的其他操作。下面，我们将学习如何使用jQuery来实现遮罩指定的div。

我们将从HTML和CSS代码开始：

<div class="wrapper">
<div class="content">
<h1>这是一段内容</h1>
<p>这是一个段落</p>
<button id="maskButton">遮罩</button>
</div>
<div class="mask"></div>
</div>
.wrapper {
position: relative;
}
.content {
position: relative;
z-index: 2;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}

在上面的代码中，我们创建了一个包含内容和遮罩的div。内容部分包含一个标题，一个段落和一个按钮。遮罩部分个设置了透明度为0.5的黑色背景，用于遮盖内容部分。我们需要在JavaScript中将其设置为可见性hide 。

现在，我们将添加一些jQuery代码处理按钮的点击事件，以显示和隐藏遮罩：

$(document).ready(function() {
$("#maskButton").click(function() {
$(".mask").show();
});
$(".mask").click(function() {
$(this).hide();
});
});

在上面的代码中，我们使用jQuery的ready方法来确保JavaScript代码在页面加载后运行。当按钮被点击时，我们使用jQuery的show方法来显示遮罩，并使用click方法隐藏遮罩。此外，我们还使用jQuery的hide方法来隐藏遮罩。

现在，当我们点击“maskButton”按钮时，遮罩将出现，以便用户执行操作。当用户完成操作后，他们可以再次点击任何区域来隐藏遮罩，继续浏览页面。