先上HTML代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>何明胜的个人网站</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description"
    content="欢迎来到何明胜的个人网站.本站主要用于记录和分享本人的学习心得和编程经验,并分享常见可复用代码、推荐书籍以及软件等资源.本站源码已托管github,欢迎访问:https://github.com/HelloHusen/web" />
<meta name="keywords" content="何明胜,何明胜的个人网站,何明胜的博客,一格的程序人生" />
<meta name="author" content="何明胜,一格">

<!-- 网站图标 -->
<link rel="shortcut icon" href="/images/favicon.ico">

<!-- jQuery -->
<script src="/plugins/jquery/js/jquery-3.2.1.min.js"></script>

<!-- 最新更新文章简介 -->
<link rel="stylesheet" href="/css/index/article-profile.css">
<!-- 最新更新文章简介 -->
<link rel="stylesheet" href="/css/index/index.css">

<!-- 加载最新3篇博客 -->
<script src="/js/index/latestblog.js"></script>
<!-- 加载最近3篇代码 -->
<script src="/js/index/latestcode.js"></script>
<!-- js文件  -->
<script src="/js/index/index.js"></script>

</head>
<body>
    <input id="menuBarNo" type="hidden" value="0" />

    <div id="fh5co-page">
        <!-- 左侧导航  -->
        <!-- 中间内容  -->
        <div id="fh5co-main">
            <!-- 首页轮播  -->
            <div id="indexCarousel" class="carousel slide carousel-height carousel-margin">
                <!-- 轮播(Carousel)指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#indexCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#indexCarousel" data-slide-to="1"></li>
                    <li data-target="#indexCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播(Carousel)项目 -->
                <div class="carousel-inner">
                    <div class="item carousel-height active">
                        <img src="/images/carousel/casel-1.jpg" alt="First slide">
                    </div>
                    <div class="item carousel-height">
                        <img src="/images/carousel/casel-2.jpg" alt="Second slide">
                    </div>
                    <div class="item carousel-height">
                        <img src="/images/carousel/casel-3.jpg" alt="Third slide">
                    </div>
                </div>
                <!-- 轮播(Carousel)导航 -->
                <a class="left carousel-control" href="#indexCarousel" role="button"
                    data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a> <a class="right carousel-control" href="#indexCarousel" role="button"
                    data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <div class="fh5co-narrow-content article-box-div">
                <h2 class="fh5co-heading article-bar"
                    data-animate-effect="fadeInLeft">最近更新的博客</h2>
                <a href="/module/blog.hms" class="read-more-article"><span
                    class="glyphicon glyphicon-hand-right"></span>&nbsp;阅读更多博客</a>
                <div id="latestBlog" class="row"></div>
            </div>
            <hr class="index-hr" />
            <div class="fh5co-narrow-content article-box-div">
                <h2 class="fh5co-heading article-bar"
                    data-animate-effect="fadeInLeft">最近更新的代码</h2>
                <a href="/module/code.hms" class="read-more-article"><span
                    class="glyphicon glyphicon-hand-right"></span>&nbsp;阅读更多代码</a>
                <div id="latestCode" class="row"></div>
            </div>
            <!-- 每日一言  -->
            <script
                src="https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8"></script>
            <div id="lwlhitokoto">
                <script>
                    lwlhitokoto();
                </script>
            </div>
        </div>
        <!-- 右侧导航  -->
    </div>
</body>
</html>

