1、表格代码如下:

<table id="table">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
</tr>
</table>

2、表格显示如下:

id name
1 aaa
2 bbb
3 ccc

3、分析first和first-child

过滤选择器first

首先找到id为t2的元素,再查找下面的子元素tr,从第一个tr元素开始查找子元素:第一个td,找到以后停止

$("#t2 tr td:first").css("background","red");

子元素过滤选择器first-child

首先找到id为t2的元素,再查找下面的子元素tr,然后查找每一个tr下边的第一个td元素。

$("#t2 tr td:first-child").css("background","red");

过滤选择器first与子元素过滤选择器first-child的区别的更多相关文章

  1. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  2. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  3. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

  4. jquery 子元素筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  5. jQuery选择器(子元素过滤选择器)第七节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. jquery子元素过滤选择器

    :nth-child('索引值')//获取指定元素下的某个子元素的位置,索引从1开始: //偶数行                 //$('li:nth-child(even)').addClass ...

  7. 008 jquery过滤选择器-----------(子元素过滤选择器)

    1.介紹 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. jQuery中的子(后代)元素过滤选择器(四、六):nth-child()、first-child、last-child、only-child

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

随机推荐

  1. 四则运算法则在Java中的实现

    软件工程的课程已经上过有一段时间了,前段时间由于比较忙着考试,所以关于四则运算的代码一直没有实现.同时由于近来一段时间一直在自学java,因为C++虽然也是面向对象,而且可以开发很多软件或者程序,但是 ...

  2. mysql外键关联

    主键:是唯一标识一条记录,不能有重复的,不允许为空,用来保证数据完整性 外键:是另一表的主键, 外键可以有重复的, 可以是空值,用来和其他表建立联系用的.所以说,如果谈到了外键,一定是至少涉及到两张表 ...

  3. PAT 1071 小赌怡情

    https://pintia.cn/problem-sets/994805260223102976/problems/994805264312549376 常言道“小赌怡情”.这是一个很简单的小游戏: ...

  4. Essential Netty in Action 《Netty 实战(精髓)》读书笔记一

    NIO 最初是为 New Input/Output 的缩写.然而,Java 的 API 已经存在足够长的时间,它不再是新的.现在普遍使用的缩写来表示Nonblocking I/O (非阻塞 I/O). ...

  5. about use Vue of methods

    methods 处理事件 methods 在vue中处理一些逻辑方面的事情.vue事件监听的方式看上去有点违背分离的传统观念.而实际上vue中所有事件的处理方式和表达式都是严格绑定在当前的视图的vie ...

  6. 如何使用grep 等命令快速的在日志中找到自己需要的内容

    虽然使用linux也有好几年了,但是服务器端开发的活儿正经来算才干不到一年. 一直没有需求和机会会去花大量的时间排查日志啥的,直到我摊上了大事t t,写的代码在线上出了bug需要排查问题. grep可 ...

  7. C# 8小特性

    对于C# 8,有吸引了大多数注意力的重大特性,如默认接口方法和可空引用,也有许多小特性被考虑在内.本文将介绍几例可能加入C#未来版本的小特性. 新的赋值运算符:&&=和||= 从第一个 ...

  8. 13函数式编程&Stream流

    13.1常用的函数式接口总结   接口名称 方法名称 抽象/默认  延迟/终结 方法描述 Supplier get 抽象 终结 供给型接口,无参有返回值,主要用于 Consumer accept 抽象 ...

  9. Django-website 程序案例系列-3 URL详解

    django参考资料:http://docs.30c.org/djangobook2/index.html urls.py是django中控制接收前端的参数指定函数去执行逻辑 第一种 函数的方式 ur ...

  10. Codeforces ECR47F Dominant Indices(线段树合并)

    一个比较显然的做法:对每棵子树用线段树维护其中的深度,线段树合并即可. 本来想用这个题学一下dsu on tree,结果还是弃疗了. #include<iostream> #include ...