内容过滤选择器

最新推荐文章于 2022-09-29 07:47:33 发布

爱不到要偷

最新推荐文章于 2022-09-29 07:47:33 发布

阅读量239

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuyujuan/p/9383533.html

版权

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。具体包含以下几种（下面的内容过滤选择器获得的都是元素集合）。

同之前一样，在操作之前，先在html中下如下代码，后期所有的操作都在基础之上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <style type="text/css">
           .divstyle{
                width:300px;
                height:150px;
                background-color:pink;
            }
   </style>
</head>
<body>
      <div>I am yuehan</div>
        <div></div>
        <div><span>today is Saturday</span></div>
        <div><input type='text'></div>
        <div><p class="study">We are studing html</p></div>
        <div><p>good good study day day up</p></div>
</body>
</html>

1、:contains(text)

主要用来选取包含文本内容为“text”的元素。

$("div:contains('Saturday')").css("color",'red');

2、:empty

选取不包含子元素或者文本的空元素。

 $("div:empty").addClass("divstyle");

3、:has(selector)

选取含有选择器所匹配的元素的元素。

//$(:has(.test))   选择拥有.test的子元素的父元素
//$(div:has(.test))  选择拥有.test的子元素的父元素，且该父元素是div元素
$("div:has(.study)").css("color","#00CD00");

$("div:has(p)").eq(0).css({"color":"#000080","font-weight":"bold"});

4、:parent

选取含有子元素或者文本的元素

 $("div:parent").css("background-color","SeaGreen");

转载于:https://www.cnblogs.com/yuyujuan/p/9383533.html

爱不到要偷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。具体包含以下几种（下面的内容过滤选择器获得的都是元素集合）。同之前一样，在操作之前，先在html中下如下代码，后期所有的操作都在基础之上。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