1.介紹

　　

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

     div, span, p {

         width: 140px;

         height: 140px;

         margin: 5px;

         background: #aaa;

         border: #000 1px solid;

         float: left;

         font-size: 17px;

         font-family: Verdana;

     }

     div.mini {

         width: 55px;

         height: 55px;

         background-color: #aaa;

         font-size: 12px;

     }

     div.hide {

         display: none;

     }

 </style>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //选取每个class为one的div父元素下的第2个子元素

         $("#btn1").click(function(){

             //在：前带一个空格

             $("div.one :nth-child(2)").css("background","#fab");

         });

         //选取每个class为one的div父元素下的第一个子元素.

         $("#btn2").click(function(){

             $("div.one :first-child").css("background","#fab");

         });

         //选取每个class为one的div父元素下的最后一个子元素

         $("#btn3").click(function(){

             $("div.one :last-child").css("background","#fab");

         });

         //如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素

         $("#btn4").click(function(){

             $("div.one :only-child").css("background","#fab");

         });

     })

 </script>

 </head>

 <body>

     <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>

     <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2" />

     <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3" />

     <input type="button" value="如果class为one的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" value="123456789"

             size="8">

     </div>

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

 </body>

 </html>

008 jquery过滤选择器-----------（子元素过滤选择器）的更多相关文章

  1. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  2. jQuery选择器(子元素过滤选择器)第七节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  4. 过滤选择器first与子元素过滤选择器first-child的区别

    1.表格代码如下: <table id="table"> <tr> <td>id</td> <td>name</t ...

  5. jQuery选择器之子元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  6. jquery 子元素筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  7. jquery如何阻止子元素相应mouseout事件

    jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...

  8. 测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻

    环境 xp ie 8 , ietester <!doctype html> <html> <head> <meta charset="utf-8&q ...

  9. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  10. [转]jquery后代和子元素的区别

    这是<锋利的jquery>书里的内容 <div>     <p>         <span></span>         <a&g ...

随机推荐

  1. （转） eclipse项目中.classpath文件详解

    背景:对于java项目中.classpath文件中的相关定义一直不是很了解,有必要进行深入的学习. 1 前言 在使用eclipse或者myeclipse进行Java项目开发的时候,每个project( ...

  2. Mac 删除应用卸载后无法正常移除的图标

    经常会不通过appstore下载软件,也就是从网页中下载dmg,自己安装,但是当我不再想要这个软件,然后把它卸载掉之后就会发现,launchpad里还是遗留了这个软件的图标,而且删不掉.这个时候,就可 ...

  3. 1: mysql left join,right join,inner join用法分析

    下面是例子分析表A记录如下: aID        aNum 1           a20050111 2           a20050112 3           a20050113 4   ...

  4. spring BasicDataSource 数据源配置 sqlserver数据库 oracle数据库 mysql数据jdbc配置

    spring BasicDataSource 数据源配置 sqlserver数据库 oracle数据库 mysql数据jdbc配置 jdbc.properties 文件信息如下: ---------- ...

  5. PowerDesigner 打印错误

    PowerDesigner打开pdm文件时报“打印错误”(解决)   原创作品,出自 “深蓝的blog” 博客,欢迎转载,转载时请务必注明出处,否则追究版权法律责任. 深蓝的blog:http://b ...

  6. token的理解

    今天学习了token,它的英文意思是令牌的意思.在我理解即像通行证一样,在用户登录成功系统后,会为这个用户颁发一个token,这样它去其他系统都免登录,因为有了这个令牌. token的生成我们可以用U ...

  7. 20145215《网络对抗》Exp2 后门原理与实践

    20145215<网络对抗>Exp2 后门原理与实践 基础问题回答 例举你能想到的一个后门进入到你系统中的可能方式? 在网上下载软件的时候,后门很有可能被捆绑在下载的软件当中: 浏览网页的 ...

  8. linux查看进程的线程数

    top -H -p $PID  #查看对应进程的那个线程占用CPU过高 1.top -H 手册中说:-H : Threads toggle 加上这个选项启动top,top一行显示一个线程.否则,它一行 ...

  9. java基础基础总结----- System

    常用的方法: 细节分析:

  10. 质数——1到n遍历法

    一.从1至N全部遍历,当这个数只能被1和n整除它就是素数. /** * 打印自然数n以内的素数 */ public void printPrime(int n){ //是否为质数 boolean is ...