92-94

时间 2020-02-02

原文原文链接

jQuery高度以及位置操做

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

    <div style="height: 100px; width: 100px; overflow: auto;">
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
    </div>

</body>
</html>

上图：p标签内容较多，经过overflow: auto能够展示滚动条，这个滚动条是属于div标签的。html

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

    <div style="height: 100px; width: 100px; overflow: auto;">
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
    </div>
    <div style="height: 1000px"></div>  <!--新增1000px的div标签-->
    <script src="jquery-1.12.4.js"></script>

</body>
</html>

上图：新增的div标签像素为1000，能够看到浏览器最右边出现了一个新的滚动条，这属于浏览器窗口的滑轮，而不是div的。jquery

上图：经过$(window).scrollTop()获取当前浏览器窗口滚动条的位置，当前位置是68浏览器

上图：滚动条位置是565app

上图：窗口使用window来关联；查看标签滚动条位置可使用div来关联标签。dom

上图：不传参是获取位置；传参就是指定滚动条到指定的位置；若是设置值为0，就是返回顶部。ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1"></div>
    <div style="height: 100px; width: 100px; overflow: auto;">
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
    </div>
    <div id="i2"></div>
    <div style="height: 1000px"></div>

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

</body>
</html>

代码：新增两个div标签函数

上图：使用offset()，#i1的div标签top=8，left=8，这是默认div有个margin外边距，默认就是top8和left8。this

上图：i2上面有个100px的div标签；因此i2的高度是108code

上图：分别获取top和lefthtm

<div style="position: relative">
    <div id="i11" style="position: absolute"></div>
</div>

代码说明：

若是使用offset获取position: absolute的位置，获取到的不是基于窗口的位置，而是基于position: relative标签的相对位置。

height
获取标签纯高度

$("p").height();    <!--获取标签的高度-->

$("p").height(20);  <!--设置标签的高度-->

innerHeight()
获取边框 + 纯高度
outerHeight()
获取外部高度
outerHeight(true)
设置为true时，计算边距

jQuery绑定事件

一、
经常使用的绑定
$('.c1').click()

二、
绑定c1，关联click事件，调用匿名函数
$('.c1').bind('click',function(){

})

解绑c1
$('.c1').unbind('click',function(){

})

三、
绑定c1下的a标签，关联click事件，调用匿名函数
$('.c1').delegate('a','click',function(){

})

解绑
$('.c1').undelegate('a','click',function(){

})

四、
上面三种绑定的方式，内部调用都是on方式
绑定
$('.c1').on('click',function(){

})

解绑
$('.c1').off('click',function(){

})

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

    <input id="t1" type="text">
    <input id="a1" type="button" value="添加">

    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').append(temp);
    });

    $('ul li').click(function () {
        var v = $(this).text();
        alert(v)
    })
</script>

</body>
</html>

上图：点击2，就会弹出消息框，消息框中的内容是咱们点击的2

上图：输入3，添加，图中成功添加了3这个内容和对应的li标签；可是去点击3的时候没有弹出任何信息；由于当运行程序时，只关联了1和2这两个li标签，而3是后添加的，并无对3绑定事件。

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

    <input id="t1" type="text">
    <input id="a1" type="button" value="添加">

    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').append(temp);
    });

    // $('ul li').click(function () {
    //     var v = $(this).text();
    //     alert(v)
    // })

    // $('ul li').bind('click',function () {
    //     var v = $(this).text();
    //     alert(v)
    // })

    // $('ul li').on('click',function () {
    //     var v = $(this).text();
    //     alert(v)
    // })

    $('ul').delegate('li','click',function () {
        var v = $(this).text();
        alert(v)
    })

</script>

</body>
</html>

代码说明：

新添加的标签，经过使用click、bind、on的方式去绑定事件都未生效，由于代码是从上到下执行的，执行的过程当中尚未添加新li标签，因此没有绑定。

而使用delegate状况不同，delegate叫委托，只有当你点击li这个标签的时候delegate才会去绑定你点击的li标签，这样新增标签也会被绑定，事件就会生效。

在网页中添加、编辑新内容时就可使用delegate。

jQuery事件之阻止事件的发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com">Go</a>

</body>
</html>

代码：超连接

上2图：经过点击超连接就能跳转到指定页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="ClickOn()" href="https://www.baidu.com">Go</a>
    <script>
        function ClickOn() {
            alert(123);
        }
    </script>

</body>
</html>

代码说明：

添加onclick这个dom事件；
点击事件后先执行alert

上2图：点击肯定后会跳转到指定页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()" href="https://www.baidu.com">Go</a>   <!--添加return-->
    <script>
        function ClickOn() {
            alert(123);
            return false;   <!--return为false-->
        }
    </script>

</body>
</html>

代码说明：

false：点击alert的肯定后不会跳转到指定页面
true：点击alert的肯定后能够跳转到指定页面
事件阻断主要就是为了作表单验证。

也就是说想要执行某个事件以前能够先作false和true的判断，若是为true才会继续执行超连接。
好比：输入用户名密码，能够先检查格式是否符合格式标准，符合的话就为true，而后才会将用户密码经过submit提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()" href="https://www.baidu.com">Go</a>
    <a id="i1" href="https://www.baidu.com">Go2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn() {
            alert(123);
            return true;
        }

        $('#i1').click(function () {    //使用jQuery方式
            alert(456)
        })

    </script>

</body>
</html>

上图：点击Go2，也会弹出alert，点击弹框的肯定后会跳转到指定页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()" href="https://www.baidu.com">Go</a>
    <a id="i1" href="https://www.baidu.com">Go2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn() {
            alert(123);
            return true;
        }

        $('#i1').click(function () {
            alert(456);
            return false;   //添加return false；
        })

    </script>

</body>
</html>

代码：return false; 不会跳转到页面；

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。