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(){}.