我把八成选择器内容做成了一个程序，复制浏览便可以进行学习
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title> ?</title> ???????<link rel="stylesheet" type="text/css" href="css/style.css" /> ???????<script src="js/jquery.js" type="text/javascript"></script> ???????<script src="js/assist.js" type="text/javascript"></script> ???????<script type="text/javascript"> ???????????$(document).ready(function(){ ??????//选择 id为 one 的元素 ?????$(‘#btn1‘).click(function(){ ?????????$(‘#one‘).css("background","#bfa"); ?????}); ?????//选择 class 为 mini 的所有元素 ?????$(‘#btn2‘).click(function(){ ?????????$(‘.mini‘).css("background","#bfa"); ?????}); ?????//选择 元素名是 div 的所有元素 ?????$(‘#btn3‘).click(function(){ ?????????$(‘div‘).css("background","#bfa"); ?????}); ?????//选择 所有的元素 ?????$(‘#btn4‘).click(function(){ ?????????$(‘*‘).css("background","#bfa"); ?????}); ?????//选择 所有的span元素和id为two的div元素 ?????$(‘#btn5‘).click(function(){ ?????????$(‘span,#two‘).css("background","#bfa"); ?????}); ?????????$(‘#btn6‘).click(function(){ ?????????$(‘body div‘).css("background","#bfa"); ?????}); ?????$(‘#btn7‘).click(function(){ ?????????$(‘body>div‘).css("background","#bfa"); ?????}); ?????$(‘#btn8‘).click(function(){ ?????????$(".one+div").css("background","#bfa"); ?????}); ?????$(‘#btn9‘).click(function(){ ?????????$("#two~div").css("background","#bfa"); ?????}); ?????$(‘#btn11‘).click(function(){ ?????????$("div:last").css("background","#bfa"); ?????}); ?????$(‘#btn12‘).click(function(){ ?????????$("div:not(.one)").css("background","#bfa"); ?????}); ?????$(‘#btn13‘).click(function(){ ?????????$("div:even").css("background","#bfa"); ?????????//索引值位奇数的将even改为odd ?????}) ?????$(‘#btn14‘).click(function(){ ?????????$("div:eq(3)").css("background","#bfa"); ?????}); ??????$(‘#btn15‘).click(function(){ ?????????$("div:gt(3)").css("background","#bfa"); ?????}); ???????$(‘#btn16‘).click(function(){ ?????????$("div:lt(3)").css("background","#bfa"); ?????}); ?????$(‘#btn17‘).click(function(){ ?????????$("div:contains(di)").css("background","#bfa"); ?????}); ??????$(‘#btn18‘).click(function(){ ?????????$("div:empty").css("background","#bfa"); ?????}); ??????$(‘#btn19‘).click(function(){ ?????????$("div:has(.mini)").css("background","#bfa"); ?????}); ??????$(‘#btn20‘).click(function(){ ?????????$("div:parent").css("background","#bfa"); ?????}); ??????$(‘#btn21‘).click(function(){ ?????????$("div:visible").css("background","#bfa"); ?????}); ??????$(‘#btn22‘).click(function(){ ?????????$("div:hidden").show(3000); ?????}); ??????$(‘#btn23‘).click(function(){ ?????????$("div[title]").css("background","#bfa"); ?????}); ?????$(‘#btn24‘).click(function(){ ?????????$("div[title=test").css("background","#bfa");//div[title!=test]改变不等于的背景色 ?????}); ??????$(‘#btn25‘).click(function(){ ?????????$("div[title^=te").css("background","#bfa");//div[title$=est]改变元素以est结尾的div背景色 ?????}); ?????$(‘#btn26‘).click(function(){ ?????????$("div[title*=es]").css("background","#bfa");//div[id][title*=es]含有属性id并且ttle含有es的div背景色 ?????}); ?????$(‘#btn27‘).click(function(){ ?????????$("div.one:nth-child(2)").css("background","#bfa");//div.one:first-child ?div.one:last-child ?class为one的div把第（最后）一个子元素背景色改变 ?????});//div.one:only-child 若只有一个子元素改变其背景色 ???}) ?</script></head><body><button id="reset">手动重置页面元素</button><input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /><h3>基本选择器.</h3><!-- 控制按钮 --><input type="button" value="选择 id为 one 的元素." id="btn1"/> ?<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/><input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/><input type="button" value="选择 所有的元素." id="btn4"/><input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/><input type="button" value="改变Body所有div的颜色" id="btn6" /><input type="button" value="改变body子div的颜色" id="btn7" /><input type="button" value="改变class为one的下一个div属性" id="btn8"/><input type="button" value="所有id为two的元素的下所有div元素" id="btn9"/><input type="button" value="改变第一个div元素的背景色" id="btn10" /><input type="button" value="改变最后一个一个div元素的背景色" id="btn11" /><input type="button" value="改变class不为one的div背景色" id="btn12" /><input type="button" value="索引值位偶数的div元素背景" id="btn13" /><input type="button" value="改变索引值为3的div元素背景色" id="btn14"/><input type="button" value="改变索引值大于3的div元素背景色" id="btn15"/><input type="button" value="改变索引值小于3的div元素背景色" id="btn16"/><input type="button" value="改变文本含有di的div背景色" id="btn17"/><input type="button" value="改变不含有子元素的div背景色" id="btn18"/><input type="button" value="改变class为mini的div背景色" id="btn19"/><input type="button" value="改变含有子元素的div背景色" id="btn20"/><input type="button" value="选取所有可见元素" id="btn21"/><input type="button" value="选取所有不可见元素" id="btn22"/><input type="button" value="改变有属性title的div背景色" id="btn23" /><input type="button" value="改变有属性title=test的div背景色" id="btn24" /><input type="button" value="改变属性title以te开始的div元素" id="btn25" /><input type="button" value="改变属性含有te开始的div元素" id="btn26" /><input type="button" value="改变class为one的div父元素下的第二个子元素" id="btn27" /><br /><br /><!-- 测试的元素 --><div class="one" id="one" > ???id为one,class为one的div ???<div class="mini">class为mini</div></div><div class="one" ?id="two" title="test" > ???id为two,class为one,title为test的div. ???<div class="mini" ?title="other">class为mini,title为other</div> ???<div class="mini" ?title="test">class为mini,title为test</div></div><div class="one"> ???<div class="mini">class为mini</div> ???<div class="mini">class为mini</div> ???<div class="mini">class为mini</div> ???<div class="mini"></div></div><div class="one"> ???<div class="mini">class为mini</div> ???<div class="mini">class为mini</div> ???<div class="mini">class为mini</div> ???<div class="mini" ?title="tesst">class为mini,title为tesst</div></div><div style="display:none;" ?class="none"> ???style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div> ???包含input的type为"hidden"的div<input type="hidden" size="8"/></div><span id="mover">正在执行动画的span元素.</span></body></html>js/jquery.js此代码兼容最新框架
assist.js
$(document).ready(function(){ ???//手动重置页面元素 ???$("#reset").click(function(){ ???????$("*").removeAttr("style"); ???????$("div[class=none]").css({"display":"none"}); ????}); ???//判断是否自动重置 ???$("input[type=button]").click(function(){ ???????if($("#isreset").is(":checked")){ ???????????$("#reset").click(); ???????} ???}); ???//给id为mover的元素添加动画. ???function animateIt() { ???????$("#mover").slideToggle("slow", animateIt); ???} ???animateIt();})jQuery选择器
原文地址：https://www.cnblogs.com/biaowei/p/8870043.html