zoukankan      html  css  js  c++  java
  • jQUery练习题

    题目:

    <!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>
            <li>找到本页面中所有的<code>h2</code>标签</li>
            <li>找到本页面中所有的<code>input</code>标签</li>
            <li>找到本页面所有样式类中有<code>c1</code>的标签</li>
            <li>找到本页面所有样式类中有<code>btn-default</code>的标签</li>
            <li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li>
            <li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li>
            <li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li>
            <p id="p2" class="divider"></p>
            <li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li>
            <li>找到本页面中被包裹在<code>label</code>标签内的<code>input</code>标签</li>
            <li>找到本页面中紧挨在<code>label</code>标签后面的<code>input</code>标签</li>
            <li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li>
            <p id="p3" class="divider"></p>
            <li>找到id值为<code>f1</code>的标签内部的第一个input标签</li>
            <li>找到id值为<code>my-checkbox</code>的标签内部最后一个input标签</li>
            <li>找到id值为<code>my-checkbox</code>的标签内部没有被选中的那个input标签</li>
            <li>找到所有含有<code>input</code>标签的<code>label</code>标签</li>
          </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">&copy;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>
    

    答案:

    $('#i1')
    r.fn.init [div#i1.container]
               
    $('h2')
    r.fn.init [h2, prevObject: r.fn.init(1)]
    
    $('input')
    r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
                  
    $('.c1')
    r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]
    
    $('.btn-default')
    r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]
               
    $('.c1,h2')
    r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]
    
    $('.c1,#p3')
    r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]
                  
    $('.c1,.btn')
    r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]
                   
    $('form').find('input')
    r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
                  
    $('label input')
    r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
                  
    $('label+input')
    r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
                  
    $('#p2~li')
    r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]
    
    $('#f1 input:first')
    r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]
               
    $('#my-checkbox input:last')
    r.fn.init [input, prevObject: r.fn.init(1)]
    
    $('#my-checkbox input[checked!="checked"]')
    r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]__proto__: Object(0)
    
    $('label:has("input")')
    r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)]
    
  • 相关阅读:
    Java 抽象类
    Java 多态
    Java 重写与重载
    Java继承
    声卡驱动
    Sublime Text 3快捷键
    近年来世界各地ICO的花式骗局盘点
    区块链未能大爆发的影响因素有哪些?
    BCH分叉是一次站队博弈
    一文读懂百倍币的诞生背景
  • 原文地址:https://www.cnblogs.com/Lance-WJ/p/12925282.html
Copyright © 2011-2022 走看看