上一篇简单的介绍了jquery的基础选择器,准备把高级选择器部分分为三篇博文介绍!慢工出细活吗,循序渐进相信jq会和css一样顺手,废话不少了接下来开始介绍jq的高级选择器第一部分!
后代选择器
$('p span').css('color','red'); //后代选择器,选取p的后代span,span的后面也会继承字体红色
子代选择器
$('div>p').css('color','orange');//子代选择器,只选择目标元素的子代(强制必须的子代,子代之后不会被选取)
选取目标元素的下一个同级元素(单一兄弟元素选取)
// $('.ha + p').css('color','pink');//同级下个元素选择器 选择class为ha的下一个p元素
选取目标元素后面的所有同级元素
$('.one~p').css('color','yellow');//同级元素标签选择class为one的后面同级p元素,只能选择目标元素之后的
选取指定元素的第一个子元素
$('#box p:first').css({'color':'blue','font-size':'50px'});//选择id是box的第一个p元素
选取指定元素的最后一个子元素
$('#box p:last').css({'color':'red','font-size':'30px'}); //选取box的最后一个p元素
选取不是某个属性的元素
$('#box p:not(.ha)').css('color','green'); //选择#box下所有p标签,排除class是ha的p标签
选择所有的偶数(even)标签,奇数标签(odd),序号从0开始
$('#box p:odd').css('color','red');//选取奇数序号的标签,1,3,5,7....
$('#box p:even').css('color','purple');选取偶数标签的0,2,4,6...
根据标签序号选择
$('#box p:eq(0)').css('background','yellow');//选择指定的p标签,从0开始
范围(大于或者小于)序号选择
$('#box p:gt(5)').css('background','#66ffff');//选取序号大于5的p元素
$("#box p:lt(3)").css('background','#26ffAf');//选取序号小于3的元素
选择包含内容
$('#box p:contains(放假)').css('color','grey');//选择指定范围的标签包含内容(放假)的p标签
选择空的标签
$('#box p:empty').css({'width':'100%','height':'15px','background':'purple'});//选择无内容(空的)p标签
选择包含某个标签的(也可以包含class,id等)
$('#box p:has(span)').css('background','#00b294');//选取包含span标签的p标签
选择不是空标签的
$('#box p:parent').css('background','#66ffff');//选择不是空的p标签