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

在这里我会从 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("事件名", 事件处理函数);

从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件的更多相关文章

  1. 从零开始学 Web 之 jQuery(二)获取和操作元素的属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  9. 从零开始学 Web 之 DOM(五)元素的创建

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

随机推荐

  1. java_14 Date

    1.Date类的构造方法 Date是表示时间的类 空参构造 public Date() public class Demo { public static void main(String[] arg ...

  2. 二级接口ListableBeanFactory

    package org.springframework.beans.factory; import java.lang.annotation.Annotation; import java.util. ...

  3. elk kibana查询语法

    elk日志系统中kibana查询语法 单项term查询 例: 搜 Dahlen, Malone 字段field查询 field:value 例:city:Keyport, age:26 通配符 ? 匹 ...

  4. win10 使用tsmmc.msc 提示无法创建管理单元

    win10下面直接使用tsmmc.msc,会"提示无法创建管理单元",之前刚装的win10的时候,解决过一次,但昨天系统更新,打过补丁后,又不能用了. 网上的大部份解决办法,如注册 ...

  5. jsp相关笔记(三)

    在往数据库的表中写入数据时,一定要与表中的每一项对应,比如表中有三项,则写入的值也应该是三类: String getTitle=request.getParameter("title&quo ...

  6. HTML5表单_form

    原则:能让用户选择的决不填写,增加用户体验 表单(form)元素格式 <input type="text" name="fname" value=&quo ...

  7. Delphi过程和函数中变量的作用域

    变量的作用域是指变量能被某一子程序识别的范围. 全局变量和局部变量.全局变量是指在程序的type区定义的变量,而局部变量是在过程或函数的定义部分声明的变量.全局变量在整个程序中都有意义,局部变量只在它 ...

  8. CPU寻址

    CPU组成和寄存器 1)CPU由运算器.控制器.寄存器等器件组成,这些器件靠内部总线相连 2)寄存器是CPU的组成部分,用来暂存指令.数据和地址,CPU对其读写速度是最快的,不需要IO传输 存储单元 ...

  9. drf3 Serializers 序列化组件

    为什么要用序列化组件 做前后端分离的项目,我们前后端交互一般都选择JSON数据格式,JSON是一个轻量级的数据交互格式. 给前端数据的时候都要转成json格式,那就需要对从数据库拿到的数据进行序列化. ...

  10. 一个友盟BUG的思考和分析:Invalid update

    1.友盟错误信息 Invalid update: invalid number of rows . The number of rows contained ) must be equal to th ...