jQuery过滤选择器类似于CSS的过滤选择器
1.过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头。
jquery中封装常用的函数:first(),last(),not(),eq().
注意:基本选择器中的索引都是从0开始的。
注意: :focus 过滤器, 必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者 Tab 键盘敲击激活的
$('input').get(0).focus(); //先初始化激活一个元素焦点
$(':focus').css('background', 'red'); //被焦点的元素
jQuery 为最常用的过滤器提供了专用的方法,已达到提到性能和效率的作用:
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素,负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
$('li').not('.red').css('background', '#ccc'); //元素 li 不含 class 为 red 的元素
:first、:last 和 first()、last()这两组过滤器和方法在出现相同元素的时候,first 会实现第一个父元素的第一个子元素,last 会实现最后一个父元素的最后一个子元素。所以,如果需要明确是哪个父元素,需要指明。
自我我、感觉主要应用于样式的设置。具体设置方法和函数不知道有没有必要
2.内容过滤器
内容过滤器的过滤规则主要是包含的子元素或文本内容上.内容过滤中的空选择器和非空选择器。(empty和parent)。jquery中集成的parent()函数是两个完全不同的概念。
parent函数是当前元素的父节点。parents函数是当前元素的祖先节点。
has过滤器是选取包含有子元素的父元素节点(选取的节点是父元素)
3.可见性过滤器
4.子元素过滤器
子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素.
子元素过滤器选取规则:首先选取相应元素的父节点然后再找满足条件的父的子。
5.其他选择器(jQuery函数)
filter最重要,通用性最强
$('li').slice(0,2).css('color', 'red'); //前三个变成红色
注意:这个参数有多种传法和 JavaScript 的 slice 方法是一样的比如:slice(2),从第三个
开始到最后选定;slice(2,4),第三和第四被选定;slice(0,-2),从倒数第三个位置,向前选定
所有;slice(2,-2),前两个和末尾两个未选定。
$("div").find("p").end().get(0); //返回 div 的原生 DOM
$('div').contents().size(); //返回子节点(包括文本)数量
$('li').filter('.red').css('background','#ccc'); //选择 li 的 class 为 red 的元素
$('li').filter('.red, :first, :last').css('background','#ccc'); //增加了首尾选择
//特殊要求函数返回
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表 3';
}).css('background', '#ccc');