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. 【bzoj3576】 Hnoi2014—江南乐

    http://www.lydsy.com/JudgeOnline/problem.php?id=3576 (题目链接) 题意 给出一个数$F$,然后$n$堆石子,每次操作可以把一堆不少于$F$的石子分 ...

  2. web入门之十 JS高级编程基础

    学习内容 JavaScript函数 JavaScript类和对象 解析JSON数据 能力目标 深入了解JavaScript函数 熟悉JavaScript面向对象编程 熟练进行JSON数据解析 本章简介 ...

  3. C++时间标准库时间time

    转自:http://www.cnblogs.com/yukaizhao/archive/2011/04/29/cpp_time_system_time.html (玉开) C++标准库中的时间需要引用 ...

  4. IIS并发连接数和数据库连接池

    一.数据库连接池 1.报错: 超时时间已到.超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小. 2.问题分析: 问题的原因是与数据库的连接没有显示关 ...

  5. 目标检测评价指标(mAP)

    常见指标 precision 预测出的所有目标中正确的比例 (true positives / true positives + false positives). recall 被正确定位识别的目标 ...

  6. ELK应用之二:Kibana显示Nginx中来访客户端IP地域分布

    在Kibana的visualize中显示Nginx访问日志客户端IP地域分布图 官网介绍: https://www.elastic.co/guide/en/beats/packetbeat/curre ...

  7. vue子组件的自定义事件

    父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...

  8. Codeforces #55D-Beautiful numbers （数位dp）

    D. Beautiful numbers time limit per test 4 seconds memory limit per test 256 megabytes input standar ...

  9. bzoj千题计划295：bzoj3140: [Hnoi2013]消毒

    http://www.lydsy.com/JudgeOnline/problem.php?id=3140 如果只有两维,那就是二分图最小点覆盖 现在是三维,但是a*b*c<=5000,说明最小的 ...

  10. bzoj千题计划269：bzoj2655: calc (拉格朗日插值）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2655 f[i][j] 表示[1,i]里选严格递增的j个数,序列值之和 那么ans=f[A][n] * ...