<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery选择器</title> <link href="./public/css/bootstrap.min.css" rel="stylesheet"> <script src="./jquery-1.8.3.min.js "></script> <!--[if lt IE 9]> <script src="./public/js/html5shiv.min.js"></script> <script src="./public/js/respond.min.js"></script> <![endif]--> <style> img {width: 200px;} p {display: inline-block;font-size: 15px;margin-left: 300px;} </style> <script> $(function() { //基本选择器 // 通配符---->匹配页面所有的元素 $('*').css('border','4px solid #cea'); // ID选择器---->匹配指定ID名称的图片 $('#first').css('border','4px solid #f00'); //class选择器---->匹配指定class名的图片 $('.hello').css('border','4px solid #f00'); // 标签选择器---->匹配指定标签的图片 $('p').css('border','4px solid #000'); //组合选择器---->匹配tr下所有的th $('tr,th').css('border','4px solid #0ff'); // 层级选择器 // 匹配class row下的所有a标签 $('.row a').css('border','4px solid #0ff'); //匹配a下的所有子元素img $('.row a>img').css('border','4px solid #f0f'); // 匹配img下b元素后紧挨着的下一个b元素 $('img+b').css('border','4px solid #ff0'); // 匹配img下紧邻span的所有同辈元素 $('img~span').css('border','4px solid #f90'); // 过滤选择器 // 匹配list下td元素列表中第一个td元素 $('#list td:first').css('border','5px solid #f00'); // 匹配list下td元素列表中最后一个td元素 $('#list td:last').css('border','5px solid #f0f'); // 匹配list下td元素列表中指定下标的td元素,即第二个 $('#list td:eq(1)').css('border','5px solid #ff0'); // 匹配list下td元素列表中所有下标小于2的td $('#list td:lt(2)').css('background','#cae'); // 匹配list下td元素列表中所有下标大于2的td $('#list td:gt(2)').css('background','#cea'); // 匹配list2下td元素列表中所有下标为偶数的td $('#list2 td:even').css('border','5px solid #f70'); // 匹配list2下td元素列表中所有下标为奇数的td $('#list2 td:odd').css('border','5px solid #cae'); // 匹配页面所有的h标签 $(':header').css('border','5px solid #f90'); // 排除list3下指定选择器选择的td元素 $('#list3:not(td)').css('background','#ff0'); // 内容选择器 //匹配p元素标签列表下文本内容有相思的p元素 $('p:contains("相思")').css('background','#f00'); //匹配lists下li元素标签列表下class为item的元素的元素 $("#lists li:has('.item')").css('border','5px solid #f80'); // 匹配lists下含有子元素 或 文本的元素的li元素 $("#lists li:parent").css('background','#ff0'); // 匹配lists下不含有子元素 或 文本的元素的li元素 $("#lists li:empty").css('background','#f00'); // 属性选择器 // 匹配整个页面含有alt属性的元素 $("[alt]").css('opacity','0.5'); // 匹配整个页面width属性值为200的元素 $("[width=200]").css('box-shadow','10px 10px 20px #ccc'); // 匹配整个页面img的width属性值不为200的img元素 $("img[width!=200]").css('box-shadow','10px 10px 20px #cae'); // 匹配整个页面img的title属性以p开头的img元素 $("img[title^='p']").css('border','2px solid #2D3'); // 匹配整个页面img的title以1结尾的img元素 $("img[title$='1']").css('border','20px solid #246da2'); // 匹配整个页面img的title包含i的img元素 $("img[title*='i']").css('border','15px solid blue'); // 匹配整个页面img的width为300,title以p开头并包含i且alt为t3的img元素 $("img[width=300][title*=i][alt=t3][title^=p]").css('border','13px solid #f00'); // 子选择器 //匹配lists下所有ul下li元素的第2个li $("#lists li:nth-child(2)").css('background','blue'); //匹配lists下所有ul下li元素的第1个li, $("#lists li:first-child").css('background','pink'); //匹配lists下所有ul下li元素的最后一个li, $("#lists li:last-child").css('background','grey'); //匹配lists下所有ul下li元素只有唯一个子元素的li $("#lists li:only-child").css('background','#cae'); // 表单选择器 //匹配页面所有的表单元素 console.table($(":input")); //匹配所有的单行文本框 console.log($(":text")); // 匹配所有密码框 console.log($(":password")); // 匹配所有单选按钮 console.table($(":radio")) // 匹配所有复选框 console.table($(":checkbox")) // 匹配所有提交按钮 console.log($(":submit")); //匹配所有图像域 console.log($(":image")); // 匹配所有重置按钮 console.log($(":reset")); // 匹配所有按钮 console.log($(":button")); // 匹配所有文件域 console.log($(":file")); //表单对象选择器 // 匹配所有可用元素 console.log($("input:enabled")); // 匹配所有不可用元素 console.log($("input:disabled")); // 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) console.log($("input:checked")); //匹配所有选中的option元素 console.log($("select option:selected")); }) </script> </head> <body> <h1>你好，jQuery！</h1> <hr> <form> <input type="button" value="Input Button"/> <input type="checkbox" checked="checked" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" checked="checked" /> <input type="reset" /> <input type="submit" disabled="disabled" /> <input type="text" /> <select> <option selected="selected">Option</option> <option >Option</option> </select> <textarea></textarea> <button>Button</button> </form> <hr> <div class="row"> <div id="first" class="col-xs-6 col-md-2 "> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" width="200" alt="t2" title="c1"> <span class="text-info">我是一段长长长长长长长长长长长的文字</span> </a> </div> <div class="col-xs-6 col-md-2"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" width="300" alt="t3" title="pic3"> <span class="text-info">我是一段长长长长长长长长长长长的文字</span> </a> </div> <div class="col-xs-6 col-md-2"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" alt="t4" title="ic1"> <i class="text-info">我是一段长长长长长长长长长长长的文字</i> </a> </div> <div class="col-xs-6 col-md-2"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" title="ic5"> <span class="text-info">我是一段长长长长长长长长长长长的文字</span> </a> </div> <div class="col-xs-6 col-md-2"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" alt="t6" title="ic6"> <b class="text-info">我是一段长长长长长长长长长长长的文字</b> </a> </div> <div class="col-xs-6 col-md-2"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" title="i7"> <b class="text-info">我是一段长长长长长长长长长长长的文字</b> </a> </div> <div class="col-xs-6 col-md-2"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" alt="t8" title="i8"> <b class="text-info">我是一段长长长长长长长长长长长的文字</b> </a> </div> <div class="col-xs-6 col-md-2"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" title="pc9"> <span class="text-info">我是一段长长长长长长长长长长长的文字</span> </a> </div> <div class="col-xs-6 col-md-2 hello"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" alt="t10" title="pic10"> <em class="text-info">我是一段长长长长长长长长长长长的文字</em> </a> </div> <div class="col-xs-6 col-md-2 "> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" alt="t11" title="pic11"> <span class="text-info">我是一段长长长长长长长长长长长的文字</span> </a> </div> <div class="col-xs-6 col-md-2 hello"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" title="ic12"> <b class="text-info">我是一段长长长长长长长长长长长的文字</b> </a> </div> <div class="col-xs-6 col-md-2"> <a href="#" class="thumbnail"> <img src="./imgs/1.jpg" alt="t13" title="ic13"> <b class="text-info">我是一段长长长长长长长长长长长的文字</b> </a> </div> </div> <hr> <br><br><br> <p class="text-primary">入骨相思知不知</p> <p class="text-success">月落乌啼霜满天</p> <p class="text-info">江枫渔火对愁眠</p> <p class="text-success">姑苏城外寒山寺</p> <p class="text-danger">夜半钟声到客船</p> <p class="text-muted">玲珑骰子安红豆</p> <hr> <ul id="lists"> <li>12312312</li> <li></li> <li> 1231231231 <ul> <li>1231231231</li> <li>1231231233</li> <li>1231231231</li> <p>2312312</p> <li class="item">1231231231</li> <li>213231231231</li> <li>123123123123</li> </ul> </li> <li>123123123123</li> <li class="item">1231231231</li> <li>123123123123</li> <ul> <li>孤独</li> </ul> </ul> <br><br><br> <hr> <table class="table table-bordered text-center"> <tr class="active"> <th class="love">愿你三冬暖</th> <th>愿你三冬暖</th> <th>愿你三冬暖</th> <th>愿你三冬暖</th> </tr> <tr class="success" id="list"> <td>愿你春不寒</td> <td>愿你春不寒</td> <td>愿你春不寒</td> <td>愿你春不寒</td> </tr> <tr class="warning" id="list2"> <td class="love">愿你秋不凉</td> <td>愿你秋不凉</td> <td>愿<h5>你秋</h5>不凉</td> <td>愿你秋不凉</td> </tr> <tr id="list3"> <th class="love">愿你三冬暖</th> <th>愿你三冬暖</th> <th>愿你三冬暖</th> <th>愿你三冬暖</th> </tr> <tr class="danger"> <td>愿你夏无眠</td> <td>愿你夏无眠</td> <td>愿你夏无眠</td> <td>愿你夏无眠</td> </tr> <tr class="info"> <td>如春日之风</td> <td>如春日之风</td> <td>如春日之风</td> <td>如春日之风</td> </tr> <tr class="active"> <td>如夏日炎炎</td> <td>如夏日炎炎</td> <td>如夏日炎炎</td> <td>如夏日炎炎</td> </tr> <tr class="success"> <td class="love">如秋日果香</td> <td>如秋日果香</td> <td>如秋日果香</td> <td>如秋日果香</td> </tr> <tr c class="warning"> <td>如冬日暖阳</td> <td>如冬日暖阳</td> <td>如冬日暖阳</td> <td>如冬日暖阳</td> </tr> <tr class="danger "> <td>如世间所有</td> <td>如世间所有</td> <td>如世间所有</td> <td>如世间所有</td> </tr> <tr class="info "> <td>所有的一半</td> <td class="love">所有的一半</td> <td>所有的一半</td> <td>所有的一半</td> </tr> <tr class="active "> <td>所以才离首</td> <td>所以才离首</td> <td>所以才离首</td> <td>所以才离首</td> </tr> </table> <script src="./public/js/jquery.min.js "></script> <script src="./public/js/bootstrap.min.js "></script> </body> </html>