JQuery的常用选择器（速通）

---

jQuery 是一个经典的 JavaScript 函数库，它简化了 HTML 文档遍历、事件处理、动画效果和 Ajax 操作等操作。选择器是JQuery很重要的部分，写得少，做得多，使用JQuery来 HTML 元素，可以省下很多代码。

---

一、基本选择器

	// 一、基本选择器（ID、类名、标签、并集选择器、交集选择器）
    // 选择指定类名的元素，例如 $('.box') 选择 类名 为 “box” 的元素。
    console.log($('.box'));
    // 选择指定 ID 的元素，例如 $('#li') 选择 ID 为 “li” 的元素。
    console.log($('#li'));
    // 选择指定名称的所有元素，例如 $('div') 选择所有 <div> 元素。
    console.log($('div'));
    // 并集选择器,用法和CSS类似，例如把类名为box和id为li的元素都选中
    console.log($('.box,#li'));
    // 交集选择器，选择所有div并且类名为box的所有元素
    console.log($('div.box'));

二、层级选择器

    // 直接子代选择器，只会选择直接子代元素，不会选择孙级的
    console.log($('ul>li'));
    // 后代选择器，同css后代选择器用法
    console.log($('ul li'));

三、过滤选择器

    console.log($('li:eq(0)')); // 获取当前索引的元素，类似nth-child(n)
    console.log($('li:odd()'));// 获取偶数元素
    console.log($('li:even()')); // 获取奇数元素 

四、筛选选择器

    // 四、筛选过滤器
    // 1、.children() 如果无参则获取所有子元素
    console.log($('ul').children()); // 所有子元素
    console.log($('ul').children('ol')); // 仅为ol标签的子元素
    // 2、find(selector) 必须加参数
    console.log($('ul').find('ol'));
    // 3、siblings(selector) 无参获取所有兄弟节点  
    console.log($('ul').siblings());
    // 有参获取参数
    console.log($('ul').siblings('.box'));
    // 4、parent() 获取父节点
    //    parents()获取所有祖先元素
    console.log($('#li').parent());
    console.log($('#li').parents());
    // 5、eq(index) 获取当前元素的索引 （index索引必须写）
    console.log($('#li').eq(0));
    // 6、next()下一个兄弟节点 nextAll()从下一个兄弟节点开始所有
    console.log($('#li').next());
    console.log($('#li').nextAll());
    // 7、prev()上一个兄弟节点 prevAll()从上一个兄弟节点开始所有
    console.log($('#li').prev());
    console.log($('#li').prevAll());
    // 8、Index()获取当前元素所在的索引
    console.log($("#li").index());
    // 9、not(selector) 获取非当前的元素
    console.log($("ul li").not('#li')); // 获取  ul 中的 li 中的 非 id 为 li 的所有li元素