1、基础选择器
<script type="text/javascript"> $(function(){ //id匹配元素 $("#divOne").css("display","none"); }) $(function(){ //元素名匹配元素 $("div span").css("display","none"); }) $(function(){ //类匹配元素 $(".clsFrame .clsOne").css("display","none"); }) $(function(){ //匹配所有元素 $("*").css("display","none"); }) $(function(){ //合并匹配元素 $("#divOne,span").css("display","none"); }) </script> ...jQuery控制的代码 <div class="clsFrame"> <div id="divOne">ID</div> <div class="clsOne">CLASS</div> <span>SPAN</span> </div>2、层次选择器
<script type="text/javascript"> $(function(){ //匹配后代元素 $("div span").css("display","none");//隐藏div中所有的<span>标记 }) $(function(){ //匹配子元素 $("div>span").css("display","none");//隐藏div中子span标记 }) $(function(){ //匹配后面元素 $("#divMid + div").css("display","none");//隐藏id为divMid元素后的下一个div $("#divMid").next().css("display","none"); }) $(function(){ //匹配所有后面元素 $("#divMid ~ div").css("display","none");//隐藏id为divMid元素后的所有div $("#divMid").nextAll().css("display","none"); }) $(function(){ //匹配所有相邻元素 $("#divMid").siblings("div").css("display","none");//隐藏id为divMid元素的所有相邻div }) </script>3、简单过滤选择器
<script type="text/javascript"> $(function(){ //增加第一个元素的类别 $("li:first").addClass("GetFocus");// }) $(function(){ //增加最后一个元素的类别 $("li:last").addClass("GetFocus"); // }) $(function(){ //增加去除所有与给定选择器匹配的元素类别 $("li:not(.NotClass)").addClass("GetFocus");// }) $(function(){ //增加所有索引值为偶数的元素类别，从0开始计数 $("li:even").addClass("GetFocus"); // }) $(function(){ //增加所有索引值为奇数的元素类别，从0开始计数 $("li:odd") .addClass("GetFocus"); // }) $(function(){ //增加一个给定索引值的元素类别，从0开始计数 $("li:eq(1)").addClass("GetFocus"); // }) $(function(){ //增加所有大于给定索引值的元素类别，从0开始计数 $("li:gt(1)").addClass("GetFocus"); // }) $(function(){ //增加所有小于给定索引值的元素类别，从0开始计数 $("li:lt(4)").addClass("GetFocus"); // }) $(function(){ //增加标题类元素类别 $("div h1").css("width","238"); // $(":header").addClass("GetFocus"); // }) $(function(){ //增加动画效果元素类别 animateIt(); $("#spanMove:animated").addClass("GetFocus"); // }) function animateIt() {//动画效果 $("#spanMove").slideToggle("slow",animateIt); } </script>4、内容过滤选择器
<script type="text/javascript"> $(function(){ //显示包含给定文本的元素 $("div:contains('Div')").css("display","block"); }) $(function(){ //显示所有不包含子元素或者文本的空元素 $("div:empty").css("display","block"); }) $(function(){ //显示含有选择器所匹配的元素 $("div:has(span)").css("display","block");//显示含有span标记的元素 }) $(function(){ //显示含有子元素或者文本的元素 $("div:parent").css("display","block"); }) </script>5、可见性过滤选择器
<script type="text/javascript"> $(function(){ //增加所有可见元素的类别 $("span:hidden").show() $("div:visible").addClass("GetFocus"); }) $(function(){ //增加所有不可见元素类别 $("span:hidden").show().addClass(""); })</script> 相关资源：jquery入门（一）