【2020Python修煉記】前端開發之 jQuery實戰— jQuery簡易版網頁

時間  2020-06-10
標籤 2020Python修煉記 前端 開發 jquery 實戰 簡易 網頁 欄目 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>
        <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">&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>
完整代碼

 

二、特點功能詳解

參考：css

https://v3.bootcss.com/html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程