Correction status:Uncorrected
Teacher's comments:
选择器使用实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery选择器综合案例</title> </head> <body> <p>精简:</p> <div class="SubCategoryBox"> <ul> <li ><a href="#">降龙十八掌</a><i>(30440) </i></li> <li ><a href="#">黯然销魂掌</a><i>(27220) </i></li> <li ><a href="#">九阳神功</a><i>(20808) </i></li> <li ><a href="#">一阳指</a><i>(17821) </i></li> <li ><a href="#">拈花指</a><i>(12289) </i></li> <li ><a href="#">无相神功</a><i>(8242) </i></li> <li ><a href="#">小无相功</a><i>(14894) </i></li> <li ><a href="#">六脉神剑</a><i>(9520) </i></li> <li ><a href="#">凌波微步</a><i>(2195) </i></li> <li ><a href="#">左右互搏术</a><i>(4114) </i></li> <li ><a href="#">玉女心经</a><i>(12205) </i></li> <li ><a href="#">九阴白骨爪</a><i>(1466) </i></li> <li ><a href="#">九阴真经</a><i>(3091) </i></li> <li ><a href="#">乾坤大挪移</a><i>(7275) </i></li> </ul> <div class="showmore"> <a href="#"><span>显示全部品牌</span></a> </div> </div> </body> </html> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //将所有li去掉左边的列表样式 $('li').css('list-style','none') //去掉所有a标签的下滑线 $('a').css('text-decoration','none') //siblings():返回所选元素的所有同级元素,除它自己 $('li').eq(3).siblings().css('color','lightgreen') //省略第二个参数,从第6个开始直到结尾 $('a').slice(6).css('background-color','lightgreen') //先去掉所有元素上面的自定义样式,将元素恢复无样式 $('*').removeAttr('style') //去掉满足条件的元素 $('li').not(':eq(5)').css('background-color','lightgreen') //是p标签的文本和第三个li的文本颜色设为红色 $('li').eq(2).add('p').css('color','red') </script>
点击 "运行实例" 按钮查看在线实例
总结
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素,返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")