1.基本选择器示例：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>基本选择器</title> ???????<script type="text/javascript" src="js/jquery-1.8.3.js"></script> ???????<script> ???????????$(function() { ???????????????$("#btn1").click(function() { ???????????????????$("#one").css("background-color", "pink"); ???????????????}); ???????????????$("#btn2").click(function() { ???????????????????$(".mini").css("background-color", "pink"); ???????????????}); ???????????????$("#btn3").click(function() { ???????????????????$("div").css("background-color", "pink"); ???????????????}); ???????????????$("#btn4").click(function() { ???????????????????$("*").css("background-color", "pink"); ???????????????}); ???????????????$("#btn5").click(function() { ???????????????????$("#two,.mini").css("background-color", "pink"); ???????????????}); ???????????}); ???????</script> ???</head> ???<body> ???????<input type="button" id="btn1" value="选择为one的元素" /> ???????<input type="button" id="btn2" value="选择样式为mini的元素" /> ???????<input type="button" id="btn3" value="选择所有的div元素" /> ???????<input type="button" id="btn4" value="选择所有元素" /> ???????<input type="button" id="btn5" value="选择id为two并且样式为mini的元素" /> ???????<hr/> ???????<div id="one"> ???????????<div class="mini"> ???????????????111 ???????????</div> ???????</div> ???????<div id="two"> ???????????<div class="mini"> ???????????????222 ???????????</div> ???????????<div class="mini"> ???????????????333 ???????????</div> ???????</div> ???????<div id="three"> ???????????<div class="mini"> ???????????????444 ???????????</div> ???????????<div class="mini"> ???????????????555 ???????????</div> ???????????<div class="mini"> ???????????????666 ???????????</div> ???????</div> ???????<span id="four"> ???????????????????</span> ???</body></html>2.层级选择器示例（不完整示例，理解层级选择器方法即可）：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>层级选择器</title> ???????<script type="text/javascript" src="js/jquery-1.8.3.js"></script> ???????<script type="text/javascript"> ???????????$(function() { ???????????????$("#btn1").click(function() { ???????????????????$("body div").css("background-color", "gold"); ???????????????}); ???????????????$("#btn2").click(function() { ???????????????????$("body>div").css("background-color", "gold"); ???????????????}); ???????????????$("#btn3").click(function() { ???????????????????$("#two+div").css("background-color", "gold"); ???????????????}); ???????????????$("#btn4").click(function() { ???????????????????$("#one~div").css("background-color", "gold"); ???????????????}); ???????????}); ???????</script> ???</head> ???<body> ???????<input type="button" id="btn1" value="选择body中的所有的div元素" /> ???????<input type="button" id="btn2" value="选择body中的第一级的孩子" /> ???????<input type="button" id="btn3" value="选择id为two的元素的下一个元素" /> ???????<input type="button" id="btn4" value="选择id为one的所有的兄弟元素" /> ???</body></html>3.基本过滤选择器示例：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>过滤选择器</title> ???????<script type="text/javascript" src="js/jquery-1.8.3.js" ></script> ???????<script> ???????????$(function(){ ???????????????$("#btn1").click(function(){ ???????????????????$("body div:first").css("background-color","red"); ???????????????}); ???????????????????????????????$("#btn2").click(function(){ ???????????????????$("body div:last").css("background-color","red"); ???????????????}); ???????????????????????????????$("#btn3").click(function(){ ???????????????????$("body div:odd").css("background-color","red"); ???????????????}); ???????????????????????????????$("#btn4").click(function(){ ???????????????????$("body div:even").css("background-color","red"); ???????????????}); ???????????}); ???????</script> ???????????????????</head> ???<body> ???????<input type="button" id="btn1" value="body中的第一个div元素"/> ???????<input type="button" id="btn2" value="body中的最后一个div元素"/> ???????<input type="button" id="btn3" value="选择body中的奇数的div"/> ???????<input type="button" id="btn4" value="选择body中的偶数的div"/> ???</body></html>4.属性选择器示例：
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>属性选择器</title> ???????<script type="text/javascript" src="js/jquery-1.8.3.js"></script> ???????<script> ???????????$(function() { ???????????????$("#btn1").click(function() { ???????????????????$("div[id]").css("background-color", "red"); ???????????????}); ???????????????$("#btn2").click(function() { ???????????????????$("div[id=‘one‘]").css("background-color", "red"); ???????????????}); ???????????}); ???????</script> ???</head> ???<body> ???????<input type="button" id="btn1" value="选择有id属性的div" /> ???????<input type="button" id="btn2" value="选择有id属性的值为one的div" /> ???</body></html>jQuery选择器
原文地址：https://www.cnblogs.com/xuyiqing/p/8379817.html