12,前端-事件流-單擊-雙擊-單向數據流-事件對象-位置信息

時間 2019-11-12

標籤前端事件單擊雙擊單向數據流對象位置信息简体版

原文原文鏈接

前端-事件流-單擊-雙擊-單向數據流-事件對象-位置信息javascript

事件流的概念(重點)

事件的概念

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

什麼是事件流

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

一、DOM事件流前端

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

① 事件捕獲階段；jquery

② 處於目標階段；ajax

③ 事件冒泡階段json

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>

綁定事件的代碼

看控制檯的輸出:api

一、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的經常使用事件,

http://on-img.com/chart_image/5acc19d2e4b09bf96ae86e04.png

鼠標移動事件

mouse:鼠標移動事件

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div class='box'></div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            // 鼠標移動事件
            $('.box').mousemove(function(event) {
                // 鼠標在移動的時候就會輸出1
                console.log(1);
                // 輸出的event是一個對象,後面跟點方法,能夠進行取值
                console.log(event);
                console.log(event.pageX);
            });
        })
    </script>
</body>
</html>

鼠標移動事件

鼠標移入移出觸發事件

mouseover()/out():鼠標指針穿過/離開被選元素或者當前元素的子元素,會觸發事件

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;

        }
        .child{
            width: 100px;
            height: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class='box'>
        <div class="child"></div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('.box').mouseover(function(event) {
                console.log('鼠標懸浮了');
            });

            $('.box').mouseout(function(event) {
                console.log('鼠標移出了');
            });
        })
    </script>
</body>
</html>

注意區分在沒有子元素時的效果

當子元素與父元素之間以有縫隙的時候,會致使子元素可能出不來的效果,

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;

        }
        .child{
            width: 200px;
            height: 200px;
            background-color: green;
            display: none;
            top:100px;
            /*注意這有縫隙的時候,子元素已經隱藏了,就出不來了,*/
            top:102px;
            position: absolute;
        }

    </style>
</head>
<body>
    <div class='box'>
        <div class="child"></div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('.box').mouseover(function(event) {
                console.log('鼠標懸浮了');
                $(this).children('.child').css('display','block');
            });

            $('.box').mouseout(function(event) {
                console.log('鼠標移出了');
                $(this).children('.child').css('display','none');
            });
        })
    </script>
</body>
</html>

mouseover/out

鼠標進入/離開觸發事件

mouseenter()/leave():鼠標指針在只在穿過/離開被選元素觸發事件.

示例代碼:注意區分跟mouseover/out的區別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;

        }
        .child{
            width: 200px;
            height: 200px;
            background-color: green;
            display: none;
            top:100px;
            position: absolute;
        }

    </style>
</head>
<body>
    <div class='box'>
        <div class="child"></div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('.box').mouseenter(function(event) {
                console.log('鼠標進入');
                $(this).children('.child').css('display','block');
            });

            $('.box').mouseleave(function(event) {
                console.log('鼠標離開');
                $(this).children('.child').css('display','none');
            });
        })
    </script>
</body>
</html>

mouseenter/leave事件

鼠標聚焦/失去焦點觸發事件(不支持冒泡)

focus/blur:鼠標聚焦和失去焦點觸發事件

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;

        }
        .child{
            width: 200px;
            height: 200px;
            background-color: green;
            display: none;
            top:100px;
            position: absolute;
        }

    </style>
