1.介绍

　　

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

     div, span, p {

         width: 140px;

         height: 140px;

         margin: 5px;

         background: #aaa;

         border: #000 1px solid;

         float: left;

         font-size: 17px;

         font-family: Verdana;

     }

     div.mini {

         width: 55px;

         height: 55px;

         background-color: #aaa;

         font-size: 12px;

     }

     div.hide {

         display: none;

     }

 </style>

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

 <script type="text/javascript">

     $(function(){

         //选择 含有文本 'di' 的 div 元素

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

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

         });

         //选择不包含子元素(或者文本元素) 的 div 空元素

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

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

         })

         //选择含有 class 为 mini 元素的 div 元素

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

             $("div:has(.mini)").css("background","#ffa");

         })

         //选择含有子元素(或者文本元素)的div元素

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

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

         })

     })

 </script>

 </head>

 <body>

     <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />

     <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />

     <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />

     <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />

     <br>

     <div class="one" id="one">

         id 为 one,class 为 one 的div

         <div class="mini">class为mini</div>

     </div>

     <div class="one" id="two" title="test">

         id为two,class为one,title为test的div

         <div class="mini" title="other">class为mini,title为other</div>

         <div class="mini" title="test">class为mini,title为test</div>

     </div>

     <div class="one">

         <div class="mini">class为mini</div>

         <div class="mini">class为mini</div>

         <div class="mini">class为mini</div>

         <div class="mini"></div>

     </div>

     <div class="one">

         <div class="mini">class为mini</div>

         <div class="mini">class为mini</div>

         <div class="mini">class为mini</div>

         <div class="mini" title="tesst">class为mini,title为tesst</div>

     </div>

     <div style="display: none;" class="none">style的display为"none"的div</div>

     <div class="hide">class为"hide"的div</div>

     <div>

         包含input的type为"hidden"的div<input type="hidden" size="8">

     </div>

     <div id="mover">正在执行动画的div元素.</div>

 </body>

 </html>

005 jquery过滤选择器-----------（内容过滤选择器）的更多相关文章

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

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

  2. jquery选择器之内容过滤选择器

    先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...

  3. jQuery选择器(内容过滤选择器)第四节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器

  5. jquery表单内容过滤

    效果:    输入筛选字段后显示效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http ...

  6. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  7. JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

  8. jQuery--内容过滤和可见性过滤

    一.内容过滤 1.内容过滤选择器介绍 :empty 当前元素是否为空(是否有标签体) :contains(text)   标签体是否含有指定的文本 :has(...)                 ...

  9. JQuery 内容过滤选择器

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

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

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

随机推荐

  1. Flash 解题报告

    Flash Description 给你一颗树,需要把每个点染色,每个点染色时间为\(t_i\),要求同时染色的点的集合为树的独立集,最小化染色结束时间之和. 其实题面蛮有趣的♂ HINT \(n\l ...

  2. CF1110C Meaningless Operations（构造题）

    这可能是我打那么多次CF比赛时,做出来的最难的一道题了……而且这题也是个绝世好题…… 题目链接:CF原网  洛谷 题目大意:$q$ 组询问,每次给定 $a$ 询问 $\gcd(a\&b,a\o ...

  3. POJ 2135 Farm Tour （网络流，最小费用最大流）

    POJ 2135 Farm Tour (网络流,最小费用最大流) Description When FJ's friends visit him on the farm, he likes to sh ...

  4. Docker 镜像加速器

      Docker 镜像加速器 我们使用Docker的第一步,应该是获取一个官方的镜像,例如mysql.wordpress,基于这些基础镜像我们可以开发自己个性化的应用.我们可以使用Docker命令行工 ...

  5. node的path.join 和 path.resolve的区别

    直接上图: join resolve 明显可以看出,join只会帮你把路径连接起来,而resolve会以当前路径为父路径来把你提供的路径连接起来

  6. S折交叉验证(S-fold cross validation)

    S折交叉验证(S-fold cross validation) 觉得有用的话,欢迎一起讨论相互学习~Follow Me 仅为个人观点,欢迎讨论 参考文献 https://blog.csdn.net/a ...

  7. Git与GitHub学习笔记（三）.gitignore文件忽略和删除本地以及远程文件

    一.Git提供了文件忽略功能.当对工作区某个目录或者某些文件设置了忽略后,git将不会对它们进行追踪 HELP:如何在IntelliJ IDEA中使用.ignore插件忽略不必要提交的文件 问题:最近 ...

  8. PHP 文件加密Zend Guard Loader 学习和使用（如何安装ioncube扩展对PHP代码加密）

    一.大体流程图 二.PHP 项目文件加密 下表列出了Zend产品中的PHP版本及其内部API版本和Zend产品版本. 如何加密请往后看 三.如何使用 第一步:确认当前环境 Amai Phalcon 前 ...

  9. 新建 Spring Mvc Web + Maven 的 maven 错误 (二)

    新建项目后,可能由于哪边配置不正确,或也可能是编码问题,就有可能在创建初始就可能发生错误: 这是 pom.xml 中提示的错误,有的人说要删除 maven 的本地仓库位置:c:\用户[Users]\A ...

  10. BAT获取FTP指定文件

    以下两个文件放在同一目录下 getfile.bat文件内容如下: @echo offftp.exe -i -s:getfile.txt 192.168.1.2(更换成你的ip,参数之间有空格)paus ...