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. 洛谷 P1679 神奇的四次方数

    P1679 神奇的四次方数 题目描述 在你的帮助下,v神终于帮同学找到了最合适的大学,接下来就要通知同学了.在班级里负责联络网的是dm同学,于是v神便找到了dm同学,可dm同学正在忙于研究一道有趣的数 ...

  2. 几种基于Java的SQL解析工具的比较与调用

    1.sqlparser http://www.sqlparser.com/ 优点:支持的数据库最多,除了传统数据库外还支持hive和greenplum一类比较新的数据库,调用比较方便,功能不错 缺点: ...

  3. mahout中KMeans算法

    本博文主要内容有   1.kmeans算法简介 2.kmeans执行过程  3.关于查看mahout中聚类结果的一些注意事项 4.kmeans算法图解      5.mahout的kmeans算法实现 ...

  4. Codeforces Round #445 Div. 1 C Maximum Element (dp + 组合数学)

    题目链接: http://codeforces.com/contest/889/problem/C 题意: 给你 \(n\)和 \(k\). 让你找一种全排列长度为\(n\)的 \(p\),满足存在下 ...

  5. 每日技术总结:setx,

    1.setx命令设置环境变量 设置用户环境变量: setx NAME "XXX" 设置系统环境变量: setx NAME "XXX" /m

  6. 3.Docker安装【Docker每天5分钟】

    原文:3.Docker安装[Docker每天5分钟] Docker给PaaS世界带来的“降维打击”,其实是提供了一种非常便利的打包机制.该机制打包了应用运行所需要的整个操作系统,从而保证了本地环境和云 ...

  7. Codeforces Round #234 (Div. 2):B. Inna and New Matrix of Candies

    B. Inna and New Matrix of Candies time limit per test 1 second memory limit per test 256 megabytes i ...

  8. easyui datagrid editor checkbox 单击事件

    Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...

  9. swift开发网络篇—NSURLConnection基本使用

    iOS开发网络篇—NSURLConnection基本使用 一.NSURLConnection的常用类 (1)NSURL:请求地址 (2)NSURLRequest:封装一个请求,保存发给服务器的全部数据 ...

  10. js循环函数中的匿名函数和闭包问题(匿名函数要用循环中变量的问题)

    js循环函数中的匿名函数和闭包问题(匿名函数要用循环中变量的问题) 一.总结 需要好好看下面代码 本质是因为匿名函数用到了循环中的变量,而普通方式访问的话,匿名函数的访问在循环之后,所以得到的i是循环 ...