先上HTML代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>何明胜的个人网站</title>
  7.  
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta name="description"
  10.     content="欢迎来到何明胜的个人网站.本站主要用于记录和分享本人的学习心得和编程经验,并分享常见可复用代码、推荐书籍以及软件等资源.本站源码已托管github,欢迎访问：https://github.com/HelloHusen/web" />
  11. <meta name="keywords" content="何明胜,何明胜的个人网站,何明胜的博客,一格的程序人生" />
  12. <meta name="author" content="何明胜,一格">
  13.  
  14. <!-- 网站图标 -->
  15. <link rel="shortcut icon" href="/images/favicon.ico">
  16.  
  17. <!-- jQuery -->
  18. <script src="/plugins/jquery/js/jquery-3.2.1.min.js"></script>
  19.  
  20. <!-- 最新更新文章简介 -->
  21. <link rel="stylesheet" href="/css/index/article-profile.css">
  22. <!-- 最新更新文章简介 -->
  23. <link rel="stylesheet" href="/css/index/index.css">
  24.  
  25. <!-- 加载最新3篇博客 -->
  26. <script src="/js/index/latestblog.js"></script>
  27. <!-- 加载最近3篇代码 -->
  28. <script src="/js/index/latestcode.js"></script>
  29. <!-- js文件  -->
  30. <script src="/js/index/index.js"></script>
  31.  
  32. </head>
  33. <body>
  34.     <input id="menuBarNo" type="hidden" value="0" />
  35.  
  36.     <div id="fh5co-page">
  37.         <!-- 左侧导航  -->
  38.         <!-- 中间内容  -->
  39.         <div id="fh5co-main">
  40.             <!-- 首页轮播  -->
  41.             <div id="indexCarousel" class="carousel slide carousel-height carousel-margin">
  42.                 <!-- 轮播（Carousel）指标 -->
  43.                 <ol class="carousel-indicators">
  44.                     <li data-target="#indexCarousel" data-slide-to="0" class="active"></li>
  45.                     <li data-target="#indexCarousel" data-slide-to="1"></li>
  46.                     <li data-target="#indexCarousel" data-slide-to="2"></li>
  47.                 </ol>
  48.                 <!-- 轮播（Carousel）项目 -->
  49.                 <div class="carousel-inner">
  50.                     <div class="item carousel-height active">
  51.                         <img src="/images/carousel/casel-1.jpg" alt="First slide">
  52.                     </div>
  53.                     <div class="item carousel-height">
  54.                         <img src="/images/carousel/casel-2.jpg" alt="Second slide">
  55.                     </div>
  56.                     <div class="item carousel-height">
  57.                         <img src="/images/carousel/casel-3.jpg" alt="Third slide">
  58.                     </div>
  59.                 </div>
  60.                 <!-- 轮播（Carousel）导航 -->
  61.                 <a class="left carousel-control" href="#indexCarousel" role="button"
  62.                     data-slide="prev"> <span
  63.                     class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  64.                     <span class="sr-only">Previous</span>
  65.                 </a> <a class="right carousel-control" href="#indexCarousel" role="button"
  66.                     data-slide="next"> <span
  67.                     class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  68.                     <span class="sr-only">Next</span>
  69.                 </a>
  70.             </div>
  71.             <div class="fh5co-narrow-content article-box-div">
  72.                 <h2 class="fh5co-heading article-bar"
  73.                     data-animate-effect="fadeInLeft">最近更新的博客</h2>
  74.                 <a href="/module/blog.hms" class="read-more-article"><span
  75.                     class="glyphicon glyphicon-hand-right"></span>&nbsp;阅读更多博客</a>
  76.                 <div id="latestBlog" class="row"></div>
  77.             </div>
  78.             <hr class="index-hr" />
  79.             <div class="fh5co-narrow-content article-box-div">
  80.                 <h2 class="fh5co-heading article-bar"
  81.                     data-animate-effect="fadeInLeft">最近更新的代码</h2>
  82.                 <a href="/module/code.hms" class="read-more-article"><span
  83.                     class="glyphicon glyphicon-hand-right"></span>&nbsp;阅读更多代码</a>
  84.                 <div id="latestCode" class="row"></div>
  85.             </div>
  86.             <!-- 每日一言  -->
  87.             <script
  88.                 src="https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8"></script>
  89.             <div id="lwlhitokoto">
  90.                 <script>
  91.                     lwlhitokoto();
  92.                 </script>
  93.             </div>
  94.         </div>
  95.         <!-- 右侧导航  -->
  96.     </div>
  97. </body>
  98. </html>

