jquery续集

weixin_34008784

于 2019-06-12 21:39:51 发布

阅读量62

点赞数

原文链接：http://blog.51cto.com/10983441/2408112

版权

11.jquery的事件

jquery续集

11.1事件的概念

HTML中，与js的交互是通过事件驱动实现的。
例如鼠标点击事件、页面的滚动事件等，可以向文档或文档中的元素添加事件侦听器(即addEventListener()方法)来预定事件。
想要知道这些事件在什么时候调用，需要了解下"事件流"的概念。

11.2什么是事件流

事件流描述的是从页面中执行事件的顺序

DOM事件流包括三个阶段：
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段

11.3DOM事件流执行顺序演示

介绍事件流执行顺序前，首先介绍以下内容

1.addEventListener()方法，是js对象的方法，不是jquery对象的方法
oBtn.addEventListener('click', function() {
        console.log('按钮处于捕获阶段');
        alert(1);
    }, true)
a.该方法是指定事件处理程序的操作。
b.该方法接受三个参数，
    第一个：要处理的事件名。
    第二个：事件处理函数
    第三个：布尔值，为true，表示捕获阶段调用事件处理程序。为false，表示冒泡阶段调用事件处理程序。

2.document、document.documentElement和document.body三者之间的关系
a.document代表整个html页面。
b.document.documentElement代表<html>标签
c.document.body代表的是<body>标签

事件流首先经过捕获阶段，接着处于目标阶段，最后事件冒泡阶段。

注意：
实际开发中，我们只需要关注事件冒泡阶段。

"事件流执行顺序如下:"

jquery续集

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body >
<input type="button" value="按钮" id="btn">

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

        $(function () {
            //由于是属于js的事件，所以要获取js对象
            var btn = document.getElementById('btn');
            btn.addEventListener('click',function () {
                console.log("按钮捕获阶段");
                console.log("按钮事件中内容");
            },true);
            document.body.addEventListener('click',function () {
                console.log("body捕获阶段");
                    },true);
            document.addEventListener('click',function () {
                console.log("document捕获阶段");
                    },true);
            document.documentElement.addEventListener('click',function () {
                console.log("html捕获阶段");
                    },true);

            btn.addEventListener('click',function () {
                console.log("按钮冒泡阶段")
                    },false);
            document.documentElement.addEventListener('click',function () {
                console.log("html冒泡阶段");
                    },false);
            document.body.addEventListener('click',function () {
                console.log("body冒泡阶段");
                    },false);
            document.addEventListener('click',function () {
                console.log("document冒泡阶段");
                    },false);
        });
    </script>
</body>
</html>

jquery续集

11.4事件冒泡处理

方法一：
$('a').click(function (event) {
                //防止事件冒泡
                event.stopPropagation();
                //防止默认事件，a标签默认会跳转，阻止了之后，就可以定义自己的事件方式
                event.preventDefault();
                console.log("a click");
            });

方法二：
$('.father').click(function (event) {
            console.log('father click');
            //既能阻止默认事件，又能阻止冒泡
            return false;
        });

99%的事件都需要做冒泡处理

11.4.1没有做冒泡处理时

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>

</head>
<body >
<div class="father">
    <button>按钮</button>
    <a href="">按钮</a>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $('.father button').click(function () {
                console.log("button click");
            });
            $('a').click(function () {
                console.log("a click");
            });
            $('.father').click(function () {
                console.log('father click');
            });
            $('body').click(function () {
                console.log('body click');
            });
        });

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

jquery续集

11.4.2做了冒泡处理后

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>

</head>
<body >
<div class="father">
    <button>按钮</button>
    <a href="">按钮</a>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $('.father button').click(function (event) {
                //阻止事件冒泡
                event.stopPropagation();
                console.log("button click");
            });
            $('a').click(function (event) {
                //防止事件冒泡
                event.stopPropagation();
                //防止默认事件
                event.preventDefault();
                console.log("a click");
            });
            $('.father').click(function () {
                console.log('father click');
                //既能阻止默认事件，又能阻止冒泡
                return false;
            });
            $('body').click(function () {
                console.log('body click');
            });
        });

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

jquery续集

