jQuery选择器之过滤选择器之内容过滤选择器

过滤选择器之内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

1、:contains(text)：参数为文本

用法: $(”div:contains(’John’)”)    返回值  集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容.

2、:empty

用法: $(”td:empty”)   返回值  集合元素
说明: 匹配所有不包含子元素或者文本的空元素

3、:has(selector)

用法: $(”div:has(p)”).addClass(”test”)    返回值  集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”.

4、:parent

用法: $(”td:parent”)   返回值  集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

练习：

  
    
    
	
	
	 
    
	
	 
	
				
		 
		 
		 
		 
		 
		 
 
		 
天气冷了
		 
天气又冷了
		 
	     

	    	 id为one   div
		     
		 
		
		 

	    	   id为two   class是 mini  div
		       
class是 mini
		
		
		 

		 	    class是 one 
		       
class是 mini
			   
class是 mini
		 
		 

		 	  class是 one 
		       
class是 mini01
			   
class是 mini
		
		
		
		

			
			
		
		

		

		 	  动画
		
		

		
		
	

   

答案：

  
    
    
	
	
	 
    
	
	 
	
				
		 
		 
		 
		 
		 
		 
 
		 
天气冷了
		 
天气又冷了
		 
	     

	    	 id为one   div
		     
		 
		
		 

	    	   id为two   class是 mini  div
		       
class是 mini
		
		
		 

		 	    class是 one 
		       
class是 mini
			   
class是 mini
		 
		 

		 	  class是 one 
		       
class是 mini01
			   
class是 mini
		
		
		
		

			
			
		
		

		

		 	  动画