测试代码:

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. (《数论及应用1.3》NEFU 116 两仪剑法(最小公倍数&&最大公约数))

    #include <iostream> using namespace std; long long gcd(long long a, long long b){ if(b == 0){ ...

  2. C#之 HashSet（临时笔记，未参考资料，请慎重）

    HashSet是一个集合,类似于DataSet,但是其主要用途是用来存放同一种类型的元素(string.row.table等),如果添加的元素跟定义时初始的类型不一致,就会直接编译失败. 例如: Ha ...

  3. 基于Emgu cv的图像拼接（转）

    分类: 编程 C# Emgu cv Stitching 2012-10-27 11:04 753人阅读 评论(1) 收藏 举报 在新版本的Emgu cv中添加了Emgu.CV.Stitching,这极 ...

  4. input标签写CSS时需要注意的几点（先收藏）

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...

  5. iOS开发-用预处理指令代替注释

    有时候我们在调试程序的时候,想不执行某一段代码或者某些方法,我们会用注释,但是这样看上去就会让你的代码显示“很绿”,此时我们可以用一下代码 #if 0 // 你不想执行的代码 #endif 这样就可以 ...

  6. putty 中文乱码解决方法

    解决putty.exe 中文乱码的问题 export NLS_LANG="AMERICAN_AMERICA.ZHS16GBK"

  7. 【转】Android 属性动画（Property Animation） 完全解析 （上）

    http://blog.csdn.net/lmj623565791/article/details/38067475 1.概述 Android提供了几种动画类型:View Animation .Dra ...

  8. Android开发之SQLite的使用方法

    前言 SQLite是一种轻量级的小型数据库,虽然比较小,但是功能相对比较完善,一些常见的数据库基本功能也具有,在现在的嵌入式系统中使用该数据库的比较多,因为它占用系统资源很少.Android系统中也不 ...

  9. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  10. 一个jQuery扩展工具包

    带有详尽注释的源代码: var jQuery = jQuery || {}; // TODO // ###################################string操作相关函数### ...