美文网首页程序员
JQuery位置选择器:nth-child(N)与:eq(N)的

JQuery位置选择器:nth-child(N)与:eq(N)的

作者: 摘星_s | 来源:发表于2017-08-06 14:28 被阅读0次

首先是各个书上都有的概念上的区别:
1、nth-child(N):下标从1开始;eq(N):下标从0开始
2、nth-child(N):选择多个元素;eq(N):选择一个元素
3、nth-child(N):在一个文档树种中,选择各层排行第N的所有元素。eq(N):在一个文档树种中,前序排列后,选择第N个元素

具体事例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("p:eq(1)").css("background-color","#B2E0FF");
    $("p:nth-child(1)").css("background-color","#ff0000");
});
 
</script>    
</head>
<body>
  <p>第一个段落。</p>
  <p>第二个段落。</p>
  <p>第三个段落。</p>
  <p>第四个段落。</p>
  <div> -------------< div >----------------------</div>
  <div>
    <p>div下的第一个p</p>
    <p>div下的第二个p</p>
</div>
<body>
image.png

可以看到nth-child选择了所有在第一位的p元素,eq则选择了全局DOM树中第一个满足条件的p元素

相关文章

网友评论

    本文标题:JQuery位置选择器:nth-child(N)与:eq(N)的

    本文链接:https://www.haomeiwen.com/subject/fenglxtx.html