请教大家一个jquery选择器的问题

qq_29448025 2019-05-21 11:13:24

!DOCTYPE html>

<html lang="cn">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1" id="tb">

  <tr>

    <th>序号</th>

    <th>站点名</th>

    <th>网址</th>

  </tr>

  <tr>

    <td>1</td>

    <td>Google</td>

    <td>google.com</td>

  </tr>

  <tr>

    <td>2</td>

    <td>Runoob</td>

    <td>runoob.com</td>

  </tr>

  <tr>

    <td>3</td>

    <td>Taobao</td>

    <td>taobao.com</td>

  </tr>

  <tr>

    <td>4</td>

    <td>Baidu</td>

    <td>baidu.com</td>

  </tr>

  <tr>

    <td>5</td>

    <td>Sina</td>

    <td>sina.com.cn</td>

  </tr>

  <tr>

    <td>6</td>

    <td>Facebook</td>

    <td>facebook.com</td>

  </tr>

  <tr>

    <td>7</td>

    <td>twitter</td>

    <td>twitter.com</td>

  </tr>

  <tr>

    <td>8</td>

    <td>youtube</td>

    <td>youtube.com</td>

  </tr>

  

</table>

<script src="jquery-3.1.1.min.js"></script>

</body>

我用$("table>tr")或$("#tr>tr")总是选择不了这些元素

如使用$("table>tr").css("background-color","red");就无效

...全文

149 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

河南棒小伙 2019-05-21

打赏
举报

引用 5 楼 qq_29448025 的回复:

[quote=引用 3 楼河南棒小伙的回复:] 是不是jQuery不支持>这种子代选择器啊，我把你的代码拷贝，用控制台的方式打开，使用$('table>tr'),$('div>p')都没找到元素，所以你的第二个肯定有问题，就算“>”jQuery能识别，这个符号表示的也是直接子代元素，而不包括孙子代的元素啊，也就是说你的第二种情况是无论如何都不会生效才对，如果生效了，你的代码肯定有问题啊，贴出来看看。

第二个可以的，你看一下，是不是jquery的引入有问题。[/quote] 唉，今天状态不太好，你生效的事4，5，6对吧？这就对了，只有直接子元素才会生效，ul里面的p不会生效。

河南棒小伙 2019-05-21

打赏
举报

引用 3 楼河南棒小伙的回复:

是不是jQuery不支持>这种子代选择器啊，我把你的代码拷贝，用控制台的方式打开，使用$('table>tr'),$('div>p')都没找到元素，所以你的第二个肯定有问题，就算“>”jQuery能识别，这个符号表示的也是直接子代元素，而不包括孙子代的元素啊，也就是说你的第二种情况是无论如何都不会生效才对，如果生效了，你的代码肯定有问题啊，贴出来看看。

丢人了，

确实是支持“>”的，但是jquery为了保证table的结构完整性，会自动的给加上tbody，比如你某一组tr忘记写了，或者table下面直接放tr，或者直接放td，它会自动帮你补全结构。具体原理请参考：https://blog.csdn.net/fendouzhe123/article/details/49445999

qq_29448025 2019-05-21

打赏
举报

引用 3 楼河南棒小伙的回复:

是不是jQuery不支持>这种子代选择器啊，我把你的代码拷贝，用控制台的方式打开，使用$('table>tr'),$('div>p')都没找到元素，所以你的第二个肯定有问题，就算“>”jQuery能识别，这个符号表示的也是直接子代元素，而不包括孙子代的元素啊，也就是说你的第二种情况是无论如何都不会生效才对，如果生效了，你的代码肯定有问题啊，贴出来看看。

第二个可以的，你看一下，是不是jquery的引入有问题。

qq_29448025 2019-05-21

打赏
举报

引用 2 楼 hookee 的回复:


 $("table tr").css("background-color","red");
 $("table>tbody>tr").css("background-color","red");

，牛人

引用 2 楼 hookee 的回复:


 $("table tr").css("background-color","red");
 $("table>tbody>tr").css("background-color","red");

，高手，感谢

河南棒小伙 2019-05-21

打赏
举报

是不是jQuery不支持>这种子代选择器啊，我把你的代码拷贝，用控制台的方式打开，使用$('table>tr'),$('div>p')都没找到元素，所以你的第二个肯定有问题，就算“>”jQuery能识别，这个符号表示的也是直接子代元素，而不包括孙子代的元素啊，也就是说你的第二种情况是无论如何都不会生效才对，如果生效了，你的代码肯定有问题啊，贴出来看看。

hookee 2019-05-21

打赏
举报


 $("table tr").css("background-color","red");
 $("table>tbody>tr").css("background-color","red");

qq_29448025 2019-05-21

打赏
举报

而在下面代码中

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
        <span class="red">1</span>
        <ul>2
            <p>21</p>
            <p>22</p>
            <p>23</p>
            <p>21</p>
            <p>22</p>
            <p>23</p>
        </ul>
        <span class="green">3</span>
        <p>4</p>
        <p id="green">5</p>
        <p>6</p>
</div>
<script src="jquery-3.1.1.min.js"></script>
</body>

$("div>p")或$("#father>p")就能选择到p元素。即$("div>p").css("color","red");就有效的。

卧龙派 2019-05-21

打赏
举报

引用 6 楼河南棒小伙的回复:

[quote=引用 3 楼河南棒小伙的回复:] 是不是jQuery不支持>这种子代选择器啊，我把你的代码拷贝，用控制台的方式打开，使用$('table>tr'),$('div>p')都没找到元素，所以你的第二个肯定有问题，就算“>”jQuery能识别，这个符号表示的也是直接子代元素，而不包括孙子代的元素啊，也就是说你的第二种情况是无论如何都不会生效才对，如果生效了，你的代码肯定有问题啊，贴出来看看。

丢人了，

[/quote] 不是jq加的，是浏览器会自动的加上tbody