jq基本选择器

jQuery 选择器大致分为四种：基本选择器、层次选择器、过滤选择器、表单选择器

一、jq基本选择器

选择器的用法跟css的用法一致，只是需要增加选择函数。$('');

如下面那道题：

id选择器为  $('#two')；

类选择器  $('.one');

标签选择器，元素选择器为  $('button');

	
		
		
		
	
	
		按钮
		按钮
		按钮
		按钮
		按钮				
		
		
	

运行结果： 

二、层次选择器

1、 派生选择器：在s1内部获得全部的s2节点(不考虑层次)

　　$("div span")// 派生选择器

	
		
		
		
	
	
		

			我是1
			

			我是2
			
			我是3
		
		我是4
		
		
	

运行结果： 

  2、$(s1 > s2) [父子]：直接子元素选择器:在s1内部获得s2的子元素节点

$("div>span")// 子代选择器

	
		
		
		
	
	
		

			我是1
			

			我是2
			
			我是3
		
		我是4
		
		
	

运行结果： 

3 、$(s1 + s2) [兄弟]：直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

	
		
		
		
	
	
		

			我是1
			

			我是2
			
			我是3
		
		我是4
		
		
	

运行结果：

4、  $(s1 ~ s2) [兄弟]：后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

	
		
		
		
	
	
		

			我是1
			

			我是2
			
			我是3
		
		我是4
		
		
	

 

三、(过滤)选择器

 

	
		
		
		
	

	
		
并且选择器
		
并且选择器
		
并且选择器
		
并且选择器
		

			
我是1
			
我是2
			
我是3
			
我是4
			
我是5
			
我是6
			
我是7
			
我是8
		

		
		
		
	

6  内容过滤选择器

:contains(内容)

包含内容选择器，获得节点内部必须通过标签包含指定的内容

$(“div:contains(beijing)”)

linken love beijing

jack love shanghai

 :empty

获得空元素(内部没有任何元素/文本(空) )节点对象

$(“div:empty”)

linken love beijing

jack love shanghai

含有节点

     

//含有 空格实心节点

:has(选择器)

内部包含指定元素的选择器
       $(“div:has(#apple)”)

hello

//id选择器

:parent

寻找的节点必须作为父元素节点存在

$(“div:parent”)

linken love beijing

jack love shanghai

     

/********************************************/

function f1(){
//① $(":contains(text)")
$("div:contains(beijing)").css('background-color','red');
//② $(":empty")
$("div:empty").css('width','200px');
$("div:empty").css('height','100px');
$("div:empty").css('background-color','pink');
//③ $(":has(selector)")
console.log($("div:has(.orange)"));
//④ $(":parent")
console.log($("div:parent"));
}

内容过滤选择器

linken love beijing

jack love shanghai