jQuery选择器

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、jQuery是什么？

1、jQuery是一个JavaScript函数库。
2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。

二、jQuery选择器

1.基本选择器

1. ID选择器
2. 类选择器
3. 标签选择器
4. 并集选择器
5. 交集选择器（标签指定式选择器）

代码如下（示例）：

// 1.ID选择器
    console.log($('#list_3'));
    // 2.类名选择器
    console.log($('.box_1'));
    $('.box_1').css('font-size', '30px')
    // 3.标签选择器
    console.log($('li'));
    // 4.交集选择器
    console.log($('div.box_1'));
    // 5.并集选择器
    console.log($('div,.box_1'));

2.层级选择器

1. 子代选择器

2. 后代选择器

代码如下（示例）：

// 1.子代选择器
    console.log($('ol>li'));
    // 2.后代选择器
    console.log($('ul li'));

3.过滤选择器

1. :eq（index）
2. :odd
3. :even
   代码如下（示例）：

 // 1.:eq(index)
    console.log($('li:eq(12)'));
    // 2、:odd  选择索引为奇数的
    console.log($('li:odd').css('font-size', '30px'));
    // 3、:even  选择索引为偶数的
    console.log($('li:even').css('background-color', 'grey'));

4.筛选选择器（方法）

1. children(selector)

2. find(selector)

3. siblings(selector)

4. parent()

5. eq(index)

6. next()

7. prev()

8. Index()

9. not()
   代码如下（示例）：

// 1、children(selector) 没有参数获取所有的子代 
    console.log($('#list').children());
    console.log($('#list').children('li'));
    console.log($('#list').children('p'));
    // 2、find(selector) find 必须加参数
    console.log($('#list').find('li'));
    // 3、siblings(selector) 查找兄弟节点，不包括自己本身。
    console.log($('#list_3').siblings());
    console.log($('#list_3').siblings('li'));
    console.log($('#list_3').siblings('ol'));
    // 4、parent() 查找父亲
    console.log($('#list_3').parent());
    // 查找祖先
    console.log($('#list_3').parents());
    // 5、eq(index) 
    console.log($('li').eq(4));
    // 6、next() 找下一个兄弟
    console.log($('#list_3').next());
    // 找下边所有兄弟
    console.log($('#list_3').nextAll());
    // 7、prev()  找上一个兄弟
    console.log($('#list_3').prev());
    console.log($('#list_3').prevAll());
    // 8、Index() 获取当前的位置（索引）
    console.log($('#list_3').index());

    console.log($('li').eq($('#list_3').index()));
    // 9、not() 返回不带有类名 "intro" 的所有 <p> 元素
    console.log($('#list_3').siblings().not('li'));

---