测试代码:

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. C#用正则表达式 获取标签的属性或值

    整理两个 在C#中,用正则表达式 获取网页源代码标签的属性或值的方法 : 1.获取标签中的值: string str="<a href=\"www.csdn.net\&quo ...

  2. Slave延迟很大的优化方法总结（MySQL优化）

    [http://www.cstor.cn/textdetail_9146.html] 一般而言,slave相对master延迟较大,其根本原因就是slave上的复制线程没办法真正做到并发.简单说,在m ...

  3. C#判断一个类中有无"指定名称"的方法

    C#中可以通过反射分析元数据来解决这个问题,示例代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2 ...

  4. discuz问题综合

    1.discuz x2搬家问题:搬家后,需要修改数据库的配置文件,包含:      主要的配置文件有三个:config目录下的config_global.php和config_ucenter.php以 ...

  5. 设置AD用户属性

    设置AD用户属性proxyaddresses的值 $test01 = [adsi]"LDAP://cn=test01,ou=oo,ou=admins,dc=ddv,dc=com" ...

  6. 【转】牛逼闪闪的Ruby迭代器

    D瓜哥最近想做一个网站,另外,老早就有学习一门动态语言的想法,满足着两个条件的编程语言中,Ruby.Python是最合适的两种语言.现在Ruby on Rails如日中天,光芒万丈!所以,就选定了Ru ...

  7. asp.net架构基础知识--页面以及全局事件

    1.asp.net的请求过程,以及对应的处理请求的dll客户的请求页面由aspnet_isapi.dll这个动态连接库来处理,把请求的aspx文件发送给CLR进行编译执行,然后把Html流返回给浏览器 ...

  8. BZOJ 2038 [2009国家集训队]小Z的袜子 莫队

    2038: [2009国家集训队]小Z的袜子(hose) 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=2038 Descriptionw ...

  9. zoj3820 Building Fire Stations 树的中心

    题意:n个点的树,给出n-1条边,每条边长都是1,两个点建立防火站,使得其他点到防火站的最远距离最短. 思路:比赛的时候和队友一开始想是把这两个点拎起来,使得层数最少,有点像是树的中心,于是就猜测是将 ...

  10. Perl小知识点之排序sort

    脚本这种东西,就是要常用,否则一段时间不用就生疏了,因此决定时时记一些小知识点,一来回顾一下,二来需要的时候可以迅速获得提示. Sort by number You could now write a ...