测试代码:

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. android: Incorrect line ending: found carriage return (\r) without corresponding newline (\n)

    当报这种错误的时候:Incorrect line ending: found carriage return (\r) without corresponding newline (\n) 解决方法: ...

  2. js时间转换相关

    1.json时间格式转换 function ChangeDateFormat(jsondate) { if (!jsondate||jsondate.length < 1) {return &q ...

  3. 第一章TP-Link 703N刷OpenWrt

    1)下载编译好的固件 openwrt-ar71xx-generic-tl-wr703n-v1-squashfs-factory.bin openwrt-ar71xx-generic-tl-wr703n ...

  4. 关于request.getsession(true|false)

    request.getSession(true):若存在会话则返回该会话,否则新建一个会话.request.getSession(false):若存在会话则返回该会话,否则返回NULL

  5. javaScript-原型、继承-02

    原型链 首先回顾下实列.构造函数.原型对象之间的关系: 实列都包含指向原型对象的一个指针(_proto_): 构造函数都有prototype(原型属性)指向原型对象的指针: 原型是一个对象也存在一个内 ...

  6. 用DataBaseMail发图片并茂的邮件

    不知道各位的老板有没有这样的要求, 一些系统中的数据需要定时发出邮件提醒, 如呆料就要到期或者一些待办的事项提醒. 当然这些用SSRS报表订阅可以实现,但有些公司没有设定相应的报表服务,又或者只是一些 ...

  7. Java浮点值拒绝服务漏洞危害分析

    By 空虚浪子心 http://www.inbreak.net/ JAVA出了漏洞,CVE-2010-4476,会导致拒绝服务攻击.大家能从公告上,看到这样一段代码,挺长的.意思是只有开发人员写出这样 ...

  8. 【M33】将非尾端类设计为抽象类

    1.考虑下面的需求,软件处理动物,Cat与Dog需要特殊处理,因此,设计Cat和Dog继承Animal.Animal有copy赋值(不是虚方法),Cat和Dog也有copy赋值.考虑下面的情况: Ca ...

  9. C++ foreach

    考虑下面的需求,对vector<int>中的每个元素加1,如何做? void add(int& lhs) // 注意:要修改主调方法中的数据,这里要使用引用 { lhs= lhs ...

  10. 日志记录到txt文件

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;usi ...