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. Html_Img元素 设置图片与其他元素横排高度一致

    <img id="numAdd" src="~/Images/jia.jpg" style="width:30px;height:30px;ve ...

  2. Ant-style path patterns

    [转载]http://blog.itpub.net/29959940/viewspace-1385870/ Ant path 匹配原则路径匹配原则(Path Matching) Spring MVC中 ...

  3. 在与SQL Server建立连接时出现于网络相关的或特定于实例的错误

    客户遇到一个问题,用“服务器名\实例名”远程连接另外一台命名实例的时候连接失败,报“在与SQL Server建立连接时出现于网络相关的或特定于实例的错误,未找到或无法访问服务器.请验证实例名称是否正确 ...

  4. [讨论] win7封装时如何直接开通局域网共享

    ekincheng 发表于 2016-10-31 20:17:54 https://www.itsk.com/thread-371838-1-5.html Win7封装时不能像XP那样直接开启局域网共 ...

  5. python 学习中遇到的问题

    一.安装pip中遇到的问题. 出现错误:ImportError:DLL load failed :%1不是有效的win32应用程序 出现问题解答: 主要是由于安装的python版本和所下载的安装包版本 ...

  6. python的类和对象——类成员番外篇

    学完了面向对象的三大特性,已经get了所有屌丝技能的我们也当一回文艺小青年,来看看类的成员和成员修饰符. 今天‘三’这个数字好亲和~~~类成员可以分为三类:字段.方法和属性 一.字段 首先我们来看看字 ...

  7. Selenium操作页面元素

    转自:http://blog.sina.com.cn/s/blog_6966650401012a7q.html 一.输入框(text field or textarea) //找到输入框元素: Web ...

  8. (AS3)关于arguments

    一.官方说明 点击访问 二.使用心得 arguments包含了当前执行方法的参数,注意,不包含默认参数! arguments可以全局访问,可以在任何方法里访问,除此之外,在定义变量的时候或者初始化的时 ...

  9. s:iterator间接实现跳出循环

    在用s:iterator遍历小组成员时需要过滤出管理员,然后在找到第一个管理员以后停止循环,下面是我的代码: <s:set name="index" value=" ...

  10. TabControl控件的DrawItem事件怎么注册

    只有DrawMode等于OwnerDrawFixed时,才会在绘制选项卡时发生DrawItem事件tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed;