[Web 前端] 027 jQuery 相关尺寸与事件绑定

1. 相关尺寸

1.1 获取元素相对于文档的偏移量

var pos = $('#small').offset();
console.log(pos.left, pos.top);

1.2 获取当前元素相对于父级元素的偏移量

var l = $('#small').position().left;
var t = $('#small').position().top;
console.log(l, t);

1.3 获取文档滚动距离

var st = $(document).scrollTop();
var sl = $(document).scrollLeft();

1.4 获取元素的宽度和高度

var w = $('#big').width();
var h = $('#big').height();

1.5 设置元素的宽度和高度

$('#big').width(400);
$('#big').height(400);
console.log(w,h);

1.6 获取可视区域的宽度和高度

var cw = $(window).width();
var ch = $(window).height();

1.7 获取文档的宽度和高度

var cw = $(document).width();
var ch = $(document).height();
console.log(cw,ch);

2. 关于事件

2.1事件绑定

2.1.1 基本绑定

$(element).click(function(){})
$(element).dblclick(function(){})

// 加载完毕事件
$(document).ready(function(){})
$(function(){})

2.1.2 方法绑定

$(element).bind('click', function(){})	// 绑定事件的方法一
$(element).unbind();					// 解除事件绑定

// 绑定事件的方法二
$(".item4").on("click", function(){alert("单击事件(on)又被触发了！");});

---

此为听“北京图灵学院”的“Web 公开课”所作笔记