[jQuery] $("selector1 selector2") $("selector1 > selector2") $("selector1, selector2") 区别

jQuery 选择元素的方式有很多种，其中三种容易混淆，记录下来，以示区别。

$("selector1 selector2")

选取所有 seletor1 下的所有后代元素 selector2 ，是祖先和后代的关系，子子孙孙辈都是后代。

$("selector1 > selector2")

选取所有 selector1 下的所有孩子元素 selector2 ，是父母和孩子的关系，孩子只包括儿女辈，不包括孙子辈及以后。

$("selector1, selector2")

选取所有 selector1 元素和所有 selector2 元素。

实例代码：

<script type="text/javascript">
			$(function() {
				var len1 = $("#div1 div").length;
				alert(len1); //3
				var len2 = $("#div1 > div").length;
				alert(len2); //2
				var len3 = $("#div1, div").length;
				alert(len3); //4
			});
		</script>

		<div id="div1">
			<div>
				<div></div>
			</div>
			<div></div>
		</div>

需要稍微关注的一点是，$("#div1, div") 选择的时候，id=div1 的 div 元素既符合 $("#div1") 又符合 $("div") ，使用 $("#div1, div") 选择的时候jQuery会按实际元素数量计算，不用担心此处存在重复计数的问题。