jQuery_子元素过滤|学习笔记

开发者学堂课程【jQuery 开发教程：jQuery_子元素过滤】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/362/detail/4279

jQuery_子元素过滤

1.:first-child selector

• 描述︰选择所有父级元素下的第一个子元素。
• 语法:jQuery( ":first-child" )
• 举例：新创建一个 firstchild 文件，写入标签并复制几个，之后把 div 也复制几个：

<div>
<span>s1</ span>
<span>s1< / span>
<span>s1</ span>
< / div>
<div>
<span>s1< / span>
<span>s1</ span>
<span>s1< / span>
</div>
<div>
<span>s1< / span>
<span>s1</span>
<span>s1</ span>
</ div>

给每一个匹配的<div>中第一个<span>标签添加样式。

首先引入 jQuery文件：

<script src="jquery-2.2.1.min.js"> < /script>

查找到每个<div>中第一个标签加入样式，当鼠标悬停时给当前对象添加类：

<script>
$ ( function()i
$("div span:first-child").css("text-decoration" , "underline").hover(function(){
$ (this).addclass( "sogreen") ；

当鼠标移开时，类也移除掉：

,function(){
$ (this).removeclass ( "sogreen");});

然后添加上这个类让它背景颜色为绿色：

<style>
.sogreen{
background-color: green;
}
< /style>

执行每一个div里的 第一个 span 标签都有一个下划线，鼠标悬停背景颜色变为绿色，移开消失。

2、:last-child selector

• 描述∶选择所有父级元素下的最后一个子元素。
• 语法:jQuery( ":last-child" )

3、:first-of-type Selector

• 描述︰选择所有相同的元素名称的第一个兄弟元素。
• 语法:jQuery( ".first-of-type")

4、:last-of-type Selector

• 描述∶选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
• 语法:jQuery( ":last-of-type" )

5、:nth-child( )Selector

• 描述∶选择的他们所有父元素的第n个子元素。
• 语法:jQuery( ":nth-child(index/even/odd/equation)" )