<!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. Jboss的jmx-console中查看内存和线程状态

    步骤: 1.假设jboss运行在 192.168.1.100:8080 地址和端口上. 2. 浏览器中访问http://192.168.1.100:8080/,然后选择jmx-console 3.选择 ...

  2. 动画隐藏UITabBarController与UINavigationController

    动画隐藏UITabBarController与UINavigationController 效果图: 源码: AppDelegate.m // // AppDelegate.m // HideTabb ...

  3. layer的alert图

    layer.alert("xxx",1); 1 2 3 4 5 6 7 8 9 10 11   12 13 14 15 16 17 及以后

  4. C++ Circle

    作业链接 https://github.com/How-Come/object-oriented/tree/master/Circle

  5. SAP 前端技术的演化史简介

    Jerry之前曾经写过一篇微信公众号文章,题目叫<> 关注我的公号"汪子熙"后,在历史菜单"前端开发相关"里即可找到这篇文章: 该文章简单回顾了SA ...

  6. 跟我一起阅读Java源代码之HashMap（一）

    最近闲的很,想和大家一起学习并讨论下Java的一些源代码以及其实现的数据结构, 不是什么高水平的东西,有兴趣的随便看看 1. 为什么要用Map,以HashMap为例 很多时候我们有这样的需求,我们需要 ...

  7. Python学习之路 （一）开发环境搭建

    前言 python3应该是Python的趋势所在,当然目前争议也比较大,这篇随笔的主要目的是记录在centos6.7下搭建python3环境的过程 以及碰到的问题和解决过程. 另外,如果本机安装了py ...

  8. NSPredicate的使用

    简述 NSPredicate谓词条件过滤器,一般用于过滤数组数据,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取. 常用函数 创建谓词 + (NSPredicate *)predic ...

  9. 基于AppDomain的"插件式"开发

    很多时候,我们都想使用(开发)USB式(热插拔)的应用,例如,开发一个WinForm应用,并且这个WinForm应用能允许开发人员定制扩展插件,又例如,我们可能维护着一个WinService管理系统, ...

  10. 使用ROS节点——Node & Master——roscore、rosrun、rosnode

    1.Node 在ROS的世界里, 最小的进程单元就是节点( node) . 一个软件包里可以有多个可执行文件, 可执行文件在运行之后就成了一个进程(process), 这个进程在ROS中就叫做节点. ...