SPA概念
SPA-Single Page Application 单页面应用
主页面只有一个,启动只显示主页面,其他的页面都根据需要动态嵌入到主页面中。
SPA应用的流行的框架
- Google Angular
- Facebook React
- Vue.js
- jQuery系列框架
页面的实现框架
Bootstrap 框架。
jquery概念
jQuery是JS函数库,封装对页面操作,时间处理,AJAX操作的各种函数。
JQuery的引入
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
jquery页面的编程
0.下载jquery.min.js文件,存放于webapp下,路径webapp/js/jquery.min.js
1.创建main.html(路径:webapp/main/main.html)与main.js文件(路径:webapp/main/main.js)
main.html文件加入下列代码:
<script src="../js/jquery.min.js"></script>
<script src="../main/main.js"></script>
<div id="miancontent">
<div>
<li>
</li>
<li>
</li>
</div>
<div>
<table id="myTable">
<tr>
<td></td>
<td></td>
</tr>
</div>
</div>
main.js文件加入下列代码:
$(document).ready(function(){
alert("启动成功");
});
执行main.html文件,查看是否成功运行main.js文件
2.页面的启动:
$(document).ready(function(){
//页面的操作代码区
});
jquery的语法
1.对页面元素操作的语法:
$(元素定位器).函数(参数)
2.不对页面元素操作的语法:
$.函数(参数);
jquery元素定位器的类型(CSS语法定位)
1.标记定位
$(“标记名”).函数();
$("div").css("background-color","red");
2.ID定位器
$(“#ID”).函数();
//通过id和标签名称d定位元素
//$("标签#id").函数
$("div#maincontent").html();
$("table#myTable").text();
3.Class定位器:.className
$(“div.row”).函数();
//通过class和标签名称定位元素
//$("标签.class").函数
$("div.myClass").html();
$("table.myTable").text();
4.子定位器:
$(“定位器 定位器 ”).
定位抠取部分:
代码:
$("table#myTable tr td")
//定位li
$("div#maincontent div li")
5.属性定位器
//定位所有带href属性且属性值为'#'的元素
$("href='#'").
//定义<a>中属性href为'#'的元素
$("a[href='#']").
jQuery对页面元素的操作函数
1.html() : 读写元素的HTML内容
(1) html(): 取得页面元素的内容。
(2) html(“html字符串”); 写内容到元素内。
2.text(): 读写元素的文本内容
(1) text(): 取得页面元素的内容。
(2) text(“字符串”); 写内容到元素内。
3.css函数:读写元素的样式。
(1) css(“样式名”): 取得元素的样式的值。
(2) Css(“样式名”,”值”): 设定元素的样式。
4.attr(): 读写元素的属性值。
(1) attr(“属性名”): 取得指定属性名的值。
(2) attr(“属性名”,值):写元素的属性值。
5.on(): 事件处理函数
$(定位器).on(“事件名”,function(){});
6.load(url地址): 载入地址的内容到元素的标记内。
//页面载入成功事件
$(document).ready(function(){
//菜单连接的点击事件
$("ul#side-menu li ul li a").on("click",function(event){
//取得超链接的属性hred
var href=$(this).attr("href");
//载入href指定的页面到主页的maincontent区域
$("div#maincontent").load(href);
//阻止超链接的默认跳转行为
event.preventDefault();
});
});
7.请求
get请求:$.get(url,params,callback)
get请求(返回为json格式):$.getJSON(url,params,callback)
post请求:$.post(url,params,callback)
其中:url为请求链接,params为json格式参数,callback回调函数,一般为匿名函数function(){}.