用 :parent 筛选器把 html 和 body 都选出来了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .highlight{
            padding:10px;
            border:1px solid yellow;
            background: lightyellow;
        }
    </style>
</head>
<body>
    
    <p></p>
    <p></p>
    <p>Lorem ipsum dolor sit amet,aonsectetur adipisicing elit</p>
    <p>123 <span>456</span></p>
    <input type="text" value="input">
    <input type="button" value="button">

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        //内容筛选器
        //:empty    没有子元素或无文本内容的
        //:contains(text)    选择包含特定文本的元素
        //:has(selector)    selector是一个选择器
        //:parent    与:empty相反，选择包含子元素或有文本内容的
        $(function(){
            // console.log($ (':empty').addClass('highlight'))
            console.log($(':parent').addClass('highlight'))
        })
    </script>

</body>
</html>

xcopfans 2018-03-11

源自：jQuery选择的艺术 3-11 jQuery 中的筛选器-过滤器（二）

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2018-03-12 16:04:11

你好，1、这里是选择包含子元素或者文本元素的呀，html与body都有子元素呀，所以可以选中，若像老师使得只选择p元素要是$('p:parent')哦。

2、其他的也是这个样子哦，若像只选择当前的，就是在当前段落中，例：$('p:has(span)');

祝学习愉快~

收起回答

xcopfans 提问者 #1

非常感谢！

2018-03-12 16:06:27

提问者 xcopfans 2018-03-11 15:47:59

而且这样后即使把这句话注释了

// console.log($(':parent').addClass('highlight'))

之前加上的class属性还在

收起回答

提问者 xcopfans #1

啊不对，是我用 :has(span) 筛选后，也把html 和 body 选出来了，很难受

2018-03-11 15:51:36
提问者 xcopfans #2

除了用 :empty 以外， html 和 body 都会被选出来..

2018-03-11 15:54:48