abstract:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery</title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;font-size: 22px;} div{width: 80%;margin: 0 auto;} ul,li{list-style: none;margin: 10px;} .con3{width: 100px;height: 100px;border: 1px solid #ccc;} </style> <script type="text/javascript"> $(document).ready(function(){ $('#con').css('border','5px solid pink'); $('.con1').css('box-shadow','5px 5px 10px #888'); $('.con1').css('border','5px solid #ea5404'); $('#con > p').css('color','green'); $('#con p').css('color','orange'); //匹配.con_li后面的所有兄弟li $('.con_li ~ li').css('background','#ccc'); $('p:contains(www.php.cn)').css('font-weight','blod'); $('div:empty').css('background','#ea5404'); $('div:empty').css('color','red'); $('input[name=jinggege]').css('background','green'); $('input[name=btn]').css('background','green'); $(':selected').css('background','red'); $(':checked').parent().css('background','pink'); }) </script> </head> <body> <h4>jQuery选择器</h4> <div id="con"> <p>www.php.cn</p> <p>www.baidu.com</p> <ul class="con_ul"> <li class="con_li"><a href="">php中文网</a></li> <li><a href="">php中文网</a></li> <li><a href="">php中文网</a></li> <li><a href="">php中文网</a></li> <li><a href="">php中文网</a></li> </ul> <div class="con1"> <a href="">link</a> <p>pppppppppp</p> <span></span> <ul> <li>11</li> <li id="con_li2">11</li> <li>11</li> </ul> <div class="con3"></div> </div> <div class="con3"></div> </div> <div class="con3"></div> <form action="./jquery.html" type='post'> <input type="text" name="jinggege" value="姓名"><br> <input type="text" name="age" value="年龄" disabled><br> <input type="button" value="按钮" name="btn"><br> <select name="" id=""> <option value="java">java</option> <option value="java">java</option> <option value="java" selected>java</option> <option value="java">java</option> <option value="java">java</option> </select> <br> <input type="checkbox" name="check" value="php"> <label for=""><input type="checkbox" name="check" value="php" checked>选择</label> <input type="checkbox" name="check" value="php"> </form> </body> </html>
Correcting teacher:灭绝师太Correction time:2018-11-13 16:30:38
Teacher's summary:选择器的学习还是非常重要的,测试全面,棒棒哒!