JQ中的事件对象,定时器与无缝滚动

一 Each 函数

通过这个函数可以对一个数据集合进行遍历操作,所谓遍历就是找到这个集合中的每一个数据进行相应的操作。语法:

$( 'div' ).each( function( i,item ){

    // 想要做的事件

} );

    01 $( 'div' )是一个数据集合

    02 each接收一个 function 做为参数且该函数还可以继续设置 i item二个参数,i 表示的是当前集合中每个元素的编号,从0 开始,item可以表示当前集合中的每一个元素。

二 事件对象

所谓事件对象可以理解为专门来帮助管理事件信息的一个对象,例如:鼠标坐标值、按下的键盘值、是否按下某些特殊键....

【事件信息】:每一个事件发生时都会产生与当前事件相关的信息

JQ中的事件对象用起来很简单,只需要在相应的事件处理函数中的设置一个变量即可,程序会自动的认为这个变量就是事件对象。

$( window ).mousemove( function( ev ){

    // 在此 ev 就是用来保存信息的对象即事件对象

    // 常用的事件对象名称:e ev event

} );

三 页面滚动距离

所谓页面滚动距离可以看做是当前页面滚出可视区的那部分距离值。

$( document ).scroll( function(){

    // 利用 scroll 事件来监测页面是否滚动

    // 在JS中会有一个 onscroll 事件

} );

获取页面滚动距离值

Var iScroll = $( document ).scrollTop(); // 利用 scrollTop() 方法取值

页面的滚动距离值不仅可以获取还可以设置。

$( 'html,body' ).animate( {'scrollTop':0} );

通过上面的语法就是将当前页面的滚动距离值设置为0实现一个返回顶部按钮的效果。在设置的时候不能用 window或document 必须用 'html,body'。scrollTop是一个在CSS中没有,但是可以直接在JQ的 animate动画中表示页面滚动距离的一个属性。

四 事件对象常用信息

01 clientX 表示当前鼠标距离屏幕左边的距离值

02 clientY 表示当前鼠标距离屏幕上边的距离值

03 pageX 表示当前鼠标距离页面左边的距离值。

04 pageY 表示当前鼠标距离页面上边的距离值。

03 altKey ctrlKey shiftKey : 结果是布尔值,为true 就表示当前键被按下了,false表示没有按下。

五 获取页面元素的绝对距离值

利用 offset() 方法可以求出某个元素距离页面顶部和左边的距离值

$( 'div' ).offset().left || top;

六 定时器

在JS中通过定时器可以设置代码每过多久时间或者过了多久时间去执行。

定时器分为二类:

单次定时语法

seTimeout( function(){

    // 过一秒钟后就会执行的代码

},1000 )

和循环定时

setInterval( function(){

    // 每过一秒钟就会执行的代码

},1000 )

单次定时只执行一次,循环定时在不关闭的情况下每过一定时间就执行一次

七 清除定时器

clearInterval( )

01 利用 clearInterva() 可以清除循环定时器 、clearTimeout() 清除单次定时器,小括号里面写的都是能够代表某一个定时器的变量

02 在利用 setInterval 或setTimeout() 开启定时器之前用一个变量将当前定时存放起来,然后在需要清除的时候直接干掉这个变量

八 变量作用域

变量作用域就是某一个变量能够起作用的范围。

在JS中可以分为 全局作用域和局部作用域。

1 全局变量:就是直接写在 script 标签下面的变量,定义完之后任何地方都可以用。

2 局部变量:定义在局部作用域里面的变量,只能在当前域去使用

3 全局和局部之间通过一个作用域链进行连接,当在局部中使用某一个变量时,它首先会在自身的空间中进行查找,如果有就直接使用,如果没有就沿着作用域链向父域查找,但是父域不能向下查找子域里的东西。

九 无缝滚动

1 clone() : 这是JQ中用来克隆页面元素的方法,小括号里设置 true 的时候表示将被克隆节点的所有信息都拷贝。

2 width() : 获取到写在 css 中的 width 属性值

3 innerWidth() : 获取到 width + padding 值

4 outerWidth() : 默认情况下获取到 width + padding + border

5 outerWidth( true ): 获取到 width + padding + border + margin 之后的结果

十 时间对象

利用 JS 中的 Date() "模板",可以借助于 new 操作符得到一个专门用来管理时间的对象,通过这个对象可以得到 年 月 日 时 分 秒 毫秒....

Var time = new Date();

 

01 getFullYear() : 得到当前的年数

02 getMonth() : 得到当前月数,JS中的数值比实际小1

03 getDate() : 得到当前是多少号

04 getHours() : 得到当前小时数( 24小时制 )

05 getMinutes():得到当前的分钟数

06 getSeconds() : 得到当前的秒数

07 getDay() : 得到一个从0-6之间的编号,这个编号对应着周日---周六,每周的第一天是 周日。

yang, xiaoyun

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: