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. 从web启动winform程序

    最近有个客户提出想从网站上启动一个客户端的程序,研究了下,实现方法如下: 1. 注入注册表 try                {                    string appPath ...

  2. #include<iostream>与#include<iostream.h>以及#inclue<string> 和 #include<string.h>的区别

    转载于:http://www.cnblogs.com/charley_yang/archive/2010/12/08/1900715.html 1.从功能性的角度来讲,<iostream> ...

  3. Spring RedisTemplate操作-ZSet操作（6）

    @Autowired @Resource(name="redisTemplate") private RedisTemplate<String, String> rt; ...

  4. ASP.NET MVC学习（三）之过滤器Filter

    http://www.cnblogs.com/yaopengfei/p/7910763.html

  5. TED_Topic8：How to control someone else's arm with your brain

    By Greg Gage (Neuroscientist) Greg Gage is on a mission to make brain science accessible to all. In ...

  6. [机器学习笔记]主成分分析PCA简介及其python实现

    主成分分析(principal component analysis)是一种常见的数据降维方法,其目的是在“信息”损失较小的前提下,将高维的数据转换到低维,从而减小计算量. PCA的本质就是找一些投影 ...

  7. [R语言]读取文件夹下所有子文件夹中的excel文件，并根据分类合并。

    解决的问题:需要读取某个大文件夹下所有子文件夹中的excel文件,并汇总,汇总文件中需要包含的2部分的信息:1.该条数据来源于哪个子文件夹:2.该条数据来源于哪个excel文件.最终,按照子文件夹单独 ...

  8. C# 百度搜索结果xpath分析

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  9. ApiCloud利用NVTabBar模块快速搭建起APP的框架

    废话不说,直接上代码 模块地址:https://docs.apicloud.com/Client-API/Nav-Menu/NVTabBar 代码实例: <!doctype html> & ...

  10. crontab机会任务监控

    <1>如何查看自己的计划任务是否成功的执行? 昨天crontab中的同步任务没有执行,不知道是什么原因没有执行,貌似任务hang住了,想查询一下crontab到底问题出在哪里,或者hang ...