从零开始学 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("事件名", 事件处理函数);