在jquery中 filter()与find()之间的区别

最新推荐文章于 2023-12-02 16:33:49 发布

eternity668

最新推荐文章于 2023-12-02 16:33:49 发布

阅读量625

点赞数

分类专栏： jquery 文章标签： jquery翻译

jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

filter ()和find()函数是极其相似的，前者是应用于所有元素，而后者是仅应用于子元素。

简单的说：

filter()—通过所有的元素来搜索。

find()—仅通过所有的子元素来搜索。

具体的对比实例：

<html>
	<head>
		<script type="text/javascript" src="../jquery-1.11.1.min.js">
			</script>
			<style type="text/css">
				 div{
				 	  padding:8px;
				 	  border:1px solid;
				 	
				 	}
				
				</style>
		
		</head>
		
		<body>
			<h1>jquery find()vs filter() example</h1>
			<script type="text/javascript">
				$(document).ready(function(){
					 $('#filterClick').click(function(){
					 	 $('div').css('background','white');
					 	 $('div').filter('#Fruits').css('background','red');
					 	
					 	
					 	
					 	});
					$('#findClick').click(function(){
						
						$("div").css("background",'white');
						$('div').find('#Fruits').css('background','red');
						
						
						});
					
					
					
					});
				
				</script>
			  <div id="Fruits">
			     Fruits
            <div id="Apple">Apple</div>
            <div id="Banana">Banana</div>			  
			  </div>
			  <div id="Category">
			  	category
			  	<div id="Fruits">Fruits</div>
			  	<div id="Animals">Animals</div>
			  	
			  	
			  	</div>
			  	
			  	<br/>
			  	<br/>
			  	<br/>
			  	<input type="button" value='filter(Fruits)' id='filterClick'>
			  	<input type="button" value='find(Fruits)' id="findClick">
			</body>
</html>

效果：