java Jquery

今日內容

1. JQuery 基礎1-6 高級7-11：
 1. 概念
 2. 快速入門
 3. JQuery對象和JS對象區別與轉換
 4. 選擇器
 5. DOM操作
 6. 案例

 7. 動畫
 8. 遍歷
 9. 事件綁定
 10. 案例
 11. 插件

 

JQuery 基礎：

1. 概念： 一個JavaScript框架。簡化JS開發
 * jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨 是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優 化HTML文檔操作、事件處理、動畫設計和Ajax交互。
​
 * JavaScript框架：本質上就是一些js文件，封裝了js的原生代碼而已
2. 快速入門
 1. 步驟：
  1. 下載JQuery
   * 目前jQuery有三個大版本：
    1.x：兼容ie678,使用最為廣泛的，官方只做BUG維護，
     功能不再新增。因此一般項目來說，使用1.x版本就可以了，
     最終版本：1.12.4 (2016年5月20日)
    2.x：不兼容ie678，很少有人使用，官方只做BUG維護，
     功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，
     最終版本：2.2.4 (2016年5月20日)
    3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，
     一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。
     目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）
   * jquery-xxx.js 與 jquery-xxx.min.js區別：
    1. jquery-xxx.js：開發版本。給程序員看的，有良好的縮進和注釋。體積大一些
    2. jquery-xxx.min.js：生產版本。程序中使用，沒有縮進。體積小一些。程序加載更快
​
  2. 導入JQuery的js文件：導入min.js文件
  3. 使用
   var div1 = $("#div1");

alert(div1.html());

3. JQuery對象和JS對象區別與轉換
 1. JQuery對象在操作時，更加方便。
   2. JQuery對象和js對象方法不通用的.
   3. 兩者相互轉換
       * jq -- > js : jq對象[索引] 或者 jq對象.get(索引)
       * js -- > jq : $(js對象)

4. 選擇器：篩選具有相似特征的元素(標簽)
​
 1. 基本操作學習：
  1. 事件綁定
   //1.獲取b1按鈕
           $("#b1").click(function(){
               alert("abc");
           });
  2. 入口函數
   $(function () {
           
      });
   window.onload 和 $(function) 區別
                 * window.onload 只能定義一次,如果定義多次，后邊的會將前邊的覆蓋掉
                 * $(function)可以定義多次的。
  3. 樣式控制：css方法
   // $("#div1").css("background-color","red");
       $("#div1").css("backgroundColor","pink");

 2. 分類
  1. 基本選擇器
   1. 標簽選擇器（元素選擇器）
    * 語法： $("html標簽名") 獲得所有匹配標簽名稱的元素
   2. id選擇器 
    * 語法： $("#id的屬性值") 獲得與指定id屬性值匹配的元素
   3. 類選擇器
    * 語法： $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
   4. 並集選擇器：
    * 語法： $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素
  2. 層級選擇器
   1. 后代選擇器
    * 語法： $("A B ") 選擇A元素內部的所有B元素  
   2. 子選擇器
    * 語法： $("A > B") 選擇A元素內部的所有B子元素
  3. 屬性選擇器
   1. 屬性名稱選擇器 
    * 語法： $("A[屬性名]") 包含指定屬性的選擇器
   2. 屬性選擇器
    * 語法： $("A[屬性名='值']") 包含指定屬性等於指定值的選擇器
   3. 復合屬性選擇器
    * 語法： $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器
  4. 過濾選擇器
   1. 首元素選擇器 
    * 語法： :first 獲得選擇的元素中的第一個元素
   2. 尾元素選擇器 
    * 語法： :last 獲得選擇的元素中的最后一個元素
   3. 非元素選擇器
    * 語法： :not(selector) 不包括指定內容的元素
   4. 偶數選擇器
    * 語法： :even 偶數，從 0 開始計數
   5. 奇數選擇器
    * 語法： :odd 奇數，從 0 開始計數
   6. 等於索引選擇器
    * 語法： :eq(index) 指定索引元素
   7. 大於索引選擇器 
    * 語法： :gt(index) 大於指定索引元素
   8. 小於索引選擇器 
    * 語法： :lt(index) 小於指定索引元素
   9. 標題選擇器
    * 語法： :header 獲得標題（h1~h6）元素，固定寫法
  5. 表單過濾選擇器
   1. 可用元素選擇器 
    * 語法： :enabled 獲得可用元素
   2. 不可用元素選擇器 
    * 語法： :disabled 獲得不可用元素
   3. 選中選擇器 
    * 語法： :checked 獲得單選/復選框選中的元素
   4. 選中選擇器 
    * 語法： :selected 獲得下拉框選中的元素
