基于JQuery进行Ajax操作实现Html局部刷新
本文最后更新于 457 天前,其中的信息可能已经有所发展或是发生改变。

前言

被朋友拉去参加计算机设计大赛,准备编写web项目,我被安排去找页面之间切换的动效。既没有vue.js基础又没有jquery.js基础甚至又没有javascript基础的我只能从基本概念学起,经过了一天终于可以实现上述功能了。

准备

创建index.html

<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/jump.js" type="text/javascript"></script>

导入jquery.js与自己的js文件。

 

添加导航按钮

<div id="frame">
<ul class="nav nav-tabs" id="menu">
<li class="nav-item"> <a class="nav-link active" href="javascript:void(0);" id="index_btn">Index</a> </li>
<li class="nav-item"> <a class="nav-link" href="javascript:void(0);" id="content_btn">Content</a> </li>
</ul>
<div id="content">
<h1>Index</h1>
</div>
</div>

将导航按钮和主要内容添加在frame下。

创建content.html

在index.html的基础上稍作修改,将导航按钮改为Content是被选中的。

<li class="nav-item"> <a class="nav-link active" href="javascript:void(0);" id="content_btn">Content</a> </li>

实现

编写jump.js

var page = ["Index","Content"]; //定义页面标题
$(document).ready(function(){ //保证页面加载完成后再来执行脚本
       var content = $("#content"); //定义选择器
       var menu = $("#menu");
       content.css("display","none");
        //将该选择器的css中display属性设置为none
       content.slideToggle(1000);
        //对该选择器进行滑动动画
        /*
        *  以下代码则对元素进行事件监听
        *  监听点击事件
        */
       $(document).on("click","li #content_btn",function(){
              content.slideToggle("fast");
              content.load("content.html #content"); //进行加载主要内容操作
              menu.load("content.html #menu"); //进行加载菜单操作
              window.document.title = page[1]; //修改页面标题
              window.href = page[1];
              content.slideToggle("fast");
       });
       $(document).on("click","li #index_btn",function(){
              content.slideToggle("fast");
              content.load("index.html #content");
              menu.load("index.html #menu");
              window.document.title = page[0];
              window.href = page[0];
              content.slideToggle("fast");
       });
});

从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。
$().bind()直接绑定在元素上,和click,blur,mouseon一样的点击事件。

$().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。

$().delegate()是更精确的小范围的使用事件代理。

$().on()结合了这三个方法的优势摒弃了劣势。

此处的监听采用的就是

 $(document).on(method,selecter,function);

没有采用下述监听方法的原因是在页面重载后,重载后页面元素不再和脚本中的选择器相同,无法监听重载后的按钮信息。

而上述方法则是在document中先监听点击事件,判断点击事件的元素是否与选择器相同,若相同则执行function。

 $(selecter).click(function);

成品演示

 

 

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