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中map函数的两种方式
Apr 07 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
详解jquery和vue对比
Apr 16 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
python pandas生成时间列表
2019/06/29 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
JPA的优势都有哪些
2013/07/04 面试题
设计师求职信
2014/07/01 职场文书
前台接待岗位职责
2015/02/03 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android