jQuery学习第三天

width方法与height方法

设置或者获取高度

//带参数表示设置高度

$(“img”).height(200);

//不带参数获取高度

$(“img”).height();

 

获取网页的可视区宽高

//获取可视区宽度

$(window).width();

//获取可视区高度

$(window).height();

 

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

//获取页面被卷曲的高度

$(window).scrollTop();

//获取页面被卷曲的宽度

$(window).scrollLeft();

 

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置,返回值为对象：{left:100, top:100}

$(selector).offset();

//获取相对于其最近的有定位的父元素的位置。

$(selector).position();

 

on注册事件(重点)

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});

on注册委托事件

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
​

on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
​

事件解绑

// 解绑匹配元素的所有事件

$(selector).off();

// 解绑匹配元素的所有click事件

$(selector).off("click");