1、完整代碼 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" c ...
1、完整代碼
<!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="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> .my-padding { padding: 10px 0; } .my-dark { background-color: #f5f5f5; } .footer { background: #111; font-size: 0.9em; position: relative; clear: both; } .my-white { color: #ffffff; } body { margin: 0; } #progress { height: 2px; background-color: #b91f1f; transition: opacity 500ms linear; } #progress.done{ opacity: 0; } </style> </head> <body> <div id="progress"></div> <!--導航欄開始--> <nav class="navbar navbar-inverse my-nav"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.oldboyedu.com/"><strong>OldBoy Edu</strong></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Python學院<span class="sr-only">(current)</span></a></li> <li><a href="#">Linux學院</a></li> <li><a href="http://luffy.oldboyedu.com">路飛學城</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">好好學習</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">聯繫我們<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Jason</a></li> <li><a href="#">Sean</a></li> <li><a href="#">Oscar</a></li> <li role="separator" class="divider"></li> <li><a href="#">Jason</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--導航欄結束--> <div class="container"> <div class="jumbotron"> <div id="i1" class="container"> <h1 class="c1">Jason</h1> <h1 class="c1">帶你學習jQuery</h1> <p id="p1"><a class="btn btn-primary btn-lg" href="https://q1mi.github.io/Blog/2017/07/10/about_jQuery/" role="button">查看更多</a></p></div> </div> <hr> <div class="row"> <div class="col-md-12"> <table class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>姓名</th> <th>愛好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>Jason</td> <td>學習</td> <td> <button class="btn btn-warning">編輯</button> <button class="btn btn-danger">刪除</button> </td> </tr> <tr> <th>2</th> <td>Oscar</td> <td>大餅</td> <td> <button class="btn btn-warning">編輯</button> <button class="btn btn-danger">刪除</button> </td> </tr> <tr id="tr3"> <th>3</th> <td>Egon</td> <td>吹牛逼</td> <td> <button class="btn btn-warning">編輯</button> <button class="btn btn-danger">刪除</button> </td> </tr> </tbody> </table> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <form id="f1"> <div class="form-group"> <label for="exampleInputEmail1">郵箱</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">密碼</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">上傳頭像</label> <input type="file" id="exampleInputFile"> <p class="help-block">只支持img格式。</p> </div> <button id="btnSubmit" type="submit" class="btn btn-default">提交</button> </form> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <div class="checkbox-wrapper"> <div class="panel panel-info"> <div class="panel-heading">jQuery學習指南</div> <div id="my-checkbox" class="panel-body"> <div class="checkbox"> <label> <input type="checkbox" value="0"> jQuery一點都不難 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="1" checked> jQuery一學就會 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="2"> jQuery就要多練 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="3" disabled> jQuery學不好 </label> </div> </div> </div> </div> <hr> <div class="radio-wrapper"> <div class="panel panel-info"> <div class="panel-heading">我來老男孩之後...</div> <div class="panel-body"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 我的心中只有學習 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 學習真的太TM有意思了 </label> </div> </div> </div> </div> </div> </div> <hr> <div> <i class="fa fa-hand-pointer-o fa-lg fa-rotate-90" aria-hidden="true"></i> <a class="btn btn-success" href="http://jquery.cuishifeng.cn/">jQuery中文API指南</a> </div> <hr> <div class="row"> <div class="col-md-12"> <h2>練習題：</h2> <ol id="o1"> <li>找到本頁面中id是<code>i1</code>的標簽</li> <p>$('#i1') # id選擇器 </p> <li>找到本頁面中所有的<code>h2</code>標簽</li> <p>$('h2') # 標簽選擇器 </p> <li>找到本頁面中所有的<code>input</code>標簽</li> <p>$('input') </p> <li>找到本頁面所有樣式類中有<code>c1</code>的標簽</li> <p>$('.c1') # 類選擇器</p> <li>找到本頁面所有樣式類中有<code>btn-default</code>的標簽</li> <p>$('.btn-default') </p> <li>找到本頁面所有樣式類中有<code>c1</code>的標簽和所有<code>h2</code>標簽</li> <p>$('.c1,h2') </p> <li>找到本頁面所有樣式類中有<code>c1</code>的標簽和id是<code>p3</code>的標簽</li> <p>$('.c1,#p3') </p> <li>找到本頁面所有樣式類中有<code>c1</code>的標簽和所有樣式類中有<code>btn</code>的標簽</li> <p>$('.c1,.btn')</p> <p id="p2" class="divider"></p> <li>找到本頁面中<code>form</code>標簽中的所有<code>input</code>標簽</li> <p>$('form input') 或者 $('form').find('input')</p> <li>找到本頁面中被包裹在<code>label</code>標簽內的<code>input</code>標簽</li> <p>$('label input')</p> <li>找到本頁面中緊挨在<code>label</code>標簽後面的<code>input</code>標簽</li> <p>$('label+input')</p> <li>找到本頁面中id為<code>p2</code>的標簽後面所有和它同級的<code>li</code>標簽</li> <p>$('#p2~li')</p> <p id="p3" class="divider"></p> <li>找到id值為<code>f1</code>的標簽內部的第一個input標簽</li> <p>$('#f1 input:first')</p> <li>找到id值為<code>my-checkbox</code>的標簽內部最後一個input標簽</li> <p>$('#my-checkbox input:last')</p> <li><
