Jquery Selecting

我已经开始学习Jquery的基础知识，我想问一个关于最后一个子选择器的问题。在代码中，我可以使用":first-child"选择body中的第一个p元素。但是我不能选择body ":last-child"中的最后一个p元素。它与":last"但是如果我想用&;last-child&;来选择最后一个p元素，我该如何选择呢?

代码如下:

<!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>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<p>Paragraph 1</p>
<p class="p2" >Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<script>
document.title = "Selectors";
$("p:first-child").html("First child of Body");
$("p:last-child").html("Last child of Body");     
</script>  
</body>
</html>

此外，我认为这是因为脚本标签的位置，并将其移动到头部和正文标签之间，如:

<!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>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<script>
document.title = "Selectors";
$(document).ready(function(){
$("p:first-child").html("First child of Body");
$("p:last-child").html("Last child of Body");     
})
</script>  
<body>
<p>Paragraph 1</p>
<p class="p2" >Paragraph 2</p>
<p id="p3">Paragraph 3</p>
</body>
</html>

但是它又不起作用了。

…但是如果我想用&;last-child&;来选择最后一个p元素，我该如何选择呢?

你的代码会这样做，但是你的script位置是不正确的，当浏览器修复它(通过将其移动到body)，它搞砸了你的p:first-child或p:last-child选择器。(script元素不能是html的直接子元素，它们必须在head或body中[作为直接子元素或后代元素])

理解:last-child的实际作用是很重要的::last-child意味着"是父级中的最后一个子元素，"不与此选择器的其他部分匹配的最后一个元素。(这就是jQuery的伪选择器:last所做的。)所以p:last-child的意思是选择p元素和它是父节点的最后一个子节点。如果在它后面有一个script标记(因为它被浏览器重新定位了)，那么文档中的最后一个p将无法通过:last-child测试(它不是其父元素中的最后一个子元素)。(:first-child也一样)

如果您的script在head中(因此它不妨碍p元素成为body中的第一个和最后一个元素)，您的代码将工作:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Last Child</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.title = "Selectors";
$(document).ready(function(){
$("p:first-child").html("First child of Body");
$("p:last-child").html("Last child of Body");     
})
</script>
</head>
<body>
<p>Paragraph 1</p>
<p class="p2" >Paragraph 2</p>
<p id="p3">Paragraph 3</p>
</body>
</html>

或者如果段落在不同的容器中，所以我们不关心script标签在body中，就像在这个堆栈片段中一样，它也可以工作:

<div>
<p>Paragraph 1</p>
<p class="p2" >Paragraph 2</p>
<p id="p3">Paragraph 3</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.title = "Selectors";
$(document).ready(function(){
$("p:first-child").html("First child of parent");
$("p:last-child").html("Last child of parent");     
})
</script>

我不建议在head中放置未延迟的脚本(如上面的脚本，包括jQuery)，它会延迟加载和渲染HTML。我在上面这样做只是为了表明，如果段落元素是body(或它们的父元素)的第一个和最后一个子元素，则p:first-child和p:last-child可以工作。

相关内容

最新更新

热门标签：