鼠标事件:
var box = document.querySelector('.box');
悬浮:box.onmouseenter = function (){
box.style.cursor = "pointer"}
移动:box.onmousemove = function(){console.log("鼠标在移动!")}
按下:box.onmousedown = function (){ console.log('鼠标按下')}
抬起:box.onmouseup = function(){console.log('鼠标抬起')}
移开:box.onmouseleave = function (){console.log('鼠标移开')}
右键:右键按下抬起为一次事件 box.oncontextmenu = function(ev){ console.log('鼠标右键')}
点击点的x坐标:ev.clientX;点击点的y坐标:ev.clientY
键盘事件:
document.onkeydown = function(){console.log('键盘按下了')}
ev:系统回调事件函数,传递的事件对象
键盘事件中,ev中有keyCode来唯一标识具体的按键
通过ctrlKey | shiftKey | altKey的布尔值来标识特殊案件是否为按下状态
document.onKeyup = function(ev){console.log(ev);console.log('ev.keyCode,ev.altKey');console.log('键盘抬起了')}
定时器:
一次性定时器:
1.r1是定时器返回值,就是定时器创建先后的数字编号
2.只在创建定时器 n ms后执行一次
var r1 = setTimeout(function(){console.log('一次性定时器响了!'),n});(时间单位为毫秒)
持续性定时器:
1.r2是定时器返回值,就是定时器创建先后的数字编号
2.第一次触发是在n ms后,然后每个n ms 触发一次
var num =0;
var r2 = setInterval (function() {console.log('持续性定时器响了%d次!',++num)};n);
js中的定时器设置的时间为当前cpu执行特定时间后执行,一次当cpu不执行时,时间将与现实时间不同
清楚一个定时器:
1.通过定时器数字编号来清除
2.清除定时器部分种类可以混用
clearTimeout(r1) == clearInterval(l)
清除页面所有定时器:
var n = setTimeout(function (){},1);//由于创建定时器返回值为定时器编号因此n一定为当前时间定时器编号最大值
for (var i = 0; i<n;i++){clearTimeout(i);}
jQuery:
jQuery是一个简洁高效而且功能丰富的JavaScript工具库,是对原生JavaScript二次封装的工具函数集合
优点:开源|简洁的选择器|简化的Ajax操作 |良好的浏览器兼容|强大的链式操作
jq选择器:
获取满足条件的所有页面元素jq对象
$('css3选择器语法');
拿到指定索引的页面元素对象jq对象
$('css3选择器语法').eq(index);
拿到指定索引的页面元素js对象(jq对象转js对象)
$('css3选择器语法').get(index);
js对象转jq对象:$(js对象);
文档加载
页面结构及所需资源全部加载完毕,只能绑定一个事件方法
window.onload = function(){}
jq
页面结构加载完毕,能绑定多个事件方法,可以简写
一:可以保证页面结构一定加载完毕
二:可以保证数据的局部化(不会被外界直接读写)
$(function(){})
jq操作元素对象
链式操作:(几乎)每一个方法都具有返回值(元素对象本身)
1.文本内容
var res = $('.box:first-child').text('100').html("<b>888</b>");
console,log(res);
2.样式
res = $('.box').eq(1).css('color','red').css('font-size','30px').css({backgroundColor:'orange','height':''80px'')})
需要操作赋值后可跟函数
.css('width',function(index,oldVal){console.log(this);//this为js对象,需要转换为jq对象
console.log($(this).height());//该返回值不带单位 jq可以自动识别
return $(this).height() * 2;})
.css("border-radius");//能获取计算后样式
3.类名
res = $('.box:nth-child(3)').addClass("sbd").removeClass('sbd);
console.log(res);
4.全局属性
$('img').attr('src','vujbhifbhuiewihfui.jpg').removeAttr('src');
console.log($('img').attr('ooo'));查看全局属性;
jq获取盒子信息:
显示信息:
宽高 | 内边距 | 边框 |外边距
var res = $(''.box'').css("padding");
console.log(res);
宽高:
res = $('.box').width();
console.log(res)
宽高加内边距
res = $('.box').innerWidth();
console.log(res)
宽高加内边距加边框
res = $('.box').outerWidth();
console.log(res);
宽高加内边距加边框加外边距
res = $('.box').outerWidth(true);
console.log(res);
位置信息:
相对窗口偏移:算margin产生的距离
console.log($('.box').offset().top,$('.box').offset().left);
绝对定位偏移(top,left):不算margin产生的距离
console.log($(.box).position().top,$('.box').position().left);
事件:
事件名,函数
$('.box').on('click',function(ev){
//jq对象对js事件对象兼容
console.log(ev)})
取消默认事件:取消系统自带的功能,右键的右键框,a标签点击的href转跳
ev.preventDefault();|事件方法 return false;
阻止事件的传播(阻止事件的冒泡):父子有同样事件,子响应了事件,会将事件传递给父级,父级也会响应同样事件
只让子点击响应,只有点击到父级时,父级才响应,子级需要阻止事件的传播
ev.stopPropagation();