jQuery选择器大全

jquery的选择器主要分为基础选择器、层次选择器、过滤选择器和表单选择器四种。其中过滤选择器是在开发过程中使用最多的重点选择器

1、基本选择器

$('#id')  //id选择器
$('div')  //元素选择器
$('.class')  //类选择器
$('.class , .info , #id ')  //组合选择器 ，选择类名为class、info 和 id名为id的所有元素

2、层次选择器

$('div > p ')    //选取div下的直接子代元素 p
$('div p')        //选取div下的所有子代p元素
$('div + p ')    //选取div后面紧邻的一个p元素 ， div和p必须是同一个父级元素
$('div ~ p ')    //选取div同级的所有的p元素 ， div和p必须是同一个父级元素

3、过滤选择器

3.1 基础过滤选择器

$('li:first-child')   //选取第一个li元素
$('li:last-child')   //选取最后一个li元素
$("li:nth-child(n)") //选取第n个元素
$('li:even')   //选取下标为偶数的li元素
$('li:odd')    //选取下标为奇数的li元素
$('li:eq(4)')  //选取下标为4的li元素，其中下标从0开始标记
$('li:gt(4)')   //选取下标大于4的li元素
$("li:lt(4)")   //选取下标小于4的li元素
$("li:not(#name)")  //选取id值不为name的li元素

3.2 内容过滤选择器

$('div:contains("jquery")')  //获取包含jquery文本的div元素
$('div:empty')  //获取没有子元素或文本的空div元素
$('div parent')  //含有子元素或者文本元素的div元素
$('div:has(selector)') //含有某个选择器的元素

3.3 可见性过滤选择性

$('li:hidden')   //匹配所有不可见的li元素
$("li:visible")   //匹配所有可见的li元素

3.4 属性选择器

说明：我们在使用属性选择器的时候大部分都是在input等表单元素上使用，其实在div p 等文本元素上也可以针对某个属性使用属性选择器

$('div[id]') //含有id属性的div元素
$('div[id="name"]') //id属性为name的div元素
$('div[id!='name']') //id属性不为name的div元素
$('div[id^='nav']')  //以nav开头的id属性的div元素
$('div[id$="idx"]')  //以idx结尾的id属性的div元素
$('div[id][name="nav-bar"]')  //多属性过滤，含有id属性 且name属性为nav-bar的div元素

3.5状态选择器

说明：状态选择器一般对于表单元素比较适用，尤其是对元素进行批量状态操作的时候

    $('input:enabled') //获取到可编辑的input
    $('input:disabld')   //获取到禁用的input
    $('input:checked') //获取到选中的input元素
    $('option:selected')  //获取到被选中的option元素

4、表单选择器

    $(':input')  //获取到所有的可编辑元素 input textarea select button元素等
    $('input:text') //获取到所有的单行文本元素 等效于$("input[type=text]"),但是执行效率要高于[type=text];
    $('input:radio') //获取到所有的单选框
    $('input:checkbox') //获取到所有的复选框
    $('input:password') //获取到所有的密码框