内容过滤选择器

最新推荐文章于 2021-06-27 10:34:23 发布

dlznu22406

最新推荐文章于 2021-06-27 10:34:23 发布

阅读量82

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sunxiaoyan/p/8744766.html

版权

代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>selectorDemo3.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //:contains(text)选择含有文本内容为text的元素
             //$("div:contains('John')").css({background:"red"});
            
            //:empty选取不包含子元素或者文本为空的元素
            //$("td:empty").css({background:"red"});
            
            //:has(selector)选取含有选择器匹配的元素的元素
            //$("div:has(#div1)").css({background:"red"});
            
            //:parent选取含有子元素或者文本元素
            $("td:parent").css({background:"red"});
        });
    </script>
  </head>
  
  <body>
       <div>John Resig</div>
       <div>George Marth</div>
       <div>Malcom John Tom</div>
       <table border="1px solid">
           <tr>
               <td></td>
               <td>Value1</td>
           </tr>
           <tr>
               <td>Value2</td>
               <td></td>
           </tr>
       </table>
       <div style="width:200px;height:200px;border:1px solid;">
           <div id="div1" style="width:50px;height:50px;border:1px solid;background:green"></div>
       </div>
  </body>
</html>