从零开始学 Web之jQuery（五）操作元素其他属性，为元素绑定事件

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、操作元素的宽和高

1、方法一

最后得到的是字符串类型的，比如 200px。

如果我们在设置为原来宽高2倍的时候，就要先把获取的宽高转换成数字类型，再乘以2，这样操作比较麻烦，有没有简单的方法呢？

2、方法二

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

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

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

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

示例：

二、操纵元素的left和top

1、方法一

2、方法二

1、 返回值是一个对象。（比如：）

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

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

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

示例：

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

语法：

PS：没有 scrollWidth() 和 scrollHeight()

四、为元素绑定事件

1、方式一：（事件名）

语法：

示例：

2、方法二：（bind方法）

语法：

示例：

3、方法三：（bind对象）

语法：

示例：

使用 bind 对象的方式，只需要一个bind，可以绑定多个事件。

4、方式四：（delegate方法）

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

示例：

5、方式五：（on方法）

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

语法：

示例：

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

语法：

欢迎关注

Web前端之巅

念念不忘，必有回响。