jQuery都有哪些选择器？

1. 基础选择器

id选择器$('#brother').css('color','red');

标签选择器：$('a').css({'color':'green','font-size':'24px'});

类选择器：$('.li3').css('background','yellow');

通配符选择器:console.log($(''));

$('').html('');    // 清空整个界面的dom元素

 

2.层级选择器

后代选择器：$('#box p').css('color','red');

子代选择器：$('#box>p').css('color','green');

毗邻选择器，匹配所有的紧接着选中元素的兄弟：$('#father+p').css('font-size','30px');

兄弟选择器 $('#father~p').css('background','gray');

 

3.过滤选择器

获取第一个 $('li:first').css('background','gray');

获取最后一个 $('li:last').css('background','yellow');

获取奇数 $('li:odd').css('color','red');

获取偶数 $('li:even').css('color','green');

选中索引值为1 $('li:eq(1)').css('font-size','32px');

大于索引值1 $('li:gt(1)').css('font-size','60px');

小于索引值1 $('li:lt(1)').css('font-size','10px');

 

4.属性选择器

$('li[id]').css('color','red');

$('li[class=what]').css('font-size','30px');

$('li[class!=what]').css('font-size','50px');

$('input[name^=username]').css('background','gray');

$('input[name$=222]').css('background','green');

$('button[class*=danger]').css('background','orange');

 

解释：

        标签名【属性名】，查找所有含有id属性的该标签名的元素

        匹配给定的属性 是what值 【attr=value】 匹配给定的属性是某个特定值的元素

        没有class也会发生变化，[attr!=value]匹配所有不包含有特定的属性，或者属性不等于特定值的元素

        匹配给定的属性是以某些值开始的元素   ^

        匹配给定的属性是以某些值结尾的元素   $

        匹配给定的属性是以包含某些值的元素    *

5.筛选选择器

$('span').eq(1).css('color','red');

$('span').first().css('font-size','28px');

$('span').last().css('color','greenyellow');

console.log($('span').parent());

$('span').parent('.p1').css({'width':'300px',height:'400px','background':'red'});

$('.list').siblings('li').css('color','red');

$('div').find('button').css('background','gray');

 

 

解释：

    获取第n个元素 数值从0开始 .eq()

    获取第一个元素    .first()

    获取最后一个元素    .last()

    获取父元素       .parent()

    选择所有的兄弟元素        .siblings（）

    查找所有的后代元素    .find()

6. jQuery的筛选器的分类

过滤筛选器 如：$("li").eq(2) $("li").first() $("ul li").hasclass("test")

查找筛选器 如： 查找子标签： $("div").children(".test") $("div").find(".test")

向下查找兄弟标签： $(".test").next() $(".test").nextAll() $(".test").nextUntil()

向上查找兄弟标签： $("div").prev() $("div").prevAll() $("div").prevUntil()

查找所有兄弟标签： $("div").siblings()

查找父标签： $(".test").parent() $(".test").parents() $(".test").parentUntil()