再上JavaScript代码：

  1.  /**
  2.   * 首页
  3.   *
  4.   * @author 何明胜
  5.   *
  6.   * 2017年12月15日
  7.   */
  8.  
  9.  /** 加载插件 * */
  10.  $.ajax({
  11.      url : '/plugins/plugins.html', // 这里是静态页的地址
  12.      async : false,
  13.      type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
  14.      success : function(data) {
  15.          $($('head')[0]).find('script:first').after(data);
  16.      }
  17.  });
  18.  
  19.  $(function() {
  20.      /** 顶部导航栏 **/
  21.      $.ajax({
  22.          url : '/module/navigation/topbar.html', // 这里是静态页的地址
  23.          async : false,
  24.          type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
  25.          success : function(data) {
  26.              $('#menuBarNo').before(data);
  27.          }
  28.      });
  29.  
  30.      /** 登录控制 **/
  31.      $.ajax({
  32.          url : '/module/login/login.html', // 这里是静态页的地址
  33.          async : false,
  34.          type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
  35.          success : function(data) {
  36.              $('#menuBarNo').before(data);
  37.          }
  38.      });
  39.  
  40.      /** 左侧导航栏 **/
  41.      $.ajax({
  42.          url : '/module/navigation/leftbar.html', // 这里是静态页的地址
  43.          async : false,
  44.          type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
  45.          success : function(data) {
  46.              $('#fh5co-main').before(data);
  47.          }
  48.      });
  49.  
  50.      /** 右侧导航栏 **/
  51.      $.ajax({
  52.          url : '/module/navigation/rightbar.html', // 这里是静态页的地址
  53.          async : false,
  54.          type : 'GET', // 静态页用get方法，否则服务器会抛出405错误
  55.          success : function(data) {
  56.              $('#fh5co-main').after(data);
  57.          }
  58.      });
  59.  });
  60.  
  61.  $(document).ready(function() {
  62.      $('#indexCarousel').carousel({
  63.          interval : 3000
  64.      });// 每隔3秒自动轮播
  65.  });