​
5. DOM操作
 1. 內容操作
  1. html(): 獲取/設置元素的標簽體內容   <a><font>內容</font></a> --> <font>內容</font>
  2. text(): 獲取/設置元素的標簽體純文本內容   <a><font>內容</font></a> --> 內容
  3. val()： 獲取/設置元素的value屬性值
 2. 屬性操作
  1. 通用屬性操作
   1. attr(): 獲取/設置元素的屬性
   2. removeAttr():刪除屬性
   3. prop():獲取/設置元素的屬性
   4. removeProp():刪除屬性
​
   * attr和prop區別？
    1. 如果操作的是元素的固有屬性，則建議使用prop
    2. 如果操作的是元素自定義的屬性，則建議使用attr
  2. 對class屬性操作
   1. addClass():添加class屬性值
   2. removeClass():刪除class屬性值
   3. toggleClass():切換class屬性
    * toggleClass("one"): 
     * 判斷如果元素對象上存在class="one"，則將屬性值one刪除掉。 如果元素對象上不存在class="one"，則添加
   4. css():
 3. CRUD操作:
  1. append():父元素將子元素追加到末尾
   * 對象1.append(對象2): 將對象2添加到對象1元素內部，並且在末尾
  2. prepend():父元素將子元素追加到開頭
   * 對象1.prepend(對象2):將對象2添加到對象1元素內部，並且在開頭
  3. appendTo():
   * 對象1.appendTo(對象2):將對象1添加到對象2內部，並且在末尾
  4. prependTo()：
   * 對象1.prependTo(對象2):將對象1添加到對象2內部，並且在開頭

  5. after():添加元素到元素后邊
   * 對象1.after(對象2)： 將對象2添加到對象1后邊。對象1和對象2是兄弟關系
  6. before():添加元素到元素前邊
   * 對象1.before(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關系
  7. insertAfter()
   * 對象1.insertAfter(對象2)：將對象2添加到對象1后邊。對象1和對象2是兄弟關系
  8. insertBefore()
   * 對象1.insertBefore(對象2)： 將對象2添加到對象1前邊。對象1和對象2是兄弟關系
​
  9. remove():移除元素
   * 對象.remove():將對象刪除掉
  10. empty():清空元素的所有后代元素。
   * 對象.empty():將對象的后代元素全部清空，但是保留當前對象以及其屬性節點

6. 案例

 

 

JQuery 高級

1. 動畫
 1. 三種方式顯示和隱藏元素
  1. 默認顯示和隱藏方式
   1. show([speed,[easing],[fn]])
    1. 參數：
     1. speed：動畫的速度。三個預定義的值("slow","normal", "fast")或表示動畫時長的毫秒數值(如：1000)
     2. easing：用來指定切換效果，默認是"swing"，可用參數"linear"
      * swing：動畫執行時效果是 先慢，中間快，最后又慢
      * linear：動畫執行時速度是勻速的
     3. fn：在動畫完成時執行的函數，每個元素執行一次。
​
   2. hide([speed,[easing],[fn]])
   3. toggle([speed],[easing],[fn])
  
  2. 滑動顯示和隱藏方式
   1. slideDown([speed],[easing],[fn])
   2. slideUp([speed,[easing],[fn]])
   3. slideToggle([speed],[easing],[fn])
​
  3. 淡入淡出顯示和隱藏方式
   1. fadeIn([speed],[easing],[fn])
   2. fadeOut([speed],[easing],[fn])
   3. fadeToggle([speed,[easing],[fn]])
​
2. 遍歷
 1. js的遍歷方式
  * for(初始化值;循環結束條件;步長)
 2. jq的遍歷方式
  1. jq對象.each(callback)
   1. 語法：
    jquery對象.each(function(index,element){});
     * index:就是元素在集合中的索引
     * element：就是集合中的每一個元素對象
​
     * this：集合中的每一個元素對象
   2. 回調函數返回值：
    * true:如果當前function返回為false，則結束循環(break)。
    * false:如果當前function返回為true，則結束本次循環，繼續下次循環(continue)
  2. $.each(object, [callback])
  3. for..of: jquery 3.0 版本之后提供的方式
   for(元素對象 of 容器對象)
 
3. 事件綁定
 1. jquery標准的綁定方式
  * jq對象.事件方法(回調函數)；
  * 注：如果調用事件方法，不傳遞回調函數，則會觸發瀏覽器默認行為。
   * 表單對象.submit();//讓表單提交
 2. on綁定事件/off解除綁定
  * jq對象.on("事件名稱",回調函數)
  * jq對象.off("事件名稱")
   * 如果off方法不傳遞任何參數，則將組件上的所有事件全部解綁
 3. 事件切換：toggle
  * jq對象.toggle(fn1,fn2...)
   * 當單擊jq對象對應的組件后，會執行fn1.第二次點擊會執行fn2.....
   
  * 注意：1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復此功能。
   <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
​
4. 案例
 1. 廣告顯示和隱藏
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>廣告的自動顯示與隱藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>
  
    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        /*
            需求：
                1. 當頁面加載完，3秒后。自動顯示廣告
                2. 廣告顯示5秒后，自動消失。
  
            分析：
                1. 使用定時器來完成。setTimeout (執行一次定時器)
                2. 分析發現JQuery的顯示和隱藏動畫效果其實就是控制display
                3. 使用 show/hide方法來完成廣告的顯示
          */
  
        //入口函數，在頁面加載完成之后，定義定時器，調用這兩個方法
        $(function () {
            //定義定時器，調用adShow方法 3秒后執行一次
            setTimeout(adShow,3000);
            //定義定時器，調用adHide方法，8秒后執行一次
            setTimeout(adHide,8000);
        });
        //顯示廣告
        function adShow() {
            //獲取廣告div，調用顯示方法
            $("#ad").show("slow");
        }
        //隱藏廣告
        function adHide() {
            //獲取廣告div，調用隱藏方法
            $("#ad").hide("slow");
        }

</script> </head> <body> <!-- 整體的DIV --> <div> <!-- 廣告DIV --> <div id="ad" style="display: none;"> </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
  </div>
  </body>
  </html>

 2. 抽獎
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>jquery案例之抽獎</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
  
    <script language='javascript' type='text/javascript'>
  
        /*
            分析：
                1. 給開始按鈕綁定單擊事件
                    1.1 定義循環定時器
                    1.2 切換小相框的src屬性
                        * 定義數組，存放圖片資源路徑
                        * 生成隨機數。數組索引

                2. 給結束按鈕綁定單擊事件
                    1.1 停止定時器
                    1.2 給大相框設置src屬性
  
          */
        var imgs = ["../img/man00.jpg",
                    "../img/man01.jpg",
                    "../img/man02.jpg",
                    "../img/man03.jpg",
                    "../img/man04.jpg",
                    "../img/man05.jpg",
                    "../img/man06.jpg",
                    ];
        var startId;//開始定時器的id
        var index;//隨機角標
        $(function () {
            //處理按鈕是否可以使用的效果
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);

            //1. 給開始按鈕綁定單擊事件
            $("#startID").click(function () {
                // 1.1 定義循環定時器 20毫秒執行一次
                startId = setInterval(function () {
                    //處理按鈕是否可以使用的效果
                    $("#startID").prop("disabled",true);
                    $("#stopID").prop("disabled",false);

                    //1.2生成隨機角標 0-6
                    index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                    //1.3設置小相框的src屬性
                    $("#img1ID").prop("src",imgs[index]);
  
                },20);
            });

            //2. 給結束按鈕綁定單擊事件
            $("#stopID").click(function () {
                //處理按鈕是否可以使用的效果
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);

                // 1.1 停止定時器
                clearInterval(startId);
                // 1.2 給大相框設置src屬性
                $("#img2ID").prop("src",imgs[index]).hide();
                //顯示1秒之后
                $("#img2ID").show(1000);
            });
        });

​ </script>

  </head>
  <body>
  
  <!-- 小像框 -->
  <div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
  </div>
  
  <!-- 大像框 -->
  <div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
  </div>
  
  <!-- 開始按鈕 -->
  <input
        id="startID"
        type="button"
        value="點擊開始"
        style="width:150px;height:150px;font-size:22px">
  
  <!-- 停止按鈕 -->
  <input
        id="stopID"
        type="button"
        value="點擊停止"
        style="width:150px;height:150px;font-size:22px">

  </body>
  </html>
​
5. 插件：增強JQuery的功能
 1. 實現方式：
  1. $.fn.extend(object) 
   * 增強通過Jquery獲取的對象的功能 $("#id")
  2. $.extend(object)
   * 增強JQeury對象自身的功能 $/jQuery