jQuery选择器

jQuery选择器

基本选择器

  //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) 索引从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'));
    //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) 相当于$('li:eq(2)'),index从0开始
    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() 返回list_3所有不是li的兄弟元素
    console.log($('#list_3').siblings().not('li'));