python前端學習之jQuery 01-jQuery的介紹 02-jQuery的選擇器 03-jQuery動畫效果 04-jQuery的屬性操做 05-使用jQuery操做input的value值

時間 2019-12-11

標籤 python 前端學習 jquery 介紹選擇器動畫效果屬性使用 input value 欄目 Python 简体版

原文原文鏈接

01-jQuery的介紹

1.爲何要使用jQuery

在用js寫代碼時，會遇到一些問題：javascript

window.onload 事件有事件覆蓋的問題，所以只能寫一個事件。css
代碼容錯性差。html
瀏覽器兼容性問題。java
書寫很繁瑣，代碼量多。jquery
代碼很亂，各個頁面處處都是。ajax
動畫效果很難實現。django

jQuery的出現，能夠解決以上問題。編程

什麼是 jQuery

jQuery 是 js 的一個庫，封裝了咱們開發過程當中經常使用的一些功能，方便咱們調用，提升開發效率。json

js庫是把咱們經常使用的功能放到一個單獨的文件中，咱們用的時候，直接引用到頁面裏便可。api

關於jQuery的相關資料：

官網：http://jquery.com/
官網API文檔：http://api.jquery.com/
漢化API文檔：http://www.css88.com/jqapi-1.9/

學習jQuery，主要是學什麼

初期，主要學習如何使用jQuery操做DOM，其實就是學習jQuery封裝好的那些功API。

這些API的共同特色是：幾乎全都是方法。因此，在使用jQuery的API時，都是方法調用，也就是說要加小括號()，小括號裏面是相應的參數，參數不一樣，功能不一樣。

jQuery的第一個代碼

用原生js來實現下面代碼效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementsByTagName('button')[0];
            var divArr = document.getElementsByTagName('div');
            oBtn.onclick = function () {
                        for (var i = 0; i < divArr.length; i++) {
                            divArr[i].style.display = "block";
                            divArr[i].innerHTML = "趙雲";
                            }
             }
        }
    </script>
    
</head>
<body>
    
    <button>操做</button>
    <div></div>
    <div></div>
    <div></div>
    

</body>
</html>

若是用 jQuery 來寫，保持其餘的代碼不變，<script>部分的代碼修改成：（須要提早引入）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <button>操做</button>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 獲取dom元素
            var oBtn = $('button'); //根據標籤名獲取元素
            var oDiv = $('div'); //根據標籤名獲取元素
            oBtn.click(function(){
                oDiv.show(1000);//顯示盒子
                oDiv.html('趙雲'); // 設置內容
            });//事件是經過方法綁定的
        })
    </script>
    
</body>
</html>

jQuery 的兩大特色

鏈式編程：好比.show()和.html()能夠連寫成.show().html()。
隱式迭代：隱式對應的是顯式。隱式迭代的意思是：在方法的內部進行循環遍歷，而不用咱們本身再進行循環，簡化咱們的操做，方便咱們調用。

jQuery 的使用

使用 jQuery 的基本步驟

（1）引包

（2）入口函數

（3）功能實現代碼（事件處理）

如圖：

主要：導包的代碼必定要放在js代碼的最上面。

jQuery 的版本

jQuery 有兩個大版本：

1.x版本：最新版爲 v1.11.3。
2.x版本：最新版爲 v2.1.4（再也不支持IE六、七、8）。
3.x版本。

下載jQuery包以後裏面會有兩個文件，一個是jquery-3.3.1.js，一個是jquery-3.3.1.min.js

它們的區別是：

第一個是未壓縮版，第二個是壓縮版。
平時開發過程當中，可使用任意一個版本；可是，項目上線的時候，推薦使用壓縮版。

jQuery 的入口函數和 `$` 符號

入口函數（重要）

原生 js 的入口函數指的是：window.onload = function() {}; 以下：

        //原生 js 的入口函數。頁面上全部內容加載完畢，才執行。
        //不只要等文本加載完畢，並且要等圖片也要加載完畢，才執行函數。
       window.onload = function () {
           alert(1);
       }

而 jQuery的入口函數，有如下幾種寫法：

寫法一：

 //1.文檔加載完畢，圖片不加載的時候，就能夠執行這個函數。
       $(document).ready(function () {
           alert(1);
       })

寫法二：（寫法一的簡潔版）

 //2.文檔加載完畢，圖片不加載的時候，就能夠執行這個函數。
       $(function () {
           alert(1);
       });

寫法三：

  //3.文檔加載完畢，圖片也加載完畢的時候，在執行這個函數。
       $(window).ready(function () {
           alert(1);
       })

jQuery入口函數與js入口函數的區別：

區別一：書寫個數不一樣：

Js 的入口函數只能出現一次，出現屢次會存在事件覆蓋的問題。
jQuery 的入口函數，能夠出現任意屢次，並不存在事件覆蓋問題。

區別二：執行時機不一樣：

Js的入口函數是在全部的文件資源加載完成後，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。
jQuery的入口函數，是在文檔加載完成後，就執行。文檔加載完成指的是：DOM樹加載完成後，就能夠操做DOM了，不用等到全部的外部資源都加載完成。

文檔加載的順序：從上往下，邊解析邊執行。

jQuery的`$`符號

jQuery 使用 $ 符號緣由：書寫簡潔、相對於其餘字符不同凡響、容易被記住。

jQuery佔用了咱們兩個變量：$ 和 jQuery。當咱們在代碼中打印它們倆的時候：

  <script src="jquery-3.3.1.js"></script>
    <script>

        console.log($);
        console.log(jQuery);
        console.log($===jQuery);


    </script>

打印結果：

從打印結果能夠看出，$ 表明的就是 jQuery。

那怎麼理解jQuery裏面的 $ 符號呢？

