类选择器
1、类选择器:通过#id名 获取该标签
<p id="pid">加载事件</p>
$("#pid").click(function(){
方法体
});
2、类选择器:通过.class名 获取该标签
<p class="pid">加载事件</p>
$(".pid").click(function(){
方法体
});
3、元素选择器:通过标签名获取标签
<p>加载事件</p>
$("p").click(function(){
方法体
});
层次选择器
$("#btn6").click(function(){
$("body div").css("background-color","red")
});
$("#btn7").click(function(){
$("body>div").css("background-color","red")
});
$("#btn8").click(function(){
$("body>div").css("background-color","red")
});
$("#btn9").click(function(){
$("#tank~div").css("background-color","red")
});
基本过滤选择器
$("#btn10").click(function(){
$("div:first").css("background-color","red")
});
$("#btn11").click(function(){
$("div:last").css("background-color","red")
});
$("#btn12").click(function(){
$("div").not(".adc").css("background-color","red")
});
$("#btn13").click(function(){
$("div:nth-child(even)").css("background-color","red")
});
$("#btn14").click(function(){
$("div:nth-child(odd)").css("background-color","red")
});
$("#btn15").click(function(){
$("div:eq(3)").css("background-color","red")
});
$("#btn16").click(function(){
$("div:gt(3)").css("background-color","red")
});
$("#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")
});
内容选择过滤器
$("#btn20").click(function(){
$("div:contains('di')").css("background-color","red")
});
$("#btn21").click(function(){
$("div:empty").css("background-color","red")
});
$("#btn22").click(function(){
$("div:has('.sup')").css("background-color","red")
});
$("#btn23").click(function(){
$("div:parent").css("background-color","red")
});
属性选择器
$("#btn24").click(function(){
$("div[title]").css("background-color","red")
});
$("#btn25").click(function(){
$("div[title='top']").css("background-color","red")
});
$("#btn26").click(function(){
$("div[title!='top']").css("background-color","red")
});
$("#btn26").click(function(){
$("div[title^='top']").css("background-color","red")
});
$("#btn27").click(function(){
$("div[title^='t']").css("background-color","red")
});
$("#btn28").click(function(){
$("div[title$='id']").css("background-color","red")
});
$("#btn29").click(function(){
$("div[title*='t']").css("background-color","red")
});
$("#btn30").click(function(){
$("div[id][title*='op']").css("background-color","red")
});