</head>
<body>
    <div class='box'>
        <div class="child"></div>
    </div>
    <input type="text">
    <script src="jquery.js"></script>
    <script>
        $(function(){
            
            $('input').focus(function(event) {
                console.log('鼠標聚焦了')
            });
            $('input').blur(function(event) {
                console.log('鼠標失焦了')
            });

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

focus/blur

點輸入框裏面就是聚焦了,點外面就是失焦了.

鍵盤按鍵按下/彈起觸發事件(不支持冒泡)

keydown()/up()

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;

        }
        .child{
            width: 200px;
            height: 200px;
            background-color: green;
            display: none;
            top:100px;
            position: absolute;
        }

    </style>
</head>
<body>
    <div class='box'>
        <div class="child"></div>
    </div>
    <input type="text">
    <input type="button">
    <script src="jquery.js"></script>
    <script>
        $(function(){
            // 定義一個函數,根據按鍵對應的which的值,進行相應的操做
            function submitHanlder(){
                //把數據提交到後端,用ajax技術
            }
            $('input').keydown(function(event) {
                // 輸出的event對象裏面有which的方法
                console.log(event);
                // which會顯示對應按鍵的數值,根據按鍵的值進行相應的操做
                console.log(event.which);
                switch (event.which) {
                    case 13:
                        // 13是回車鍵按鍵的值,進行相應操做
                        // 函數調用
                        submitHanlder()
                        break;
                    default:
                        // statements_def
                        break;
                }

            });

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

keydown/up

表單事件

表單元素髮生改變時觸發事件

change:表單內容發生改變,而後選擇點擊外面空白區域,觸發事件,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        

    </style>
</head>
<body>
    <div class='box'>
        <div class="child"></div>
    </div>
    <input type="text" value="123">
    <input type="button">
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('input').change(function(){
                console.log(123);
            })

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

change

文本元素髮生改變時觸發事件

select

表單元素髮生改變時觸發事件

submit:form表單有默認的submit行爲,當對input type=submit按鈕點擊的時候會觸發form的默認action行爲,

此時能夠調用jquery的submit方法經過e.preventDefault()來阻止默認事件,這樣咱們就能動態的跟服務器端來發送數據了,

示例代碼:注意看代碼行裏的註釋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        

    </style>
</head>
<body>
    <div class='box'>
        <div class="child"></div>
    </div>
    <!-- form表單不能接收數據,默認提交,不寫action都提交 -->
    <form action="">
        <input type="text" value="123">
        <input type="submit">
    </form>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('input').select(function(){
                console.log(123);
            });
            $('form').submit(function(event) {
                // 阻止form表單的默認提交(數據),或者把form標籤換位別的標籤,好比div
                event.preventDefault();
            });

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

submit事件

單雙擊事件

單雙擊事件的處理,解決雙擊的時候帶單擊的狀況

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>點擊事件</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>

</head>
<body>
    <div class="box"></div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            var timer=null;

            $('.box').click(function(){
                clearTimeout(timer);
                timer=setTimeout(function(){
                    console.log('單擊')
                },300);
            });
            $('.box').dblclick(function(){
                clearTimeout(timer);
                console.log('雙擊了')
            });
        });
    </script>
</body>
</html>

解決雙擊帶單擊的事件,

單雙向數據流:

數據驅動視圖

data--->view的過程,是單向的

data--->view--->data,是雙向的,

單向數據流:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianix</title>
</head>
<body>
    <div class='box'></div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            var obj={
                name:'太亮',
                age:18,
            };
            單向數據流,把文本寫到標籤,渲染出來,
            $('.box').text(obj.name);
        });
    </script>
</body>
</html>

單向數據流

雙向數據流的綁定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianix</title>
</head>
<body>
    <!-- UI控件,只適用於有val的標籤, -->
    <input type="text" value="">
    <h3></h3>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            var a='123';
            $('input').val(a);
            $('h3').text(a);

            // 上面的代碼是初始化的賦值,data到view的過程,,


            // 下面的代碼是view到data的而後再到view的過程,

            $('input')[0].oninput=function(e){
                // 輸出的對象點開,查看方法,有value的方法,取到.

                // 下面兩行代碼能夠注掉,
                /*console.log(e.target.value);
                $('input').val(e.target.value);*/
                $('h3').text(e.target.value);
            }
        });
    </script>
</body>
</html>

雙向數據流

事件對象:

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianix</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>    
<body>
    <div class="box">
        <button>按鈕</button>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('button').click(function(event) {
                // 阻止事件冒泡
                // event.stopPropagation();
                console.log(event.target);
                console.log('button');
            });
            $('.box').click(function(event) {
                console.log(event.target);
                console.log('box');
            });
            $(document.body).click(function(event){
                console.log(event.target);
                console.log('body')
            })
        });
    </script>
</body>
</html>

event.target

