大家好，这里是「 从零开始学 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("事件名", 事件处理函数);