jquery 选择器 :first-child

最新推荐文章于 2020-05-17 17:00:45 发布
最新推荐文章于 2020-05-17 17:00:45 发布
阅读量90 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery CSS HTML ViewUI

:first-child

匹配集合中子集合的第一个元素。返回匹配元素集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("div span:first-child")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("sogreen");
            }, function () {
              $(this).removeClass("sogreen");
            });

  });
  </script>
  <style>
  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
  </style>
</head>
<body>
  <div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>
  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div>
</body>
</html>

 

$("div span:first-child")
将匹配div中包含span元素的span元素集合中的第一个span元素（子集中的第一个）。以下为匹配元素集合

<span>John,</span>
<span>Glen,</span>

iteye_2604
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery过滤选择器first/last child, nth-child(n)失效的问题
anmian123hyl的博客
06-01 634
笔者最近碰到一个如题的问题,记录如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jQuery的函数库--> <script src="js/jquery-3.4.1.js"></script> </head> <b
jQuery--选择器
zxn200125的博客
12-06 252
jQuery中常用选择器的介绍以及演示
JQuery中有关first的选择器
easywild的博客
09-02 823
JQuery中有关first的选择器分别有以下几类： -1. $(“p:child”) 表示某个元素的子元素中的第一个p元素被选取$("p:child")<h1>第一行</h1> <p>第二行</p> <a>第三行</a><div style="border:1px solid;"> <span>第四行</span> <p>第五行</p> <p>第六行</p>
JQuery之了解其选择器
weixin_45846241的博客
05-17 229
一、基本分类 JQuery选择器大致可以分为两类，基本选择器和过滤选择器，结构体系如下： 基本选择器 1.$(“#demo”): 选择 id为demo的第一个元素 $("#demo").css('background','black") //有多个只选择第一个 2.$(“.item”) : 选择所有class为item的元素 $(".item").css('background','black") 3.$(‘div’) : 选择所有标签为div的元素 $('div') .css('backg
jquery获取span标签下的第一个span子标签内容
热门推荐
csdn_zsdf的博客
07-12 1万+
看了几本jquery的书之后，觉得对jQuery的dom操作部分应该是比较熟悉了，但是当正式用到的时候又忽然觉得什么也不知道，还得上网来搜，遇到的问题就是获取span标签下的第一个span标签中的内容。如<p class = "local"> <span> <span>西安</span> <span>(xian)</span> </span> </p>
UISegmentedControl-IOS开发
Tyler的专栏
06-12 2125
初始化UISegmentedControl NSArray *arr = [[NSArray alloc]initWithObjects:@"轻拍",@"长按",@"清扫",@"旋转",@"捏合",@"拖拽", nil]; //先创建一个数组用于设置标题  UISegmentedControl *segment = [[UISegmentedControl alloc]initWit
6.:first-child子元素过滤选择器
weixin_34138521的博客
03-10 113
通过上面章节的学习，我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。 如下图，如果想把页面中每个ul中的第一个li获取到，并改变其颜色。则可以使用 : first-child 在浏览器中显示的效果...
浅谈jquery选择器 :first与:first-child的区别
10-21
`:first`选择器是jQuery的一个特殊选择器，它会选取匹配该选择器的元素集合中的第一个元素。例如，当使用`$('ul li:first')`时，它会选择所有`ul`元素下的第一个`li`元素，这里的结果是`John`所在的`li`。`:first`并...
jQuery中:first-child选择器用法实例
10-24
在jQuery中，`:first-child`选择器是一种非常实用的定位元素的方法，它允许开发者精确地选取父元素下的第一个子元素。这个选择器是基于CSS选择器标准，因此不仅在jQuery中，也在纯CSS中同样可用。`:first-child`选择...
jQuery中:last-child选择器用法实例
10-24
在jQuery中，`:last-child`选择器是一种非常实用的...通过熟练掌握`:last-child`以及其他类似的选择器，如`:first-child`、`:nth-child(n)`等，你可以编写出更加优雅和高效的jQuery代码，提高网页的交互性和用户体验。
基于Cocos Creator 3.x开发的Excel转Json格式的插件，同时会根据表格中的字段生成数据结构TypeScr代码
最新发布
08-16
oops-plugin-excel-to-json 是基于 Cocos Creator 3.x 开发的Excel转Json格式的插件，同时会根据表格中的字段生成数据结构TypeScript代码
FIJKPlayer-简介
08-16
FIJKPlayer-简介
vue+cesium+heatmap实现全球热力图
08-16
vue+cesium+heatmap实现全球热力图
印象笔记旧版本Evernote-6.22.36.3870.exe
08-16
这个版本还是不错，没有广告，支持多个账号添加同时打开使用。也能专注于笔记内容，列表和菜单栏都可以调节较小，内容窗口编辑界面也可以调节很大。
S2101型即热饮水机实绘电路图.rar
08-16
S2101型即热饮水机实绘电路图
论《琅琊榜》中梅长苏的人物形象.docx
08-16
论《琅琊榜》中梅长苏的人物形象.docx
基于springboot的智慧图书管理系统 源码+数据库（毕业设计）
08-16
基于Vue.js和SpringBoot的智慧图书管理系统是一个高效、易用的图书管理解决方案，它分为用户前台和管理后台两个部分，以满足不同角色的需求。用户前台主要面向普通用户，提供资料信息浏览、公告信息查看、论坛交流等功能，使用户能够方便地获取所需信息并参与社区互动。管理后台则为管理员提供了全面的图书管理功能，包括资料信息的增删改查、公告信息的发布与编辑、论坛管理以及资料类型的分类与维护等。整个系统采用现代化的前后端分离架构，前端使用Vue.js框架实现动态交互和数据展示，后端则基于SpringBoot框架提供稳定、高效的数据处理和业务逻辑支持，确保系统的高性能和可扩展性。 录屏：https://www.bilibili.com/video/BV18f421U7GG 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
基于springboot的相亲网站 源码+数据库（毕业设计）
08-16
基于Vue.js和SpringBoot的相亲网站是一个功能丰富的在线平台，旨在为用户提供一个便捷、高效的相亲体验。该网站分为用户前台和管理后台两个部分，分别针对不同角色的用户，如管理员和普通用户。用户前台提供了婚礼公司模块、结婚案例模块和相亲管理模块，方便用户浏览和选择适合自己的服务。婚礼公司模块展示了合作的婚礼公司信息，包括公司介绍、服务项目和联系方式等；结婚案例模块则展示了一些成功的结婚案例，供用户参考和借鉴；相亲管理模块则为用户提供了发布相亲信息、搜索和筛选相亲对象等功能。管理后台则为管理员提供了对网站内容和用户信息的管理功能，包括用户管理、内容审核、数据统计等，以确保网站的正常运行和用户信息的安全。整个网站采用了现代化的前端技术Vue.js和后端框架SpringBoot，保证了网站的高性能和良好的用户体验。 录屏：https://www.bilibili.com/video/BV1xC411j7p5 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
table { border-collapse: collapse; margin: 15px; background-image: url('img/4.jpg'); background-size:800px; background-color: rgba(255, 255, 255, 0.8); font-family: Arial, sans-serif;/*字体*/ font-size: 15px; color: #333; } caption { font-size: 24px; font-weight: bold;/*粗字体，bold加粗*/ color: #666; } /*th、td的首个子元素的指定选择器*/ th:first-child, td:first-child { background-color: #eee; font-weight: bold; text-align: center; color:#3081AD; padding: 10px; } th, td { border: 1px solid #2DBA6A; padding: 10px; } td:empty { background-color: #f5f5f5; } 转换成jQuery css设置
05-10
$('table').css({ 'border-collapse': 'collapse', 'margin': '15px', 'background-image': 'url(\'img/4.jpg\')', 'background-size': '800px', 'background-color': 'rgba(255, 255, 255, 0.8)', 'font-family': 'Arial, sans-serif', 'font-size': '15px', 'color': '#333' }); $('caption').css({ 'font-size': '24px', 'font-weight': 'bold', 'color': '#666' }); $('th:first-child, td:first-child').css({ 'background-color': '#eee', 'font-weight': 'bold', 'text-align': 'center', 'color': '#3081AD', 'padding': '10px' }); $('th, td').css({ 'border': '1px solid #2DBA6A', 'padding': '10px' }); $('td:empty').css({ 'background-color': '#f5f5f5' });
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值