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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实时统计输入框字数及限制
Jun 24 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
上传多个文件的PHP脚本
2006/11/26 PHP
discuz安全提问算法
2007/06/06 PHP
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP分页类集锦
2014/11/18 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
npm qs模块使用详解
2020/02/07 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python中的各种装饰器详解
2015/04/11 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python绘制多个曲线的折线图
2020/03/23 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
django中使用POST方法获取POST数据
2019/08/20 Python
pygame实现非图片按钮效果
2019/10/29 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
用 python 进行微信好友信息分析
2020/11/28 Python
教师自我鉴定
2013/12/13 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
演讲稿格式范文
2014/05/19 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技