HTML示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>
<!--HTML区域-->
<div class="nav-2014">
    <div class="w">
        <div class="w-spacer"></div>
        <div class="categorys">
            <div class="dt">家用电器分类</div>
        </div>
        <span class="hr"></span>
        <div class="navitems-2014">
            <div id="treasure"></div>
            <span class="clr"></span>
            <span class="chr"></span>
        </div>
    </div>
</div>
<div id="electronic">
    <div id="firstScreen">
        <div class="w"></div>
    </div>
    <ul>
        <div class="u_c"></div>
        <li class="ui-switch-curr"></li>
        <li class="ui-switch-item"></li>
    </ul>
    <div class="secord_screen"></div>
    <div class="third_screen"></div>
</div>
</body> </html>

　　

　　1、ancestor descendant  祖先 子孙选择器，在给定的祖先元素下匹配所有的后代元素.

<script src="jquery-3.1.0.js"></script>
    <script>
//        取类.nav-2014的子孙为span的元素,选择了类nav-2014下所有span子元素
        $(".nav-2014 span")
    </script>
运行结果：选择了类nav-2014下一个父sapn,二个孙span

　　

　　2、parent > child:父子选择器，在给定的父元素下匹配所有的子元素。

    <script>

//          取id为electronic的子元素为div的元素,选择了id为electronic下的二个子div（firstScreen，secord_screen）

        $("#electronic > div")

    </script>

　　

　　3、prev + next :下一个选择器，在给定的前一个元素下匹配next 元素。

    <script>

//        取ul的下一个元素为div的元素，取到紧跟form后平级的span元素,结果选择了类secord_screen

        $("ul + div")

    </script>

　　

　　4、prev ~ siblings:在给定的前一个元素下之后的所有siblings 元素。

    <script>
//        选择id为firstScreen后所有邻居中为div的元素
        $("#firstScreen + div")
    </script>

　　

jquery选择器之层级选择器的更多相关文章

  1. jquery选择器之层级过滤选择器

    $("ancestor descendant"):选取parent元素后所有的child元素 $("parent > child"):选取parent元素 ...

  2. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  4. jQuery选择器之基本选择器Demo

    测试代码: 01-基本选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. jQuery选择器之id选择器

    页面的任何操作都需要节点的支撑,开发者如果快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专 ...

  6. 繁星——JQuery选择器之层级

    [ancestor descendant] 在给定元素下匹配所有后代元素.这个选择器的使用概率相当之高,使用示例如下: //HTML代码: <div id='div01'> <inp ...

  7. jquery选择器之属性选择器

    [attribute]   匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...

  8. jquery选择器之内容选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. Jquery选择器之基本选择器

    id选择器 共同点: text:代表标签之间的文本值 返回值:均为列表 根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=> ...

随机推荐

  1. C语言中system()函数的用法总结(转)

    system()函数功能强大,很多人用却对它的原理知之甚少先看linux版system函数的源码: #include <sys/types.h> #include <sys/wait ...

  2. Mvc导入导出Excel

    @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2&g ...

  3. 浅谈 Android 自定义锁屏页的发车姿势

    作者:blowUp,原文链接:http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653577446&idx=2&sn= ...

  4. SSO之CAS总结

    1.采用kerberos原理 2.特点,经纪人模式即需要sso的所有用户账号要集中在一起 3.安全性保证方法: 关键就是保证TS和TGC的安全. 3.1)TS生成是采用足够随机算法,一次性使用,设置有 ...

  5. Copy List with Random Pointer [LeetCode]

    A linked list is given such that each node contains an additional random pointer which could point t ...

  6. Material Design之TextInputLayout使用示例

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...

  7. ASIHTTPRequest下载示例（支持断点续传）

    一.创建网络请求队列 首先,创建网络请求队列,如下: ASINetworkQueue   *que = [[ASINetworkQueue alloc] init]; self.netWorkQueu ...

  8. 替换Notes,K2 BPM为vivo打造新平台

    vivo是步步高旗下的分品牌,专注于智能手机领域,隶属于广东步步高工业电子有限公司.vivo追求乐趣.充满活力.年轻时尚的群体一起打造拥有卓越外观.专业级音质.极致影像.愉悦体验的智能产品,并将敢于追 ...

  9. [转]Linux中设置服务自启动的三种方式

    from:http://www.cnblogs.com/nerxious/archive/2013/01/18/2866548.html 有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统 ...

  10. Android平板电脑开发— — —碎片

    碎片是一种可以嵌入在活动中的UI片段,它能让程序更加合理与充分地使用大屏幕的空间,碎片通常都是在平板电脑开发中才会使用 简单实例 左碎片布局 <?xml version="1.0&qu ...