jQuery 获取元素尺寸、位置以及元素事件

要获取元素的尺寸、位置与事件，要在外部引入一个<script src = "jquery.js"></script>，可到jQuery方法中文API文档里面去下载使用。

1.元素尺寸

1. 操作元素的宽和高：以div为例，获取内容位置的宽高，不包含padding和border。此方法原生的js获取不到。

// 获取 div 元素内容位置的高，不包含 padding 和 border
$('div').height();
// 设置 div 内容位置的高为 200px
$('div').height(200);

// 获取 div 元素内容位置的宽，不包含 padding 和 border
$('div').width();
// 设置 div 内容位置的宽为 200px
$('div').width(200);

2. 获取元素的内置宽和高，用inner+属性获取，此时包含了padding，但不包含border。

// 获取 div 元素内容位置的高，包含 padding 不包含 border
$('div').innerHeight();

// 获取 div 元素内容位置的宽，包含 padding 不包含 border
$('div').innerWidth();

3. 获取元素的外置宽和高，用outer+属性，此时包含padding和border。

// 获取 div 元素内容位置的高，包含 padding 和 border
$('div').outerHeight();
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerHeight(true);

// 获取 div 元素内容位置的宽，包含 padding 和 border
$('div').outerWidth();
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$('div').outerWidth(true);

2.元素的位置

1. 元素相对于页面的位置

// 获取 div 相对页面的位置
$('div').offset(); // 得到的是以一个对象 { left: 值, top: 值 }

// 给 div 设置相对页面的位置
$('div').offset({ left: 100, top: 100 });
// 获取定位到一个距离页面左上角 100 100 的位置

2. 元素相对于父元素的偏移量

// 获取 div 相对于父元素的偏移量（定位的值）
$('div').position();

3. 获取页面卷去的高度和宽度

window.onscroll = function () {
    // 获取浏览器卷去的高度
    console.log($(window).scrollTop());
}
window.onscroll = function () {
    // 获取浏览器卷去的宽度
    console.log($(window).scrollLeft());
}

3.元素事件

1. 绑定事件的方法。

• • 给button按钮绑定一个点击事件

$('button').on('click', function () {
    console.log('我被点击了');
})

• • 携带参数

$('button').on('click', { name: 'Jack' }, function (e) {
    console.log(e); // 所有的内容都再事件对象里面
    console.log(e.data); // { name: 'Jack' }
})

• • 事件委托的方式绑定事件

$('div').on('click', 'button', function () {
    console.log(this); // button 按钮
})

• • 用事件委托的方式绑定点击事件并且携带参数

$('div').on('click', 'button', { name: 'Jack' }, function (e) {
    console.log(this);// button 按钮
    console.log(e.data);
})

2. 移出事件

给 button 按钮绑定一个 点击事件，执行handler 函数。

$('button').on('click', handler);

移除事件使用 off

$('button').off('click', handler);

3. 只能执行一次的事件

这个事件绑定再 button 按钮身上；当执行过一次以后就不会再执行了。

$('button').one('click', handler);

4. 直接触发事件

当代码执行到这里的时候，会自动触发一下 button 的 click 事件。

$('button').trigger('click');

4.可以直接使用的常见事件

可以直接使用的事件就是可以不利用 on 来绑定，直接就可以使用的事件方法。

1. click

直接给 div 绑定一个点击事件

$('div').click(function () {
    console.log('我被点击了');
})

给 div 绑定一个点击事件并传递参数

$('div').click({ name: 'Jack' }, function (e) {
    console.log(e.data);
})

2. dblclick

直接给 div 绑定一个双击事件

$('div').dblclick(function () {
    console.log('我被点击了');
})

给 div 绑定一个双击事件并传递参数

$('div').dblclick({ name: 'Jack' }, function (e) {
    console.log(e.data);
})

3. scroll

直接给 div 绑定一个滚动事件

$('div').scroll(function () {
    console.log('我被点击了');
})

给 div 绑定一个滚动事件并传递参数

$('div').scroll({ name: 'Jack' }, function (e) {
    console.log(e.data);
})