js进阶 10-10 可见伪类选择器和内容伪类选择器的作用
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选取所有可见元素
- :hidden选取所有不可见元素
- 内容伪类选择器
内容伪类选择器,就是根据元素中的文字内容或所包含的子元素特征来选择元素,其文字内容可以模糊或绝对匹配进行元素定位。
- :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 可见伪类选择器和内容伪类选择器的作用的更多相关文章
- js进阶 11-9/10/11 jquery创建和插入节点
js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- js 进阶 10 js选择器大全
js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...
- js进阶 10-11/12 表单伪类选择器的作用
js进阶 10-11 表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...
- js进阶 10-9 -of-type型子元素伪类选择器
js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...
- js进阶 10-7 简单的伪类选择器可以干什么
js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
随机推荐
- 洛谷 P1679 神奇的四次方数
P1679 神奇的四次方数 题目描述 在你的帮助下,v神终于帮同学找到了最合适的大学,接下来就要通知同学了.在班级里负责联络网的是dm同学,于是v神便找到了dm同学,可dm同学正在忙于研究一道有趣的数 ...
- 几种基于Java的SQL解析工具的比较与调用
1.sqlparser http://www.sqlparser.com/ 优点:支持的数据库最多,除了传统数据库外还支持hive和greenplum一类比较新的数据库,调用比较方便,功能不错 缺点: ...
- mahout中KMeans算法
本博文主要内容有 1.kmeans算法简介 2.kmeans执行过程 3.关于查看mahout中聚类结果的一些注意事项 4.kmeans算法图解 5.mahout的kmeans算法实现 ...
- Codeforces Round #445 Div. 1 C Maximum Element (dp + 组合数学)
题目链接: http://codeforces.com/contest/889/problem/C 题意: 给你 \(n\)和 \(k\). 让你找一种全排列长度为\(n\)的 \(p\),满足存在下 ...
- 每日技术总结:setx,
1.setx命令设置环境变量 设置用户环境变量: setx NAME "XXX" 设置系统环境变量: setx NAME "XXX" /m
- 3.Docker安装【Docker每天5分钟】
原文:3.Docker安装[Docker每天5分钟] Docker给PaaS世界带来的“降维打击”,其实是提供了一种非常便利的打包机制.该机制打包了应用运行所需要的整个操作系统,从而保证了本地环境和云 ...
- 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 ...
- easyui datagrid editor checkbox 单击事件
Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...
- swift开发网络篇—NSURLConnection基本使用
iOS开发网络篇—NSURLConnection基本使用 一.NSURLConnection的常用类 (1)NSURL:请求地址 (2)NSURLRequest:封装一个请求,保存发给服务器的全部数据 ...
- js循环函数中的匿名函数和闭包问题(匿名函数要用循环中变量的问题)
js循环函数中的匿名函数和闭包问题(匿名函数要用循环中变量的问题) 一.总结 需要好好看下面代码 本质是因为匿名函数用到了循环中的变量,而普通方式访问的话,匿名函数的访问在循环之后,所以得到的i是循环 ...