Jquery、Bootstrap

jQuery 語法

jQuery 語法是爲 HTML 元素的選取編制的，能夠對元素執行某些操做。

基礎語法是：_$(selector).action()_

• 美圓符號定義 jQuery
• 選擇符（selector）「查詢」和「查找」 HTML 元素
• jQuery 的 action() 執行對元素的操做

示例

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏全部段落

$(".test").hide() - 隱藏全部 class="test" 的全部元素

$("#test").hide() - 隱藏全部 id="test" 的元素

文檔就緒函數

您也許已經注意到在咱們的實例中的全部 jQuery 函數位於一個 document ready 函數中：

$(document).ready(function(){

--- jQuery functions go here ----

});

這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。

若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。下面是兩個具體的例子：

• 試圖隱藏一個不存在的元素
• 得到未徹底加載的圖像的大小

1、 Jquery對象

1.1  DOM 對象轉成jQuery對象

對於已是一個DOM對象，只須要用$()把DOM對象包裝起來，就能夠得到一個jQuery對象了。$(DOM對象)

function myclick(){

    var div1 = document.getElementById("myinput");

    //把dom轉換成jQuery對象

    var jdiv1 = $(div1);

    alert(jdiv1.val());
}

1.2 JQuery對象轉換成dom對象

function myclick(){

    var div1 = document.getElementById("myinput");

    //把dom轉換成jQuery對象

    var jdiv1 = $(div1);

    //把jQuery對象轉換成dom對象

    alert(jdiv1\[0\].value);

    alert(jdiv1.get(0).value);

}

2、 JQuery選擇器

2.1 基本選擇器

1. #id    用法: $(」#myDiv」); 返回值 單個元素的組成的集合

function myclick(){

    //根據id選擇器得到jQuery對象

    var jinput = $("#myinput");
    
    alert(jinput.val());
}

2. Element 用法: $(」div」) 返回值  集合元素，元素選擇器

jQuery 元素選擇器

jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取全部 class="intro" 的 <p> 元素。

$("p#demo") 選取全部 id="demo" 的 <p> 元素。

3. class 用法: $(」.myClass」) 返回值  集合元素

4. selector1, selector2, ..., selectorN 用法: $(」div,span,p.myClass」)   返回值  集合元素，多種選擇器一同使用咱們須要使用逗號來分隔。

function myclick(){

    var divs = $(".divcss,input,textarea,#div1");

    divs.each(**function**(){

        var divObj = $(**this**);

        alert(divObj.html());

    })
}

jQuery 屬性選擇器

jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。

$("[href]") 選取全部帶有 href 屬性的元素。

$("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。

$("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。

$("\[href$='.jpg'\]") 選取全部 href 值以 ".jpg" 結尾的元素。

2.2 層次選擇器

用法$(」form input」) ;  返回值  集合元素，空格表明下級。

用法:$(」form > input」) ; 返回值  集合元素。

2.3 過濾選擇器

用法: $(」tr:first」) ; 返回值  單個元素的組成的集合     說明: 匹配找到的第一個元素

:last用法: $(」tr:last」)  返回值  集合元素     說明:匹配找到的最後一個元素.與:first相對應.

3、事件

(function() {})，即$(document).ready(function()，何時執行？
答案：DOM加載完畢以後執行。
DOM是什麼？DOM就是一個html頁面的標籤樹:

那麼何時，DOM加載完成了呢？即頁面全部的html標籤（包括圖片等）都加載完了，即瀏覽器已經響應完了，加載完了，所有展示到瀏覽器界面上了。

總結
DOM在第一次頁面加載完畢後，就在內存裏了，不管後面怎麼經過ajax的方式去局部修改html頁面，都只是對內存中的DOM樹進行修改，而DOM在第一次頁面加載完畢後就已經加載完畢了。

因此後面js文件（動態加載或者head中加載）再使用到$(function() {})函數確定會執行的。

1.事件結合選擇器會把選擇器選出來的一組元素都加上事件

2.在元素上能夠不去指定事件

3.事件的方法建議使用匿名方法

4.事件的賦值必需要放在jQuery的主函數內部

4、效果

jQuery toggle() 切換

經過 jQuery，您可使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

實例

$("button").click(function(){
$("p").toggle();
});

5、jQuery - 得到內容和屬性

得到內容 - text()、html() 以及 val()

三個簡單實用的用於 DOM 操做的 jQuery 方法：

• text() - 設置或返回所選元素的文本內容
• html() - 設置或返回所選元素的內容（包括 HTML 標記）
• val() - 設置或返回表單字段的值

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

設置內容 - text()、html() 以及 val()

咱們將使用前一章中的三個相同的方法來設置內容：

• text() - 設置或返回所選元素的文本內容
• html() - 設置或返回所選元素的內容（包括 HTML 標記）
• val() - 設置或返回表單字段的值

下面的例子演示如何經過 text()、html() 以及 val() 方法來設置內容：

實例

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

6、jQuery 遍歷

向上遍歷 DOM 樹

這些 jQuery 方法頗有用，它們用於向上遍歷 DOM 樹：

• parent()
• parents()
• parentsUntil()

向下遍歷 DOM 樹

下面是兩個用於向下遍歷 DOM 樹的 jQuery 方法：

• children()
• find()

在 DOM 樹中水平遍歷

有許多有用的方法讓咱們在 DOM 樹進行水平遍歷：

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

4、Ajax

AJAX load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法。

load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

語法：

$(_selector_).load(_URL_,_data_,_callback_);

$("#div1").load("demo_test.txt");

jQuery get() 和 post() 方法用於經過 HTTP GET 或 POST 請求從服務器請求數據。

$.get(URL,callback);

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

function ajaxInvoke(){

var uname = $("#username").val();

var opt = {

    type:'post',//請求方式

    url:'${path}/login',//請求的地址

    data:{

        username:uname//username=uname

        },

    dataType:'json',//返回值的類型，通常使用兩種，text，json

    success:function(responseJSON){//ajax調用成功後的回調方法

        //若是dataType是json那麼要求後臺必定要返回JSONObject或者JSONArray對象,這個後臺的json對象會直接轉換成js中的json

        //alert(responseJSON.id+ "  "+responseJSON.name +"   "+responseJSON.age);

        for(var i = 0; i < responseJSON.length; i++){

            alert(responseJSON\[i\].id + "  "\+ responseJSON\[i\].name + "  "+responseJSON\[i\].age);

        }

    },

    error:function(){//調用失敗進入的方法

        alert("系統錯誤");//若是404或者後臺報異常就會走入error

        }

    };

    $.ajax(opt);

    }

5、Bootstrap

5.1 Bootstrap網格系統

本章節咱們將講解 Bootstrap 的網格系統（Grid System）。
Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

5.2 Bootstrap 模態框（Modal）插件

模態框（Modal）是覆蓋在父窗體上的子窗體。一般，目的是顯示來自一個單獨的源的內容，能夠在不離開父窗體的狀況下有一些互動。子窗體可提供信息、交互等。

若是您想要單獨引用該插件的功能，那麼您須要引用 modal.js。或者，正如 Bootstrap 插件概覽一章中所提到，您能夠引用_bootstrap.js_或壓縮版的_bootstrap.min.js_。

用法

您能夠切換模態框（Modal）插件的隱藏內容：

• 經過 data 屬性：在控制器元素（好比按鈕或者連接）上設置屬性data-toggle="modal"，同時設置data-target="#identifier"或href="#identifier"來指定要切換的特定的模態框（帶有 id="identifier"）。

• 經過 JavaScript：使用這種技術，您能夠經過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態框：

  $('#identifier').modal(options)