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. bitmap2drawable-两者的转化实现

    先来看今天遇到的一个问题,是关于mms报错的.后来发现报的地方如下 Bitmap deleteBitMap = ((BitmapDrawable)mChipDelete).getBitmap(); D ...

  2. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第四篇：传递表单数据

    摘要      本文将完成我们“MVC公告发布系统”的公告发布功能,以此展示在ASP.NET MVC中如何传递处理表单的数据. 前言      通过前几篇文章,我们已经能比较自如的使用ASP.NET ...

  3. 图像处理 Mine

    1)中值滤波:排序取中间值.作用:去噪点 1.1)均值滤波; 1.2)高斯模糊:执行高斯模糊,然后改混合模式,改成叠加.柔光或者深色.就能得到平滑而不模糊的效果. 2)腐蚀.膨胀:开运算(腐蚀后膨胀) ...

  4. js进阶 13-8 jquery如何实现侧边栏

    js进阶 13-8 jquery如何实现侧边栏 一.总结 一句话总结:先是把侧边栏设置为left为-100px,隐藏起来,jquery自定义动画animate里面的改变元素的距左边的宽度left,sl ...

  5. vuepress折腾记

    由于格式比较乱,所以直接拿图片粘贴过来了,详情请看原文链接https://lewiscutey.github.io/blog/blog/vuepress-theme-toos.html

  6. Linux下开启关闭防火墙

    一.Linux下开启/关闭防火墙命令 1) 永久性生效,重启后不会复原 开启: chkconfig iptables on 关闭: chkconfig iptables off   2) 即时生效,重 ...

  7. OC学习篇之---文件的操作

    今天我们来介绍OC中文件操作,在之前的文章中,已经接触到了文件的创建了,但是那不是很具体和详细,这篇文章我们就来仔细看一下OC中是如何操作文件的: 第一.首先来看一下本身NSString类给我们提供了 ...

  8. RISC-V评估系列

    RISC-V评估系列 RISC-V工具链搭建 SiFive虚拟机分享--提取码:xe1c SiFive SDK函数结构 底层驱动 driver框架 操作系统FreeRTOS移植 FGPA评估 benc ...

  9. Android(Lollipop/5.0) Material Design(四) 创建列表和卡片

    Material Design系列 Android(Lollipop/5.0)Material Design(一) 简单介绍 Android(Lollipop/5.0)Material Design( ...

  10. 记一次内存泄漏调试(memory leak)-Driver Monkey

    Author:DriverMonkey Mail:bookworepeng@Hotmail.com Phone:13410905075 QQ:196568501 硬件环境:AM335X 软件环境:li ...