<!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. 从Azure上构建Linux应用程序映像

    下图描述了总体的虚拟机的VHD映像生成以及发布到 Azure Azure 镜像市场的全过程: 具体步骤如下: 从Azure管理平台上Linux申请虚拟机, 安装和配置您要发布的应用软件产品,制作成映像 ...

  2. Django之模型注册

    接着上一篇:Django之创建项目 目的:一个空项目创建好了,我们在models.py中新增3张表并在admin界面中显示,并能操作它们. 示例models 编辑models.py # -*- cod ...

  3. Spring MVC 常用Jar包

    spring:http://maven.springframework.org/release/org/springframework/spring/ jackson:http://repo1.mav ...

  4. 如何打包ipa文件

    如何打包ipa文件 1. 新建一个工程 // // RootViewController.m // YouXianMing // // Copyright (c) 2014年 Y.X. All rig ...

  5. ELK搭建实时日志分析平台之二Logstash和Kibana搭建

    本文书接前回<ELK搭建实时日志分析平台之一ElasticSearch> 文:铁乐与猫 四.安装Logstash logstash是一个数据分析软件,主要目的是分析log日志. 1)下载和 ...

  6. 转贴：C语言链表基本操作

    http://www.oschina.net/code/snippet_252667_27314#comments 这个代码有很多错误,估计是从老谭书上抄来但是很多还抄错了:对照老谭的书好好研究下.切 ...

  7. 第二次作业 APP分析

    第一部分 调研, 评测 1.下载软件并使用. 今天我要分析的软件app是UC浏览器这个软件,UC浏览器的用户群体还是挺多的,作为一款主流之一的浏览器APP,整体的用户体验还是很好的.简洁的界面还有中间 ...

  8. Center OS 7 /etc/rc.d/init.d/network, status=6

    service network restart 报错 Center OS 7 /etc/rc.d/init.d/network status=6 google上找到答案: Just in case a ...

  9. PostgreSQL学习----模式schema

    PostgreSQL学习---模式schema 小序 接触PostgreSQL也有好长时间了,知识不总结梳理,似乎总不是自己的,继续努力吧少年!以此记录我的软件工艺之路! 模式(Schema) 一个 ...

  10. 说说Javac

    Java语言有Java语言的规范,,这个规范详细描述了Java语言有哪些词法.语法,而Java虚拟机也有其Java虚拟机的规范,同样Java虚拟机的规范和Java语言规范并不一样,它们都有自己的词法和 ...