0618第43天-jQuery1.11.3-day02

jQuery: 它是一個開源的Ajax框架，也是學javaEE必需要掌握的框架。

           由於它是目前企業中用到得最多的一個框架.

-- jQuery歷史：

  2006年8月：第一個版本.

  2015年4月28日：V1.11.3.

-- 它的官方網站： http://www.jquery.com

   V1.xxx.xx : 支持全部瀏覽器.

   V2.xxx.xx : 不支持msie6,7,8. msie9+: html5.

   V1.xxx.xx: 

   1.9.0以前版本：下載一個js文件.

   1.9.0以後版本: 下載兩個js文件.

   下載哪些文件：

    jquery-1.11.3.js     (源碼)

    jquery-1.11.3.min.js (源碼壓縮後的)

    jquery-migrate-1.2.1.js (源碼) 遷移插件.

    jquery-migrate-1.2.1.min.js (源碼壓縮後的).

    學習時用：

    jquery-1.11.3.js 

    jquery-migrate-1.2.1.js

    實際項目開發：

    jquery-1.11.3.min.js

    jquery-migrate-1.2.1.min.js

-- 這個項目的開發宗旨：

   write less, do more: 寫更少，作更多.

-- 學習Ajax框架的好處：

   1. 它能夠幫咱們解決js跨瀏覽器兼容問題.

   2. 簡化dom編程.

   3. 簡化異步請求.

   4. 它提供了一批好用工具的方法.

-- 市面上用到得Ajax框架：

   1. 重量級(界面組件)：extjs、dojo.

   2. 輕量級(沒有界面組件): jquery、prototype.

      jquery-easyui

1、jQuery入門：

    第一步：在html頁面上引入jquery兩個js文件.

    <script type="text/javascript" src="jquery-1.11.3.js"></script>

    <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>

    第二步：監聽文檔是否是加載完 window.onload.

       $(window).ready(function(){

        alert("第一種方式");

       });

       $(this).ready(function(){

        alert("第二種方式");

       });

       $(document).ready(function(){

        alert("第三種方式");

       });

        

       $(function(){

        alert("第四種方式");

       });

    第三步：查詢dom元素.

       $  === jQuery

       window.jQuery = window.$ = jQuery;

    第四步：對dom元素操做.

2、核心部分：

    1. jQuery(selector, [context]) : 核心函數.

        核心函數調用返回得是jQuery對象,這個jQuery對象就封裝了查詢到得dom元素.

    對jQuery對象作操做，實際上就是對它查詢到得dom元素作操做.

       -- selector : 選擇器(是jQuery規定的查詢字符串).

       -- context: 上下文(也是就是查詢範圍)。默認爲document.(當前html文檔).

   2. $("selector").length: 獲取jQuery對象中查詢到得dom元素的個數. 

   3. $("selector").size(): 獲取jQuery對象中查詢到得dom元素的個數. 

   4. $("selector").each() : 迭代jQuery對象中查詢到得dom元素。

      $("selector").each(function(i, item){

         // i: 索引號

     // this === item : dom元素

      });

   5. $("selector").selector: 獲取你調用jQuery核心函數傳進去的第一個參數.

   6. $("selector").context: 獲取你調用jQuery核心函數傳進去的第二個參數.

   7. $("selector").get(i): 從jQuery對象中根據索引號取指定dom元素.

      $("selector").get(): 從jQuery對象中取指定dom元素,返回一個dom元素數組(Array).

   8. 從jQuery對象中取dom元素：

      a. 第一種方式：

        $("selector").get(i).

      b. 第二種方式：

         $("selector").get()[i].

      c. 第三種方式：

         $("selector")[i].

      d. 第四種方式：

         $("selector").toArray()[i]. 

   9. 把dom元素轉換成jQuery對象.

      var obj = $(dom元素);