$ 實際上表示的是一個函數名 以下：

    $(); // 調用上面咱們自定義的函數$

    $(document）.ready(function(){}); // 調用入口函數

    $(function(){}); // 調用入口函數

    $(「#btnShow」) // 獲取id屬性爲btnShow的元素

    $(「div」) // 獲取全部的div標籤元素

如上方所示，jQuery 裏面的 $ 函數，根據傳入參數的不一樣，進行不一樣的調用，實現不一樣的功能。返回的是jQuery對象。

jQuery這個js庫，除了$ 以外，還提供了另一個函數：jQuery。jQuery函數跟 $ 函數的關係：jQuery === $。

js中的DOM對象和 jQuery對象比較（重點，難點）

兩者的區別

經過 jQuery 獲取的元素是一個數組，數組中包含着原生JS中的DOM對象。舉例：

針對下面這樣一個div結構：

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div

經過原生 js 獲取這些元素節點的方式是：

    var myBox = document.getElementById("app");           //經過 id 獲取單個元素
    var boxArr = document.getElementsByClassName("box");  //經過 class 獲取的是僞數組
    var divArr = document.getElementsByTagName("div");    //經過標籤獲取的是僞數組

經過 jQuery 獲取這些元素節點的方式是：（獲取的都是數組）

  //獲取的是數組，裏面包含着原生 JS 中的DOM對象。

　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

設置當前4個div的樣式：

　　　　　　$('div').css({
                'width': '200px',
                'height': '200px',
                "background-color":'red',
                'margin-top':'20px'
            })

因爲JQuery 自帶了 css()方法，咱們還能夠直接在代碼中給 div 設置 css 屬性。

總結：jQuery 就是把 DOM 對象從新包裝了一下，讓其具備了 jQuery 方法。

兩者的相互轉換

一、 DOM 對象轉爲 jQuery對象：

$(js對象);

二、jQuery對象轉爲 DOM 對象：

  jquery對象[index];      //方式1（推薦）

  jquery對象.get(index);  //方式2

jQuery對象轉換成了 DOM 對象以後，能夠直接調用 DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

總結：若是想要用哪一種方式設置屬性或方法，必須轉換成該類型。

舉例：

隔行換色

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函數
        jQuery(function () {
            var jqLi = $("li");
            for (var i = 0; i < jqLi.length; i++) {
                if (i % 2 === 0) {
                    //jquery對象，轉換成了js對象
                    jqLi[i].style.backgroundColor = "pink";
                } else {
                    jqLi[i].style.backgroundColor = "yellow";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
</ul>
</body>
</html>

效果以下：

02-jQuery的選擇器

咱們之前在CSS中學習的選擇器有：

今天來學習一下jQuery 選擇器。

jQuery選擇器是jQuery強大的體現，它提供了一組方法，讓咱們更加方便的獲取到頁面中的元素。

一、jQuery 的基本選擇器

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //入口函數
        $(function(){
            //三種方式獲取jquery對象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $('div');

            //操做標籤選擇器
            jqBox3.css('width', '100');
            jqBox3.css('height', 100);
            jqBox3.css('background-color', 'red');
            jqBox3.css('margin-top', 10);


            //操做類選擇器(隱式迭代，不用一個一個設置)
                    jqBox2.css("background", "green");
                    jqBox2.text('哈哈哈')

                    //操做id選擇器
                    jqBox1.css("background", "yellow");
                   
        })
    </script>
    
</body>
</html>

效果以下：

二、層級選擇器

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //獲取ul中的li設置爲粉色
            //後代：兒孫重孫曾孫玄孫....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：親兒子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

效果以下：

三、基本過濾選擇器

解釋：

代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本過濾選擇器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈，基本過濾選擇器</li>
            <li>嘿嘿嘿</li>
            <li>天王蓋地虎</li>
            <li>小雞燉蘑菇</li>
            
        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //獲取第一個 :first ,獲取最後一個 :last
            
            //奇數
            $('li:odd').css('color','red');
            //偶數
            $('li:even').css('color','green');
            
            //選中索引值爲1的元素 *
            $('li:eq(1)').css('font-size','30px');
            
            //大於索引值1
            $('li:gt(1)').css('font-size','50px');
            
            //小於索引值1
            $('li:lt(1)').css('font-size','12px');
            
            
            
            
        })
        
        
    </script>
</html>

效果以下：

四、屬性選擇器

代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <h2 class="title">屬性元素器</h2>
            <!--<p class="p1">我是一個段落</p>-->
            <ul>
                <li id="li1">分手應該體面</li>
                <li class="what" id="li2">分手應該體面</li>
                <li class="what">分手應該體面</li>
                <li class="heihei">分手應該體面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked"></input>
                <input name="username1111" type='text' value="1"></input>
                <input name="username2222" type='text' value="1"></input>
                <input name="username3333" type='text' value="1"></input>
                <button class="btn-default">按鈕1</button>
                <button class="btn-info">按鈕1</button>
                <button class="btn-success">按鈕1</button>
                <button class="btn-danger">按鈕1</button>


            </form>
        </div>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //標籤名[屬性名] 查找全部含有id屬性的該標籤名的元素
            $('li[id]').css('color','red');
            
            //匹配給定的屬性是what值得元素
            $('li[class=what]').css('font-size','30px');
            //[attr!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素
            $('li[class!=what]').css('font-size','50px');
            
            //匹配給定的屬性是以某些值開始的元素
            $('input[name^=username]').css('background','gray');
            //匹配給定的屬性是以某些值結尾的元素
            $('input[name$=222]').css('background','greenyellow');
            
            //匹配給定的屬性是以包含某些值的元素
            $('button[class*=btn]').css('background','red')
        
            
        })
    
    </script>
</html>

效果以下：

5.篩選選擇器

代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一個span標籤</span>
                <span>我是第二個span標籤</span>
                <span>我是第三個span標籤</span>
            </p>
            <button>按鈕</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        //獲取第n個元素 數值從0開始
        $('span').eq(1).css('color','#FF0000');
        
        //獲取第一個元素 :first :last    點語法  ：get方法 和set方法
        $('span').last().css('color','greenyellow');
        $('span').first().css('color','greenyellow');
        
        //查找span標籤的父元素（親的）
        $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
        
        //選擇全部的兄弟元素（不包括本身）
                  $('.list').siblings('li').css('color','red');

                  
                //查找全部的後代元素
                   $('div').find('button').css('background','yellow');

                
                //不寫參數表明獲取全部子元素。
                   $('ul').children().css("background", "green");
                   $('ul').children("li").css("margin-top", 10);
                   

        
        
    </script>
</html>

效果以下：

選擇器介紹完畢，內容比較多，你們根據以前學習到的css選擇器能夠更好的使用jquery選擇器的用法

03-jQuery動畫效果

jQuery提供的一組網頁中常見的動畫效果，這些動畫是標準的、有規律的效果；同時還提供給咱們了自定義動畫的功能。

顯示動畫

方式一：

  $("div").show();

解釋：無參數，表示讓指定的元素直接顯示出來。其實這個方法的底層就是經過display: block;實現的。

方式二：

$('div').show(3000);

解釋：經過控制元素的寬高、透明度、display屬性，逐漸顯示，2秒後顯示完畢。

方式三：

 $("div").show("slow");

參數能夠是：

slow 慢：600ms
normal 正常：400ms
fast 快：200ms

解釋：和方式二相似，也是經過控制元素的寬高、透明度、display屬性，逐漸顯示。

方式四：

 //show(毫秒值，回調函數;
    $("div").show(5000,function () {
        alert("動畫執行完畢！");
    });

解釋：動畫執行完後，當即執行回調函數。

總結：

上面的四種方式幾乎一致：參數能夠有兩個，第一個是動畫的執行時長，第二個是動畫結束後執行的回調函數。

隱藏動畫

方式參照上面的show()方法的方式。以下：

    $(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

實現點擊按鈕顯示盒子，再點擊按鈕隱藏盒子

代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: green;
                border: 1px solid red;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="box">        
        </div>
        <button id="btn">隱藏</button>    
    </body>
    <script src="jquery-3.3.1.js"></script>
    
    <script type="text/javascript">
        
        //jquery 提供了一些方法 show() hide() 控制元素顯示隱藏
        var isShow = true;
        $('#btn').click(function(){
            if(isShow){
                $('#box').show('slow',function(){
                    $(this).text('盒子出來了');            
                    $('#btn').text('顯示');
                    isShow = false;
                })
            }else{
                $('#box').hide(2000,function(){
                    $(this).text('');    
                    $('#btn').text('隱藏');
                    isShow = true;
                    
                })
            }
        })
    
        
    </script>
</html>

開關式顯示隱藏動畫

$('#box').toggle(3000,function(){});

顯示和隱藏的來回切換採用的是toggle()方法：就是先執行show()，再執行hide()。

代碼以下：

    $('#btn').click(function(){
            $('#box').toggle(3000,function(){
                $(this).text('盒子出來了');    
                if ($('#btn').text()=='隱藏') {
                    $('#btn').text('顯示');    
                }else{
                    $('#btn').text('隱藏');    
                }
            });
        })

滑入和滑出

一、滑入動畫效果：（相似於生活中的捲簾門）

$(selector).slideDown(speed, 回調函數);

解釋：下拉動畫，顯示元素。

注意：省略參數或者傳入不合法的字符串，那麼則使用默認值：400毫秒（一樣適用於fadeIn/slideDown/slideUp）

二、滑出動畫效果：

 $(selector).slideUp(speed, 回調函數);

解釋：上拉動畫，隱藏元素。

三、滑入滑出切換動畫效果：

 $(selector).slideToggle(speed, 回調函數);

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: green;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //點擊按鈕後產生動畫
            $("button:eq(0)").click(function () {

                //滑入動畫： slideDown(毫秒值，回調函數[顯示完畢執行什麼]);
                $("div").slideDown(2000, function () {
                    alert("動畫執行完畢！");
                });
            })

            //滑出動畫
            $("button:eq(1)").click(function () {

                //滑出動畫：slideUp(毫秒值，回調函數[顯示完畢後執行什麼]);
                $("div").slideUp(2000, function () {
                    alert("動畫執行完畢！");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換（一樣有四種用法）
                $("div").slideToggle(1000);
            })

        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切換</button>
<div></div>

</body>
</html>

淡入淡出動畫

一、淡入動畫效果：

 $(selector).fadeIn(speed, callback);

做用：讓元素以淡淡的進入視線的方式展現出來。

二、淡出動畫效果：

$(selector).fadeOut(1000);

做用：讓元素以漸漸消失的方式隱藏起來

三、淡入淡出切換動畫效果：

 $(selector).fadeToggle('fast', callback);

做用：經過改變透明度，切換匹配元素的顯示或隱藏狀態。

參數的含義同show()方法。

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            /*透明度*/
            opacity: 0.5;
            background-color: red;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //點擊按鈕後產生動畫
            $("button:eq(0)").click(function () {

//                //淡入動畫用法1:   fadeIn();   不加參數
                $("div").fadeIn();

//                //淡入動畫用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //經過控制  透明度和display

                //淡入動畫用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入動畫用法4:   fadeIn(毫秒值，回調函數[顯示完畢執行什麼]);
//                $("div").fadeIn(5000,function () {
//                    alert("動畫執行完畢！");
//                });
            })

            //滑出動畫
            $("button:eq(1)").click(function () {
//                //滑出動畫用法1:   fadeOut();   不加參數
               $("div").fadeOut();

//                //滑出動畫用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //經過這個方法實現的：display: none;
//                //經過控制  透明度和display

                //滑出動畫用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出動畫用法1:   fadeOut(毫秒值，回調函數[顯示完畢執行什麼]);
//                $("div").fadeOut(2000,function () {
//                    alert("動畫執行完畢！");
//                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換
                //一樣有四種用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //一樣有四種用法
                $("div").fadeTo(1000, 0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切換</button>
<button>改透明度爲0.5</button>
<div></div>

</body>
</html>

自定義動畫

語法：

 $(selector).animate({params}, speed, callback);

做用：執行一組CSS屬性的自定義動畫。

第一個參數表示：要執行動畫的CSS屬性（必選）
第二個參數表示：執行動畫時長（可選）
第三個參數表示：動畫執行完後，當即執行的回調函數（可選）

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定義動畫
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("動畫執行完畢！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>

中止動畫

$(selector).stop(true, false);

裏面的兩個參數，有不一樣的含義。

第一個參數：

true：後續動畫不執行。
false：後續動畫會執行。

第二個參數：

true：當即執行完成當前動畫。
false：當即中止當前動畫。

PS：參數若是都不寫，默認兩個都是false。實際工做中，直接寫stop()用的多。

案例：鼠標懸停時，彈出下拉菜單（下拉時帶動畫）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

        .wrap li {
            background-color: green;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函數
        $(document).ready(function () {
            //需求：鼠標放入一級li中，讓他裏面的ul顯示。移開隱藏。
            var jqli = $(".wrap>ul>li");

            //綁定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

            //綁定事件(移開隱藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
                <li><a href="javascript:void(0);">二級菜單4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
                <li><a href="javascript:void(0);">二級菜單4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">三級菜單2</a></li>
                <li><a href="javascript:void(0);">三級菜單3</a></li>
                <li><a href="javascript:void(0);">三級菜單4</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

ps:

javascript:void(0); //跟javascript:;效果同樣

上方代碼中，關鍵的地方在於，用了stop函數，再執行動畫前，先停掉以前的動畫。

04-jQuery的屬性操做

jquery的屬性操做模塊分爲四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做

html屬性操做：是對html文檔中的屬性進行讀取，設置和移除操做。好比attr()、removeAttr()
DOM屬性操做：對DOM元素的屬性進行讀取，設置和移除操做。好比prop()、removeProp()
類樣式操做：是指對DOM屬性className進行添加，移除操做。好比addClass()、removeClass()、toggleClass()
值操做：是對DOM屬性value進行讀取和設置操做。好比html()、text()、val()

attr()

設置屬性值或者返回被選元素的屬性值

       //獲取值：attr()設置一個屬性值的時候 只是獲取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //設置值
        //1.設置一個值 設置div的class爲box
        $('div').attr('class','box')
        //2.設置多個值，參數爲對象，鍵值對存儲
        $('div').attr({name:'hahaha',class:'happy'})

removeAttr()

移除屬性

//刪除單個屬性
$('#box').removeAttr('name');
$('#box').removeAttr('class');

//刪除多個屬性
$('#box').removeAttr('name class');

prop()

prop() 方法設置或返回被選元素的屬性和值。

當該方法用於返回屬性值時，則返回第一個匹配元素的值。

當該方法用於設置屬性值時，則爲匹配元素集合設置一個或多個屬性/值對。

語法：

返回屬性的值：

$(selector).prop(property)

設置屬性和值：

$(selector).prop(property,value)

設置多個屬性和值：

$(selector).prop({property:value, property:value,...})

關於attr()和prop()的區別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id='test' name="sex"  checked/>
    女<input type="radio" id='test2' name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //獲取第一個input
            var el = $('input').first();
            //undefined  由於attr是獲取的這個對象屬性節點的值，很顯然此時沒有這個屬性節點，天然輸出undefined
            console.log(el.attr('style'));
            // 輸出CSSStyleDeclaration對象，對於一個DOM對象，是具備原生的style對象屬性的，因此輸出了style對象
            console.log(el.prop('style'));
            console.log(document.getElementById('test').style);

            $('button').click(function(){
                alert(el.prop("checked") ? "男":"女");
            })
            


        })
    </script>
    
</body>
</html>

何時使用attr()，何時使用prop()？

1.是有true,false兩個屬性使用prop();

2.其餘則使用attr();

addClass（添加多個類名）

爲每一個匹配的元素添加指定的類名。

$('div').addClass("box");//追加一個類名到原有的類名

還能夠爲匹配的元素添加多個類名

$('div').addClass("box box2");//追加多個類名

removeClass

從全部匹配的元素中刪除所有或者指定的類。

移除指定的類（一個或多個）

$('div').removeClass('box')；

移除所有的類

$('div').removeClass();

能夠經過添加刪除類名，來實現元素的顯示隱藏

代碼以下：

var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
})

案例：

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">張三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $('ul li').click(function(){
                 // this指的是當前點擊的DOM對象 ,使用$(this)轉化jquery對象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>
    
</body>
</html>

toggleClass

若是存在（不存在）就刪除（添加）一個類。

語法：toggleClass('box')

$('span').click(function(){
    //動態的切換class類名爲active
    $(this).toggleClass('active')
})

html

獲取值：

語法;

html() 是獲取選中標籤元素中全部的內容

$('#box').html();

設置值：設置該元素的全部內容會替換掉標籤中原來的內容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

text

獲取值：

text() 獲取匹配元素包含的文本內容

語法：

$('#box').text();

設置值：
設置該全部的文本內容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

注意：值爲標籤的時候不會被渲染爲標籤元素只會被當作值渲染到瀏覽器中

val

獲取值：

val()用於表單控件中獲取值，好比input textarea select等等

設置值：

$('input').val('設置了表單控件中的值')；

05-使用jQuery操做input的value值

表單控件是咱們的重中之重，由於一旦牽扯到數據交互，離不開form表單的使用，好比用戶的註冊登陸功能等

那麼經過上節知識點咱們瞭解到，咱們在使用jquery方法操做表單控件的方法：

$(selector).val()//設置值和獲取值

看以下HTML結構：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
            <input type="radio" name="sex"  value="112" />男
            <!-- 設置cheked屬性表示選中當前選項 -->
            <input type="radio" name="sex"  value="11" checked="" />女
            <input type="radio" name="sex"  value="11" />gay

            <input type="checkbox" value="a" checked=""/>吃飯
            <input type="checkbox" value="b" />睡覺
            <input type="checkbox" value="c" checked=""/>打豆豆
    
    <!-- 下拉列表 option標籤內設置selected屬性 表示選中當前 -->
            <select name="timespan" id="timespan" class="Wdate"   >  
                <option value="1">8:00-8:30</option>  
                <option value="2" selected="">8:30-9:00</option>  
                <option value="3">9:00-9:30</option>  
            </select>  
            <input type="text" name="" id="" value="111" />
    </form>
    
</body>
</html>

頁面展現效果：

操做表單控件代碼以下：

 <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            // 1、獲取值
                //1.獲取單選框被選中的value值
                console.log($('input[type=radio]:checked').val())

                //2.複選框被選中的value,獲取的是第一個被選中的值
                console.log($('input[type=checkbox]:checked').val())

                //3.下拉列表被選中的值

                var obj = $("#timespan option:selected");
                // 獲取被選中的值
                var  time  = obj.val();  
                console.log(time);
                // 獲取文本
                var  time_text  = obj.text();  
                console.log("val:"+time+" text"+ time_text );

                //4.獲取文本框的value值
                console.log($("input[type=text]").val())//獲取文本框中的值

                // 二.設置值
                //1.設置單選按鈕和多選按鈕被選中項
                $('input[type=radio]').val(['112']);
                $('input[type=checkbox]').val(['a','b']);


                //2.設置下拉列表框的選中值，必須使用select
                /*由於option只能設置單個值，當給select標籤設置multiple。
                那麼咱們設置多個值,就沒有辦法了，可是使用select設置單個值和多個值均可以
                */
                $('select').val(['3','2'])

          
                //3.設置文本框的value值
                $('input[type=text]').val('試試就試試')




        })
    
    </script>

06-jQuery的文檔操做***

以前js中我們學習了js的DOM操做,也就是所謂的增刪改查DOM操做。經過js的DOM的操做，你們也能發現，大量的繁瑣代碼實現咱們想要的效果。那麼jQuery的文檔操做的API提供了便利的方法供咱們操做咱們的文檔。

看一個以前咱們js操做DOM的例子：

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '趙雲';
oUl.appendChild(oLi);

一.插入操做

知識點1：

語法：

父元素.append(子元素)

解釋：追加某元素，在父元素中添加新的子元素。子元素能夠爲：stirng | element（js對象） | jquery元素

代碼以下：

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));

PS:若是追加的是jquery對象那麼這些元素將從原位置上消失。簡言之，就是一個移動操做。

知識點2：

語法：

子元素.appendTo(父元素)

解釋：追加到某元素子元素添加到父元素

$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')

PS:要添加的元素一樣既能夠是stirng 、element(js對象) 、 jquery元素

知識點3：

語法：

父元素.prepend(子元素)；

解釋：前置添加，添加到父元素的第一個位置

$('ul').prepend('<li>我是第一個</li>')

知識點4：

語法：

父元素.prependTo(子元素)；

解釋：後置添加，添加到父元素的最後一個位置

$('<a href="#">路飛學誠</a>').prependTo('ul')

知識點5：

語法：

父元素.after(子元素)；
子元素.inserAfter(父元素)；

解釋：在匹配的元素以後插入內容

$('ul').after('<h4>我是一個h3標題</h4>') $('<h5>我是一個h2標題</h5>').insertAfter('ul')

知識點6：

語法：

父元素.before(子元素)；
子元素.inserBefore(父元素)；

解釋：在匹配的元素以後插入內容

$('ul').before('<h3>我是一個h3標題</h3>') $('<h2>我是一個h2標題</h2>').insertBefore('ul')

2、克隆操做

語法：

$(選擇器).clone();

解釋：克隆匹配的DOM元素

$('button').click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其全部的事件處理而且選中這些克隆的副本(簡言之，副本具備與真身同樣的事件處理能力)
  $(this).clone(true).insertAfter(this);
})

3、修改操做

知識點1：

語法：

$(selector).replaceWith(content);

將全部匹配的元素替換成指定的string、js對象、jquery對象。

//將全部的h5標題替換爲a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將全部h5標題標籤替換成id爲app的dom元素
$('h5').replaceWith($('#app'));

知識點2：

語法：

$('<p>哈哈哈</p>')replaceAll('h2');

解釋：替換全部。將全部的h2標籤替換成p標籤。

$('<br/><hr/><button>按鈕</button>').replaceAll('h4')

四、刪除操做

知識點1：

語法：

$(selector).remove();

解釋：刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）

$('ul').remove();

知識點2：

語法：

$(selector).detach();

解釋：刪除節點後，事件會保留

var $btn = $('button').detach() //此時按鈕能追加到ul中 $('ul').append($btn)

知識點3：

語法：

$(selector).empty();

解釋：清空選中元素中的全部後代節點

//清空掉ul中的子元素，保留ul $('ul').empty()

07 小米導航案例

小米導航案例

代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        .box{
            width: 960px;
            /*height: 60px;*/
            overflow: hidden;
            margin: 0 auto;
            /*border: 1px solid green;*/
        }
        .box ul li{
            float: left;
            /*width: 160px;*/
            /*height: 60px;*/
            line-height: 60px;
            text-align: center;


        }
        .box ul li a{
            text-decoration: none;
            display: block;
            width: 40px;
            height: 60px;
            color: #000;
            padding: 0 60px;
            background-color: yellow;
        }
        .box .show{
            width: 100%;
            height: 200px;
            position: absolute;
            /**/
            top: 60px;
            left: 0;
            border-top: 1px solid #666;
            border-bottom: 1px solid #666;
            border-left: 1px solid #666;
            border-right: 1px solid #666;

            display: none;
            box-shadow: 0 0 5px #777;
        }
        .box .show.active{
            display: block;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <a href=" ">小米手機</a >
            <div class="show">
                <div class="container">
張三
                </div>
            </div>
        </li>
        <li>
            <a href="#">小米手機</a >
            <div class="show">
                <div class="container">
李四
                </div>
            </div>
        </li>
        <li>
            <a href="#">小米手機</a >
            <div class="show">
                <div class="container">
王五
                </div>
            </div>
        </li>
        <li>
            <a href="#">小米手機</a >
            <div class="show">
                <div class="container">
趙六
                </div>
            </div>
        </li>
         <li>
            <a href="#">小米手機</a >
            <div class="show">
                <div class="container">
武七
                </div>
            </div>
        </li>
         <li>
            <a href="#">小米手機</a >
            <div class="show">
                <div class="container">
哈哈哈哈
                </div>
            </div>
        </li>
</div>
        <script type="text/javascript" src='jquery-3.3.1.js'></script>
        <script type="text/javascript">
    $(function(){
        // 控制當鼠標第一次呼入的動畫效果
          var animated = false;
        
        $('.box>ul>li>a').mouseenter(function(ev){

            // 下面代碼時鼠標第一次滑入a標籤的動畫效果
            if(!animated){
                animated = true;
                var jQa = $(this);            
                jQa.css('color','#F52809')
                // next()表示當前標籤的緊挨着的兄弟標籤
                $(this).next("div").stop().slideDown(600);
            }else{

                 var jQa = $(this);  
                      // 修改a標籤的樣式
                  jQa.css('color','#F52809').parent('li').siblings('li').children('a').css('color','black');
                  // 切換下面顯示區域的內容
                  jQa.next('div').stop().show().parents('li').siblings('li').children('.show').stop().hide();

            }
    
           
        });
        // 鼠標進入到下方區域，保持不變
          $('.show').mouseenter(function(ev){
            
            
            $(this).stop().show();
        })
          // 鼠標離開下方區域
           $('.show').mouseleave(function(ev){
            
            
            $(this).stop().slideUp(300);
            animated = false
        })
           // 鼠標離開導航欄列表
        $('.box').mouseleave(function(ev){
           
            console.log($(ev.target));
            $(ev.target).next("div").stop().slideUp(300);
            animated = false;
       
        });

      


    })



  

</script>
</body> 
</html>

08-jQuery的位置信息

jQuery的位置信息跟JS的client系列、offset系列、scroll系列封裝好的一些簡便api.

1、寬度和高度

獲取寬度

.width()

描述：爲匹配的元素集合中獲取第一個元素的當前計算寬度值。這個方法不接受任何參數。.css(width) 和 .width()之間的區別是後者返回一個沒有單位的數值（例如，400），前者是返回帶有完整單位的字符串（例如，400px）。當一個元素的寬度須要數學計算的時候推薦使用.width() 方法。

設置寬度

.width( value )

描述：給每一個匹配的元素設置CSS寬度。

高度

獲取高度

.height()

描述：獲取匹配元素集合中的第一個元素的當前計算高度值。

這個方法不接受任何參數。

設置高度

 .height( value )

描述：設置每個匹配元素的高度值。

二、innerHeight()和innerWidth()

獲取內部寬

.innerWidth()

描述：爲匹配的元素集合中獲取第一個元素的當前計算寬度值,包括padding，可是不包括border。

ps:這個方法不適用於window 和 document對象，對於這些對象可使用.width()代替。

設置內部寬

.innerWidth(value);

描述：爲匹配集合中的每一個元素設置CSS內部寬度。若是這個「value」參數提供一個數字，jQuery會自動加上像素單位（px）

獲取內部高

.innerHeight()

描述：爲匹配的元素集合中獲取第一個元素的當前計算高度值,包括padding，可是不包括border。

ps:這個方法不適用於window 和 document對象，對於這些對象可使用.height()代替。

設置內部寬

.innerHeight(value);

描述：爲匹配集合中的每一個元素設置CSS內部高度。若是這個「value」參數提供一個數字，jQuery會自動加上像素單位（px）

3.outWidth和outHeight()

獲取外部寬

 .outerWidth( [includeMargin ] )

描述：獲取匹配元素集合中第一個元素的當前計算外部寬度（包括padding，border和可選的margin）

includeMargin (默認: false)

類型： Boolean

一個布爾值，代表是否在計算時包含元素的margin值。
這個方法不適用於window 和 document對象，可使用.width()代替

設置外部寬

 .outerWidth( value )

描述：爲匹配集合中的每一個元素設置CSS外部寬度。

獲取外部寬

 .outerHeight( [includeMargin ] )

描述：獲取匹配元素集合中第一個元素的當前計算外部高度（包括padding，border和可選的margin）

includeMargin (默認: false)

類型： Boolean

一個布爾值，代表是否在計算時包含元素的margin值。
這個方法不適用於window 和 document對象，可使用.width()代替

設置外部高

 .outerHeight( value )

描述：爲匹配集合中的每一個元素設置CSS外部高度。

三、偏移

獲取

.offset()

返回值：Object 。.offset()返回一個包含top 和 left屬性的對象。

描述：在匹配的元素集合中，獲取的第一個元素的當前座標，座標相對於文檔。

注意：jQuery不支持獲取隱藏元素的偏移座標。一樣的，也沒法取得隱藏元素的 border, margin, 或 padding 信息。若元素的屬性設置的是 visibility:hidden，那麼咱們依然能夠取得它的座標

設置

 .offset( coordinates )

描述：設置匹配的元素集合中每個元素的座標，座標相對於文檔。

coordinates

類型: Object

一個包含 top 和 left屬性的對象，用整數指明元素的新頂部和左邊座標。

例子：

$("p").offset({ top: 10, left: 30 });

4.元素座標

 .position()

返回值：Object{top,left}

描述獲取匹配元素中第一個元素的當前座標，相對於offset parent的座標。(offset parent指離該元素最近的並且被定位過的祖先元素 )

當把一個新元素放在同一個容器裏面另外一個元素附近時，用.position()更好用。

5.滾動距離

水平方向

獲取：

.scrollLeft()

描述：獲取匹配的元素集合中第一個元素的當前水平滾動條的位置（頁面捲走的寬度）

設置：

.scrollLeft( value )

描述：設置每一個匹配元素的水平方向滾動條位置。

垂直方向

獲取：

.scrollTop()

描述：獲取匹配的元素集合中第一個元素的當前遲滯滾動條的位置（頁面捲走的高度）

設置：

.scrollLeft( value )

描述：設置每一個匹配元素的垂直方向滾動條位置。

09-JS的事件流的概念(重點)

在學習jQuery的事件以前，你們必需要對JS的事件有所瞭解。看下文

事件的概念

HTML中與javascript交互是經過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，能夠向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在何時進行調用的，就須要瞭解一下「事件流」的概念。

什麼是事件流

事件流描述的是從頁面中接收事件的順序

一、DOM事件流

「DOM2級事件」規定的事件流包括三個階段：

① 事件捕獲階段；

② 處於目標階段；

③ 事件冒泡階段

那麼其實呢，js中還有另一種綁定事件的方式：看下面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn處於事件捕獲階段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn處於事件冒泡階段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document處於事件捕獲階段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document處於事件冒泡階段');
        }, false);

        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件捕獲階段');
        }, true);
        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件冒泡階段');
        }, false);

        document.body.addEventListener('click',function(){
            console.log('body處於事件捕獲階段');
        }, true);
        document.body.addEventListener('click',function(){
            console.log('body處於事件冒泡階段');
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按鈕</a>
</body>
</html>

當咱們點擊這個btn的時候，看看頁面都輸出了什麼：

在解釋輸出結果爲何是這樣以前，還有幾個知識點須要瞭解一下便可：

一、addEventListener

addEventListener 是DOM2 級事件新增的指定事件處理程序的操做，這個方法接收3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值參數若是是true，表示在捕獲階段調用事件處理程序；若是是false，表示在冒泡階段調用事件處理程序。

二、document、documentElement和document.body三者之間的關係：

document表明的是整個html頁面；

document.documentElement表明的是<html>標籤；

document.body表明的是<body>標籤；

接着咱們就來聊聊上面的例子中輸出的結果爲何是這樣：

在標準的「DOM2級事件」中規定，事件流首先是通過事件捕獲階段，接着是處於目標階段，最後是事件冒泡階段。這裏能夠畫個圖示意一下:

首先在事件捕獲過程當中，document對象首先接收到click事件，而後事件沿着DOM樹依次向下，一直傳播到事件的實際目標，就是id爲btn的a標籤。

接着在事件冒泡過程當中，事件開始時由最具體的元素（a標籤）接收，而後逐級向上傳播到較爲不具體的節點（document）。

須要注意的點：因爲老版本的瀏覽器不支持事件捕獲，所以在實際開發中須要使用事件冒泡，在由特殊須要時再使用事件捕獲

補充知識瞭解便可：

一、IE中的事件流只支持「事件冒泡」，可是版本到了IE9+之後，實現了「DOM2級事件」，也就是說IE9+之後也能夠在捕獲階段對元素進行相應的操做。

二、在DOM事件流中，實際的目標在「捕獲階段」不會接收到事件。而是在「處於目標階段」被觸發，並在事件處理中被當作「冒泡階段」的一部分。而後，「冒泡階段」發生，事件又傳播迴文檔。

jquery的經常使用事件

jquery經常使用的事件，你們必定要熟記在心

10-事件對象

上篇介紹完咱們js的事件流的概念以後，相信你們對事件流也有所瞭解了。那麼接下來咱們看一下jquery的事件操做。

在說jquery的每一個事件以前，咱們先來看一下事件對象

事件對象

Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

何時會產生Event 對象呢?

例如: 當用戶單擊某個元素的時候,咱們給這個元素註冊的事件就會觸發,該事件的本質就是一個函數,而該函數的形參接收一個event對象

2.事件一般與函數結合使用，函數不會在事件發生前被執行！

事件流的由來（瞭解）

因爲微軟和網景亂搞,後來必需要爲事件傳播機制,制定一個標準,由於事件捕獲是網景公司開發出來的,而事件冒泡是由微軟公司開發出來的,它們都想要本身的技術成爲標準,因此致使這兩個公司總是幹架,制定標準的人爲了避免讓它們幹架,因此研發了事件流.

關於event對象

在觸發的事件的函數裏面咱們會接收到一個event對象,經過該對象咱們須要的一些參數,好比說咱們須要知道此事件做用到誰身上了,就能夠經過event的屬性target來獲取到(IE暫且不談),或者想阻止瀏覽器的默認行爲能夠經過方法preventDefault()來進行阻止.如下是event對象的一些屬性和方法

屬性	描述
altKey	返回當事件被觸發時，」ALT」是否被按下。
button	返回當事件被觸發時，哪一個鼠標按鈕被點擊。
clientX	返回當事件被觸發時，鼠標指針的水平座標。
clientY	返回當事件被觸發時，鼠標指針的垂直座標。
ctrlKey	返回當事件被觸發時，」CTRL」鍵是否被按下。
metaKey	返回當事件被觸發時，」meta」鍵是否被按下。
relatedTarget	返回與事件的目標節點相關的節點。
screenX	返回當某個事件被觸發時，鼠標指針的水平座標。
screenY	返回當某個事件被觸發時，鼠標指針的垂直座標。
shiftKey	返回當事件被觸發時，」SHIFT」鍵是否被按下

IE 屬性(除了上面的鼠標/事件屬性，IE 瀏覽器還支持下面的屬性)

屬性	描述
`cancelBubble`	若是事件句柄想阻止事件傳播到包容對象，必須把該屬性設爲 true。
fromElement	對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
keyCode	對於 keypress 事件，該屬性聲明瞭被敲擊的鍵生成的 Unicode 字符碼。對於 keydown 和 keyup
offsetX,offsetY	發生事件的地點在事件源元素的座標系統中的 x 座標和 y 座標。
`returnValue`	若是設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置爲
`srcElement`	對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement	對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
x,y	事件發生的位置的 x 座標和 y 座標，它們相對於用CSS動態定位的最內層包容元素。

標準 Event 屬性下面列出了 2 級 DOM 事件標準定義的屬性。

屬性和方法	描述
bubbles	返回布爾值，指示事件是不是起泡事件類型。
`cancelable`	返回布爾值，指示事件是否可擁可取消的默認動做。
`currentTarget`	返回其事件監聽器觸發該事件的元素。
eventPhase	返回事件傳播的當前階段。
`target`	返回觸發此事件的元素（事件的目標節點）。
timeStamp	返回事件生成的日期和時間。
`type`	返回當前 Event 對象表示的事件的名稱。
initEvent()	初始化新建立的 Event 對象的屬性。
`preventDefault()`	通知瀏覽器不要執行與事件關聯的默認動做。
`stopPropagation()`	再也不派發事件。

Event對象的一些兼容性寫法（瞭解）

得到event對象兼容性寫法
event || (event = window.event);
得到target兼容型寫法
event.target||event.srcElement
阻止瀏覽器默認行爲兼容性寫法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止冒泡寫法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

11-jQuery的事件綁定和解綁

一、綁定事件

語法：

bind(type,data,fn)

描述：爲每個匹配元素的特定事件（像click）綁定一個事件處理器函數。

參數解釋：

type (String) : 事件類型

data (Object) : (可選) 做爲event.data屬性值傳遞給事件對象的額外數據對象

fn ( Function) : 綁定到每一個匹配元素的事件上面的處理函數

示例：

當每一個p標籤被點擊的時候，彈出其文本

$("p").bind("click", function(){
  alert( $(this).text() );
});

你能夠在事件處理以前傳遞一些附加的數據。

function handler(event) {
//event.data 能夠獲取bind()方法的第二個參數的數據
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

經過返回false來取消默認的行爲並阻止事件起泡。

$("form").bind("submit", function() { return false; })

經過使用 preventDefault() 方法只取消默認的行爲。

$("form").bind("submit", function(event){
  event.preventDefault();
});

二、解綁事件

語法：

unbind(type,fn);

描述：

bind()的反向操做，從每個匹配的元素中刪除綁定的事件。

若是沒有參數，則刪除全部綁定的事件。

若是把在綁定時傳遞的處理函數做爲第二個參數，則只有這個特定的事件處理函數會被刪除。

參數解釋：

type (String) : (可選) 事件類型

fn(Function) : (可選) 要從每一個匹配元素的事件中反綁定的事件處理函數

示例：

把全部段落的全部事件取消綁定

$("p").unbind()

將段落的click事件取消綁定

$("p").unbind( "click" )

刪除特定函數的綁定，將函數做爲第二個參數傳入

var foo = function () {
  //綁定事件和解綁事件的事件處理函數
};

$("p").bind("click mouseenter", foo); // 給p段落綁定click mouseenter事件

$("p").unbind("click", foo); // 只解綁了p段落標籤的click事件

3.自定義事件

其實事件的綁定和解綁，都是我爲了自定義事件作準備（你們把jQuery的提供的事件熟記在心），之後對jquery熟了之後，能夠玩一下自定義事件

語法：

trigger(type,data);

描述：在每個匹配的元素上觸發某類事件，它觸發的是由bind()註冊的自定義事件。

參數解釋：

type (String) : 要觸發的事件類型

data (Array) : (可選)傳遞給事件處理函數的附加參數

示例：

給一個按鈕添加自定義的事件

$('button').bind('myClick',function(ev,a,b){
    //給button按鈕添加的自定義事件myClick事件        
})

而後經過trigger()觸發自定義的事件

$('button').trigger('myClick',[1,2])

4.補充一次性事件

語法：

one(type,data,fn)

描述：

爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。在每一個對象上，這個事件處理函數只會被執行一次。其餘規則與bind()函數相同

參數解釋：

type (String) : 事件類型

data (Object) : (可選) 做爲event.data屬性值傳遞給事件對象的額外數據對象

fn (Function) : 綁定到每一個匹配元素的事件上面的處理函數

示例：
當全部段落被第一次點擊的時候，顯示全部其文本。

$("p").one("click", function(){
//只有第一次點擊的時候纔會觸發，再次點擊不會觸發了
  alert( $(this).text() );
});

12-事件委託（事件代理）

什麼是事件委託

通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來作，這個事件原本是加在某些元素上的，然而你卻加到別人身上來作，完成這個事件。
　　舉個列子：有三個同事預計會在週一收到快遞。爲簽收快遞，有兩種辦法：一是三我的在公司門口等快遞；二是委託給前臺MM代爲簽收。現實當中，咱們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就爲了等快遞）。前臺MM收到快遞後，她會判斷收件人是誰，而後按照收件人的要求籤收，甚至代爲付款。這種方案還有一個優點，那就是即便公司裏來了新員工（無論多少），前臺MM也會在收到寄給新員工的快遞後覈實並代爲簽收。

原理：

　　利用冒泡的原理，把事件加到父級上，觸發執行效果。

做用：

1.性能要好
2.針對新建立的元素，直接能夠擁有事件

事件源 :

　　跟this做用同樣(他不用看指向問題，誰操做的就是誰),event對象下的

使用情景：

　　•爲DOM中的不少元素綁定相同事件；
　　•爲DOM中尚不存在的元素綁定事件；

示例：

<body>
        <ul>
            <li class="luffy">路飛</li>
            <li>路飛</li>
            <li>路飛</li>
            
        </ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    //經過on()方法
     $('ul').on('click','#namei,.luffy',function(){
        console.log(this);
       })
            
   //將來追加的元素 
    $('ul').append('<a id="namei">娜美</a>')

}
</script>

語法：

on(type,selector,data,fn);

描述：在選定的元素上綁定一個或多個事件處理函數

參數解釋

events( String) : 一個或多個空格分隔的事件類型

selector( String) : 一個選擇器字符串，用於過濾出被選中的元素中能觸發事件的後代元素

data: 當一個事件被觸發時，要傳遞給事件處理函數的 event.data。

fn:回調函數

13-輪播實現(各類)

無縫輪播實現（比較考驗邏輯思惟）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .slider-list{

            width: 580px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        .slider-list .slider-wrapper{
            height: 470px;
        }
        .slider-wrapper ul{
            height: 100%;

            position: relative;

        }
        .slider-wrapper ul li{
            float: left;
            width: 590px;
            height: 470px;

        }
        .slider-wrapper ul li a{
            display: block;
            width: 100%;
            height: 100%;
        }
         .focus-img{
            width: 590px;
            height: 470px;
        }
        button{
            position: absolute;
            width: 24px;
            height: 40px;
            top: 50%;
            line-height: 40px;
            text-align: center;
            background-color: rgba(0,0,0,.2);
            color: white;
            font-size: 30px;
            border: 0;
            outline: none;
            cursor: pointer;
            z-index: 99;
        }
        button.next{
            right: 0;
        }
        button.prev{
            left: 0;
        }
        .slider-index{
            position: absolute;
            bottom: 10px;
            left:250px;
            z-index: 2;

        }
        .slider-index span{
            display: inline-block;
            width: 10px;
            height: 10px;
            border: 2px solid red;
            border-radius: 50%;
        }
        .slider-index span.active{
            background-color: orange;
        }

    </style>
</head>
<body>
    <div class="slider-list">
        <div class="slider-wrapper">
            <ul>
                
            </ul>
        </div>
        <button class="next">></button>
        <button class="prev"><</button>
        <div class="slider-index">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>    
        </div>
    </div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            // 1.獲取本地圖片數據 590*470
            var imgArr = ['./5.jpg','./1.jpg','./2.jpg','./3.jpg','./4.jpg','./5.jpg','./1.jpg'];

            // 獲取圖片的寬度
            var imgWidth = 590;
            var len = $('span').length;

            // 2.遍歷數據 將圖片添加到ul中
            for(let i = 0;i < imgArr.length;i++){
                let width = i*imgWidth;
                $(`<li>
                    <a href="javascript:;">
                        <img src=${imgArr[i]} alt=${i}>
                    </a>
                </li>`).appendTo('.slider-wrapper ul').addClass('slider-item')    

            }
            

            // 設置圖片的類名
            $('img').addClass('focus-img');
            // 設置父盒子的總寬度
            $('.slider-wrapper').width((imgArr.length+1)*imgWidth);
            $('.slider-wrapper ul').width((imgArr.length+1)*imgWidth);


            // 初始化 
            // 默認顯示第一張圖片
            init();
            function init(){
                 $("ul").css("left",-imgWidth);
            }

            
            // 下一張
            $('button.next').click(function(event) {
                
                next();
            });

            // 控制圖片顯示第幾張
            var count  = 1;
            function next(){

                if (count ==len+1) {
                    count  = 2;
                    $("ul").css("left",-imgWidth);
                }else{
                    count++;
                }
                $('.slider-wrapper ul').stop().animate({left:-count*imgWidth},200);

                
                // 控制輪播圖索引改變顏色
                if (count>len) {
                    $("span").eq(0).addClass("active").siblings("span").removeClass("active");
                }else{

                 $("span").eq(count-1).addClass("active").siblings("span").removeClass("active");
                }
                
            }

            // 給小圓圈添加點擊事件

            $('span').click(function(){
                  //本身的樣式
                            $(this).addClass("active").siblings("span").removeClass("active");
                             count = $(this).index()+1;
                            $("ul").animate({"left":-count*imgWidth},200);
            })

            setInterval(next,2000);
            

        })
    </script>
</body>
</html>

模仿京東輪播圖效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul,ol{ list-style: none;}
        .wrapper{
            width: 580px;
            height: 240px;
            margin: 100px auto;
            /*overflow: hidden;*/
            position: relative;
        }
        .wrapper ul{
            width: 100%;
            height: 240px;
            overflow: hidden;

        }
        .wrapper ul li{
            float: left;
            width: 580px;
            height: 240px;
        }
        ol{
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 190px;
        }
        ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            background-color: #abc;
        }
        ol li.current{
            background-color: pink;
        }
    </style>
    <script type="text/javascript" src="./jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            // 根據ol下li的索引號，匹配ul下相對應li的索引號
            $(".wrapper ol li").mouseenter(function () {
                $(this).addClass("current").siblings().removeClass("current");
                $(".wrapper ul li").eq($(this).index()).stop().fadeIn("fast").siblings().stop().fadeOut();
            });
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li><img src="./1.jpg" alt=""/></li>
            <li><img src="./2.jpg" alt=""/></li>
            <li><img src="./3.jpg" alt=""/></li>
            <li><img src="./4.jpg" alt=""/></li>
            <li><img src="./5.jpg" alt=""/></li>

            
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
</html>

