<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>层叠选择器</title>

        <script src="js/jquery.js"></script>

        <script type="text/javascript">

        $(function(){

        //基准节点 +空格 +目标节点代表后代选择器 包含 子，子孙

         //$("ul:first li").css("border","2px solid red");

         //使用">"来代表子选择器，只获取直接隶属于第一个ul的li节点 只包含 子，不包含子孙

         $("ul:first>li").css("border","2px solid red");

         //+代表相邻节点 与之相邻唯一的元素

         $("form>div:eq(0)+*").css("border","2px solid red");

         //获取之后的兄弟节点~

         $("form>div:eq(2)~div").css("border","2px solid red");

        })

        </script>

    </head>

    <body>

        <div>

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <ul>

                    <li></li>

                    <li></li>

                </ul>

            </ul>

            <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                    <ul>

                    <li></li>

                    <li></li>

                </ul>

            </ul>

            <form>

                <div>

                    name<input type="text" />

                </div>

                <div>

                    age<input type="text" />

                </div>

                    <div>

                    sex<input type="text" />

                </div>

                    <div>

                    address<input type="text" />

                </div>

                    <div>

                    remark<input type="text" />

                </div>

                <button>submit</button>

                <button>canle</button>

            </form>

        </div>

    </body>

</html>

jQuery学习- 层叠选择器的更多相关文章

  1. jquery 学习(一) - 选择器

    基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...

  2. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jQuery学习- 内容选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jQuery学习- 位置选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jQuery学习-属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jQuery学习-基本选择器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. jQuery学习之------选择器

    a.id选择器 <div id=”test1”></div> var div1=$(“#test1”);                //同css的写法一样id选择器用#号实 ...

  8. jquery学习：选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  9. jQuery学习(三)——选择器总结

    1.基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <!DOCTYPE html& ...

随机推荐

  1. InputStream转换为String, byte[] data = new byte[1024]详解

    /** * This file created at 2018年2月28日. * * Copyright (c) 2002-2018 Bingosoft, Inc. All rights reserv ...

  2. Linux 下 python如何配置virtualenv

    .安装virtualenv pip3 install virtualenv pip install -i https://pypi.tuna.tsinghua.edu.cn/simple virtua ...

  3. hibernate连接mysql，查询条件中有中文时，查询结果没有记录，而数据库有符合条件的记录（解决方法）

    今天在另一台服务器上重新部署了网站,结果出现了以下问题: ——用hibernate做mysql的数据库连接时,当查询条件中有中文的时候,查询结果没有记录,而数据库中是存在符合条件的记录的. 测试了以下 ...

  4. 设计模式之——单例模式(Singleton)的常见应用场景（转）：

    单例模式(Singleton)也叫单态模式,是设计模式中最为简单的一种模式,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象,也因此 ...

  5. kudu安装部署

    安装部署节点规划 节点 kudu-master kudu-tserver node01 是 是 node02 是 是 node03 是 是 配置本地Yum的Repository 下载kudu安装yum ...

  6. Gsoap在QT工程里如何调用

    Qt并没有SOAP的官方实现,都是借助三方库来实现,不过似乎有个QtSoap,不过这个不是太会用,所以还是用Gsoap 这里生成纯C文件, 1.下载gSOAP(http://sourceforge.n ...

  7. 堆排序（php实现）

    堆排序基本步骤: 1:把无序序列构成一个堆. 2:交换堆顶元素和最后一个元素,交换之后由于堆结构破坏,重置堆. 初始化堆和交换后的重置堆区别在于:初始化堆时从最后一个非叶子结点开始调整结点位子,交换堆 ...

  8. FreeMarker标签使用

    FreeMarker标签使用 模板技术在现代的软件开发中有着重要的地位,主要用于view层的展示,freemarker是比较流行的一种. 一.FreeMarker模板文件主要有4个部分组成 ①文本,直 ...

  9. hihocoder [Offer收割]编程练习赛61

    [Offer收割]编程练习赛61 A:最小排列 给定一个长度为m的序列b[1..m],再给定一个n,求一个字典序最小的1~n的排列A,使得b是A的子序列. 贪心即可,b是A的子序列,把不在b中的元素, ...

  10. BZOJ4180:字符串计数(SAM,二分,矩阵乘法)

    Description SD有一名神犇叫做Oxer,他觉得字符串的题目都太水了,于是便出了一道题来虐蒟蒻yts1999. 他给出了一个字符串T,字符串T中有且仅有4种字符 'A', 'B', 'C', ...