从零开始学 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，这样操作比较麻烦，有没有简单的方法呢？

2、方法二

元素.width(属性值或者数字);
元素.height(属性值或者数字);

1、jQuery中用以上方式可以获取和设置元素的宽高。

2、当没有参数的时候是获取元素的宽高属性。

3、当设置参数为 200 或者 200px 的时候是设置元素的宽高为 200px。

4、以上方法不仅可以获取行内式元素的宽高，也可以获取嵌入式写法元素的宽高。

示例：

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

二、操纵元素的left和top

1、方法一

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

2、方法二

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

1、元素.offset(); 返回值是一个对象。（比如：{top: 200, left: 200}）

2、这里的 left 是包括：left 的值和 margin-left 值之和。

3、这里的 top 是包括：top 的值和 margin-top 值之和。

4、在设置的时候，left 和 top 的值是数字，没有 px。

示例：

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

三、操纵元素卷曲出去的值

语法：

// 获取元素向左卷曲出去的距离
元素.scrollLeft();
// 获取元素向上卷曲出去的距离
元素.scrollTop();

PS：没有 scrollWidth() 和 scrollHeight()

元素.scroll(function() {}); // 元素卷曲事件，元素在向上或向左卷曲的时候触发的事件。

四、为元素绑定事件

1、方式一：（事件名）

语法：

元素.事件名(事件处理函数);

示例：

// 绑定鼠标进入，离开，点击事件
    $("#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");
    });

2、方法二：（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");
    });

3、方法三：（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，可以绑定多个事件。

4、方式四：（delegate方法）

语法：（父元素替子元素绑定事件）

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

示例：

// 为div下p标签绑定点击事件
$("#dv").delegate("p", "click", function () {
  //....
});

5、方式五：（on方法）

我发现 delegate 方法内部调用的是 on 方法，那么 on 方法也可以绑定事件（注意：on 的参数顺序和 delegate 相反）。

语法：

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

示例：

// 为div下p标签绑定点击事件
$("#dv").on("click", "p", function () {
  //....
});

PS：on 其实不仅可以给子元素绑定事件，还可以给自己绑定事件，这时候只需要把子元素的参数去掉就好了。

语法：元素.on("事件名", 事件处理函数);