14-jQuery的ajax

什麼是ajax

AJAX = 異步的javascript和XML（Asynchronous Javascript and XML）

簡言之，在不重載整個網頁的狀況下，AJAX經過後臺加載數據，並在網頁上進行顯示。

經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。

1.jQuery的load()方法

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

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

ps:該方法使用很少，瞭解便可

語法：

$("selector").load(url,data,callback);

第一種狀況

$('#btn').click(function(){

    //只傳一個url，表示在id爲#new-projects的元素里加載index.html
    $('#new-projects').load('./index.html');
})

第二種狀況

$('#btn').click(function(){
    //只傳一個url，導入的index.html文件含有多個傳遞參數，相似於：index/html?name='張三'
    $('#new-projects').load('./index.html',{"name":'張三',"age":12});
})

第三種狀況

//加載文件以後，會有個回調函數，表示加載成功的函數
    $('#new-projects').load('./index.html',{"name":'張三',"age":12},function(){

});

2. jquery的getJSON方法

jQuery的AJAX中使用getJSON()方法異步加載JSON格式數據。獲取服務器中的數據，並對數據進行解析，顯示到頁面中

語法:

$.getJSON(url,[data],[callback])

參數解釋：

url參數：爲請求加載json格式文件的服務器地址
可選項data參數：爲請求時發送的數據
callback參數：爲數據請求成功後執行的函數

  $.getJSON("./data/getJSON.json", function (data) {
       var str = "";//初始化保存內容變量
       $.each(data, function(index,ele) {
          $('ul').append("<li>"+ele.name+"</li>")

          });
       })