11.5event事件对象

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body >
<div class="father">
    <button>按钮</button>
    <input type="text" name="user" value="123">
    <p class="content"></p>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.input标签只有js对象的oninput属性，能实时获取内容
            $('input')[0].oninput=function (event) {
                console.log("input标签--event.target.value：",event.target.value);
            };
            $('button').click(function (event) {
                event.stopPropagation();
                console.log("event对象",event);
                console.log("当前事件的目标对象(js对象)--event.currentTarget：",event.currentTarget);
                console.log("当前事件的对象(js对象)--event.target：",event.target);
                console.log("当前对象的文本内容--event.target.innerText：",event.target.innerText);
                console.log("当前js对象转为jquery对象，获取文本内容--$(e.target.text())：",$(event.target).text());
                console.log("通过this获取当前jquery对象获取文本内容--$(this).text()：",$(this).text());
                console.log("this==event.target：",this==event.target);
                console.log("this==event.currentTarget：",this==event.currentTarget);
            });
        });
    </script>
</body>
</html>

jquery续集

11.6jquery的双击事件

两次单击的间隔时间差是300毫秒，如果小于300毫秒，表示双击
遇到的问题：双击 时，同时调用了两次单击

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body >
<div class="father">
    <button>按钮</button>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //两次单击的间隔时间差是300毫秒，如果小于300毫秒，表示双击
            //遇到的问题：双击 时，同时调用了两次单击
            var timer = null;
            $('button').click(function () {
                console.log("单击");
                //取消第一次延时未执行的方法
                clearTimeout(timer);
                timer = setTimeout(function () {

                },300);
            });
            $('button').dblclick(function () {
                //取消第二次延时未执行的方法
                clearTimeout(timer);
                console.log("双击");
            });
        });
    </script>
</body>
</html>

11.7jquery的鼠标移入事件

mouseover
mouseout
这里有个重要的现象，从父元素出来再进入子元素，会先执行一次mouseout，再执行一次mouseover。

mouseenter
mouseleave
从父元素进入子元素，不会执行mouseenter，mouseleave。
所以我们常用mouseenter，mouseleave。

jquery续集

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 200px;
            height: 200px;
            background-color:red;

        }
        .child{
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>

</head>
<body >
    <div class="father">
        <p class="child">
            vita
        </p>
    </div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            $('.father').mouseenter(function () {
                console.log("mouseenter");
            });
            $('.father').mouseleave(function () {
                console.log("mouseleave");
            });
        });
    </script>
</body>
</html>

jquery续集

11.7.1购物车小案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .shopCart{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: red;
        }
        .content{
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: yellowgreen;
            display: none;
        }
    </style>

</head>
<body >
    <div class="shopCart">
        购物车
    </div>
    <div class="content"></div>

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

        $(function () {
            $('.shopCart').mouseenter(function () {
                $('.content').css('display','block');
            });
            $('.shopCart').mouseleave(function () {
                $('.content').css('display','none');
            });

            // 合成事件  mouseenter mouseleave
            // $('.shopCart').hover(function() {
            //    $(this).siblings('.content').slideDown(500);
            // }, function() {
            //  /* Stuff to do when the mouse leaves the element */
            //    $(this).siblings('.content').slideUp(500);
            // });
        });
    </script>
</body>
</html>

jquery续集

11.8jQuery的鼠标事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>

</head>
<body >
    <input type="text" name="user">

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

        $(function () {
            //加载页面时，让输入框获得焦点
            $('input').focus();
            //1.获得焦点-focus()
            $('input').focus(function () {
                console.log("获得焦点了");
            });
            //2.失去焦点——blur()
            $('input').blur(function () {
                console.log("失去焦点了");
            });

            //3.键盘按键事件
            $('input').keyup(function (e) {
                switch (e.keyCode) {
                    case 13:
                        console.log('回车调用了');
                        break;
                    default:
                        console.log("e.keyCode",e.keyCode);
                        break;
                }
            });
        });
    </script>
</body>
</html>

jquery续集

11.9表单事件的select事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com/s" method="get">
        <input type="text" name="wd">
        <input type="submit" value="搜索">
    </form>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function(){
            // 文本选中的时候会调用
            $('input[type=text]').select(function(){
                console.log('内容选中了');
            });
            // 原生js的onsubmit事件
            $('form').submit(function(e){
                e.preventDefault();
                // 未来 自己去发请求  往百度发请求 ajax技术
                console.log('form被submit了');
            });
        });
    </script>

