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. LCP 模板

    LCP Description 给定串 \(S\) . \(m\) 组询问 \((X, Y, L, R)\): 求 \(S[X,Y]\) 与 \(S[L,R]\) 的最长公共前缀. Input 第一行 ...

  2. spring in action 学习笔记八：用@Primary 或者@Qualifier消除@Autowired引起的歧义现象

    首先解释一下@Primary和@Qualifier这两个注解的意思:@Primary的意思是在众多相同的bean中,优先使用用@Primary注解的bean.而@Qualifier这个注解则指定某个b ...

  3. saltstack主机管理项目【day39】:主机管理项目开发

    项目目标 salt state.apply -h "ubuntu,centos" -g "ubuntu,centos" -f "ubuntu,cent ...

  4. Hadoop Yarn源码 - day2

    接着昨天的继续看hadoop-yarn-api,昨天看了api package下的4个协议,今天来看下con package下的代码 conf目录下的内容比较少,就4个文件分别是Configurati ...

  5. Why do we make statistics so hard for our students?

    Why do we make statistics so hard for our students? (Warning: long and slightly wonkish) If you’re l ...

  6. chrome 隐藏技能之 base64 图片转换

    有时候我们要转换图片为base64,或者将base64转回图片,可能都需要找一些在线工具或者软件类型的工具才行.当然 chrome 也算是软件,但是好在做前端的都有 chrome.好了,来看下简单的例 ...

  7. 20155212 2016-2017-2 《Java程序设计》第8周学习总结

    20155212 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 Chapter14 1. Channel架构与操作 想要取得Channel的实作对象,可以使 ...

  8. checkbox判断不为空

    checkbox不为空 html页面: @foreach($seals as $v) <input type="checkbox" name="seal_id[]& ...

  9. Zookeeper笔记之四字命令

    Zookeeper支持一些命令用来获取服务的状态和相关信息,因为这些命令都是四个字母的,所以一般称为四字命令. 四字命令可以使用telnet或者nc向服务器提交,使用下面这个脚本可以当做是一个简易的客 ...

  10. AC自动机（Keywords Search）

    题目链接:https://cn.vjudge.net/contest/280743#problem/A 题目大意:首先给你T组测试样例,然后给你n个字符串,最后再给你一个模式串,然后问你这一些字符串中 ...