从零开始学 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前端之巅

念念不忘,必有回响。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180710G1NIG400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券