JQuery各种选择器

类选择器

1、类选择器：通过#id名 获取该标签

//定义一个标签，id属性赋值
<p id="pid">加载事件</p>
//通过ID获取该标签
$("#pid").click(function(){
方法体
});

2、类选择器：通过.class名 获取该标签

//定义一个标签，class属性赋值
<p class="pid">加载事件</p>
//通过class获取该标签
$(".pid").click(function(){
方法体
});

3、元素选择器：通过标签名获取标签

//定义一个标签
<p>加载事件</p>
//通过标签名获取该标签
$("p").click(function(){
方法体
});

层次选择器

				//选择 body内的所有div元素.#bfa
				$("#btn6").click(function(){
					$("body div").css("background-color","red")
				});
				//在body内的选择 元素名是div 的子元素.bfa
				$("#btn7").click(function(){
					$("body>div").css("background-color","red")
				});
				//选择 所有class为adc 的下一个div元素
				$("#btn8").click(function(){
					$("body>div").css("background-color","red")
				});
				//选择 id为tank的元素后面的所有div兄弟元素.
				$("#btn9").click(function(){
					$("#tank~div").css("background-color","red")
				});

基本过滤选择器

				//选择第一个div元素.
				$("#btn10").click(function(){
					$("div:first").css("background-color","red")
				});
				//选择最后一个div元素
				$("#btn11").click(function(){
					$("div:last").css("background-color","red")
				});
				//选择class不为adc的 所有div元素.
				$("#btn12").click(function(){
					$("div").not(".adc").css("background-color","red")
				});
				//选择索引值为偶数 的div元素.
				$("#btn13").click(function(){
					$("div:nth-child(even)").css("background-color","red")
				});
				//选择索引值为奇数 的div元素.
				$("#btn14").click(function(){
					$("div:nth-child(odd)").css("background-color","red")
				});
				//选择索引值等于3的元素.
				$("#btn15").click(function(){
					$("div:eq(3)").css("background-color","red")
				});
				//选择索引值大于3的元素
				$("#btn16").click(function(){
					$("div:gt(3)").css("background-color","red")
				});
				//选择索引值小于3的元素
				$("#btn17").click(function(){
					$("div:lt(3)").css("background-color","red")
				});
				//选择所有的标题元素
				$("#btn18").click(function(){
					$(":header").css("background-color","red")
				});
				//选择当前正在执行动画的所有元素
				$("#btn19").click(function(){
					$(":animated").css("background-color","red")
					//$("#mover").css("background-color","red")
				});

内容选择过滤器

				//选取含有文本“di”的div元素.
				$("#btn20").click(function(){
					$("div:contains('di')").css("background-color","red")
				});
				//选取不包含子元素(或者文本元素)的div空元素.
				$("#btn21").click(function(){
					$("div:empty").css("background-color","red")
				});
				//选取含有class为sup元素 的div元素.
				$("#btn22").click(function(){
					$("div:has('.sup')").css("background-color","red")
				});
				//选取含有子元素(或者文本元素)的div元素.
				$("#btn23").click(function(){
					$("div:parent").css("background-color","red")
				});

属性选择器

				//选取含有 属性title 的div元素.
				$("#btn24").click(function(){
					$("div[title]").css("background-color","red")
				});
				//选取含有 属性title 的div元素.
				$("#btn25").click(function(){
					$("div[title='top']").css("background-color","red")
				});
				//选取 属性title值等于“top”的div元素.
				$("#btn26").click(function(){
					$("div[title!='top']").css("background-color","red")
				});
				//选取 属性title值不等于“top”的div元素(没有属性title的也将被选中).
				$("#btn26").click(function(){
					$("div[title^='top']").css("background-color","red")
				});
				//选取 属性title值 以“t”开始 的div元素.
				$("#btn27").click(function(){
					$("div[title^='t']").css("background-color","red")
				});
				//选取 属性title值 以“id”结束 的div元素.
				$("#btn28").click(function(){
					$("div[title$='id']").css("background-color","red")
				});
				//选取 属性title值 含有“t”的div元素.
				$("#btn29").click(function(){
					$("div[title*='t']").css("background-color","red")
				});
				//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“op”的元素.
				$("#btn30").click(function(){
					$("div[id][title*='op']").css("background-color","red")
				});