jQuery常见方法汇总

一、遍历筛选元素的方法

find()

  find(selector)方法实现的是找出正在处理的元素的后代元素的功能，如：

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$(".demo").find("span").css({
   "border":"2px solid red"});
		});
	</script>

  找出class为demo的元素底下的span标签，并设置相应的css样式：

children()

  children(selector)方法实现的功能与find()类似，但是不同的是，children()方法取得的是子元素的合集，并且只能找到DOM树的下一级子元素，例如这里像上述代码设置demo底下的span标签：

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$(".demo").children("span").css({
   "border":"2px solid red"});
		});
	</script>

  这里就没有办法变色，因为span不是demo的下一级子元素，不加参数默认所有子元素都获取到：

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$(".demo").children().css({
   "border":"2px solid red"});
		});
	</script>

siblings()

  siblings(selector)方法实现的是筛选同辈元素的功能，例子如下：

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$(".demo1").siblings().css({
   "border":"2px solid red"});
		});
	</script>

  同样的，siblings()方法也可以添加参数，用于匹配指定的元素。

first()

  first()方法实现的是获取匹配的第一个元素，相当于:first选择器，如：

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$("span").first().css({
   "border":"2px solid red"});
			$("li").last().css({
   "border":"2px solid red"});
		});
	</script>

  匹配到的就是第一个span元素，last()实现的就是匹配最后一个元素，结果如下：

eq()

  eq(index)方法实现的是获取第N个元素，与选择器:eq(index)类似，如：

	<script type="text/javascript">
		$("#btn2").click(function (){
   
			$("li").eq(0).css({
   "border":"2px solid red"});
			//注意这里的索引是和数组一样，从0开始
		});
	</script>

parent()

  parent(selector)方法实现的是获取父元素的功能，但是只能沿DOM树向上遍历一级，若要再往上遍历，则需要使用parents()方法，如：