</body>
</html>

jquery续集

11.10事件委托

事件委托，就是让别人来做

原理： 利用冒泡的原理，把事件加到父级上，触发执行效果。

作用：
1.性能好
2.针对新创建的元素，可以拥有事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>vita</li>
        <li class="item">lili</li>

    </ul>
    <button>添加</button>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function(){
            // 1.未来追加的li标签 自己完成不了click事件，那么这个时候考虑“事件委托(代理)”
            $('button').click(function(event) {
                $('ul').append('<li>黑gril</li>')
            });
/*         2.通过这种方式设置追加标签的事件，是不成功的
            $('ul>li').click(function(){
                alert($(this).text());
            });
            */

            // 3。事件委托  （看时机  如果是未来追加的元素 建议使用 事件委托来绑定事件）
            // 原理： 利用冒泡的原理，把事件加到父级上，触发执行效果。
            $('ul').on('click','li',function(e){
                console.log($(this).text());
            });

        });

    </script>

</body>
</html>

jquery续集

12.ajax

动态页面，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

12.1get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box"></div>
    <!-- <div class="box"></div> -->
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        // 动态页面，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

        $(function(){
            /*
            // 最简单的ajax请求就实现了
            $.ajax({
                url:'http://localhost:8800/',
                type:'get',
                success:function(data){
                    console.log(data);
                    $('body').html(data);
                },
                error:function(err){
                    console.log(err);
                }
            });
            */
            $.ajax({
                url:'http://localhost:8800/course',
                type:'get',
                dataType:'json',//设置数据类型，以json来解析后端发过来的数据
                success:function(data){
                    console.log(data);
                    // // $('body').html(data);
                    // $('.box').text(data.name);
                },
                error:function(err){
                    console.log(err);
                }
            });

        })
    </script>

</body>
</html>

12.2post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form >
        <input type="text" name="user">
        <input type="submit" name="">
    </form>
    <!-- <div class="box"></div> -->
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function(){

            $('form').submit(function(e){
                // 阻止form表单的默认事件
                e.preventDefault();
                var userVal = $('input[name=user]').val();
                console.log(userVal);

                // 与你后端交互
                $.ajax({
                    url:"http://localhost:8800/create",
                    type:'post',
                    data:{
                        "name":userVal
                    },
                    success:function(data){
                        console.log(data);
                    },
                    error:function(err){
                        console.log(err);
                    }
                })
            })

        })
    </script>

</body>
</html>

12.3和风天气API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="tmp"></div>
    <div class="city"></div>
    <img src="" alt="">
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $.ajax({
                url:'https://free-api.heweather.com/s6/weather/now?location=shanghai&key=4693ff5ea653469f8bb0c29638035976',
                type:"get",
                success:function (data) {
                    console.log(data.HeWeather6[0].now.tmp);
                    // 温度
                    var tmp = data.HeWeather6[0].now.tmp;
                    // 城市
                    var city = data.HeWeather6[0].basic.location;
                    // 天气状况码
                    var cond_code= data.HeWeather6[0].now.cond_code;

                    // 后面方法的参数使用的是es6的模板字符串拼接的变量
                    $('.tmp').text(`${tmp}℃`);
                    $('.city').text(city);
                    // 后面的地址是使用的和风天气的天气状况cdn资源。您也可以使用本地图片加载
                    $('img').attr('src',`https://cdn.heweather.com/cond_icon/${cond_code}.png`);

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

转载于:https://blog.51cto.com/10983441/2408112

weixin_34008784

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery续集

11.jquery的事件11.1事件的概念HTML中，与js的交互是通过事件驱动实现的。例如鼠标点击事件、页面的滚动事件等，可以向文档或文档中的元素添加事件侦听器(即addEventListener()方法)来预定事件。想要知道这些事件在什么时候调用，需要了解下"事件流"的概念。11.2什么是事件流事件流描述的是从页面中执行事件的顺序DOM事件流包括三个阶段：1.事件捕获阶段...
复制链接

扫一扫