选择器的使用理解为：执行jQuery核心函数，传入选择器的字符串 $( ... )
基本选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>05_基本选择器</title> </head> <body> <div id="div1" class="box">div1(class="box")</div> <div id="div2" class="box">div2(class="box")</div> <div id="div3">div3</div> <span class="box">span(class="box")</span> <br> <ul> <li>AAAAA</li> <li title="hello">BBBBB(title="hello")</li> <li class="box">CCCCC(class="box")</li> <li title="hello">DDDDDD(title="hello")</li> </ul> <!-- 1. 是什么? - 有特定格式的字符串 2. 作用 - 用来查找特定页面元素 3. 基本选择器 - #id : id选择器 - element : 元素选择器 - .class : 属性选择器 - * : 任意标签 - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器) - selector1selector2selectorN : 取多个选择器的交集(相交选择器) --> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 选择id为div1的元素 2. 选择所有的div元素 3. 选择所有class属性为box的元素 4. 选择所有的div和span元素 5. 选择所有class属性为box的div元素 */ //1. 选择id为div1的元素 // $('#div1').css('background', 'red') //2. 选择所有的div元素 // $('div').css('background', 'red') //3. 选择所有class属性为box的元素 //$('.box').css('background', 'red') //4. 选择所有的div和span元素 // $('div,span').css('background', 'red') //5. 选择所有class属性为box的div元素 //$('div.box').css('background', 'red') //$('*').css('background', 'red') </script> </body> </html>
层次选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>06_层次选择器</title> </head> <body> <ul> <li>AAAAA</li> <li class="box">CCCCC</li> <li title="hello"><span>BBBBB</span></li> <li title="hello"><span class="box">DDDD</span></li> <span>EEEEE</span> </ul> <!-- 层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器 1. ancestor descendant 在给定的祖先元素下匹配所有的后代元素 2. parent>child 在给定的父元素下匹配所有的子元素 3. prev+next 匹配所有紧接在 prev 元素后的 next 元素 4. prev~siblings 匹配 prev 元素之后的所有 siblings 元素 --> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 选中ul下所有的的span 2. 选中ul下所有的子元素span 3. 选中class为box的下一个li 4. 选中ul下的class为box的元素后面的所有兄弟元素 */ //1. 选中ul下所有的的span // $('ul span').css('background', 'yellow') //2. 选中ul下所有的子元素span // $('ul>span').css('background', 'yellow') //3. 选中class为box的下一个li // $('.box+li').css('background', 'yellow') //4. 选中ul下的class为box的元素后面的所有兄弟元素 $('ul .box~*').css('background', 'yellow') </script> </body> </html>
过滤选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_过滤选择器</title> </head> <body> <div id="div1" class="box">class为box的div1</div> <div id="div2" class="box">class为box的div2</div> <div id="div3">div3</div> <span class="box">class为box的span</span> <br/> <ul> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">BBBBB</li> <li style="display:none">我本来是隐藏的</li> </ul> <!-- 在原有选择器匹配的元素中进一步进行过滤的选择器 * 基本 * 内容 * 可见性 * 属性 --> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 选择第一个div 2. 选择最后一个class为box的元素 3. 选择所有class属性不为box的div 4. 选择第二个和第三个li元素 5. 选择内容为BBBBB的li 6. 选择隐藏的li 7. 选择有title属性的li元素 8. 选择所有属性title为hello的li元素 */ //1. 选择第一个div // $('div:first').css('background', 'red') //2. 选择最后一个class为box的元素 //$('.box:last').css('background', 'red') //3. 选择所有class属性不为box的div // $('div:not(.box)').css('background', 'red') //没有class属性也可以 //4. 选择第二个和第三个li元素 // $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次 //$('li:lt(3):gt(0)').css('background', 'red') //5. 选择内容为BBBBB的li // $('li:contains("BBBBB")').css('background', 'red') //6. 选择隐藏的li // console.log($('li:hidden').length, $('li:hidden')[0]) //7. 选择有title属性的li元素 // $('li[title]').css('background', 'red') //8. 选择所有属性title为hello的li元素 $('li[title="hello"]').css('background', 'red') </script> </body> </html>
隔行换色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01__表格隔行变色</title> <style> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } #data { width: 600px; } #data, td, th { border-collapse: collapse; border: 1px solid #aaaaaa; } th, td { height: 28px; } #data thead { background-color: #333399; color: #ffffff; } .odd { background-color: #ccccff; } </style> </head> <body> <table id="data"> <thead> <tr> <th>姓名</th> <th>工资</th> <th>入职时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>Tom</td> <td>$3500</td> <td>2010-10-25</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>Mary</td> <td>$3400</td> <td>2010-12-1</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>King</td> <td>$5900</td> <td>2009-08-17</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>Scott</td> <td>$3800</td> <td>2012-11-17</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>Smith</td> <td>$3100</td> <td>2014-01-27</td> <td><a href="javascript:void(0)">删除</a></td> </tr> <tr> <td>Allen</td> <td>$3700</td> <td>2011-12-05</td> <td><a href="javascript:void(0)">删除</a></td> </tr> </tbody> </table> <script type="text/javascript" src="js/jquery-1.10.1.js"></script> <script type="text/javascript"> $('#data>tbody>tr:odd').css('background', '#ccccff') // $('#data>tbody>tr:odd').addClass('odd') //$('#data>tbody>tr:odd').attr('class', 'odd') </script> </body> </html>
表单选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>08_表单选择器</title> </head> <body> <form> 用户名: <input type="text"/><br> 密 码: <input type="password"/><br> 爱 好: <input type="checkbox" checked="checked"/>篮球 <input type="checkbox"/>足球 <input type="checkbox" checked="checked"/>羽毛球 <br> 性 别: <input type="radio" name="sex" value='male'/>男 <input type="radio" name="sex" value='female'/>女<br> 邮 箱: <input type="text" name="email" disabled="disabled"/><br> 所在地: <select> <option value="1">北京</option> <option value="2" selected="selected">天津</option> <option value="3">河北</option> </select><br> <input type="submit" value="提交"/> </form> <!-- 表单选择器 1). 表单 2). 表单对象属性 --> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 选择不可用的文本输入框 2. 显示选择爱好 的个数 3. 显示选择的城市名称 */ //1. 选择不可用的文本输入框 // $(':text:disabled').css('background', 'red') //2. 显示选择爱好 的个数 console.log($(':checkbox:checked').length) //3. 显示选择的城市名称 $(':submit').click(function () { var city = $('select>option:selected').html() // 选择的option的标签体文本 city = $('select').val() // 选择的option的value属性值 alert(city) }) </script> </body> </html>