JQuery学习笔记一：选择器

JQuery选择器

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标签变红