测试代码:

04-内容过滤选择器.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>04-内容过滤选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script src="./script/assist.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
   <script type="text/javascript">
       $(document).ready(function(){
           //<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
           //选取所有的div 元素文本里面包含div 内容的
           $("#btn1").click(function(){
                   $("div:contains('di')").css("background","red");
           });

           //<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/> empty
           //选择所有的div 元素里面没有子元素（文本）
           $("#btn2").click(function(){
                 $("div:empty").css("background","red");

           });

           //<input type="button" value="选取所有的div 元素 含有class为mini ." id="btn3"/>
           //选择div 元素..
           //选择div 元素里面包含class=mini
           $("#btn3").click(function(){
                $("div:has('.mini')").css("background","red");
           });

           //<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
           $("#btn4").click(function(){

                 $("div:parent").css("background","red");
           });

     });
   </script>
 </head>
 <body>
   <h3>内容过滤选择器.</h3>
   <button id="reset">手动重置页面元素</button>
   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
   <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 /><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>

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

 <!-- Resources from http://down.liehuo.net -->
 </body>
 </html>

jQuery选择器之内容过滤选择器Demo的更多相关文章

  1. jQuery选择器之基本过滤选择器Demo

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

  2. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

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

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

  4. jquery选择器之层级过滤选择器

    $("ancestor descendant"):选取parent元素后所有的child元素 $("parent > child"):选取parent元素 ...

  5. jQuery选择器之表单选择器Demo

    测试代码: 09-表单选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  6. jquery选择器之属性过滤选择器

    <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...

  7. jquery选择器之属性过滤选择器详解

    代码如下: <style type="text/css">  /*高亮显示*/  .highlight{       } </style> 复制代码代码如下 ...

  8. jquery选择器之基本过滤选择器

    <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...

  9. jquery选择器之内容选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. Number

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt 概述 parseIn ...

  2. 【原创】[PS技巧]如何制作翘角纸条的阴影效果

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-19) 在网页设计中经常会用到翘角纸条的效果.如:百度空间首页: pic.1 下面我详细讲解一下这个效果使用PS如何制 ...

  3. webstorm 主题设置 皮肤设置

    推荐个编辑器主题下载的一个网站. Color Themes    网址:http://color-themes.com [点这里直接跳转] 但是,只支持几个编辑器. 各种颜色搭配的主题,随你选择!我个 ...

  4. PostgreSQL下，对汉字按拼音排序

    参考学习此文: http://blog.163.com/digoal@126/blog/static/163877040201173003547236/ 建库 postgres=# \l List o ...

  5. Windows API 磁盘

    这里的磁盘就是你的C,D,E,F,G盘啦 那么来看看吧windows Api来获取信息的呢 (1)DWORD GetLogicalDrives(void) 返回值是一个32位整形 32位每一位表示一个 ...

  6. Android自定义图形，图形的拼接、叠加、相容

    直接上Xfermode子类: AvoidXfermode  指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode  当覆盖已有的颜色时,应用一 ...

  7. UVALive 4222 Dance 模拟题

    Dance 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&pag ...

  8. Visual C++内存泄露检测—VLD工具使用说明[转]

    Visual C++内存泄露检测—VLD工具使用说明 一．        VLD工具概述 Visual Leak Detector(VLD)是一款用于Visual C++的免费的内存泄露检测工具.他的 ...

  9. System.Data.SqlClient.SqlError: 备份集中的数据库备份与现有的 'XXX' 数据库不同

    System.Data.SqlClient.SqlError: 备份集中的数据库备份与现有的 'XXX' 数据库不同. 1. 删除与要恢复数据库同名的已经存在的数据库:2. 右击“数据库”选择“还原数 ...

  10. 【JavaScript】XMLHttpRequest Level2使用指南

    XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信. 最早,微软在IE 5引进了这个接口.因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生. ...