jQuery的位置信息/JS的事件流的概念(重点)

一.jQuery的位置信息

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

1.宽度和高度

(1).获取宽度

.width()

描述：为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 。

(2).设置宽度

.width( value )

描述：给每个匹配的元素设置CSS宽度。

(3).获取高度

.height()

描述：获取匹配元素集合中的第一个元素的当前计算高度值。

　　这个方法不接受任何参数

(4).设置高度

 .height( value )

描述：设置每一个匹配元素的高度值。

2.innerHeight()和innerWidth()

(1).获取内部宽

.innerWidth()

描述：为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。

ps:这个方法不适用于window 和 document对象，对于这些对象可以使用.width()代替。

(2).设置内部宽

.innerWidth(value);

描述： 为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）

(3).获取内部高

.innerHeight()

描述：为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。

ps:这个方法不适用于window 和 document对象，对于这些对象可以使用.height代替。

(4).设置内部宽

.innerHeight(value);

描述： 为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）

3.outWidth()和outHeight()

(1).获取外部宽

 .outerWidth( [includeMargin ] )

描述：获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin）

　　includeMargin(默认:false)

　　类型: Boolean

　　一个布尔值,表明是否在计算时包含元素的margin值

　　这个方法不适用window和document对象, 可以使用.width()代替

(2).设置外部宽

.outerWidth( value )

描述： 为匹配集合中的每个元素设置CSS外部宽度。

(3).获取外部宽

.outerHeight( [includeMargin ] )

描述：获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin）

　　includeMargin(默认: false)

　　类型: Boolean

　　一个布尔值,表明是否在计算机时包含元素的margin值

　　这个方法不适用window和document对象,可以使用.width()代替

(4).设置外部高

.outerHeight( value )

描述： 为匹配集合中的每个元素设置CSS外部高度。

4.偏移

(1).获取

.offset()

返回值：Object ;  .offset()返回一个包含top 和 left属性的对象 。

描述：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。

注意：jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标

(2).设置

.offset( coordinates )

描述： 设置匹配的元素集合中每一个元素的坐标， 坐标相对于文档。

　　coordinates

　　类型: Object

　　一个包含top和left属性的对象, 用整数指明元素的新顶部和左边坐标

示例:

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

5.元素坐标

.position()

返回值: Object{top, left}

描述获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。(offset parent指离该元素最近的而且被定位过的祖先元素 )

当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。

6.滚动距离

(1).水平方法

①.获取:

.scrollLeft()

描述：获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）

②.设置:

.scrollLeft( value )

描述：设置每个匹配元素的水平方向滚动条位置。

(2).垂直方向

①.获取:

.scrollTop()

描述：获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）

②.设置:

.scrollLeft( value )

描述：设置每个匹配元素的垂直方向滚动条位置。

二.JS的事件流的概念(重点)

1.事件的概念

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

2.什么是事件流

事件流描述的是从页面中接收事件的顺序

(1).DOM事件流

"DOM2级事件"规定的事件流包括三个阶段:

①. 事件捕获阶段;

②. 处于目标阶段;

③. 事件冒泡阶段;

那么其实呢，js中还有另外一种绑定事件的方式：看下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        


        // document.getElementById('btn').addEventListener('click', function () {
        //     alert(1);
        // },false);


        window.onload = function(){

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

            //1.
            document.addEventListener('click',function(){
                console.log('document处于事件捕获阶段');
            }, true);

            //2.
            document.documentElement.addEventListener('click',function(){
                console.log('html处于事件捕获阶段');
            }, true);
            
            //3
             document.body.addEventListener('click',function(){
                console.log('body处于事件捕获阶段');
            }, true);
            
             //4.
            oBtn.addEventListener('click',function(){
                console.log('btn处于事件捕获阶段');
            }, true);
            //4
            oBtn.addEventListener('click',function(){
                console.log('btn处于事件冒泡阶段');
            }, false);
            
            //5
             document.body.addEventListener('click',function(){
                console.log('body处于事件冒泡阶段');
            }, false);
            
            //6
              document.documentElement.addEventListener('click',function(){
                console.log('html处于事件冒泡阶段');
            }, false);
            
            //7.
            document.addEventListener('click',function(){
                console.log('document处于事件冒泡阶段');
            }, false);
    };

    </script>
</body>
</html>
事件流

(2).在解释输出结果为什么是这样之前，还有几个知识点需要了解一下即可：

①.addEventListener

addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序

②.document、documentElement和document.body三者之间的关系：

document代表的是整个html页面；

document.documentElement代表的是<html>标签； 

document.body代表的是<body>标签；

(3).接着我们就来聊聊上面的例子中输出的结果为什么是这样：

在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:

首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签.

接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）

需要注意的点：由于老版本的浏览器不支持事件捕获，因此在实际开发中需要使用事件冒泡，在由特殊需要时再使用事件捕获

(4).补充知识了解即可：

①.IE中的事件流只支持“事件冒泡”，但是版本到了IE9+以后，实现了“DOM2级事件”，也就是说IE9+以后也可以在捕获阶段对元素进行相应的操作

②.在DOM事件流中，实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发，并在事件处理中被看成“冒泡阶段”的一部分。然后，“冒泡阶段”发生，事件又传播回文档

2.jQuery的常用事件

jquery常用的事件，大家一定要熟记在心

(1).事件冒泡的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color:red;
        }
    </style>
