<!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. 如何修改ionic中android程序的包名

    默认ionic新建工程的时候指定的Android版本包名是:com.ionicframework.starter:这样固定死包名的话会导致一个问题,多个ionic工程无法正常安装到手机当中,后面安装的 ...

  2. [翻译] snapshotViewAfterScreenUpdates

    snapshotViewAfterScreenUpdates This method very efficiently captures the current rendered appearance ...

  3. 外键应用（foreignkey）、多对多

    1.创建model: 定义hv表,保存hv server infors: 定义vm表,保存vm infors: 一个vm只能对应一台hv server:一台hv server可以包含有多台vm cla ...

  4. IP地址分类及CIDR划分方法

    IP地址的分类和表示有三种形式,1.分类的IP地址.2.子网划分.3.无分类编址CIDR 1.分类的IP地址 IP地址:: = {<网络号>,<主机号>} 不同的网络号和主机号 ...

  5. 有效集 matlab代码

    %有效集 function activeset H=[2 -1; -1 4]; c=[-1 -10]'; Ae=[ ]; be=[ ]; Ai=[-3 -2; 1 0; 0 1]; bi=[-6 0 ...

  6. [转] JavaScript生成GUID的算法

    原文地址: http://www.cnblogs.com/snandy/p/3261754.html 全局唯一标识符（GUID，Globally Unique Identifier）也称作 UUID( ...

  7. [咸恩静][Good Bye]

    歌词来源:http://music.163.com/#/song?id=35437298 作曲 : 安英民 [作曲 : 安英民] 作词 : 安英民/로코 [作词 : 安英民/lo-Ko] 나를 떠나버 ...

  8. 1003. [ZJOI2006]物流运输【区间DP+最短路】

    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转 停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严 ...

  9. [USACO08DEC]Patting Heads

    嘟嘟嘟 这题还是比较水的.首先O(n2)模拟显然过不了,那就换一种思路,考虑每一个数对答案的贡献,显然一个数a[i]会对后面的a[i] * 2, a[i] * 3,a[i] * 4……都贡献1,.那么 ...

  10. Linux - 搭建FastDFS分布式文件系统

    1. FastDFS简介 说明:FastDFS简介部分的理论知识全部来自于博主bojiangzhou的 <用FastDFS一步步搭建文件管理系统>,在此感谢博主的无私分享.当然最最要感谢的 ...