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; // 所有元素可见

?