3、選擇器(查詢字符串)

    1. $("#html元素的id屬性值"): $("#div1").

    2. $("html元素的標籤名"): $("div") $("input").

    3. $(".html元素的class屬性值"): $(".myClass1").

    4. 選擇器組合：

       $("#html元素的id屬性值,html元素的標籤名,.html元素的class屬性值");

    5. $("selector1 selector2") : 查詢父元素中全部的子元素(不是父子關係的查詢).

    6. $("selector1 > selector2") : 查詢父元素中的直接子元素(父子關係的查詢).

       

    7. $("selector1 + selector2") : 查詢相鄰的後面的一個元素.

    8. $("selector1 ~ selector2") : 查詢相鄰的後面的全部的指定元素.

    9. $("selector:first") : 查詢後取第一個.

    10. $("selector:last") : 查詢後取最後一個.

    11. $("selector:eq(i)") : 查詢後根據索引號取指定的.

    12. $("selector:not(selector)"): 查詢後不包含指定的索引號對應的dom元素.

    13. 屬性選擇器:

        a. $("html元素的標籤名[屬性名]"). $("div[id]")

    b. $("html元素的標籤名[屬性名=屬性值]"). $("div[id='div1']")

    c. $("html元素的標籤名[屬性名^=屬性值]"). $("div[id^='di']")

    d. $("html元素的標籤名[屬性名$=屬性值]"). $("div[id$='v1']")

    e. $("html元素的標籤名[屬性名*=屬性值]"). $("div[id*='i']")

    f. $("html元素的標籤名[屬性名!=屬性值]"). $("div[id!='div1']")

    屬性選擇器組合：

    $(html元素的標籤名[屬性名][屬性名=屬性值][屬性名^=屬性值]...")

    14. $("selector:checked"): 把選中的checkbox、radio查詢出來.

         $("input[type='checkbox']:checked");

     $("input[type='radio']:checked");

    15. $("selector:selected"): 把選中的option查詢出來.

         $("select > option:selected");

4、操做屬性：

    1. 添加屬性值：

       $("selector").attr("屬性名", "屬性值") 

                    .attr("屬性名", "屬性值");

       $("selector").attr({"屬性名":"屬性值","屬性名": "屬性值"});

       $("selector").prop("屬性名", "屬性值")

                    .prop("屬性名", "屬性值");

       $("selector").prop({"屬性名":"屬性值","屬性名": "屬性值"});

    2. 獲取屬性值：

       $("selector").attr("屬性名");

       $("selector").prop("屬性名");

    3. 刪除屬性:

       $("selector").removeAttr("屬性名");

    

5、操做class： 

    1. 添加class:

       $("selector").addClass("class名稱1 class名稱2");

    2. 刪除class:

       $("selector").removeClass("class名稱1 class名稱2"); // 刪除指定class

       $("selector").removeClass(); // 刪除所有class

    3. 獲取class:

       $("selector").attr("class");

    4. class開關:

       $("selector").toggleClass("class名稱1 class名稱2");//對指定class作開關操做.

6、操做文本： 

    1. 添加文本

       $("selector").html("html格式文本|普通文本");

       $("selector").text("普通文本");

    2. 獲取文本

       $("selector").html();

       $("selector").text();

    3. 刪除文本

       $("selector").html("");

       $("selector").text("");

       

7、操做value： 

    1. 設置value

       $("selector").val("值");

       $("selector").attr("value","值");

       $("selector").prop("value","值");

       $("selector").get(0).value = "值";

       $("selector").get()[0].value = "值";

       $("selector")[0].value = "值";

       $("selector").toArray()[0].value = "值";

    2. 獲取value

       $("selector").val();

       $("selector").attr("value");

       $("selector").prop("value");

       $("selector").get(0).value;

       $("selector").get()[0].value;

       $("selector")[0].value;

       $("selector").toArray()[0].value;

    3. 刪除value

       $("selector").val("");

       $("selector").attr("value","");

       $("selector").prop("value","");

       $("selector").get(0).value = "";

       $("selector").get()[0].value = "";

       $("selector")[0].value = "";

       $("selector").toArray()[0].value = "";

8、操做css(style屬性):

    1. 設置css

       $("selector").css("樣式名", "樣式值");

       $("selector").css({"樣式名": "樣式值", "樣式名": "樣式值"});

    2. 獲取css值

       $("selector").css("樣式名");

    3. 刪除css

        $("selector").css("樣式名", ""); // 刪除指定的

    $("selector").removeAttr("style"); // 刪除所有

    4. 設置寬度、獲取寬度.

       $("selector").width("值");

       $("selector").width();

    5. 設置高度、獲取高度.

       $("selector").height("值");

       $("selector").height();

9、文檔處理：

    

    /** ############### 往目標元素裏面添加子元素  ################# **/

    1. $("selector").append("html格式的字符串"); // 往目標元素裏面最後面添加子元素.

    2. $("html格式的字符串").appendTo("selector"); // 把子元素追加到目標元素裏面最後面.

    3. $("selector").prepend("html格式的字符串"); // 往目標元素裏面最前面添加子元素.

    4. $("html格式的字符串").prependTo("selector"); // 把子元素追加到目標元素裏面最前面.

    /** ############### 往目標元素外面添加相鄰的元素 ################# **/

    5. $("selector").after("html格式的字符串"); // 往目標元素外面最後面添加相鄰元素.

    6. $("html格式的字符串").insertAfter("selector"); // 把元素追加到目標元素外面最後面.

    7. $("selector").before("html格式的字符串"); // 往目標元素外面最前面添加相鄰元素.

    8. $("html格式的字符串").insertBefore("selector"); // 把元素追加到目標元素外面最前面.

    

    9. $("selector").empty(); // 清空全部的子元素.

    10. $("selector").remove(); // 刪除全部的元素.

       

 

10、篩選(查詢後再一次過濾):

    -- 實際是把選擇器改爲了方法.

    1. $("selector").eq(i) : 查詢後再根據索引取.

    2. $("selector").first() : 取第一個

    3. $("selector").last() : 取最後一個

    4. $("selector").filter("seletor"): 查詢後把須要的過濾出來.

    5. $("selector").map() : 把查詢到的jQuery對象轉化成另一個jQuery對象.

                             該jQuery對象中封裝的元素再也不是dom元素，而是map方法

                  中回調函數的返回值.

        var obj1 = obj.map(function(i, item){  // obj1封裝得是map方法回調函數的返回值

        //alert(i + "==" + item);

        return item.name + "=" + item.value;

    });

    alert(obj1.get().join("&"));

    6. $("selector").not("selecotr") : 查詢後不包含哪個.

    7. $("selector").children() : 查詢全部直接的子元素.

    8. $("selector").find("selector"): 查詢指定的子元素.

           $("ul").find("div").css("color", "red");

11、動畫效果:

    1. 顯示與隱藏:

       a. $("selector").show(1000, function(){}); // 顯示

           -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：動畫完成後須要回調的函數.

       b. $("selector").hide(1000, function(){}); // 隱藏

           -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：動畫完成後須要回調的函數.

       c. $("selector").toggle(1000, function(){}); // 顯示隱藏開關

           -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：動畫完成後須要回調的函數.

    2. 滑上與滑下：

       a. $("selector").slideDown(1000, function(){}); // 顯示(滑下)

           -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：動畫完成後須要回調的函數.

       b. $("selector").slideUp(1000, function(){}); // 隱藏(滑上)

           -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：動畫完成後須要回調的函數.

       c. $("selector").slideToggle(1000, function(){}); // 顯示隱藏(滑下滑上)開關

           -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：動畫完成後須要回調的函數.

       

    3. 淡入與淡出：

       a. $("selector").fadeOut(1000, function(){}); // 顯示(淡入)

           -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：動畫完成後須要回調的函數.

       b. $("selector").fadeIn(1000, function(){}); // 隱藏(淡出)

           -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：動畫完成後須要回調的函數.

       c. $("selector").fadeToggle(1000, function(){}); // 顯示隱藏(淡入淡出)開關

           -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：動畫完成後須要回調的函數.

    

   4. 淡入到指定的透明度：

      $("selector").fadeTo(1000, [0-1], function(){});

       -- 第一個參數：執行動畫毫秒數.

       -- 第二個參數：透明度(0-1).

       -- 第三個參數：動畫完成後須要回調的函數.

   

12、事件綁定：

   1. 用on()方法綁定事件.

      $("selector").on("click mouseover", {name:'admin'}, function(event){

        // event.type : 獲取事件類型.

        // event.data : 獲取事件數據.

      });

      -- 第一個參數：事件名(事件名把前面的on去掉).

      -- 第二個參數：數據.

      -- 第三個參數：事件處理函數.

      $("selector").on({

      "click" : function(){

      },

          "mouseover" : function(){

      }

      });

      

    2. 用bind()方法綁定事件.

      $("selector").bind("click mouseover", {name:'admin'}, function(event){

        // event.type : 獲取事件類型.

        // event.data : 獲取事件數據.

      });

      -- 第一個參數：事件名(事件名把前面的on去掉).

      -- 第二個參數：數據.

      -- 第三個參數：事件處理函數.

      $("selector").bind({

      "click" : function(){

      },

          "mouseover" : function(){

      }

      });

    3. 主動觸發事件.

       a. $("selector").trigger("click");

       b. $("selector").triggerHandler("click");

    4. hover集成了onmouseover與onmouseout.

       $("selector").hover(

      function(){},  // onmouseover

      function(){}   // onmouseout

       );

    5. 按點擊次數綁定事件：

       $("selector").toggle(

      function(){ // 點擊第一次

      }, 

      function(){ // 點擊第二次

      }, 

      function(){ // 點擊第三次

      }

        );

    6. 特殊方法綁定相應的事件：

       onclick  --> click();

       onblur   --> blur();

       onchange --> change();

       onxxx    --> xxx();

     

十3、事件對象：

      -- event.type : 獲取事件類型.

      -- event.data : 獲取事件數據.

十4、工具方法：

      1. $.each() : 數組迭代方法

         $.each([], function(i, item){

         // i : 索引號

         // this === item : 數組元素

     });

      2. $.extend({},{}) : 兩個json對象進行合併,把後面的json對象合併到前面的json對象中.

      

      3. $.grep() : 數組過濾返回一個新數組.

         var newArr = $.grep([], function(item, i){

         // i : 索引號

         // item : 數組元素

             return true: 保留  false: 不保留

     });

      4. $.map(): 把一個數組轉化成一個新的數組.

         var newArr = $.map([], function(item, i){

         // i : 索引號

         // item : 數組元素

         return "值"; // 返回值存入新的數組

     });

      5. $.merge([],[]): 兩個數組合並，返回一個新數組.

      

      6. $.parseJSON(): 把json字符串解析成json對象.

         var str = '{"name" : "李剛", "age" : 50}';

     -- key : 必須用雙引號

     -- value: 若是是字符串也必須用雙引號.

      7. $.trim() : 去掉字符串先後的空格.

      8. $.param() : 把json對象轉化成get請求的字符串key=value&key=value

         

g

十5、異步請求(ajax)：

   1. $.ajax(url, settings) : 核心方法.

      -- 第一個參數：請求URL.

      -- 第二個參數：settings發送異步請求須要設置的參數.{}json對象.

      $.ajax({

       url : "請求URL",

       type : "get|post|put|delete", // 請求方式

       data : "key=value&key=value|{key:value,key:value}|[{key:value,key:value},..]", // 請求參數

           dataType : "text|html|xml|json|script|jsonp", // 指定服務器響應回來的數據類型.

           async : true|false, // 異步｜同步

       success : function(data){ // 請求成功

          // data : 響應數據

       },

       error : function(){ // 請求失敗

         

       }

      });

    2. $.get() : 只發送get請求  

       $.get(url, data, function(data, status){

          // status(狀態碼): success 、error

      // data : 響應數據

       }, dataType);

       -- 第一個參數：請求URL

       -- 第二個參數：請求參數

       -- 第三個參數：回調函數

       -- 第四個參數：服務器端響應回來的數據類型

    3. $.post() : 只發送post請求

       $.post(url, data, function(data, status){

          // status(狀態碼): success 、error

      // data : 響應數據

       }, dataType);

       -- 第一個參數：請求URL

       -- 第二個參數：請求參數

       -- 第三個參數：回調函數

       -- 第四個參數：服務器端響應回來的數據類型

    4. $.getJSON(): 發送get請求響應數據爲json.

       $.getJSON(url, data, function(data, status){

          // status(狀態碼): success 、error

      // data : 響應數據

       });

       -- 第一個參數：請求URL

       -- 第二個參數：請求參數

       -- 第三個參數：回調函數

   5.  $.getScript() : 發送get請求響應數據爲script.

        $.getScript(url, function(data, status){

          // status(狀態碼): success 、error

      // data : 響應數據

       });

       -- 第一個參數：請求URL

       -- 第二個參數：回調函數

   6. $("selector").load()發送get請求響應數據爲html.(加載公共的頁面)

      $("selector").load(url, function(data, status){

          // status(狀態碼): success 、error

      // data : 響應數據

       });

       -- 第一個參數：請求URL

       -- 第二個參數：回調函數

           // 發送異步請 求開始

    $("#loading").ajaxStart(function(){

        $(this).show();

    });

    // 發送異步請 求結束

    $("#loading").ajaxStop(function(){

        $(this).hide();

    });

異步請求示例：

1. 省份城市聯級下拉列表(異步請求,響應數據爲xml) $.ajax()

2. 省份城市聯級下拉列表(異步請求,響應數據爲json) $.ajax()

3. $.get()發送請求

4. $.post()發送請求

5. $.getScript()

6. $.getJSON()

7. $("selector").load()

      

       

     

      

來自爲知筆記(Wiz)