一、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. docker 2(local registry)

    1.获取仓库镜像 ,sudo docker pull registry 2.sudo vim /etc/init/docker.conf 增加--insecure-registry IP:5000 3 ...

  2. [转] KVM scalability and consolidation ratio: cache none vs cache writeback

    http://www.ilsistemista.net/index.php/virtualization/43-kvm-scalability-and-consolidation-ratio-cach ...

  3. 大叔学ML第四：线性回归正则化

    目录 基本形式 梯度下降法中应用正则化项 正规方程中应用正则化项 小试牛刀 调用类库 扩展 正则:正则是一个汉语词汇,拼音为zhèng zé,基本意思是正其礼仪法则:正规:常规:正宗等.出自<楚 ...

  4. Android Studio升级3.2.1后的合并XML出错的解决方案

    升级到3.2.1版本之后,遇到了合并XML出错的问题.错误内容大概如下: 当大家看到这个问题的时候,可能会有一行是可以点击的文件目录,点击到报错的地方. 如果没有可以点击的地方,也可以根据目录和 “行 ...

  5. Material Design 开源项目总结

    Android开发中,我们不免会遇到Material Design展示的需求,以下是本人之前star的开源项目,供大家参考: 一.RippleEffect 项目地址:https://github.co ...

  6. pycharm注册码（不断更新）

    2019.3.13测试可用 MTW881U3Z5-eyJsaWNlbnNlSWQiOiJNVFc4ODFVM1o1IiwibGljZW5zZWVOYW1lIjoiTnNzIEltIiwiYXNzaWd ...

  7. 机器学习入门 - Google的机器学习速成课程

    1 - MLCC 通过机器学习,可以有效地解读数据的潜在含义,甚至可以改变思考问题的方式,使用统计信息而非逻辑推理来处理问题. Google的机器学习速成课程(MLCC,machine-learnin ...

  8. python高级-模块(14)

    一.python中的模块 有过C语言编程经验的朋友都知道在C语言中如果要引用sqrt函数,必须用语句#include <math.h>引入math.h这个头文件,否则是无法正常进行调用的. ...

  9. [django]date类型和datetime类型过滤

    搞清楚datetime.datetime和datetime.date模块 他们两个的格式区别 datetime模块 In [1]: from datetime import datetime In [ ...

  10. 解决使用display：inline-block时元素间隔问题

    在写个人博客页时出现了一个百思不得其解的问题,不知道为什么出现以下情况: 可以看到,下面的a标签中出现了一个间隔,怎么都去不掉,查阅资料后发现,问题原因如下: 1.第一种解决办法,去掉HTML元素中的 ...