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>找到id值为<code>my-checkbox</code>的标签内部没有被选中的那个input标签</li> <p>$('#my-checkbox input[checked != "checked"]')</p> <li>找到所有含有<code>input</code>标签的<code>label</code>标签</li> <p>$('label:has("input")')</p> </ol> </div> </div> </div> <div class="my-dark my-padding"> <div class="container"> <div class="col-sm-8 my-center"> <p>写很少的代码，做很多的事。</p> <h4>所以说</h4> <p>学好jQuery真的很重要，学好jQuery真的很重要，学好jQuery真的很重要。</p> </div> </div> </div> <div class="footer"> <div class="row"> <div class="col-md-12 text-center"> <span class="my-white">©2020 Jason</span> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
2、特色功能详解
参考：