HTML代码：

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

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

　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <!--HTML区域-->
  9.     <h1>第一个标题</h1>
  10.     <div class="nav-2014">
  11.         <div class="w">
  12.             <div class="w-spacer"></div>
  13.             <div class="categorys">
  14.                 <div class="dt">家用电器分类</div>
  15.                 <div class="dp">家用电器价格</div>
  16.             </div>
  17.             <span class="hr"></span>
  18.             <div class="navitems-2014">
  19.                 <div id="treasure"></div>
  20.                 <span class="clr"></span>
  21.                 <span class="chr"></span>
  22.                 男：<input type="checkbox" checked="checked" value="nan">
  23.                 女:<input type="checkbox" value="nv">
  24.             </div>
  25.         </div>
  26.     </div>
  27.     <h2>第二个标题</h2>
  28.     <div id="electronic">
  29.         <div id="firstScreen">1
  30.             <div class="w">2</div>
  31.         </div>
  32.         <ul>
  33.             <li class="ui-switch-curr">第一</li>
  34.             <li class="ui-switch-item"></li>
  35.             <li class="ui-switch-next">第三</li>
  36.             <li class="ui-switch-sub">第四</li>
  37.         </ul>
  38.         <ul>
  39.             <li class="lizi">梨</li>
  40.             <li class="pingguo">苹果</li>
  41.         </ul>
  42.         <div class="secord_screen">
  43.             <div></div>
  44.         </div>
  45.         <div class="third_screen"></div>
  46.     </div>
  47. </body>
  48. </html>

　　jquery区

  1.     <script src="jquery-3.1.0.js"></script>
  2.     <script>
  3. //        获取每个ul下的第一个li元素
  4.         $("ul li:first-child")
  5. //        获取每个ul下的最后一个li元素
  6.         $("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. ubuntu如何卸载apt-get install安装的软件

    1.sudo apt-get remove xxxxx  sudo apt-get autoremove2.对于用命令sudo aptitude install xxx安装的软件可以用sudo apt ...

  2. jquery获取(设置)节点的属性与属性值

    1. attr(属性名)        //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2 ...

  3. tiny_cnn代码阅读(2)

    上一篇讲了mse函数 , 这次gradient_descent_levenberg_marquardt @see ${root}/tiny_cnn/optimizer/optimizer.h 这个函数 ...

  4. 【转】浅析python 中__name__ = '__main__' 的作用

    原文链接:http://www.jb51.net/article/51892.htm 举例说明解释的非常清楚,应该是看到的类似博文里面最简单的一篇: 这篇文章主要介绍了python 中__name__ ...

  5. linux 基本命令操作

    1.ls 命令 ls -a  列出所有文件,包括隐藏文件 ls -l  列出文件详细信息 ls -r 列出所有文件包括文件夹 查询具体文件可以在命令后面加  |grep 要匹配的字符串,方便我们查找, ...

  6. 史上最全的RunLoop介绍

    之前有人在后台给小编留言,说:小编啥时候给我们分享RunLoop的一些文章,工作以后特别需要这样的技术.这不,小编从网上找了一个介绍非常详细,清晰的文章,仅供参考. RunLoop 是 iOS 和 O ...

  7. Nullable<>

    Nullable<>是一个结构,但是怎么能让此结构=null,这是编译器的一个比较特殊的,他会new一个该结构的实例去赋值.Nullable<>有一个属性是HasValue,是 ...

  8. VS2012 快捷键

    注释: Ctrl+K+C 反注释: Ctrl+K+U 折叠代码: Ctrl+M+O   展开代码: Ctrl+M+L 在文件中查找: Ctrl+Shift+F 选 EntireSolution 删除行 ...

  9. error: C++ preprocessor "/lib/cpp" fails sanity check

    在安装protobuf,知悉./Configure时候报错“error: C++ preprocessor "/lib/cpp" fails sanity check” 下面是转载 ...

  10. win7下用python3.3获取cable modem的设备信息

    毕业一年多了,一直做cable modem的测试,总是觉得在国内这一行的人才很少,想找个师傅真的很不容易. 苦闷了许久之后,终于决定,自己去写点东西,万一就找到同行了呢? 下面就是本小姐写的第一篇博客 ...