SPA应用Web前端页面开发与 Jquery基本语法【学习笔记 一 】

SPA概念

      SPA-Single Page Application 单页面应用

      主页面只有一个，启动只显示主页面，其他的页面都根据需要动态嵌入到主页面中。

SPA应用的流行的框架

1. Google Angular
2. Facebook React
3. Vue.js
4. 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(){}.