JQuery笔记选择器

id选择器（id选择器为常用的选择器）

需求描述：选择页面中所有id为btn的按钮，设置其背景为红色

<button>按钮1</button>
<button id="btn">按钮2</button>
<button>按钮3</button>

$('#btn').css('background', 'red');

 2.1.2、层级选择器

2.1.2.1、子代选择器

需求描述：选择ul下的所有span子元素，设置其背景为红色

<ul>
    <span>我是ul的span1</span>
    <li>我是li1 <span>我是li1的span1</span></li>
    <li>我是li2 <span>我是li2的span2</span></li>
    <li>我是li3 <span>我是li3的span3</span></li>
    <span>我是ul的span2</span>
</ul>
$('ul>span').css('background', 'red');

 2.1.2.2、后代选择器

需求描述：选择ul下的所有span元素，设置其背景为红色

$('ul span').css('background', 'red');

2.1.2.3、兄弟选择器

需求描述：选中id为box的下一个兄弟li，设置其背景为红色

$('#box+li').css('background', 'red');

 需求描述：选中id为box的后边的兄弟li，设置其背景为红色

$('#box~li').css('background', 'red');

2.1.3、过滤选择器

2.1.3.1、基本筛选器

需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行

<table cellspacing="0px" cellpadding="10px" border="1px">
    <tr><td>张三</td><td>男</td><td>21</td></tr>
    <tr><td>李四</td><td>女</td><td>22</td></tr>
    <tr><td>王五</td><td>男</td><td>23</td></tr>
    <tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>

$('tr:even').css('background', 'red');

 需求描述：实现隔行变色，让表格的偶数行的背景变为红色，:odd代表选取下标为奇数的行

$('tr:odd').css('background', 'red');

 实现让表格的第一行的背景变为红色

$('tr:first').css('background', 'red');

实现让表格的最后一行的背景变为红色

$('tr:last').css('background', 'red');

实现让下标（从0开始）小于2的行数的背景变为红色

$('tr:lt(2)').css('background', 'red');

 实现让下标（从0开始）大于2的行数的背景变为红色

$('tr:gt(2)').css('background', 'red');

实现让下标（从0开始）等于2的行数的背景变为红色

$('tr:eq(2)').css('background', 'red');

实现让下标（从0开始）不等于2的行数的背景变为红色

$('tr:not(tr:eq(2))').css('background', 'red');

2.1.3.5、子元素筛选器
需求描述：选择所有父级元素ul下的第一个子元素li，设置其背景为红色

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>
$('ul li:first-child').css('background', 'red');

需求描述：选择所有父级元素ul下的最后一个子元素li，设置其背景为红色

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>
$('ul li:last-child').css('background', 'red');

需求描述：选择所有父级元素ul下的第二个子元素li，设置其背景为红色

<ul>
    <li>我是列表项1</li>
    <li>我是列表项2</li>
    <li>我是列表项3</li>
    <li>我是列表项4</li>
</ul>
$('ul li:nth-child(2)').css('background', 'red');