上述JS代码中，包含三个重要的函数 $.ajax( )、$(function() { })、$(document).ready(function() { }。

$.ajax()  方法通过 HTTP 请求加载远程数据，该方法是 jQuery 底层 AJAX 实现，简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象，大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性。

$(function() { })是简写，$(function() { });=$(document).ready(function() { })，用来在DOM加载完成（文档载入完毕）之后执行一系列预先定义好的函数。与window.onload = function() { }很像，但是执行的时间不一样 ，$(function() { });是页面框架（页面DOM）加载完成就执行，window.onload = function() { }是页面中所有内容（页面DOM和图片）加载完成才执行。

web-pc项目中index页面分析的更多相关文章

  1. web项目中实现页面跳转的两种方式

    <a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...

  2. Web API项目中使用Area对业务进行分类管理

    在之前开发的很多Web API项目中,为了方便以及快速开发,往往把整个Web API的控制器放在基目录的Controllers目录中,但随着业务越来越复杂,这样Controllers目录中的文件就增加 ...

  3. MVC模式在Java Web应用程序中的实例分析

    MVC在软件架构中是一种比较重要的架构思想,已经被广泛的应用在实际的java web项目开发中,我们所要了解和掌握的是mvc的架构思想和使用mvc模式来分析和解决问题的方法.当然相同或不同的项目都有各 ...

  4. abp web.mvc项目中的菜单加载机制

    abp中的菜单加载机制 在abp中菜单的定义与我们传统写的框架不一样,它是在编写代码的时候配置,而我们一般写的通用权限管理系统中,是后期在后台界面中添加的.这一点有很大不同.abp关于菜单的定义及管理 ...

  5. Vue编写的页面部署到springboot网站项目中出现页面加载不全问题

    问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ...

  6. 在ASP.NET Web API项目中使用Hangfire实现后台任务处理

    当前项目中有这样一个需求:由前端用户的一个操作,需要触发到不同设备的消息推送.由于推送这个具体功能,我们采用了第三方的服务.而这个服务调用有时候可能会有延时,为此,我们希望将消息推送与用户前端操作实现 ...

  7. 在asp.net web form项目中添加webapi接口

    我有一个支付宝服务网关是ASP.NET WEB FORM项目,但是最近这个网关需要对外提供几个接口,想了下,使用web api比较合适,实现很简单,GO 1,首先添加一个文件夹名字叫App_Start ...

  8. Maven项目中pom文件分析

    pom英文全称: project object model 1.概述 pom.xml文件描述了maven项目的基本信息,比如groupId,artifactId,version等.也可以对maven项 ...

  9. 在.net core web api项目中安装swagger展示api接口（相当于生成api文档）

    1,  建立或打开项目后,在“程序包管理器控制台”中执行以下命令添加包引用: Install-Package Swashbuckle.AspNetCore 2,在项目中打开Startup.cs文件,找 ...

随机推荐

  1. django view 视图控制之数据返回的视图函数

    八.视图 view 概述:views.py定义的python函数,它接受Web请求并且返回Web响应. 有几个页面就有几个视图view user出入url地址,发送request--->urls ...

  2. Web基础了解版07-EL表达式-运算符-11个隐式对象

    EL EL(Expression Language)是JSP内置的表达式语言,用以访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作.EL在得到某个数据时,会自动进 ...

  3. linux下删除文件夹

    ---恢复内容开始--- 4月份左右接触linux,一直到现在,收获不多,原因是因为我没有足够的努力,其实这段时间以来我也很自责. 今天学习linux进程调度等知识,使用小红帽时,准备删除一个无用的文 ...

  4. Netty Learning Notes

    简介 Netty是 一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. Netty是一个NIO客户端服务器框架,可以快速轻松地开发网络应用程序,例如协议服务器和客户端. ...

  5. QM[中控群控云控]01. 中控原理

    QM[中控群控云控]01. 中控原理 虽然自己对于中控有了解 也自己做过一些简单中控 不过看看紫猫老师的思路 应该有很多帮助和提高 中控核心:数据交流而已 脚本端和服务端之间的信息交换 ------个 ...

  6. php 单机redis 常用命令

    一.Redis连接与认证 //连接参数:ip.端口.连接超时时间,连接成功返回true,否则返回false $ret = $redis->connect('127.0.0.1', 6379, 3 ...

  7. 关于报错:Warning: Cannot modify header information - headers already sent by (output started at

    8月5日,第一个项目即将完成,测试时,发现登录功能会出现小问题:记住密码的时候会报错 Warning: Cannot modify header information - headers alrea ...

  8. 三天的Python课程

    基础很sb但必须熟练掌握: 第一天就是Python的简单介绍与简单的接触.基本都是概念性的东西,需要知道一个非常便捷的IDE工具:pycharm,以后的编程就靠它了.还有就是%s和%d的格式化输出.运 ...

  9. ES-elasticsearch安装-linux

    (1)安装JDK(ES是使用java开发的) (2)安装ES(虚拟机内存大于一个g) 1)创建普通用户启动 2)非常占用内存(默认1个g的内存) (3)创建一个普通用户(用于启动ES) groupad ...

  10. 19市赛 树状数组 第k个小的糖果

    int find_kth(int k) { , cnt = , i; ; i >= ; i--)/ { ans += ( << i); if (ans >= maxn|| cn ...