jQuery 中的所有选择器（“*”）如何工作？
我正在浏览 jQuery 文档，并且对所有选择器（“*”）示例感到非常困惑。为什么本例中的“h3”标签会出现红色边框？这是官方文档。
var elementCount = $( "*" ).css( "border", "3px solid red" ).length;
$( "body" ).prepend( "<h3>" + elementCount + " elements found</h3>" );
h3 {
margin: 0;
}
div, span, p {
width: 80px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>all demo</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</body>
</html>
由于前置语句是在第一个语句之后执行的，因此我期望 h3 标签没有红色边框。
我使用浏览器工具检查了 h3 元素，它的样式也没有显示任何红色边框。
哆啦的时光机浏览 77回答 1
1回答
-
倚天杖
*选择 DOM 中的所有元素。这包括<body>，这就是您所看到的边界实际所在的位置。如果删除浮动，效果会更明显，其他所有内容都与下面的代码片段相同：var elementCount = $("*").css("border", "3px solid red").length;$("body").prepend("<h3>" + elementCount + " elements found</h3>");h3 { margin: 0;}div,span,p { width: 80px; height: 40px; padding: 10px; margin: 10px; background-color: #EEEEEE;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>DIV</div><span>SPAN</span><p>P <button>Button</button></p>浮动元素不会导致其容器扩展以适应。当您附加 时h3，由于它是正文中唯一的非浮动元素，因此正文的边框看起来与 的边框相同h3。类似地，如果你不附加 h3，你会在顶部看到一个奇怪的粗红色边框，它似乎没有包围任何东西，因为没有元素占用主体中的空间：$("*").css("border", "3px solid red");h3 { margin: 0;}div,span,p { float: left; width: 80px; height: 40px; padding: 10px; margin: 10px; background-color: #EEEEEE;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>DIV</div><span>SPAN</span><p>P <button>Button</button></p>h3 实际上并没有边框——它只是看起来是这样，因为主体占据了相同的区域。
随时随地看视频慕课网APP
相关分类
Html5