亚愽娱乐顶级平台
  咨询电话:18828491501

yobo88体育登录

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