jQuery选择器
一、基本选择器(五种)
1. ID选择器：通过元素的ID属性进行选择。
```javascript
console.log($('#box'));
```
2. 类选择器：通过元素的class属性进行选择。
```javascript
console.log($('.box'));
$('.box').css('color', 'red');
```
3. 标签选择器：通过元素的标签名进行选择。
```javascript
console.log($('div'));
```
4. 并集选择器：通过多个选择器同时选中符合条件的元素。
```javascript
console.log($('.box, p'));
```
5. 交集选择器：通过两个选择器中都符合条件的元素进行选择。
```javascript
console.log($('div.box_1'));
```
二、层级选择器(两种)
1. 子代选择器：通过父元素和子元素的关系进行选择。
```javascript
console.log($('#list > li'));
```
2. 后代选择器：通过父元素和子孙元素的关系进行选择。
```javascript
console.log('#list li');
```
三、过滤选择器(三种)
1. :eq(index):根据索引值选择对应的元素。索引从0开始。
```javascript
console.log($('li:eq(3)').css('color', 'green'));
```
2. :odd:选择索引为奇数的元素。
```javascript
console.log($('li:odd').css('font-size', '30px'));
```
3. :even:选择索引为偶数的元素。
```javascript
console.log($('li:even').css('background-color', 'grey'));
```
以下是重构后的代码：
```javascript
// 获取所有子代元素
console.log($('#list').children());
console.log($('#list').children('li'));
console.log($('#list').children('p'));
// 查找指定元素
console.log($('#list').find('li'));
// 查找兄弟节点，不包括自己本身
console.log($('#list_3').siblings());
console.log($('#list_3').siblings('li'));
console.log($('#list_3').siblings('ol'));
// 查找父亲元素
console.log($('#list_3').parent()); // 查找祖先
console.log($('#list_3').parents());
// 相当于$("li:eq(2)"), index从0开始
console.log($('li').eq(4));
// 找下一个兄弟元素
console.log($('#list_3').next()); // 找下边所有兄弟元素
console.log($('#list_3').nextAll());
// 找上一个兄弟元素
console.log($('#list_3').prev());
console.log($('#list_3').prevAll()); // 上面的所有兄弟元素
// 获取当前元素的位置(索引)
console.log($('#list_3').index());
console.log($('li').eq($('#list_3').index()));
// 返回不带有类名 "intro" 的所有
元素
console.log($('#list_3').siblings().not('li'));
```
