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') //获取到所有的密码框
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值