3.jquery的$.get()方法

$.get() 方法經過 HTTP GET 請求從服務器上請求數據

語法：

$.get(URL,callback);

url參數：規定你請求的路徑，是必需參數
callback參數：爲數據請求成功後執行的函數

$.get('./data/getJSON.json',function(data,status){
    console.log(status);   //success    200狀態碼 ok的意思              
})

4.jquery的post()方法

與get()方法相比，post()方法多用於以POST方式向服務器發送數據，服務器接收到數據以後，進行處理，並將處理結果返回頁面

語法：

$.post(URL,data,callback);

url參數：規定你請求的路徑，是必需參數，可選的data參數是連同請求發送的數據
可選的callback參數：爲數據請求成功後執行的函數

 $.post('/index',{name:'張三'},function(data,status){
      console.log(status);

 })

5.jquery的$.ajax()方法（重要）

query的$.ajax()方法 是作ajax技術常用的一個方法。

它的參數不少，總會有一些初學者記不住，在這裏，演示幾個常用的參數。後面講django課程部分會詳細講ajax技術的原理。你們先把每一個參數作個筆記。

參數以下：

1.url: 要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。

2.type: 要求爲String類型的參數，請求方式（post或get）默認爲get。注意其餘http請求方法，例如put和delete也可使用，但僅部分瀏覽器支持。

