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. 基于Redis bitmap实现开关配置功能

    作者:zhanhailiang 日期:2014-12-21 bitmap api SETBIT key offset value 对key所储存的字符串值,设置或清除指定偏移量上的位(bit). 位的 ...

  2. table嵌套table,jquery获取tr个数

    一.所有tr的个数 $("#tableId tr").length 二.所有一级tr的个数 1.$("#tableId > tr").length 2.$ ...

  3. JS截取字符串 charAt()，slice()，substring()，substr()

    1. charAt(i)输出指定下标的字母,长度为1,适用于把字符串切割成单个字符串. 2. slice() 和 substring() 都支持1-2个参数,第一个参数是开始位置,第二个参数是结束位置 ...

  4. Redis的高级应用-安全性和主从复制

    Redis的服务器命令和键值命令(String,Hash,List,Set,Zset)相对简单,只需查看文档即可. 文档地址: http://www.runoob.com/redis/redis-tu ...

  5. BingMap频繁Add Pushpin和Delete Pushpin会导致内存泄露

    近期在做性能測试的时候发现BingMap内存泄露(memory leak)的问题,查找了一些国外的帖子,发现也有类似的问题,可是没有好的解决的方法. https://social.msdn.micro ...

  6. （转）如何启动或关闭数据库的归档(ARCHIVELOG)模式

    转自:http://www.eygle.com/archives/2004/10/oracle_howtoeci.html Oracle数据库可以运行在2种模式下:归档模式(archivelog)和非 ...

  7. python基础-合并列表

    1.append()  向列表尾部追加一个新元素,列表只占一个索引位,在原有列表上增加 2.extend() 向列表尾部追加一个列表,将列表中的每个元素都追加进来,在原有列表上增加 3.+  直接用+ ...

  8. GO语言学习（七）Go 语言变量

    Go 语言变量 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过变量名访问. Go 语言变量名由字母.数字.下划线组成,其中首个字母不能为数字. 声明变量的一般形式是使用 ...

  9. 【Codeforces Round #299 (Div. 2) E】Tavas and Pashmaks

    [链接] 我是链接,点我呀:) [题意] 游泳+跑步比赛. 先游泳,然后跑步. 最先到终点的人是winner. 但是现在游泳的距离和跑步的距离长度都不确定. S和R. 给你n个人,告诉你每个人游泳的速 ...

  10. 【Codeforces Round #301 (Div. 2) A】 Combination Lock

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟水题 [代码] #include <bits/stdc++.h> using namespace std; cons ...