创建交互式博客——jquery （1）

最新推荐文章于 2022-01-04 17:24:36 发布

gcyxf

最新推荐文章于 2022-01-04 17:24:36 发布

阅读量786

点赞数

分类专栏：网站

本文链接：https://blog.csdn.net/gcyxf/article/details/44777881

版权

网站专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近特别想创建自己的个人博客来记录生活当中的点滴感悟。虽然有很多创建博客的工具，但总感觉不具有自己的特色，想修改的话比较花时间，想创建自己的个人博客的想法就更加强烈了。Codecademy是一个学习创建网页的好的网站，虽然在上面学过很多东西，但是如果不总结、不整理，后面就全都忘掉了。这里就记录下自己的学习感悟。

在本篇文章中，主要实现的网站功能是：点击第一篇文章，按“n”快捷方式到下一篇文章；按"o"打开文章具体内容。

首先是index.html，包括网页结构和内容，代码如下：

在</body>前面的红色字体中，第一行script加载jquery，第二行script加载app.js (描述jquery)。文章列表的source, title等等呈现在<div class="item row">....</div>中，文本内容呈现在<div class="description">.....</div>中。

<!doctype html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="articles container">
      
      <div class="article current">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 23</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
            <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW Commercial Aviation</p>
          </div>
          <div class="col-xs-6">
            <p class="title">CSeries Supplier Scramble</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>CSeries Supplier Scramble</h1>
            <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW business aviation</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Flying the Gulfstream G650</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>Flying the Gulfstream G650</h1>
            <p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">New retirements cut RAF VC10 fleet to four</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>New retirements cut RAF VC10 fleet to four</h1>
            <p>The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Virgin can deliver more value for Delta than for SIA: Bastian</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Jul 17</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>Virgin can deliver more value for Delta than for SIA: Bastian</h1>
            <p>Delta Air Lines president Ed Bastian is confident that the carrier can extract far more value from its shareholding in Virgin Atlantic compared with...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW Defense</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Freedom Experiences Two More Power Outages</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>Freedom Experiences Two More Power Outages</h1>
            <p>The Littoral Combat Ship (LCS-1) USS Freedom’s first overseas deployment to Southeast Asia has been marred by two more power outages...</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">FedEx to acquire up to 30 United 757s</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3"> </div>
          <div class="col-xs-6">
            <h1>FedEx to acquire up to 30 United 757s</h1>
            <p>United Airlines is to sell up to 30 Boeing 757s to freight operator FedEx Express, with deliveries of the twinjets set to start this year.</p>
          </div>
          <div class="col-xs-3"> </div>
        </div>
      </div>

    </div>
    <span style="color:#ff6666;"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script></span>
  </body>
</html>

第一步，我们实现选择某个文章，下拉文章查看文章的具体内容。

var main = function(){
    $(".article").click(function(){
        $(this).children(".description").show();
        });
    };
$(document).ready(main);

click() 被称为click event handler。然后，现在我们仅仅实现了显示文章具体内容，没有收起来文章内容这一步，这里用hide()实现。然后，我们需要在点击下一个文章标题的时候，它会被点亮，这里就addClass(‘current’)实现。最后，我们来填加快捷方式：当按“n”（110）键时移动到下一个文章标题；当按“o”（111）键时看到文章的具体描述。为了实现按键效果，我们采用keypress()这个函数，并定义在整个document类基础上。注意，键盘的指定是根据按键代码（key code）。

var main = function(){
    $(".article").click(function() {
        $('.article').removeClass('.current');
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
       
        });
    $(document).keypress(function(event) {
        if (event.which === 111) {
            $('.current').children('.description').toggle();
            }
        else if (event.which === 110) {
            var currentArticle = $('.current');
            var nextArticle = currentArticle.next();
            currentArticle.removeClass('current');   //删除上篇文章的当前类，也就是停止之前文章的点亮效果
            nextArticle.addClass('current');         //为当前文章填加当前类，为当前文章标题填加点亮效果
            }
        });
    };
$(document).ready(main);

style.css描述网页的格式，代码片段如下：

body {
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/reader/bg.png');
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

p {
  margin: 0;
}

.row {
  margin: 0;
}

.articles {
  margin-top: 30px;
  margin-bottom: 30px;
}

.article {
  color: #222;
  background: rgba(255,255,255,.9);
  border-spacing: 2px;
  border-color: gray;
  font-family: arial,sans-serif;
  border-bottom: 1px #e5e5e5 solid;
}

.current .item {
  background: rgba(206,220,206,.9);
}

.item {
  cursor: pointer;
  padding-top: 7px;
  padding-bottom: 7px;
  
}

.item .source {
  margin-left: 20px;
}

.item .title {
  font-weight: bold;
}

.item .pubdate {
  margin-right: 20px;
}

.item .pubdate {
  text-align: right;  
}

.description {
  display: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.description h1 {
  margin-top: 0px;
  font-size: 23px;
}