HTML代码：

　　:first-child 匹配第一个子元素，每个父元素的第一个子元素

　　:last-child 匹配最后一个子元素，每个父元素的最后一个子元素

　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--HTML区域-->

    <h1>第一个标题</h1>

    <div class="nav-2014">

        <div class="w">

            <div class="w-spacer"></div>

            <div class="categorys">

                <div class="dt">家用电器分类</div>

                <div class="dp">家用电器价格</div>

            </div>

            <span class="hr"></span>

            <div class="navitems-2014">

                <div id="treasure"></div>

                <span class="clr"></span>

                <span class="chr"></span>

                男：<input type="checkbox" checked="checked" value="nan">

                女:<input type="checkbox" value="nv">

            </div>

        </div>

    </div>

    <h2>第二个标题</h2>

    <div id="electronic">

        <div id="firstScreen">1

            <div class="w">2</div>

        </div>

        <ul>

            <li class="ui-switch-curr">第一</li>

            <li class="ui-switch-item"></li>

            <li class="ui-switch-next">第三</li>

            <li class="ui-switch-sub">第四</li>

        </ul>

        <ul>

            <li class="lizi">梨</li>

            <li class="pingguo">苹果</li>

        </ul>

        <div class="secord_screen">

            <div></div>

        </div>

        <div class="third_screen"></div>

    </div>

</body>

</html>

　　jquery区

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

    <script>

//        获取每个ul下的第一个li元素

        $("ul li:first-child")

//        获取每个ul下的最后一个li元素

        $("ul li:last-child")

　　

　

jquery选择器之子元素的更多相关文章

  1. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  2. jQuery选择器之子元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  3. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  4. css 选择器之子元素

    /*html*/ <div class="wrap"> <span>1</span> <span>2</span> &l ...

  5. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. jquery如何阻止子元素相应mouseout事件

    jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...

  7. jquery选择器之获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素 2.nextAll([expr]) ...

  8. jQuery选择器之表单元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  9. jQuery选择器之元素选择器

    元素选择器:根据给定(html)标记名称选择所有的元素. 描述: $('element') 搜索指定元素标签名的所有节点,这是一个合集的操作.同样的也有原生方法getElementsByTagName ...

随机推荐

  1. Python之路 day2 字符串函数

    #Author:ersa name = "ersa" #首字母大写capitalize() print(name.capitalize()) name = "my nam ...

  2. linux文件复制与权限赋值

    文件file内容赋值到file2中 1. cp  file1  file2 2. cat file1 > file2 3. cat < file1 > file2 4. dd if= ...

  3. 2014-07-29 Asp.Net 中级工程师 笔试题

    一.选择题    1.下列描述错误的是() A  类不可以被多重继承而接口可以: B  抽象类自身可以定义成员而接口不可以: C  抽象类和接口都不能被实例化: D   一个类可以继承多个基类和多个基 ...

  4. NodeJS利用mongoose模糊查询MongoDB

    在Node.js中,直接硬编码可以 Posts.where('title',/答案/); 但是 通过 字符串构造 不行 var qs = '/'+req.query.search+'/'; Posts ...

  5. iOS开发拓展篇—UIDynamic(重力行为+碰撞检测)

    iOS开发拓展篇—UIDynamic(重力行为+碰撞检测) 一.重力行为 说明:给定重力方向.加速度,让物体朝着重力方向掉落 1.方法 (1)UIGravityBehavior的初始化 - (inst ...

  6. HTTP 错误 500.23 - Internal Server Error 解决方法

    分析原因:在安装完成后IIS已经支持ASP和ASP.NET 2.0,需要注意的是.NET站点的应用程序池应选用Classic .NET AppPool,而不能用默认的DefaultAppPool,否则 ...

  7. SunSonic 3.0 ORM开源框架的学习

    SubSonic 3.0简介 接触到SubSonic3.0 ORM框架是看了AllEmpty大神的从零开始编写自己的C#框架(链接在此)系列的随笔接触到的,本文章学习内容源于AllEmpty大神. S ...

  8. mybaits入门

    1.回顾jdbc开发 orm概述 orm是一种解决持久层对象关系映射的规则,而不是一种具体技术.jdbc/dbutils/springdao,hibernate/springorm,mybaits同属 ...

  9. 使用HTML5+CSS3制作圆角内发光按钮----示例

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

  10. 2、android Service 详细用法

    定义一个服务 在项目中定义一个服务,新建一个ServiceTest项目,然后在这个项目中新增一个名为MyService的类,并让它继承自Service,完成后的代码如下所示: ? 1 2 3 4 5 ...