jQuery初学基础常用内容——过滤器

//在html中相关代码
//我们有嵌套了三层的div
<div class="grandpa">
    <div class="pa">
        <div id="child1" class="child not-gay"></div>
        <div id="child2" class="child"></div>
        <div id="child3" class="child"></div>
    </div>
</div>

//JQ中给我们提供了相关的方法
   $('.grandpa').find('.child').css('border','2px solid #999');
   	  //这里的find方法，可以找到class为grandpa下的class为child的div
   $('#child1').parent().css('border','2px solid #666');
   	  //parent()方法，我们先直接找到id为child1的div，使用parent()方法，可以找到它是父级标签
   $('#child1').parents('.grandpa').css('border','2px solid #333');
      //parents()方法，我们先直接找到id为child1的div，使用parenst()方法，可以找到它的先祖标签，如果不传入具体的值，那么就会找到id为child1的div的所有父级标签
   $('.child').filter('.not-gay').css('background','red');
      //filter是过滤器，我们有三个class为child的div，但是其中有一个div还有一个类叫做not-gay,那么我们用filter()方法，在括号内传入这个类，就可以选中这个div

上面的代码中使用了css()方法，这个方法是给相关标签增加css样式。

//例如给class为grandpa的div加上边框，如果你还要加别的样式，比如加一个背景色，我们还可以在后面继续追加
$('.grandpa').find('.child').css('border','2px solid #999').css('background','blue');
//有的情况可能会加很多的样式，那么我们可以在css()方法中传入一个对象
$('.grandpa').find('.child').css({
	border:'2px solid #999',
	background:'blue'
	……
});