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


Posted in jQuery onSeptember 18, 2017

本文实例为大家分享了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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
jQuery plugin animsition使用小结
Sep 14 #jQuery
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
You might like
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
php设计模式小结
2013/02/15 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
js实现烟花特效
2020/03/02 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python检查ping终端的方法
2019/01/26 Python
Python流程控制语句的深入讲解
2020/06/15 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
后勤园长自我鉴定
2013/10/17 职场文书
教师专业理论水平的自我评价分享
2013/11/09 职场文书
班级课外活动总结
2014/07/09 职场文书
公司外出活动方案
2014/08/14 职场文书
地方白酒代理协议书
2014/10/25 职场文书
单位介绍信格式
2015/01/31 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
体育委员竞选稿
2015/11/21 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL