今天我们就谈论一下jquery选择器,它们大致分成了四种选择器!!!!
1.基本选择器(标签，ID,类，并集，交集，全局)
1.0(模板)
<body>
<div id="o" class="myc">我是第一个div</div>
<div><span>我是第二个div</span></div>
</body>
1.1（标签)
//标签 $(function(){ $("div").css("background-color","red"); });
1.2（ID)
$(function(){ $("#o").css("background-color","green"); });
1.3（类）
$(function(){ $(".myc").css("background-color","red"); });
1.4(并集)
$(function(){ $("div,#o").css("background-color","red"); });
1.5（交集）
$(function(){ $("div#o").css("background-color","yellow"); });
1.6(全局)
$(function(){ $("*").css("background-color","blue"); });
2.层次选择器（后代，子，相邻，同辈，）
2.1(后代）
$(function(){ $("div span").css("background-color","green"); });
2.2（子）
$(function(){ $("div>span").css("color","blue"); });
2.3(相邻）
$(function(){ $("div+div").css("color","green"); });
2.4(同辈）
$(function(){ $("div~div").css("color","red"); });
3属性选择器
3.0（模板）
<body> <a id="12" href="#123">第一个链接</a> <a id="23" href="@">第二个链接</a> <a id="34" href="#">第三个链接</a> </body>
语法：
3.1
[attribute] 选取包含给定属性的元素
$(function(){
$("[href]").css("color","red");
});
3.2 [attribute=value] 选取等于给定属性是某个特定值的元素
$(function(){ $("[href=#]").css("color","red");
});
3.3[attribute!=value] 选取不等于给定属性是某个特定值的元素
$(function(){
$("[href！=#]").css("color","red");
});
3.4[attribute^=value] 选取给定属性是某个特定值开始的元素
$(function(){ $("[href^#).css("color","red"); });
3.5[attribute$=value] 选取特定值是以某些特定值结尾的元素
$(function(){ $("[href$=123]").css("color","red"); });
3.6[attribute*=value] 选取给定属性是包含某些值
$(function(){
$("[href*'2']").css("color","yellow");
});
3.7[selector][selectorN] 选取满足多个条件的复合属性的元素
$(function(){ $("a[href][id=12]").css("background-color","red"); });
4.过滤选择器(规律选择器两大类：基本过滤选择器，可见性过滤选择器)
4.0（模板）
<body>
<h2>你的生命值</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="a">4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
4.1
语法 ：
：first 选取第一个元素
$(function(){ $("li:first").css("background","red"); });
4.2
：last 选取最后一个元素
$(function(){ $("li:last").css("background","blue"); });
4.3
：not（selector） 选取去除所有与定选择器匹配的元素
$(function(){ $("li:not(.a)").css("background","blue"); });
4.4
：even 选取索引是偶数的所有元素（index从0开始）
$(function(){ $("li:even").css("background","blue"); });
4.5
：odd 选取索引是奇数的所有元素（index从0开始）
$(function(){ $("li:odd").css("background","blue"); });
4.6
：eq（index） 选取索引等于index的元素（index从0开始）
$(function(){ $("li:eq(1)").css("background","blue"); });
4.7
：gt（index） 选取索引大于index的元素（index从0开始）
$(function(){ $("li:gt(1)").css("background","blue"); });
4.8
：lt（index） 选取索引小于index的元素（index从0开始）
$(function(){ $("li:lt(1)").css("background","blue"); });
4.9
：header 选取所有标题元素，如h1~h6
$(function(){ $(":header").css("background","blue"); });
4.10
:focus 选取当前获取焦点的元素
$(function(){ $(":focus").css("background","red"); });
5.0（模板）
<body> <p id="text_hide">点击按钮，我会被隐藏</p> <p id="text_show">隐藏的我，被显示了，嘿嘿</p> <input name="shwo" type="button" value="点击显示文字"/> <input name="hide" type="button" value="点击显示文字"/> </body>
语法：
5.1
hideen 选取所有隐藏的元素
$(function(){
$("p:hidden").show(100);
});
5.2
visible 选取所有可见的元素
$(function(){ $("p:visible").hide(100); });