與current.target的對比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianix</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>    
<body>
    <div class="box">
        <button>按鈕</button>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('button').click(function(event) {
                // 阻止事件冒泡
                // event.stopPropagation();
                // console.log(event.target);
                console.log(event.currentTarget);
                console.log('button');
            });
            $('.box').click(function(event) {
                // console.log(event.target);
                console.log(event.currentTarget);
                console.log('box');
            });
            $(document.body).click(function(event){
                // console.log(event.target);
                console.log(event.currentTarget);
                console.log('body')
            })
        });
    </script>
</body>
</html>

event.currentTarget

concole.log(this);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianix</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>    
<body>
    <div class="box">
        <button>按鈕</button>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('button').click(function(event) {
                // 阻止事件冒泡
                // event.stopPropagation();
                // console.log(event.target);
                console.log(event.currentTarget);
                console.log(this);
                console.log('button');
            });
            $('.box').click(function(event) {
                // console.log(event.target);
                console.log(event.currentTarget);

                console.log(this);
                console.log('box');
            });
            $(document.body).click(function(event){
                // console.log(event.target);
                console.log(event.currentTarget);
                console.log(this);
                console.log('body')
            })
        });
    </script>
</body>
</html>

console.log(this)與currentTarget等價

return false:既可阻止默認事件,又能夠阻止冒泡,

Jquery的位置信息

jquery裏面設置寬高的時候,不用加單位,已經封裝好了,給加了,

1、寬度和高度

獲取寬度

.width()

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

設置寬度

.width( value )

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

高度

獲取高度

.height()

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

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

設置高度

 .height( value )

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

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianix</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>    
<body>
    <div class="box">
        
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            // get 方法,得到的值沒有單位,
            console.log($('div').width());
            // 設置高度,能夠不加單位的,
            $('div').width(400);
        });
    </script>
</body>
</html>

設置高度

二、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.outerWidth和outerHeight()

獲取外部寬

 .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外部高度。

4,偏移

獲取

.offset()

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

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

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

這個獲取的偏移量是相對於頁面的,而不是至關於瀏覽器的左上角的.

console.log($('div').offset());

設置

 .offset( coordinates )

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

coordinates

類型: Object

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

例子：

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

5.元素座標

 .position()

返回值：Object{top,left}

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

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

相對定位,沒有清除padding跟margin的時候,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /**{
            padding: 0;
            margin: 0;
        }
        */
        .child{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 1px solid green;
            position: relative;

        }
    </style>
</head>
<body>

    <!-- <div class="father"> -->
        <div class="child"></div>
    <!-- </div> -->
    
    <script src="jquery.js"></script>

    <script>
        
        $(function () {
            console.log($('.child').position())
        })
    </script>
</body>
</html>

相對定位時

輸出:{top: 8, left: 8},包含邊框的距離,

設置絕對定位,脫標的,設置top:0;以後,就能夠不受邊框距離的影響,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /**{
            padding: 0;
            margin: 0;
        }*/
        
        .child{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 1px solid green;
            position: absolute;
            top:0;

        }
    </style>
</head>
<body>

    <!-- <div class="father"> -->
        <div class="child"></div>
    <!-- </div> -->
    
    <script src="jquery.js"></script>

    <script>
        
        $(function () {
            console.log($('.child').position())
        })
    </script>
</body>
</html>

設置絕對定位

6.滾動距離

水平方向

獲取：

.scrollLeft()

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

設置：

.scrollLeft( value )

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

垂直方向

獲取：

.scrollTop()

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

設置：

.scrollLeft( value )

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

滾動監聽的示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        
        .header{
            width: 100%;
            height: 80px;
            background-color: red;            
        }
        .wrap{
            width: 100%;
            height: 1000px;
            background-color: green;
            position: relative;
        }
        .box{
            width: 300px;
            height: 40px;
            background-color: yellow;
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top:100px;

        }

        .fixHeader{
            width: 100%;
            height: 80px;
            position: fixed;
            background-color: blue;
            top:0;
            left: 0;
            z-index: 9999;
        }
    </style>
</head>
<body style="height: 2000px;">
    <div class="header"></div>
    <div class="wrap">
        <div class="box"></div>
    </div>
    <div class='fixHeader' style='display:none;'></div>
    <script src="jquery.js"></script>

    <script>
        
        $(function () {
            $(document).scroll(function(event) {
                // 獲取當前盒子距離文檔頂部的高度
                var oBoxTop=$('.box').offset().top;
                // 獲取文檔(頁面)捲起的高度
                console.log(oBoxTop);
                console.log($(this).scrollTop());
                var dTop=$(this).scrollTop();
                if(dTop>oBoxTop){
                    $('.fixHeader').css('display', 'block');
                }else{
                    $('.fixHeader').css('display', 'none');
                }
            });
        });
    </script>