3.timeout: 要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。

4.async: 要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。

5.cache: 要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。

6.data: 要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換，能夠查看　　processData選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組，JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。

7.dataType: 要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並做爲回調函數參數傳遞。可用的類型以下：

　　xml：返回XML文檔，可用JQuery處理。

　　html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。

　　script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。

　　json：返回JSON數據。

　 jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。

　　text：返回純文本字符串。

8.beforeSend：要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。 function(XMLHttpRequest){ this; //調用本次ajax請求時傳遞的options參數 } 9.complete：

要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。 function(XMLHttpRequest, textStatus){ this; //調用本次ajax請求時傳遞的options參數 }

10.success：

　　要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。

　　(1)由服務器返回，並根據dataType參數進行處理後的數據。

　　(2)描述狀態的字符串。 function(data, textStatus){ //data多是xmlDoc、jsonObj、html、text等等

11.error: 要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下： function(XMLHttpRequest, textStatus, errorThrown){ //一般狀況下textStatus和errorThrown只有其中一個包含信息 this; //調用本次ajax請求時傳遞的options參數 }

12.contentType：要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter：要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理後的數據 return data; }

14.dataFilter：要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理後的數據 return data; }

15.global：要求爲Boolean類型的參數，默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各類ajax事件。

16.ifModified：要求爲Boolean類型的參數，默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

17.jsonp：要求爲String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，例如{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

18.username：要求爲String類型的參數，用於響應HTTP訪問認證請求的用戶名。

19.password：要求爲String類型的參數，用於響應HTTP訪問認證請求的密碼。

20.processData：要求爲Boolean類型的參數，默認爲true。默認狀況下，發送的數據將被轉換爲對象（從技術角度來說並不是字符串）以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息，請設置爲false。

21.scriptCharset：要求爲String類型的參數，只有當請求時dataType爲"jsonp"或者"script"，而且type是GET時纔會用於強制修改字符集(charset)。一般在本地和遠程的內容編碼不一樣時使用

get方式

//get()方式
  $.ajax({
     url:'./data/index.txt',
     type:'get',
     dataType:'text',
     success:function(data){
        $('p').html(data);

     },
     error:function(error){
        console.log(error)
     }

post方式

//post()方式
$.ajax({
   url:'/index',
   type:'post',
   data:{name:'張三',age:12},
   success:function(data){
      $('p').html(data);
   },
   error:function(error){
      console.log(error)
}

ps:

注意：以上全部操做,請在服務器上運行此代碼，若是沒有服務器，能夠在本地搭建本地服務器。
好吧！！我們還沒學，咱們可使用PCCharm,WebStrom,HBuilder上運行此代碼。可是post請求的方法 咱們暫時無法演示，
後面在django部分講到服務器的知識點後，會給你們詳細演示get請求和post請求的處理。