zoukankan      html  css  js  c++  java
  • js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

    js进阶 10-10  可见伪类选择器和内容伪类选择器的作用

    一、总结

    一句话总结:分组来描述。内容伪类选择器就是  四个  包含。可见的伪类选择器就是可见和不可见。查找功能,也就是内容伪类选择器非常有用。

    1、可见伪类选择器可以做什么?

    设置你想是实现的任何元素显示或者隐藏的功能

    2、css中元素隐藏两种方法?

    display和visibility

    8 /* ul{display: none;}*/

    9 /* ul{visibility: hidden;}*/

    3、display和visibility隐藏元素的区别?

    visibility还占着文档流的位置

    4、js中如何实现查找功能,查找文本或者类?

    内容伪类选择器

    5、内容伪类选择器哪四个?

    选择文本,选择类 ,包含子元素,不包含子元素

    • :contains(text)选择包含给定文本内容的元素
    • :has(selector)选择含有选择器所匹配元素的元素
    • :empty选择所有不包含子元素或者不包含文本的元素
    • :parent选择含有子元素或者文本的元素(跟:empty相反)

    二、可见伪类选择器和内容伪类选择器

    1、相关知识

    • 可见性伪类选择器
      • :hidden选取所有不可见元素

        “:hidden”选择器选择的不仅包括样式为display:none所有元素,而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。

      • :visible选取所有可见元素
    • 内容伪类选择器

      内容伪类选择器,就是根据元素中的文字内容或所包含的子元素特征来选择元素,其文字内容可以模糊或绝对匹配进行元素定位。

      • :contains(text)选择包含给定文本内容的元素
      • :has(selector)选择含有选择器所匹配元素的元素
      • :empty选择所有不包含子元素或者不包含文本的元素
      • :parent选择含有子元素或者文本的元素(跟:empty相反)

    2、代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>演示文档</title>
     6     <script src="jquery-3.1.1.min.js"></script>
     7     <style type="text/css">
     8     /*    ul{display: none;}*/
     9 /*    ul{visibility: hidden;}*/
    10     </style>
    11 </head>
    12 <body>
    13      <div>
    14         <h1>h1</h1>
    15         <p>p1 p标签表示段落</p>
    16         <p>p2 <span>我是span</span></p>
    17         <span>span1</span>
    18         <span>span2</span>
    19      <ul>
    20         <li>1</li>
    21         <li>2</li>
    22         <li>3<span>li</span></li>
    23         <li>4</li>
    24         <li>5 <p>p</p></li>
    25         <li>6</li>
    26         <li>7</li>
    27         <li></li>
    28         <li></li>
    29      </ul>
    30      </div>
    31      <input type="button" class="btn1" value="隐藏">
    32     <input type="button" class="btn2" value="显示">
    33      <script>
    34          $(function(){
    35              // $('ul').css('display','none');
    36              // // $('ul:hidden').css('display','block');
    37 
    38              // $('.btn2').click(function(){
    39              //     $('ul:hidden').css('display','block');
    40              // })
    41              // $('.btn1').click(function(){
    42              //     $('div :visible').css('display','none');
    43              // })
    44              // $('p:contains(段落)').css("background-color",'red')
    45              // $('p:has(span)').css("background-color",'red')
    46              $('li:empty').css("background-color",'orange')
    47              $('li:parent').css("background-color",'#ccc')
    48          })
    49      </script>
    50 </body>
    51 </html>
     
     
     
  • 相关阅读:
    京东优惠叠加的获取
    树莓派安装omv
    树莓派 omv 安装 nextcloud
    Nginx 502 bad gateway问题的解决方法
    mvc 前台传入后台
    关于cefsharp 获取js动态加载后的信息
    c# 使用 java的 rsa 进行签名
    树莓派基本设置
    树莓派安装raspbian
    winform界面设计
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9194361.html
Copyright © 2011-2022 走看看