测试代码:

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. DIV+CSS规范命名大全集合

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-19)   网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DI ...

  2. 【原创】省市二级联动纯javascript

    // 北京 上海 天津 重庆 河北 山西 内蒙古 辽宁 吉林 黑龙江 江苏 浙江 安徽 福建 江西 山东 河南 湖北 湖南 广东 广西 海南 四川 贵州 云南 西藏 陕西 甘肃 宁夏 青海 新疆 香港 ...

  3. c# asp.net 鼠标改变控件坐标位置,更改控件坐标,注册表保存读取,打印,查找局域网内打印机等等收集

    界面虽然被我弄的很难看,但功能还可以 里边注册表的路径自己设置一下,或者加一个创建注册表的语句,不然会报错 前台: <%@ Page Language="C#" AutoEv ...

  4. 制作Windows的ico图标

    也不知道这个方法是不是最好的,有时间再查看其它方法 首先设计出图标,png格式即可. 使用一款软件 IconWorkshop 下载了一个试用版,临时制作够用了 制作步骤如下: 1.打开png图片 2. ...

  5. C#操作Excel(2)-- 打开-读取Excel文档

    由于要为某软件实现导出Excel功能,故有此文. 本文的开发环境是Visual Studio 2010 ,C#, Excel 2007. 新建C#工程后打开Solution Explorer,可以看到 ...

  6. OutputDebugString()

    坚定的 Win32 开发者可能对 OutputDebugString() API 函数比較熟悉,它能够使你的程序和调试器进行交谈.它要比创建日志文件easy,并且全部“真正的”调试器都能使用它.应用程 ...

  7. 关于sources.list和apt-get [转载]

    个人觉得,Debian最大的方便在于用apt-get安装软件,apt-get的工作原理大概是这种:/etc/apt/sources.list文件中保存着一些server的设置,在这些server上有大 ...

  8. BBOSS框架使用jquery方式传參到后台的时候，要注意的事项

    BBOSS框架.从前台传到后台的时候,參数要以这样的方式: public String initAddOrModExtendUser(HttpServletRequest request,       ...

  9. iOS开发——图层OC篇&UIColor深入研究（CGColor，CIColor）

    UIColor深入研究(CGColor,CIColor) 由于跟人比较喜欢研究关于图层与动画方面的技术,正打算看看别人写的好东西,就遇到了好几个问题, 第一:UIClor类方法的使用 就是关于UICo ...

  10. memached+asp.net 4.0 分布式缓存

    由于准备做一个商品站点,希望做一个memached缓存.折腾了一个多星期.本机是存进去取出来为空. 各种办法都试过了,还是不行.最后用同事电脑測试是能够的,然后将DEMO公布到阿里云也是能够的.支持. ...