</head>
<body>
    
    <div class="father">
        <button class="child">按钮</button>
    </div>
    <script src="jquery.js"></script>
    <script>
        
        $(function () {
            //默认传过来 一个event
            $('.child').click(function(event) {
                console.log('按钮被点击了');
                console.log(this);
                // console.log(event.currentTarget);
                console.log(event.target);
                //阻止事件冒泡
                // event.stopPropagation()

                
            });

            $('.father').mouseenter(function(event) {
                console.log(event.type)
                console.log('父盒子被点击了');
                console.log(this);
                // console.log(event.currentTarget);
                console.log(event.target);
                // event.stopPropagation()
            });

            $('body').click(function(event) {
                console.log(this);
                // console.log(event.currentTarget);

                // event.target 如果没有事件冒泡，指的点击的目标对象
                console.log(event.target);
                console.log('body被点击了')
            });
        })
    </script>
</body>
</html>
View Code

(2).百度换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .fu{
            position: fixed;
            top:0;
            left: 0;
            width: 100%;
            height: 320px;
            background-color: red;
            display: none;
        }
        .up{
            cursor: pointer;
        }
    </style>
</head>
<body style="height: 2000px">
    <!-- <form action=""></form> -->
    <a href='http://www.baidu.com' id="changeFu">换肤</a>
    <div class="fu">
        <ul>
            <li>
                <a href="javascript:void(0)">女神降临</a>
            </li>
            <li>
                <a href="javascript:void(0)">明星</a>
            </li>


            <span class="up">收起</span>

        </ul>
    </div>
    <script src="jquery.js"></script>    
    <script>
        $(function () {
            $('#changeFu').click(function(e) {
                //阻止当前默认的事件
                // e.preventDefault();
                // //阻止冒泡
                // e.stopPropagation();
                console.log(111);
                $('.fu').slideDown(1000);
                // 相当于即阻止了默认事件 又阻止冒泡
                return false;
            });

            $('body,.up').click(function(event) {
                $('.fu').slideUp(1000);
            });


            $('.fu ul li a').click(function(event) {
                event.stopPropagation();
                $(this).css('color','green').parent('li').siblings('li').find('a').css('color','blue');
            });

            $('.fu').click(function(event) {
                return false;
            });
        });
    </script>
</body>
</html>
View Code

(3).事件代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="item1">
            <a href="javascript:void(0);" id="a">alex</a>
        </li>
        <!-- <li>武sir</li> -->
    </ul>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            

            // 绑定事件  如果使用事件委托的方式  以后的页面不会出现问题

            // 第二个参数 表示的是后代的选择器

            // 事件委托（代理） 很重要  如果未来 出现 未来添加的元素  优先考虑事件委托 


            $('ul').on('click','#a',function () {
                alert(this.innerText);
            });
            // $('ul li').click(function () {
            //     alert(this.innerText);
            // });



            $('ul').append('<li><a href="javascript:void(0);">wusir</a></li>');

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

(4).合成事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            

            /*
            $('button').mouseenter(function(event) {
                
            });

            $('button').mouseleave(function(event) {
                
            });
            */

            $('button').hover(function() {
                /* Stuff to do when the mouse enters the element */
                console.log('进入');
            }, function() {
                /* Stuff to do when the mouse leaves the element */
                console.log('离开');
            });
        })
    </script>
</body>
</html>
View Code

(5).单双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            
            // 单双击 的时间 间隔 是300ms
            $('button').click(function(event) {
                console.log('单机了');
                // 定时器  300ms 一次性定时器
            });

            $('button').dblclick(function(event) {
                console.log('双机了');
            });
        })
    </script>
</body>
</html>
View Code

(6).聚焦和失焦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script src="jquery.js"></script>
    <script>
        
        //加载页面的时候 获取到焦点
        // $('input[type=text]').focus();

        
             //  $('input[type=text]').focus(function () {
             //     console.log(1);
             // });


             // $('input[type=text]').keydown(function(event) {
                 // console.log(1);

                 /*
                 console.log(event.keyCode);
                 switch (expression) {
                     case label_1:
                         // statements_1
                         break;
                             case label_1:
                         // statements_1
                         break;
                             case label_1:
                         // statements_1
                         break;
                             case label_1:
                         // statements_1
                         break;
                     default:
                         // statements_def
                         break;
                 }
                 */


                              // });



             // $('input[type=text]').change(function(event) {
             //     console.log(1111);
             // });

             // $('input[type=text]').select(function(event) {
             //     console.log(1111);
             // });
    
        

    </script>    
</body>
</html>
View Code

(7).表单控件事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!-- 交互  接收不到 后端返回回来的数据-->
    <div>
        <input type="text" name="user">
        <input type="submit">
    </div>
    <script src="jquery.js"></script>
    <script>
        


        //在公司 中 前后端分离的项目  分工明确  开发效率高

        // django  模板引擎
        
        /*
        $('input[type=submit]').click(function(event) {

            var userName = $('input[type=text]').val();
            //发送ajax交互

            $.ajax({
                url:`http://127.0.0.1:8800/?user=${userName}`,
                type:'get',
                success:function(data){

                },
                error:function (err) {
                    console.log(err)
                }
            });
        });
        */
        
        /*
        $('form').submit(function(event) {
            event.preventDefault();
            console.log(1111);

            // 发送ajax

            $.ajax({
                    url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976`,
                    type:'get',
                    success:function (data) {

                        console.log(data);
                        


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


        });
        */



    </script>
</body>
</html>
View Code
posted @ 2018-10-08 17:57  骑驴老神仙  阅读(220)  评论(0)    收藏  举报