</body>
</html>

滾動監聽

和風天氣,介紹使用

1,註冊和風天氣,

2,首頁,使用key請求數據,

3,首頁-導航欄-文檔-熱門城市列表-使用get請求-請求url(後端提供,前端訪問)-普通用戶

4,導航欄-文檔-天氣api接口說明-實況天氣-請求方式-用方式3(普通key方式,就是首頁的key)

5,文檔-天氣情況代碼和圖表-圖片打包下載

操做演示,請求天氣數據;

和風天氣提供的url:https://free-api.heweather.com/s6/weather/now?parameters  
拼接後的:https://free-api.heweather.com/s6/weather/now?location=beijing&key=3e50a3a522e4437f8432722f73ce0a06
注意:把parameters去掉,拼接上location,用&鏈接另外一個必選的參數,注意書寫方式

請求到的數據:使用jsonView,能夠把數據的格式變一下,看上去更溫馨

{"HeWeather6":[{"basic":{"cid":"CN101010100","location":"北京","parent_city":"北京","admin_area":"北京","cnty":"中國","lat":"39.90498734","lon":"116.4052887","tz":"+8.00"},"update":{"loc":"2018-08-25 19:45","utc":"2018-08-25 11:45"},"status":"ok","now":{"cloud":"0","cond_code":"101","cond_txt":"多雲","fl":"28","hum":"63","pcpn":"0.0","pres":"1006","tmp":"27","vis":"13","wind_deg":"185","wind_dir":"南風","wind_sc":"2","wind_spd":"11"}}]}

如今使用ajax請求和風天氣的數據,

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>和風天氣</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class='box'></div>
    <script src="jquery.js"></script>
    <script>

        // 有不懂的地方,參考文檔,必定要參考文檔
        $(function(){
            $('.box').click(function(event) {
                //瀏覽器與和風天氣的服務器發生交互行爲
                $.ajax({
                    // 這個連接就是事先拼接的
                    url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=3e50a3a522e4437f8432722f73ce0a06',
                    methods:'get',
                    success:function(data){
                        // 在控制檯看數據,獲取到的是一個數組,進行取值
                        console.log(data);
                    },
                    error:function(err){
                        console.log(err);
                    }

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

獲取到的數據,對應文檔有相關參數的解釋,

進行取值後的代碼,就data後面跟不一樣的參數,進行取值,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>和風天氣</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class='box'></div>
    <script src="jquery.js"></script>
    <script>

        // 有不懂的地方,參考文檔,必定要參考文檔
        $(function(){
            $('.box').click(function(event) {
                //瀏覽器與和風天氣的服務器發生交互行爲
                $.ajax({
                    // 這個連接就是事先拼接的
                    url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=3e50a3a522e4437f8432722f73ce0a06',
                    methods:'get',
                    success:function(data){
                        // 在控制檯看數據,獲取到的是一個數組,進行取值
                        console.log(data.HeWeather6[0]);//data後面跟參數進行取值,拿到數據
                    },
                    error:function(err){
                        console.log(err);
                    }

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

獲取數組,而後進行取值

取到數據以後進行操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>和風天氣</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class='box'></div>
    <script src="jquery.js"></script>
    <script>

        // 有不懂的地方,參考文檔,必定要參考文檔
        $(function(){
            $('.box').click(function(event) {
                var _this=this;
                //瀏覽器與和風天氣的服務器發生交互行爲
                $.ajax({
                    // 這個連接就是事先拼接的
                    url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=3e50a3a522e4437f8432722f73ce0a06',
                    methods:'get',
                    success:function(data){
                        // 在控制檯看數據,獲取到的是一個數組,進行取值
                        console.log(data.HeWeather6[0].now.cond_txt);//data後面跟參數進行取值,拿到數據
                        $(_this).text(data.HeWeather6[0].now.cond_txt)
                    },
                    error:function(err){
                        console.log(err);
                    }

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