过滤选择器:
在原有选择器匹配的元素中进一步进行过滤的选择器
分类:
基本,内容,可见性,属性
//1. 选择第一个div
$("div:first").css("background","red")//选中所有div然后选出第一个
// 2. 选择最后一个class为box的元素
$(".box:last").css("background","red")
// 3. 选择所有class属性不为box的div
$("div:not(.box)").css("background","red");
// 4. 选择第二个和第三个li元素
$("ul>li:gt(0):lt(2)").css("background","red");//从前往后找
/*:gt(0)代表>索引为0的元素,:lt(2)代表<索引为2的元素,再由于浏览器执行是从上到下,从左到右的,所以:gt(0)执行后就取到了第二个元素到最后一个元素
再:lt(2)是由于去取上次过滤后的组合里的第2个(为过滤前的第三个)
*/
//$("ul>li:lt(3):gt(0)").css("background","red")//从后往前找,好理解一些
// 5. 选择内容为BBBBB的li
$("li:contains('BBBBB')").css("background",'red');
// 6. 选择隐藏的li
console.log($("li:hidden").html(),$("li:hidden").length,$("li:hidden")[0]);
7. 选择有title属性的li元素
// $("li[title]").css("background","red")
// 8. 选择所有属性title为hello的li元素(两种写发)
$("li[title=hello]").css("background",'red')
$("li[title='hello']").css("background",'red')