一、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. PMS权限管理和鉴权过程

    一.权限的管理基础知识 1．系统的权限机制分为:权限解析.权限分配.鉴权.动态添加权限 2．PermissionInfo :  PackageParser.Permission中包含一个对应的Perm ...

  2. Java初学者容易犯的代码错误

    1. 不会判断空 空指针异常是所有Java初学者接触最多的异常,没有之一.原因是,你们拿到一个对象后容易不假思索的直接使用(直接给这个对象的属性赋值,直接调用这个对象的方法等),不报异常才怪呢!下面是 ...

  3. Javascript高级编程学习笔记（74）—— 表单（2）表单提交及重置

    表单提交 表单的很大一部分作用就是帮助用户完成和服务器的交互 所以表单提交是表单中比较重要的部分 虽然现如今的大部分应用场景都使用 AJAX 的异步请求来代替表单,但是仍有部分操作需要使用表单来完成, ...

  4. Eclipse 修改自动补全触发器只能输入四个字符为多个字符

    如果eclipse中的[auto activation triggers for java]自动补全触发器这个位置的文本框有时候只能输入4个字符, 可以通过修改配置文件的方法实现,具体操作步骤如下: ...

  5. rabbitmq系统学习（三）集群架构

    RabbitMQ集群架构模式 主备模式 实现RabbitMQ的高可用集群,一般在并发和数据量不高的情况下,这种模型非常的好用且简单.主备模式也称为Warren模式 HaProxy配置 listen r ...

  6. Zookeeper 集群安装配置，超详细，速度收藏！

    今天,栈长分享下 Zookeeper 的集群安装及配置. 下载 下载地址:http://zookeeper.apache.org/ 下载过程就不说了,我们下载了最新的zookeeper-3.4.11. ...

  7. 关于sql和MySQL的语句执行顺序(必看！！！)

    今天遇到一个问题就是mysql中insert into 和update以及delete语句中能使用as别名吗?目前还在查看,但是在查阅资料时发现了一些有益的知识,给大家分享一下,就是关于sql以及My ...

  8. tensorflow 1.0 学习：参数初始化（initializer)

    CNN中最重要的就是参数了,包括W,b. 我们训练CNN的最终目的就是得到最好的参数,使得目标函数取得最小值.参数的初始化也同样重要,因此微调受到很多人的重视,那么tf提供了哪些初始化参数的方法呢,我 ...

  9. Ocelot简易教程（六）之重写配置文件存储方式并优化响应数据

    本来这篇文章在昨天晚上就能发布的,悲剧的是写了两三千字的文章居然没保存,结果我懵逼了.今天重新来写这篇文章.今天我们就一起来探讨下如何重写Ocelot配置文件的存储方式以及获取方式. 作者:依乐祝 原 ...

  10. python不同开根号速度对比

    import time import math import numpy as np def timeit1(): s = time.time() for i in range(750000): z= ...