1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>Untitled Document</title>
  6.         <link rel="stylesheet" type="text/css" href="css/style.css">
  7.         <style type="text/css">
  8.             div, span, p {
  9.                 width: 140px;
  10.                 height: 140px;
  11.                 margin: 5px;
  12.                 background: #aaa;
  13.                 border: #000 1px solid;
  14.                 float: left;
  15.                 font-size: 17px;
  16.                 font-family: Verdana;
  17.             }
  18.  
  19.             div.mini {
  20.                 width: 55px;
  21.                 height: 55px;
  22.                 background-color: #aaa;
  23.                 font-size: 12px;
  24.             }
  25.  
  26.             div.hide {
  27.                 display: none;
  28.             }
  29.         </style>
  30.         <script type="text/javascript" src="jquery-1.7.2.js"></script>
  31.         <script type="text/javascript">
  32.             $(document).ready(function(){
  33.  
  34.                 $("#btn1").click(function(){
  35.                     $("div:contains('di')").css("background", "#ffbbaa");
  36.                 });
  37.                 $("#btn2").click(function(){
  38.                     $("div:empty").css("background", "#ffbbaa");
  39.                 });
  40.                 $("#btn3").click(function(){
  41.                     $("div:has(.mini)").css("background", "#ffbbaa");
  42.                 });
  43.  
  44.                 $("#btn4").click(function(){
  45.                     $("div:parent").css("background", "#ffbbaa");
  46.                     //$("div:not(:empty)").css("background", "#ffbbaa");
  47.                 });
  48.  
  49.             });
  50.  
  51.         </script>
  52.     </head>
  53.     <body>
  54.         <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
  55.         <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
  56.         <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
  57.         <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
  58.  
  59.         <br><br>
  60.         <div class="one" id="one">
  61.             id 为 one,class 为 one 的div
  62.             <div class="mini">class为mini</div>
  63.         </div>
  64.         <div class="one" id="two" title="test">
  65.             id为two,class为one,title为test的div
  66.             <div class="mini" title="other">class为mini,title为other</div>
  67.             <div class="mini" title="test">class为mini,title为test</div>
  68.         </div>
  69.         <div class="one">
  70.             <div class="mini">class为mini</div>
  71.             <div class="mini">class为mini</div>
  72.             <div class="mini">class为mini</div>
  73.             <div class="mini"></div>
  74.         </div>
  75.         <div class="one">
  76.             <div class="mini">class为mini</div>
  77.             <div class="mini">class为mini</div>
  78.             <div class="mini">class为mini</div>
  79.             <div class="mini" title="tesst">class为mini,title为tesst</div>
  80.         </div>
  81.         <div style="display:none;" class="none">style的display为"none"的div</div>
  82.         <div class="hide">class为"hide"的div</div>
  83.         <div>
  84.             包含input的type为"hidden"的div<input type="hidden" size="8">
  85.         </div>
  86.         <div id="mover">正在执行动画的div元素.</div>
  87.     </body>
  88. </html>
  1. <!DOCTYPE px;         }
  2.  
  3.          div.hide {             display: none;         }              </style>      <script type="text/javascript" src="jquery-1.7.2.js"></script>      <script type="text/javascript">         $(document).ready(function(){
  4.  
  5.             $("#btn1").click(function(){               $("div:contains('di')").css("background", "#ffbbaa");            });            $("#btn2").click(function(){               $("div:empty").css("background", "#ffbbaa");            });            $("#btn3").click(function(){               $("div:has(.mini)").css("background", "#ffbbaa");            });
  6.  
  7.             $("#btn4").click(function(){               $("div:parent").css("background", "#ffbbaa");               //$("div:not(:empty)").css("background", "#ffbbaa");});
  8.  
  9.          });
  10.  
  11.       </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" />
  12.  
  13.       <br><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>

jQuery选择器(内容过滤选择器)第四节的更多相关文章

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

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

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

  3. (7)Jquery1.8.3快速入门_内容过滤选择器

    一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...

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

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

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

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

  6. JQuery 内容过滤选择器

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

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

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

  8. Jquery过滤选择器，选择前几个元素，后几个元素，内容过滤选择器等

    一.基本过滤选择器(重点掌握下列八个):first 选取第一个元素 $("div:first").css("color","red");:l ...

  9. jQuery内容过滤选择器再探究（原创）

    内容过滤选择器不算复杂,但还是有需要注意的地方

随机推荐

  1. C++中const用于函数重载

    C++中const用于函数重载 常成员函数和非常成员函数之间的重载 首先先回忆一下常成员函数 声明:<类型标志符>函数名(参数表)const: 说明: (1)const是函数类型的一部分, ...

  2. Qt全局宏和变量

    1.  Qt 全局宏定义 Qt版本号: QT_VERSION :  (major << 16) + (minor << 8) + patch 检测版本号: QT_VERSION ...

  3. 对Item中定时器的理解

    一.Diamond介绍 Diamond主要提供持久配置的发布和订阅服务,最大特点是结构简单,稳定可靠. 主要的使用场景:TDDL使用Diamond动态切换数据库,动态扩容等:业务使用Diamond推送 ...

  4. Codeforces Round #430 (Div. 2)

    A. Kirill And The Game time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  5. Angular JS中的路由

      前  言            本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页We ...

  6. js生成json数据

    <script src="~/static/js/jquery.min.js"></script><script type="text/ja ...

  7. SqlServer和Oracle中一些常用的sql语句5 流程控制语句

    --在sql语句中 begin...end 用来设定一个程序块 相关于c#中的{} declare @yz real,@w int --声明变量 set @w=120 --为变量赋值 if @w< ...

  8. iOS的异步绘制--YYAsyncLayer源码分析

    iOS的异步渲染 最近看了YYAsyncLayer在这里总结一下.YYAsyncLayer是整个YYKit异步渲染的基础.整个项目的Github地址在这里.你可以先下载了一睹为快,也可以跟着我一步一步 ...

  9. 【特效】给元素循环添加class

    经常会遇到给元素循环添加class的效果,例如下面这个图 每个模块的背景色和图标都不相同,但是呢,模块的数量又不确定,说不定有几十个,那我不能设计几十个图标吧,所以,可以做成每9个一循环,也就是第10 ...

  10. (转)Python爬虫利器一之Requests库的用法

    官方文档 以下内容大多来自于官方文档,本文进行了一些修改和总结.要了解更多可以参考 官方文档 安装 利用 pip 安装 $ pip install requests 或者利用 easy_install ...