jQuery 选择器分类

基本选择器、层级选择器、过滤选择器、筛选选择器

html代码:

//html
   <div id="box">我是id盒子</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <p class="box_1">5</p>
    <div class="box_1">6</div>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li id="list_3">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
        <p>我是p</p>
    </ul>

一、基本选择器

1、ID选择器

    console.log($('#box')

2、类选择器

    console.log($('.box')
    $('.box').css('color','red')

3、标签选择器

    console.log($('div'));

4、并集选择器

    console.log($('.box,p'));

5、交集选择器

    console.log($('div.box_1'));

二、层级选择器

1、子代选择器

    console.log($('#list>li'));

2、后代选择器

   console.log($('#list li'));

三、过滤选择器

1、:eq（index）index从0开始

     console.log($('li:eq(3)').css('color', 'green'));

2、:odd 选择索引为奇数的

     console.log($('li:odd').css('font-size', '30px'));

3、:even 选择索引为偶数的

    console.log($('li:even').css('background-color', 'grey'));

四、筛选选择器

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());

parents() 查找祖先

     console.log($('#list_3').parents());

5、eq(index) index从0开始

     console.log($('li').eq(4));

6、

next() 找下一个兄弟

     console.log($('#list_3').next());

nextAll() 找下边所有兄弟

     console.log($('#list_3').nextAll());

7、

prev() 找上一个兄弟

    console.log($('#list_3').prev());

prevAll() 找上边所有兄弟

    console.log($('#list_3').prevAll());

8、Index() 获取当前的位置(索引)

    console.log($('#list_3').index());
    console.log($('li').eq($('#list_3').index()));

9、not() 返回不带有类名的所有元素

    console.log($('#list_3').siblings().not('li'));