jq 多种过滤器

简单过过滤器点击打开链接

//:odd   选择奇数行
$('ul li:odd').css('background-color','cadetblue');
//：even   选择偶数行
$('ul li:even').css('background-color','bisque');
//：first    只选择第一行
$('ul li:first').css('border','thin solid yellow');
//:last    只选择最后一行
$('ul li:last').css('border','thin solid yellow');
//:eq(n)   选择第n行，从0开始
$('ul li:eq(9)').css('background','greenyellow');
//:gt(n)   第n行之后的所有元素
$('ul li:gt(3)').css('border','thin solid black');
//:lt(n)    第n行之前的所有元素
$('ul li:lt(6)').css('background','lightcoral');

内容过滤器点击打开链接

//:contains(查找的内容)  只选择包含查找内容的标签
$('div:contains("bye")').css('border','thin solid pink');
//:empty   只选择没有包含内容和子标签的标签
$('div:empty').css('background','darkorchid').html('这是后面加的');
//：has   只选择包含指定的子标签

$('div:has(span)').css('border','thin solid black').html('has');

属性过滤器点击打开链接

//[]   在括号里填写标签的属性
$('div[class]').css('color','red');
//:nth-child(n)   选择第n个符合条件的标签
$('ul li:nth-child(2)').css('background','paleturquoise');

可见性过滤器点击打开链接

//:visible    只选择没有隐藏的标签对象
console.log('visible:'+$('div:visible').html());
//：hidden    只选择被隐藏的标签对象
console.log('hidden'+$('div:hidden').html());

筛选选择器方法点击打开链接

var ul=$('#big');
//.find(选择器)  使用jQuery对象查找子节点（所有的子节点）
console.log(ul.find('li'));
//.children   使用jQuery对象获取该节点下的所有子节点（不包括孙子）
console.log(ul.children());
//.siblings   获取除了自己以外的其他兄弟节点
console.log($('.li-2').siblings());
//.parent   获取该元素的父节点
console.log($('.li-2').parent());
//.eq(n)    获取第n个节点，索引是从0开始计算
console.log($('#big>li').eq(2));