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. 7.3 GROUP BY的“新”功能

    7.3 GROUP BY的"新"功能正在更新内容,请稍后

  2. Linux下常用的中文输入法平台有IBus、fcitx和scim

    Linux下常用的中文输入法平台有IBus.fcitx和scim.scim现在维护滞后,不推荐使用. IBus ("Intelligent Input Bus") 是一个 输入法框 ...

  3. Ubuntu配置图形桌面LXDE和VNC、中文语言包、中文输入法

    Ubuntu配置图形桌面LXDE和VNC.中文语言包.中文输入法 http://www.lijiejie.com/ubuntu-vps-config-lxde-vnc/ LXDE是Ubuntu图形桌面 ...

  4. C++中引用传递与指针传递区别

    C++中引用传递与指针传递区别 在C++中,指针和引用经常用于函数的参数传递,然而,指针传递参数和引用传递参数是有本质上的不同的: 指针传递参数本质上是值传递的方式,它所传递的是一个地址值.值传递过程 ...

  5. JQuery 当点击input后，单选多选的选中状态

    1.当点击input元素,此元素的选中checked的值 = 此元素此时表现的选中与否的状态. eg:input元素开始是未选中,点击后表现的是选中状态,此元素的checked为true(和此元素开始 ...

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

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

  7. zeromq and jzmq

    install c test install jzmq java test Storm UI Cluster Summary Version Nimbus uptime Supervisors Use ...

  8. H5移动端IOS/Android兼容性总结，持续更新中…

    H5移动端IOS/Android兼容性总结,持续更新中… 1. IOS不识别日期 new Date("2018-07-01 08:00:00")在Android下正常显示可以直接进 ...

  9. 【hdu 1403】Longest Common Substring

    [链接]h在这里写链接 [题意] 求两个串的最长公共子串. [题解] Sa[i]表示的是字典序为i的后缀的起始位置. 可以把两个字符串合在一起(中间用一个比'z'大的字符分割); 则如果Sa[i-1] ...

  10. Hadoop笔记（一）

    1.大数据的概述 大数据:巨量数据.海量数据,首先在数据的量上达到一定的规模,首先是人或者计算机在不合理时间内是不能够实现的数据量. 2.特点:数据量比较大,数据类型多样化.处理速度问题 3.大数据平 ...