再上JavaScript代码:

 /**
  * 首页
  *
  * @author 何明胜
  *
  * 2017年12月15日
  */

 /** 加载插件 * */
 $.ajax({
     url : '/plugins/plugins.html', // 这里是静态页的地址
     async : false,
     type : 'GET', // 静态页用get方法,否则服务器会抛出405错误
     success : function(data) {
         $($('head')[0]).find('script:first').after(data);
     }
 });

 $(function() {
     /** 顶部导航栏 **/
     $.ajax({
         url : '/module/navigation/topbar.html', // 这里是静态页的地址
         async : false,
         type : 'GET', // 静态页用get方法,否则服务器会抛出405错误
         success : function(data) {
             $('#menuBarNo').before(data);
         }
     });

     /** 登录控制 **/
     $.ajax({
         url : '/module/login/login.html', // 这里是静态页的地址
         async : false,
         type : 'GET', // 静态页用get方法,否则服务器会抛出405错误
         success : function(data) {
             $('#menuBarNo').before(data);
         }
     });

     /** 左侧导航栏 **/
     $.ajax({
         url : '/module/navigation/leftbar.html', // 这里是静态页的地址
         async : false,
         type : 'GET', // 静态页用get方法,否则服务器会抛出405错误
         success : function(data) {
             $('#fh5co-main').before(data);
         }
     });

     /** 右侧导航栏 **/
     $.ajax({
         url : '/module/navigation/rightbar.html', // 这里是静态页的地址
         async : false,
         type : 'GET', // 静态页用get方法,否则服务器会抛出405错误
         success : function(data) {
             $('#fh5co-main').after(data);
         }
     });
 });

 $(document).ready(function() {
     $('#indexCarousel').carousel({
         interval : 3000
     });// 每隔3秒自动轮播
 });

上述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. [原]eclipse中spring配置文件的自动提示和命名空间的添加

    在用spring或者springmvc框架进行开发时,编辑applicationcontext.xml等配置文件是必不可少的,在eclipse中打开applicationcontext.xml通常是这 ...

  2. label 阻止冒泡 防止点击label 触发2次事件

    // 必须要把 jnput的外面的label加上事件阻止冒泡,否则点击label的时候,会冒泡到input上 再次触发input的点击事件 $('.xt_order_cleft_modb_rl_dx' ...

  3. SOA架构设计

    架构是—套构建系统的准则,通过这套准则,把—个复杂的系统划 分为一套更简单的子系统的集合,这些子系统之间保持相互独立,并与 整个系统保持一致,而且每—个子系统还可以继续细分下去,从而构成 —个企业级架 ...

  4. 种树-洛谷P1250(差分约束)

    传送门 令前缀和为s[i],则⼀一个要求等价于 s[r] - s[l - 1] >= x. 题中还有别的要求,包括 s[i] - s[i - 1] <= 1 和 s[i] - s[i- 1 ...

  5. 201771010135 杨蓉庆《面对对象程序设计(java)》第十二周学习总结

    1.实验目的与要求 (1) 掌握Java GUI中框架创建及属性设置中常用类的API: (2) 掌握Java GUI中2D图形绘制常用类的API: (3) 了解Java GUI中2D图形中字体与颜色的 ...

  6. Go之NSQ

    文章引用自 NSQ NSQ是目前比较流行的一个分布式的消息队列,本文主要介绍了NSQ及Go语言如何操作NSQ. NSQ介绍 NSQ是Go语言编写的一个开源的实时分布式内存消息队列,其性能十分优异. N ...

  7. VBA 学习笔记 - 变量与常量

    学习资料:https://www.yiibai.com/vba/vba_variables.html 变量和常量命名规则 必须以字母开头 不能包含空格.句点(.).感叹号(!)或字符@,&,$ ...

  8. vue 事件总线(bus)

    1.全局引入bus Vue.prototype.$bus = new.Vue() 2.组件间传值使用(在发送事件时接收组件会实时接收到, 可以用做兄弟组件间相互传值, 但页面跳转组件间有问题 通过$e ...

  9. WinForm开发(6)——C#/winform程序打包部署时,如何把SQL数据库一起打包进去

    打包数据库到安装程序中 方法1. 备份/恢复先备份数据库:backup database 数据库 to disk='c:\备份.bak' 将备份文件打包到安装程序中. 在第一次运行程序的时候,进行数据 ...

  10. Java中几种office文档转pdf的方式

    最近公司要做office的文档,搜集了几种office文档转pdf的方式,简单的做下总结 我主要尝试了三种方式:openoffice,aspose,jacob 对他们进行了大文件,小文件,在linux ...