jQuery选择器及相关方法

本文只是记录了我在项目用到的jQuery选择器及方法。

 

 

jQuery.closest(selector)

 

返回"最接近”selector的一个元素。查找过程如下：对jQuery对象中每个DOM元素，从这个元素开始找起，然后找它的parentNode，再找它的parentNode的parentNode，一直找到它的第一个匹配selector的元素。当页面中有一个列表，列表中每个元素都有事件要处理时，会经常用到这个方法。

 

 

<table>
	<tr class="item">
		<td>... item description ...</td>
		<td>
			<a href="#" class="edit-link">Edit</a>
			<a href="#" class="delete-link">Delete</a>
		</td>
	</tr>
	<tr class="item">
		....
	</tr>
	...
</table>

 

对于上面的HTML，需要处理Edit, Delete链接的事件，对Delete链接事件处理可能是这样的：

 

<script>
	$('.delete-link').click(function(e) {
		if (confirm('Are you sure to delete this item?')) {
			$(this).closest('.item').remove();
		}
	}
</script>

 

 

 

jQuery.add(selector)

 

将两个jQuery对象中的DOM元素合并，相当于对两个集合取并集。有时可能需要对多个元素应用同样的事件处理器，这时可以这样做：

 

$('add-item').add('edit-item').click(function(e) {
	// do something...
})

 

 

 

:Visible

 

jQuery的选择过滤器，只选择可见的元素。如果页面有一个选择所有或取消选择所有元素的check box时，它选择或取消的应该是可见的元素，可以这样写：

 

$("input#select-all[type=checkbox]").click(function(e) {
	if (this.checked)
		$('input.item-checkbox').attr('checked', 'checked');
	else
		$('input.item-checkbox').attr('checked', '');
})

 

判断一个元素是不是可见，可用：

 

var elems = $('...');
var anyVisible = elems.is(':visible');	// 任何一个元素可见
var allVisible = elems.not(':visible').length == 0; // 所有元素可见