jQuery选择器之子元素选择器详解

 更新时间:2017年09月18日 13:50:49   转载 作者:喵嘻嘻  
这篇文章主要为大家详细介绍了jQuery选择器之子元素选择器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery子元素选择器,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>子元素筛选选择器</h2>
  <h3>:first-child、:last-child、:only-child</h3>
  <div class="left first-div">
    <div class="div">
      <a>:first-child</a>
      <a>第二个元素</a>
      <a>:last-child</a>
    </div>
    <div class="div">
      <a>:first-child</a>
    </div>
    <div class="div">
      <a>:first-child</a>
      <a>第二个元素</a>
      <a>:last-child</a>
    </div>
  </div>

  <script type="text/javascript">
    //查找class="first-div"下的第一个a元素
    //针对所有父级下的第一个
    $(".first-div a:first-child").css("color", "#CD00CD");
  </script>

  <script type="text/javascript">
    //查找class="first-div"下的最后一个a元素
    //针对所有父级下的最后一个
    //如果只有一个元素的话,last也是第一个元素
    $(".first-div a:last-child").css("color", "red");
  </script>

  <script type="text/javascript">
    //查找class="first-div"下的只有一个子元素的a元素
    $(".first-div a:only-child").css("color", "blue");
  </script>


  <h3>:nth-child、:nth-last-child</h3>
  <div class="left last-div">
    <div class="div">
      <a>:first-child</a>
      <a>第二个元素</a>
      <a>第三个元素</a>
      <a>:last-child</a>
    </div>
    <div class="div">
      <a>:first-child</a>
      <a>第二个元素</a>
    </div>
    <div class="div">
      <a>:first-child</a>
      <a>第二个元素</a>
      <a>第三个元素</a>
      <a>:last-child</a>
    </div>
  </div>

  <script type="text/javascript">
    //查找class="last-div"下的第二个a元素
    $(".last-div a:nth-child(2)").css("color", "#CD00CD");
  </script>

  <script type="text/javascript">
    //查找class="last-div"下的倒数第二个a元素
    $(".last-div a:nth-last-child(2)").css("color", "red");
  </script>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • jquery实现用户打分评分特效

    jquery实现用户打分评分特效

    很多网站都应用了评分效果,让用户可以对正在浏览的文章、电影、资源等进行评分,让网站增添了几分互动效果。本文将讲解如何使用jQuery来实现评分效果。
    2015-05-05
  • jQuery制作仿腾讯web qq用户体验桌面

    jQuery制作仿腾讯web qq用户体验桌面

    ,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上,感兴趣的朋友可以体验下哈
    2013-08-08
  • 从零学jquery之如何使用回调函数

    从零学jquery之如何使用回调函数

    回调函数指的是被调用者完成处理后自动回调调用者预先传递的函数。
    2014-05-05
  • jquery传参及获取方式(两种方式)

    jquery传参及获取方式(两种方式)

    这篇文章主要介绍了jquery传参及获取方式,本文给大家两种方式,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • jquery中map函数遍历数组用法实例

    jquery中map函数遍历数组用法实例

    这篇文章主要介绍了jquery中map函数遍历数组用法,实例分析了jQuery中map函数遍历数组的相关技巧,并提供了一个自定义遍历数组函数供参考之用,需要的朋友可以参考下
    2015-05-05
  • jQuery validata插件实现方法

    jQuery validata插件实现方法

    下面小编就为大家带来一篇jQuery validata插件实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方

    这篇文章主要介绍了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法,可实现图片拖拽变换的功能,需要的朋友可以参考下
    2015-08-08
  • jQuery事件对象总结

    jQuery事件对象总结

    事件是脚本编程的灵魂,本篇来介绍jQuery中的事件处理及事件对象.这里整理了详细的代码,有需要的小伙伴可以参考下。
    2016-10-10
  • jquery随机展示头像代码

    jquery随机展示头像代码

    通过最终效果发现,当头像处于最前面时,图像最大,透明低。越往后头像就越小,就越透明
    2011-12-12
  • 使用FlexiGrid实现Extjs表格效果方法分享

    使用FlexiGrid实现Extjs表格效果方法分享

    这篇文章主要分享了使用FlexiGrid实现Extjs表格效果方法,非常的实用,这里推荐给有相同需求的小伙伴
    2014-12-12

最新评论