1 <!DOCTYPE html> 2 <html> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Insert title here</title> 6 ????<script type="text/javascript" src="js/jquery-1.8.3.js"></script> 7 ????<!-- 为了测试，先添加一些样式 --> 8 ????<style type="text/css"> 9 ????????div[class=big] {10 ???????????width:140px;11 ???????????height:140px;12 ???????????margin:5px;13 ???????????background:#aaa;14 ???????????border:#000 1px solid;15 ???????????float:left;16 ???????????font-size:17px;17 ???????????font-family:Verdana;18 ?????????}19 ????????div[class=small] {20 ???????????width:55px;21 ???????????height:60px;22 ???????????margin:5px;23 ???????????background:#aaa;24 ???????????border:#000 1px solid;25 ???????????float:left;26 ???????????font-size:17px;27 ???????????font-family:Verdana;28 ?????????}29 ????</style>30 ????31 ????<script type="text/javascript">32 ????????//jQuery的页面加载完成时触发的事件33 ????????$(document).ready(function(){34 ????????????//$("div[title]")表示：选择有title属性的div35 ????????????$(button1).click(function(){36 ????????????????$("div[title]").css("background-color", "red");37 ????????????});38 ????????????39 ????????????//$("div[id=‘div3‘]")表示：选择id为div3的div40 ????????????$(button2).click(function(){41 ????????????????$("div[id=‘div3‘]").css("background-color", "red");42 ????????????});43 ????????????44 ????????????//$("div[id!=‘small2‘]")表示：选择id值除了small2以外的所有div45 ????????????$(button3).click(function(){46 ????????????????$("div[id!=‘small2‘]").css("background-color", "red");47 ????????????});48 ????????????49 ????????????//$("div[id^=‘small‘]")表示：选择id值前面是small的div50 ????????????$(button4).click(function(){51 ????????????????$("div[id^=‘small‘]").css("background-color", "red");52 ????????????});53 ????????????54 ????????????//$("div[id$=‘1‘]")表示：选择id值后面是1的div55 ????????????$(button5).click(function(){56 ????????????????$("div[id$=‘1‘]").css("background-color", "red");57 ????????????});58 ????????????59 ????????????//$("div[id*=‘div‘]")表示：选择id值里面含有div的div60 ????????????$(button6).click(function(){61 ????????????????$("div[id*=‘div‘]").css("background-color", "red");62 ????????????});63 ????????????64 ????????});65 ????</script>66 </head>67 <body>68 ????<a href="">刷新</a>69 ????<input type="button" id="button1" value="选择有title"/>70 ????<input type="button" id="button2" value="选择div3"/>71 ????<input type="button" id="button3" value="选择除了small2的所有div"/>72 ????<input type="button" id="button4" value="选择small开头的div"/>73 ????<input type="button" id="button5" value="选择1结尾的div"/>74 ????<input type="button" id="button6" value="选择属性值含有div的元素"/>75 ????<br/><br/>76 ????77 ????<div class="big" id="div1">78 ????????div1<br/>79 ????????<div class="small" id="small1">small1</div>80 ????????<div class="small" id="small2">small2</div>81 ????</div>82 83 ????<div class="big" id="div2">84 ????????div2<br/>85 ????????<div class="small" id="small3">small3</div>86 ????????<div class="small" id="small4" title>small4<br/>_title</div>87 ????</div>88 ????89 ????<div class="big" id="div3">90 ????????div3<br/>91 ????????<div class="small" id="small3">small5</div>92 ????</div>93 ????94 ????<div class="big" id="div4">95 ????????div496 ????</div>97 98 </body>99 </html>jQuery属性选择器
原文地址：https://www.cnblogs.com/xiaostudy/p/9563367.html