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

2019-08-31 23:01:43 阅读：187 来源： 互联网

标签：jQuery Web console function 绑定 height 027 var document

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 公开课”所作笔记

标签：jQuery,Web,console,function,绑定,height,027,var,document
来源： https://www.cnblogs.com/yorkyu/p/11342875.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9