从零开始学 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("事件名", 事件处理函数);
从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件的更多相关文章
- 从零开始学 Web 之 jQuery(二)获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 DOM(五)元素的创建
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
随机推荐
- java_14 Date
1.Date类的构造方法 Date是表示时间的类 空参构造 public Date() public class Demo { public static void main(String[] arg ...
- 二级接口ListableBeanFactory
package org.springframework.beans.factory; import java.lang.annotation.Annotation; import java.util. ...
- elk kibana查询语法
elk日志系统中kibana查询语法 单项term查询 例: 搜 Dahlen, Malone 字段field查询 field:value 例:city:Keyport, age:26 通配符 ? 匹 ...
- win10 使用tsmmc.msc 提示无法创建管理单元
win10下面直接使用tsmmc.msc,会"提示无法创建管理单元",之前刚装的win10的时候,解决过一次,但昨天系统更新,打过补丁后,又不能用了. 网上的大部份解决办法,如注册 ...
- jsp相关笔记(三)
在往数据库的表中写入数据时,一定要与表中的每一项对应,比如表中有三项,则写入的值也应该是三类: String getTitle=request.getParameter("title&quo ...
- HTML5表单_form
原则:能让用户选择的决不填写,增加用户体验 表单(form)元素格式 <input type="text" name="fname" value=&quo ...
- Delphi过程和函数中变量的作用域
变量的作用域是指变量能被某一子程序识别的范围. 全局变量和局部变量.全局变量是指在程序的type区定义的变量,而局部变量是在过程或函数的定义部分声明的变量.全局变量在整个程序中都有意义,局部变量只在它 ...
- CPU寻址
CPU组成和寄存器 1)CPU由运算器.控制器.寄存器等器件组成,这些器件靠内部总线相连 2)寄存器是CPU的组成部分,用来暂存指令.数据和地址,CPU对其读写速度是最快的,不需要IO传输 存储单元 ...
- drf3 Serializers 序列化组件
为什么要用序列化组件 做前后端分离的项目,我们前后端交互一般都选择JSON数据格式,JSON是一个轻量级的数据交互格式. 给前端数据的时候都要转成json格式,那就需要对从数据库拿到的数据进行序列化. ...
- 一个友盟BUG的思考和分析:Invalid update
1.友盟错误信息 Invalid update: invalid number of rows . The number of rows contained ) must be equal to th ...