JQuery学习笔记一:选择器
2015-01-06 12:25
453 查看
JQuery选择器
1. 元素选择器(元素标签名)
2. ID选择器(# + 元素id)
3. 类选择器(. + 元素类名称)
6. 通配选择器(*)
7. 指明前缀的选择器
8. 子选择器(可获取所有直接子节点,不是则跳过)
9. next选择器/兄弟节点选择器(只选择一个)
10.nextAll选择器(间隔有效,一直往后遍历)
11.prev选择器(没有对应的CSS,选择前面一个节点)
12.prevAll选择器(没有对应的CSS,选择前面所有节点)
13.siblings选择器(前后全部兄弟)
14.同级上非指定元素选择器
15.属性选择器
1. 元素选择器(元素标签名)
$('div').css('color', 'red');
2. ID选择器(# + 元素id)
$(‘#box’).css(‘color', 'red');
3. 类选择器(. + 元素类名称)
$(‘.box’).css('color', 'red');4. 群组选择器(各元素之间用[,]间隔)
$('div, #box, .pox').css('color', 'red');5. 后代选择器(各元素之间用[空格]间隔)
$('div ul li').css('color', 'red'); $('div').find('ul').find('li').css('color', 'red');
6. 通配选择器(*)
$('*').css('color', 'red');//注:*如果在全局使用,会极大降低性能,应该使用在局部的环境内
7. 指明前缀的选择器
$('div.box').css('color', 'red');//div标签下的box类变红 $('.box.pox').css('color', 'red');//同时拥有box和pox类的节点变红(与box,pox顺序无关)
8. 子选择器(可获取所有直接子节点,不是则跳过)
$('ul > li').css('color', 'red'); $('ul').children('li').css('color', 'red');
9. next选择器/兄弟节点选择器(只选择一个)
$('div + p').css('color', 'red');//只指定下一个,如果不是p,无效 $('div').next('p').css('color', 'red');//同上 $('div').next().css('color', 'red');//之后任意节点
10.nextAll选择器(间隔有效,一直往后遍历)
$('div ~ p').css('color', 'red');//只选择p节点 $('div').nextAll('p').css('color', 'red');//同上 $('div').nextAll().css('color', 'red');//选择div之后的所有节点
11.prev选择器(没有对应的CSS,选择前面一个节点)
$('div').prev('p').css('color', 'red'); $('div').prev().css('color', 'red');
12.prevAll选择器(没有对应的CSS,选择前面所有节点)
$('div').prevAll('p').css('color', 'red'); $('div').prevAll().css('color', 'red');
13.siblings选择器(前后全部兄弟)
$('div').siblings('p').css('color', 'red'); $('div').siblings().css('color', 'red');
14.同级上非指定元素选择器
$('#ppp').nextUntil('center').css('color', 'red');//不包括center $('#ppp').prevUntil('center').css('color', 'red');//不包括center
15.属性选择器
$("p[id]").css('color', 'red');//有id属性的所有p标签变红 $("p[id=ppp]").css('color', 'red');//id=ppp的p标签变红 $("p[id^=pp]").css('color', 'red');//id以pp开头的p标签变红 $("p[id$=qq]").css('color', 'red');//id以qq结尾的p标签变红 $("p[id|=ppp]").css('color', 'red');//id为ppp,ppp-1,ppp-2标签变红 $("p[id!=ppp]").css('color', 'red');//标签不是ppp的p标签变红 $("p[id~=ppp]").css('color', 'red');//id以空格分割,其中有一个是ppp的p标签变红 $("p[id*=ppp]").css('color', 'red');//只要id中包含ppp的p标签变红,如id为abcpppddd的p标签 $("a[href][id=ppp]").css('color', 'red');//有href标签并且id为ppp的a标签变红
相关文章推荐
- JQuery学习笔记02-选择器把需要的东西揪出来(基础)
- JQuery学习笔记1:选择器之一
- jQuery学习笔记之jQuery选择器的使用
- JQuery 参考手册 学习笔记(4)-选择器
- jquery学习笔记一:选择器高级语法
- JQuery 学习笔记 选择器之三
- JQuery 选择器学习笔记
- jQuery学习笔记之jQuery选择器的使用
- JQuery学习笔记(一)选择器
- jQuery学习笔记——各类选择器
- {传智播客} (学习笔记)--JQuery需要掌握的是9种选择器的用法
- JQuery学习笔记6:选择器之六
- jQuery学习笔记(二)选择器 事件
- JQuery 学习笔记 选择器之六
- JQuery 学习笔记 选择器之一
- jQuery学习笔记--jQuery选择器
- JQuery 学习笔记 选择器之四
- jquery学习笔记之选择器
- jQuery学习笔记——jQuery选择器详解种类与方法
- jQuery学习笔录2(jQuery学习笔记——选择器(2)&过滤器)