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

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

jQuery_子元素过滤

1.:first-child selector

描述︰选择所有父级元素下的第一个子元素。

语法:jQuery( ":first-child" )

举例：新创建一个 firstchild 文件，写入

标签并复制几个，之后把 div 也复制几个：

​

s1

s1< / span>

s1

< / div>

​

s1< / span>

s1

s1< / span>

​

​

s1< / span>

s1

s1

​

给每一个匹配的

中第一个标签添加样式。

首先引入 jQuery文件：

< /script></span><span class="lake-fontsize-14"></span></div><div data-lake-id="63dc4c442e23ead35539d64e38b3e03a"><span class="lake-fontsize-14">查找到每个<div>中第一个标签加入样式，当鼠标悬停时给当前对象添加类：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="e08c231425624049a2d36c7d9a786c0f"><code><span class="lake-fontsize-14"><script></span></code></div><div data-lake-id="2df771c5d852548ca6a816a99f7974be"><code><span class="lake-fontsize-14">$ ( function()i</span></code></div><div data-lake-id="0eab4f6c11555ef950dad27f0360f4c6"><code><span class="lake-fontsize-14">$("div span:first-child").css("text-decoration" , "underline").hover(function(){</span></code></div><div data-lake-id="47b15917ead38194e6fba28521a11d9b"><code><span class="lake-fontsize-14">$ (this).addclass( "sogreen") ；</span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="c40fe74785b9ed8df60bc0586ddb010d"><span class="lake-fontsize-14">当鼠标移开时，类也移除掉：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="f51805c31239476429e010e5ab17674e"><span class="lake-fontsize-14">,function(){</span><span class="lake-fontsize-14"></span></div><div data-lake-id="42978da377f9e496d4931fb4cef1fa10"><span class="lake-fontsize-14">$ (this).removeclass ( "sogreen");});</span><span class="lake-fontsize-14"></span></div><div data-lake-id="3a83a005fa3395cd400bd1fa4730684d"><span class="lake-fontsize-14">然后添加上这个类让它背景颜色为绿色：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="f7fb14adc715d269795dec6b6dce98b4"><code><span class="lake-fontsize-14"><style></span></code></div><div data-lake-id="a0a427ae76c369a4db0997dec2bb8c59"><code><span class="lake-fontsize-14">.sogreen{</span></code></div><div data-lake-id="9abe0b1c7e1641124875118d46162f1d"><code><span class="lake-fontsize-14">background-color: green;</span></code></div><div data-lake-id="edc612d7858f5728a735a4a5670a80cf"><code><span class="lake-fontsize-14">}</span></code></div><div data-lake-id="f2aaf2d57fdc085eb45c1355e07d868f"><code><span class="lake-fontsize-14">< /style></span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="bd5875b5f1ac9d77c2d43ed461a0e211"><span class="lake-fontsize-14">执行每一个div里的 第一个 span 标签都有一个下划线，鼠标悬停背景颜色变为绿色，移开消失。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="e008815cb10384b28eca72f277e5d88b"><br /></div><div data-lake-id="85d04493dd540ff2f10beed7d0bed52d"><strong><strong>2、:last-child selector</strong></strong><strong><strong></strong></strong></div><div data-lake-id="22322a50836bdac00d95084f510a6bbd"><span class="lake-fontsize-14">描述∶选择所有父级元素下的最后一个子元素。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="60bc0ca1c77b62c63d1c9bf69883c935"><span class="lake-fontsize-14">语法:jQuery( ":last-child" )</span><span class="lake-fontsize-14"></span></div><div data-lake-id="1988b7b8d79f5aba30a4f0caf3daea68"><strong><strong>3、:first-of-type Selector</strong></strong><strong><strong></strong></strong></div><div data-lake-id="2e46aac2b9548b41e3df535fa6bde383"><span class="lake-fontsize-14">描述︰选择所有相同的元素名称的第一个兄弟元素。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="90d62b938e3017f580ca254493ccf276"><span class="lake-fontsize-14">语法:jQuery( ".first-of-type")</span><span class="lake-fontsize-14"></span></div><div data-lake-id="934eada1b87312d4b385ead13daa092e"><strong><strong>4、:last-of-type Selector</strong></strong><strong><strong></strong></strong></div><div data-lake-id="c0e8143ec033c876d084af564e6625b6"><span class="lake-fontsize-14">描述∶选择的所有元素之间具有相同元素名称的最后一个兄弟元素。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="be631b79c07a53b3043085e35cc3577f"><span class="lake-fontsize-14">语法:jQuery( ":last-of-type" )</span><span class="lake-fontsize-14"></span></div><div data-lake-id="e64c12d3a1f1f94e9886920627b5ffc2"><strong><strong>5、:nth-child( )Selector</strong></strong><strong><strong></strong></strong></div><div data-lake-id="56b06d08c9c7bd1c9cd8db10625e0e34"><span class="lake-fontsize-14">描述∶选择的他们所有父元素的第n个子元素。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="26a3df33912ee8fdeefec2d44405f8ce"><span class="lake-fontsize-14">语法:jQuery( ":nth-child(index/even/odd/equation)" )</span><span class="lake-fontsize-14"></span></div><div data-lake-id="38fb560ee0a0c9d5944935c2b7b53afb"><br /></div>

​