一、Jquery的内容过滤选择器：

内容过滤选择器： 
1、:contains(text) 选取含有文本内容为text的元素 
2、 :empty 选取不包含子元素或者文本为空的元素 
3、:has(selector) 选取含有选择器所匹配元素的元素 
4、:parent 选取含有子元素或者有文本的元素

效果：

源码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery 学习1</title>

<!--  导入jquery库 -->

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript">

$(function(){

    $("#btn1").click(function(){

        $("div:contains('di')").css("background","#FFBBAA");

    });

    $("#btn2").click(function(){

        $("div:empty").css("background","#FFBBAA");

    });

    $("#btn3").click(function(){

        $("div:has('#d2')").css("background","#FFBBAA");

    });

    $("#btn4").click(function(){

        //$(":parent").css("background","#FFBBAA");

        $("div:parent").css("background","#FFBBAA");

//         $("div:not(:empty)").css("background","#FFBBAA");

    });

})

</script>

</head>

<body>

Jquery的内容过滤选择器：

内容过滤选择器：

<br>

、:contains(text) 选取含有文本内容为text的元素

<br>

、  :empty      选取不包含子元素或者文本为空的元素

<br>

、:has(selector)   选取含有选择器所匹配元素的元素

<br/>

、:parent         选取含有子元素或者有文本的元素

<br/>

<hr>

<button id="btn1">选取含有文本di的div</button>

<button id="btn2">选取无子元素或者文本为空的元素</button>

<button id="btn3">选取含有某个选择器的元素</button>

<button id="btn4">选取含有子元素或者有文本的元素</button>

<p>

子层

<div id="d1"> 孙子层d1  </div>

<span>  这是一个行信息</span>

<div>

div 孙子层

</div>

</p>

<h1>这是h1 不在div内</h1>

<hr>

<div  id="d33"> 

<h2>这是h2 在div内</h2>

子层2

<div style="background:#FFFFFF"> 孙子层2   </div>

<br/>

<span> 这是一个行信息2</span>

<div id="d2">

div 孙子层2

</div>

</div>

<br/>

<div>

这是第三个div层

</div>

<br/>

<span>这是第四个span</span>

<p>

<div style="background:#FF00FF "></div>

<div id="d5"> 这是第5个层</div>

</p>

</body>

</html>

(7)Jquery1.8.3快速入门_内容过滤选择器的更多相关文章

  1. (8)Jquery1.8.3快速入门_可见性选择器

    一.Jquery的可见性选择器: 可见性选择器: 1.:visable 筛选可以见的元素 2. :hidden 筛选不可见的元素 效果: 源码: <!DOCTYPE html> <h ...

  2. (6)Jquery1.8.3快速入门_过滤选择器

    一.Jquery的基本过滤选择器: 基本过滤选择器: 1. :first 选取第一个元素 2. :last 选取最后一个元素 3.:not(selector) 去除所有与给定的选择器匹配的元素 4.: ...

  3. (5)Jquery1.8.3快速入门_层次选择器

    一.Jquery的选择器: 层级选择器: 1.空格                div    span              div中的包含的所有span后代元素 2. >        ...

  4. (4)Jquery1.8.3快速入门_基本选择器

    一.Jquery选择器: 基本选择器: 1.id                           #id      根据元素的id获取的唯一元素. 2.class                  ...

  5. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

  6. 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2  任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...

  7. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. 黑马day16 jquery&amp;内容过滤选择器&amp;可见度选择器

    内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')")    返回值  集 ...

  9. JQuery 内容过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

随机推荐

  1. Visual Studio 常见的快捷键

    “Ctrl + -”               回到上一个光标位置 “Ctrl + Shift + -”                前进到下一个光标位置 “Ctrl + C”           ...

  2. Nuget4.0 bug一粒

    这个锅到底是nuget的还是msbuild的我也不是很确定 在使用Nuget4.0打包编译项目时 当执行到nuget pack %%~dpna.csproj -build -Prop Configur ...

  3. 【redux】详解react/redux的服务端渲染：页面性能与SEO

        亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...

  4. Java程序入口：main()方法讲解

    Java程序的入口---main()方法的签名为:public static void main(String[] args) {...} ,其中, ♦ public修饰符:Java类由JVM调用,为 ...

  5. 第55节:Java当中的IO流-时间api(下)-上

    Java当中的IO流(下)-上 日期和时间 日期类:java.util.Date 系统时间: long time = System.currentTimeMillis(); public class ...

  6. CentOS随笔——克隆虚拟机

    克隆虚拟机 1．关闭要被克隆的虚拟机 2．找到克隆选项 3．欢迎页面,如图94所示 4．克隆虚拟机,如图95所示 5．设置创建完整克隆,如图96所示 6．设置克隆的虚拟机名称和存储位置,如图97所示 ...

  7. java并发编程知识点备忘

    最近有在回顾这方面的知识,稍微进行一些整理和归纳防止看了就忘记. 会随着进度不断更新内容,比较零散但尽量做的覆盖广一点. 如有错误烦请指正~ java线程状态图 线程活跃性问题 死锁 饥饿 活锁 饥饿 ...

  8. mysql 开发进阶篇系列 11 锁问题 (恢复和复制的需要，对锁机制的影响)

    1. 恢复和复制的需要,对innodb锁机制的影响 mysql 通过binlog文件对增删除改等更新数据的sql语句,实现数据库的恢复和主从复制.mysql的恢复机制(复制其实就是在slave mys ...

  9. Android--UI之GridView

    前言 这篇博客介绍一下Android平台下,GridView控件的开发.针对GridView控件的一些常用属性.方法,以及注意事项进行讲解,最后将以一个Demo展示GridView控件的使用. Gri ...

  10. CentOS7.0小随笔——运行级别

    一.Linux运行级别(通用) 0:关机(halt) 1:单用户模式(无需用户名和密码的登录,用于紧急维护系统时用,类似于Windows中的安全模式) 2:不启用网络功能的多用户模式 3:启用网络功能 ...