從零開始學 Web 之 jQuery（五）操做元素其餘屬性，爲元素綁定事件

你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、操做元素的寬和高

一、方法一

元素.css("width");
元素.css("height");

最後獲得的是字符串類型的，好比 200px。

若是咱們在設置爲原來寬高2倍的時候，就要先把獲取的寬高轉換成數字類型，再乘以2，這樣操做比較麻煩，有沒有簡單的方法呢？

二、方法二

元素.width(屬性值或者數字);
元素.height(屬性值或者數字);

一、jQuery中用以上方式能夠獲取和設置元素的寬高。

二、當沒有參數的時候是獲取元素的寬高屬性。

三、當設置參數爲 200 或者 200px的時候是設置元素的寬高爲 200px。

四、以上方法不只能夠獲取行內式元素的寬高，也能夠獲取嵌入式寫法元素的寬高。

示例：

<script>
  $(function () {
  $("#btn").click(function () {
    $("#dv").width( $("#dv").width()*2);
    $("#dv").height( $("#dv").height()*2);
  });
});
</script>

2、操縱元素的left和top

一、方法一

元素.css("left");
元素.css("left");

二、方法二

// 元素的left和top獲取
元素.offset();
// 元素的left和top設置
元素.offset({"left":值, "top",值};

一、元素.offset(); 返回值是一個對象。（好比：{top: 200, left: 200}）

二、這裏的 left 是包括：left 的值和 margin-left 值之和。

三、這裏的 top 是包括：top 的值和 margin-top 值之和。

四、在設置的時候，left 和 top 的值是數字，沒有 px。

示例：

$(function () {
    $("#btn").click(function () {                                       $("#dv").offset({"left":$("#dv").offset().left*2, "top":$("#dv").offset().top*2});
    });
});

3、操縱元素捲曲出去的值

語法：

// 獲取元素向左捲曲出去的距離
元素.scrollLeft();
// 獲取元素向上捲曲出去的距離
元素.scrollTop();

PS：沒有 scrollWidth() 和 scrollHeight()

元素.scroll(function() {}); // 元素捲曲事件，元素在向上或向左捲曲的時候觸發的事件。

4、爲元素綁定事件

一、方式一：（事件名）

語法：

元素.事件名(事件處理函數);

示例：

// 綁定鼠標進入，離開，點擊事件
    $("#btn").mouseenter(function () {
        console.log("mouseenter");
    });
    $("#btn").mouseleave(function () {
        console.log("mouseleave");
    });
    $("#btn").click(function () {
        console.log("click");
    });

// 鏈式編程
$("#btn").mouseenter(function () {
        console.log("mouseenter");
    }).mouseleave(function () {
        console.log("mouseleave");
    }).click(function () {
        console.log("click");
    });

二、方法二：（bind方法）

語法：

元素.bind("事件名", 事件處理函數);

示例：

$("#btn").bind("mouseenter", function () {
        console.log("bind:mouseenter");
    });
    $("#btn").bind("mouseleave", function () {
        console.log("bind:mouseleave");
    });
    $("#btn").bind("click", function () {
        console.log("bind:click");
    });

// 鏈式編程
    $("#btn").bind("mouseenter", function () {
        console.log("bind:mouseenter");
    }).bind("mouseleave", function () {
        console.log("bind:mouseleave");
    }).bind("click", function () {
        console.log("bind:click");
    });

三、方法三：（bind對象）

語法：

元素.bind({"事件名1":事件處理函數1, "事件名2":事件處理函數2,...});

示例：

$("#btn").bind({
        "mouseenter": function () {
            console.log("bind-obj:mouseenter");
        }, "mouseleave": function () {
            console.log("bind-obj:mouseleave");
        }, "click": function () {
            console.log("bind-obj:click");
        }
    });

使用 bind 對象的方式，只須要一個bind，能夠綁定多個事件。

四、方式四：（delegate方法）

語法：（父元素替子元素綁定事件）

父元素.delegate("子元素"，"事件名"，事件處理函數);

示例：

// 爲div下p標籤綁定點擊事件
$("#dv").delegate("p", "click", function () {
  //....
});

五、方式五：（on方法）

我發現 delegate 方法內部調用的是 on 方法，那麼 on 方法也能夠綁定事件（注意：on 的參數順序和 delegate 相反）。

語法：

父元素.on("事件名", "子元素", 事件處理函數);

示例：

// 爲div下p標籤綁定點擊事件
$("#dv").on("click", "p", function () {
  //....
});

PS：on 其實不只能夠給子元素綁定事件，還能夠給本身綁定事件，這時候只須要把子元素的參數去掉就行了。

語法：元素.on("事件名", 事件處理函數);