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>

获取数据进行操做

B网站

打开一个jquery库--选择一个模版--右键查看源代码--查找iframe(有id的地方)--点击连接--右键审查元素-进行代码的复制(相关的文件按对应的文档顺序放到文件里).