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; 不會跳轉到頁面；

每日一句

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