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之间的编号,这个编号对应着周日—周六,每周的第一天是 周日。