选择器
在学习css的时候为了给元素设置样式，首先要通过选择器找到元素。或者说在原生的DOM中，也是要通过queryselector锁定选择器。
jQuery中也是一样，想要操控某个元素，就要先找到要这个元素。所以使用jQuery的基础，就是要先会使用选择器。
语法：
$('选择器')
示例：
<h3>hello <span> world</span></h3>
<p>aaaa</p>
<p class="p">bbbb <span> ccc </span></p>
<p id="p"> ddddd </p>
<script>
// 1. 标签选择器
$('p').css('backgroundColor', 'pink')
// 2. 类选择器
$('.p').css('backgroundColor', 'skyblue')
// 3. id选择器
$('#p').css('backgroundColor', 'orange')
// 4. 后代选择器
$('p span').css('backgroundColor', 'green')
</script>
拿到选择器后，可以通过.css方法控制其CSS样式。
输出结果：
要注意的是，此处通过$()拿到的对象，是一个jQuery对象，而不是一个DOM对象，不能使用原生的DOM方法来修改CSS样式。
测试一下原生DOM对象和jQuery对象的区别：
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jQuery</li>
</ul>
<script>
let li = document.querySelector('li')
console.log('li:', li)
let $li = $('li')
console.log('$li:', $li)
</script>
输出结果：
可以看到，原生的DOM对象，只选中了第一个li。而jQuery对象选中了所有的li标签。如果对于原生的DOM想要修改所有的li对象，那就需要queryselectall拿到一个数组，然后遍历整个数组。
但是对于jQuery，默认就是选中所有符合条件的标签，直接.css就可以修改所有的样式。
对于jQuery对象，可以看到其方法都在[prototype]，也就是原型里面，这里面就包含了.css方法，可以修改样式。
另外的，原生DOM对象可以转化为jQuery对象：
$(DOM对象)
示例：
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jQuery</li>
</ul>
<script>
let li = document.querySelector('li')
let $li1 = $('li')
let $li2 = $(li)
$li1.css('backgroundColor', 'pink')
$li2.css('backgroundColor', 'skyblue')
</script>
此处$li1这个对象，是通过选择器选中"li"标签，拿到的对象。而li2则是通过元素的DOM对象li转化而来。
输出结果：
由于原生的DOM对象只选中一个标签，所以最后只有第一个li被覆盖为了蓝色。
如果想要拿到window的jQuery对象，由于window本身就是一个DOM对象，所以可以直接转化：
$(window)
要注意这里没有引号，window表示一个对象。
过滤方法
在CSS中，可以通过伪类元素来选择一些符合要求的元素，比如first-child、last-child等。
想要在jQuery中进行类似的筛选，当然可以在$(选择器)内部使用伪类选择器，但是jQuery提供了更方便的方法：
// 第一个元素
jQuery对象.first()
// 最后一个元素
jQuery对象.last()
// 根据索引选择元素
jQuery对象.eq(索引)
示例：
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jQuery</li>
<li>java</li>
</ul>
<script>
$('li').first().css('backgroundColor', 'pink')
$('li').last().css('backgroundColor', 'gold')
$('li').eq(1).css('backgroundColor', 'skyblue')
</script>
输出结果：
这样就完成了选中第一个元素，最后一个元素，以及下标为1的元素。
查找方法
html的标签嵌套往往会非常复杂，简单的$("选择器")未必可以处理好元素的选择，为此jQuery提供了更加全面的方法，来完成元素的查找。
// 获取父元素
jQuery对象.parent()
// 获取子元素
jQuery对象.children()
jQuery对象.children("选择器")
// 获取兄弟元素
jQuery对象.siblings()
jQuery对象.siblings("选择器")
// 获取后代元素
jQuery对象.find("选择器")
对于一个标签，它可能会存在很多的兄弟元素和子元素，如果不传选择器，那么就会拿到所有的子元素或兄弟元素。
最后一个find用于查找后代元素，注意后代元素与子元素的区别，后代元素范围比子元素广很多。因此查找后代元素必须传入选择器，不支持一次性拿到所有后代元素。
示例：
<div class="container">
<h4>list_A</h4>
<ul class="A">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<h4>list_B</h4>
<ul class="B">
<li class="11">11</li>
<li class="22">22</li>
<li class="33">33</li>
<li class="44">44</li>
</ul>
</div>
现有如上标签嵌套结构。
$('.A').parent().css('backgroundColor', 'skyblue')
这句代码就是拿到A的父元素，也就是container，将其背景改为蓝色：
$('.A').children().css('backgroundColor', 'skyblue')
$('.B').children('.22').css('backgroundColor', 'pink')
以上代码则是拿到A的所有子元素，修饰为蓝色，而B的类名为.22子元素修饰为粉色：
A的三个子元素li都被修饰为了蓝色背景，可以看出不传参数的children是一次性拿到所有子元素的。
$('.22').siblings().css('backgroundColor', 'skyblue')
以上代码则是把22的所有兄弟元素，背景修饰为蓝色：
要注意的是，22本身不属于自己的兄弟。