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、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

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

     <style type="text/css">

     /*    ul{display: none;}*/

 /*    ul{visibility: hidden;}*/

     </style>

 </head>

 <body>

      <div>

         <h1>h1</h1>

         <p>p1 p标签表示段落</p>

         <p>p2 <span>我是span</span></p>

         <span>span1</span>

         <span>span2</span>

      <ul>

         <li>1</li>

         <li>2</li>

         <li>3<span>li</span></li>

         <li>4</li>

         <li>5 <p>p</p></li>

         <li>6</li>

         <li>7</li>

         <li></li>

         <li></li>

      </ul>

      </div>

      <input type="button" class="btn1" value="隐藏">

     <input type="button" class="btn2" value="显示">

      <script>

          $(function(){

              // $('ul').css('display','none');

              // // $('ul:hidden').css('display','block');

              // $('.btn2').click(function(){

              //     $('ul:hidden').css('display','block');

              // })

              // $('.btn1').click(function(){

              //     $('div :visible').css('display','none');

              // })

              // $('p:contains(段落)').css("background-color",'red')

              // $('p:has(span)').css("background-color",'red')

              $('li:empty').css("background-color",'orange')

              $('li:parent').css("background-color",'#ccc')

          })

      </script>

 </body>

 </html>
 
 
 

js进阶 10-10 可见伪类选择器和内容伪类选择器的作用的更多相关文章

  1. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  2. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  3. js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

  4. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  5. js进阶 10-11/12 表单伪类选择器的作用

    js进阶 10-11  表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...

  6. js进阶 10-9 -of-type型子元素伪类选择器

    js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...

  7. js进阶 10-7 简单的伪类选择器可以干什么

    js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...

  8. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  9. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

随机推荐

  1. 洛谷 P1795 无穷的序列_NOI导刊2010提高（05）

    P1795 无穷的序列_NOI导刊2010提高(05) 题目描述 有一个无穷序列如下: 110100100010000100000… 请你找出这个无穷序列中指定位置上的数字 输入输出格式 输入格式: ...

  2. Bitmap-把方形图片处理为圆形

    这个是直接在网上转载的,自己验证可靠 转载自http://my.oschina.net/zhouz/blog/213164 直接贴上代码 import android.graphics.Bitmap; ...

  3. Vue 使用use、prototype自定义自己的全局组件

    使用Vue.use()写一个自己的全局组件. 目录如下: 然后在Loading.vue里面定义自己的组件模板 <template> <div v-if="loadFlag& ...

  4. 水题ing

    T1: https://www.luogu.org/problemnew/show/P1724幻想乡,东风谷早苗是以高达控闻名的高中生宅巫女.某一天,早苗终于入手了最新款的钢达姆模型.作为最新的钢达姆 ...

  5. Sql Server 2014完全卸载

    经历过好多次Sql server的安装与卸载,有时发现自己卸载的费时费力,单纯地卸载个软件就要吐血了,那么现在我觉得是时候整理一下了. 1.在运行中输入services.msc,然后找到所有跟Sql ...

  6. amazeui学习笔记--css（常用组件7）--输入框组Input-group

    amazeui学习笔记--css(常用组件7)--输入框组Input-group 一.总结 1.使用:Input group 基于 Form 组件和 Button 组件扩展,依赖这两个组件.在容器上添 ...

  7. Costura.Fody

    使用Costura.Fody将源DLL合并到目标EXE 本文为原创文章,如转载,请在网页明显位置标明原文名称.作者及网址,谢谢! 一.本文主要是使用Costura.Fody工具将源DLL合并到目标EX ...

  8. 关于pcb铺铜

  9. （转）ORA-01940: cannot drop a user that is currently connected 问题解析

    删除数据库用户的时候经常会遇到这样的错误: ORA: cannot drop a user that is currently connected 原因是有程序在连接我们需要删除的用户,我们删除用户之 ...

  10. 【2017 ACM-ICPC 亚洲区（西安赛区）网络赛 B】

    [链接]h在这里写链接 [题意] 一个硬币正面朝上的概率为q/p; 抛k次,问你偶数次朝上的概率为多少. [题解] [错的次数] 0 [反思] 在这了写反思 [代码] #include <bit ...