《jQuery基础教程》--选择器

1.jQuery目前的最新版支持CSS3的选择器，可以参考CSS3的选择器的使用方法。

2.jQuery遍历DOM树的方法：

2.1 filter方法。

可以利用例如：

$('a').filter(function(){
//一些代码
})

这里的filter内含有一个function，这就可以指定dom匹配的过滤功能。

2.2 next与nextAll方法

例如：

$('td:contains(Henry)').next();

可以利用next方法选择到所选择的元素的下一个DOM元素。如上例，就是选择包含有Henry的单元格的下一个单元格。

nextAll方法与next效果类似，唯一不同的就是，nextAll方法会匹配所选择元素后的所有元素。

2.3 prev与prevAll方法

prev和prevAll方法用法和next与nextAll相同。功能则是相对：prev方法选择到所选择的元素的前一个DOM元素，而prevAll则是会匹配所选择元素前的所有元素。

2.4 siblings方法

siblings方法的用法和next相同。其作用是匹配与所选择元素相同层次的DOM的其他元素，包括之前与之后的。

2.5 parent方法

parent方法的用法和next相同。其作用是匹配到所选择元素上一层的父元素。

2.6 children方法

children方法的用法和next相同。其作用是匹配到所选择元素下一层的所有子元素。

2.7 get方法

例如：

//完整写法
var myTag = $('#my-element').get(0).tagName;
//简便写法
var myTag = $('#my-element')[0].tagName;

get方法的作用就相当于直接获得所需要的DOM元素。如例子所示，get(0)就直接获得了id为my-element的元素下的第一个子元素。

3.复杂的选择器操作方法

jQuery除了支持css3的选择器外，还提供了一些更加复杂的选择器。首先，第一个综合例子：

$('#topics a').click(function(){
		//多个标签的单击事件处理，首先去掉旧有样式，为特定的元素添加新样式。
		$('#topics a').removeClass('selected');
		$(this).addClass('selected');
		
		//获取所点击的a标签内的文本
		var topic = $(this).text();
		//高级选择器组合使用
		if(topic != 'All')
		{
			$('#news').find('tr:has(td)').not(function(){
				return $(this).children(':nth-child(4)').text() == topic;
			})
			.hide();
		}
		
		//a标签操作return false阻止链接的默认行为
		return false;
});

这段代码是为id为topics的div里的一组a标签进行点击操作，实现筛选功能。

$('#news tr:has(td):not(:contains("'+topic+'"))').hide();

如上是全部使用css选择器的写法，但是这个选择器组合会选到tr下的所有td，当需要制定某一td的时候则无法实现正确的选择。

这时候，就可以使用jQuery提供的高级选择器方式来匹配元素。

使用find方法代替css3选择器中的空格。

使用not方法代替css3选择器中的:not伪类选择器。not方法支持一个回调函数，如果回调函数返回true，那么被检测元素就会排在结果集之外。

下面看第二个例子：

//even odd选择器
//$('#news tr:nth-child(even)').addClass('alt');
$('#news tbody').each(function(){
		$(this).children().has('td').filter(function(index){
			return (index % 4)<2;
		}).addClass('alt');
});

通过css3选择器的even和odd可以实现单元格的条文处理。

使用each方法循环匹配tr。

使用has方法匹配存在的指定的元素。

使用filter方法并且编写回调函数对结果进行进一步过滤。

 下面是关于DOM元素栈的一个例子：

对于每个jQuery对象都有一个prevObject属性指向前一个对象，所有会产生一个栈列表的结构。使用end和andSelf就可以操作这个栈。

使用end方法可以简单的从栈中弹出最上方的一个引用。举例说明就是：

$('#news').find('tr.alt').removeClass().end()
		//使用end方法后，则栈中顶层元素就还是news了
		.find('tbody').each(function(){
			$(this).children(':visible').has('td')
				.filter(':group(2)').addClass('alt');//这里使用了一个自定义的选择符:group。
});

开始的时候，通过第一个find，找到了news元素下带有alt类的tr元素，并且放入栈顶，然后进行样式操作。

接下来使用end方法，弹出了这栈顶元素，然后通过第二个find，找到news下的tbody元素，并且放入栈顶，再执行操作。

使用andSelf方法可以从栈中指定的元素回溯一个位置，并且把指定位置和回溯位置的2个元素组合起来。

//DOM元素栈end和andSelf
$('#release').nextAll().andSelf().addClass('highlight');