[Web front-end] 027 jQuery related to the size of the event binding

1. The relevant dimensions

1.1 Get element offset relative to the document

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

1.2 Get current element offset relative to the parent element

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

1.3 Obtaining Documentation rolling distance

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

1.4 obtain the width and height of the element

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

1.5 setting the width and height of the element

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

1.6 Get the width and height of the visible region

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

1.7 Gets the width and height of the document

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

2. About the event

2.1 Event binding

2.1.1 Basic Binding

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

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

2.1.2 method binding

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

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

---

This is a listen to "Beijing Turing Institute," the "Web open class" made notes