<!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. Jenkins操作，实现增删改查

    Jenkins的版本是:Jenkins2.138.1 实现的操作接口: using System; using System.Collections.Generic; namespace iHRPub ...

  2. SQL Server FOR XML PATH 和 STUFF函数的用法

    FOR XML PATH ,其实它就是将查询结果集以XML形式展现,将多行的结果,展示在同一行. 下面我们来写一个例子: 假设我们有个工作流程表: CREATE TABLE [dbo].[Workfl ...

  3. 转：.net设计模式之工厂模式

    原文:http://terrylee.cnblogs.com/archive/2006/01/04/310716.html 概述 在软件系统中,经常面临着“某个对象”的创建工作,由于需求的变化,这个对 ...

  4. 我用的是python2，以后加python3的内容

    可能有的不成功,比如print 'abc',这时候确定下python版本,3的方式是print('abc')

  5. 使用python来建立http服务

    python建立http服务 首先我们的windos上要安装python解释器,然后进入我要想要传递的文件的目录下,从当前的目录下进入cmd 然后通过Python解释器输入 python -m htt ...

  6. 多线程应用-函数方式（thread）

    多线程只能使用一颗CPU,无法发挥多核心的优势.计算密集型用python的多线程效果不明显的,I/O密集型才能看出效果,可以发挥多核优势. GIL是全局资源锁,所以,如果没有涉及到资源的调用,是不会体 ...

  7. Linux 新建用户和组命令

    用户的角色是通过UID和GID识别的. UID用户ID:相当于各为的身份证,在系统中是唯一的 GID组ID:相当于各为的家庭或者你们的学校. 1.新建用户及设置密码命令如下: useradd [参数] ...

  8. Z ：彻底了解指针数组，数组指针以及函数指针 [复

    原创 :彻底了解指针数组,数组指针以及函数指针 [复制链接] 00 roking 白手起家 帖子 60 主题 16 精华 0 可用积分 74 专家积分 0 在线时间 0 小时 注册时间 2003-10 ...

  9. 全局变量是列表list 的改变, 竟然在局部,用append 就可以了..... 不用global sth...

    lst = ["麻花藤", "刘嘉玲", "詹姆斯"]def func(): lst.append("⻢云云") # 对 ...

  10. EF 实体类的制定属性不生成数据库字段

    添加一个标签即可 [NotMapped] 没什么营养,就是防忘记