JavaScript ☞ day3

JavaScript基础学习笔记之JavaScript进阶

焦点事件

鼠标事件-单击与双击

鼠标事件-mouseover、mouserout、mousedown、mouseup、mousemove

    
    


    

        
鼠标进入改变颜色
        
鼠标离开恢复颜色
        
鼠标按下字体变大
        
鼠标抬起字体恢复
    
    
    







sunck.js文件中的内容
//获取滚动高度
function $scrollTop(){     
    return document.documentElement.scrollTop||document.body.scrollTop; 
}
//根据id获取元素节点
function $(idName){
    return document.getElementById(idName);
}
//获取可视窗口的宽度
function $w(){
return document.body.width||document.documentElement.width||window.innerWidth;
}


//获取可视窗口的高度
function $h(){
return document.body.height||document.documentElement.height||window.innerHeight;
}


//随机颜色
function randomColor(){
    //rgb(255,255,255)
    var r = parseInt(Math.random()*256);
    var g = parseInt(Math.random()*256);
    var b = parseInt(Math.random()*256);
    
    return "rgb("+r+","+g+","+b+")";
     // "#ffffff"
}

//获取内部样式表 外部样式表中属性的属性值
// obj-->元素节点
// at--->属性名
function getStyle(obj,at){
    if(obj.currentStyle){
        //IE
        return obj.currentStyle[at];
    }else{
        return window.getComputedStyle(obj,null)[at];
    }

}

键盘事件

键盘事件应用下例子

    
    
    


    
    
    



    
    








sunck.js文件中的内容
//获取滚动高度
function $scrollTop(){     
    return document.documentElement.scrollTop||document.body.scrollTop; 
}
//根据id获取元素节点
function $(idName){
    return document.getElementById(idName);
}
//获取可视窗口的宽度
function $w(){
return document.body.width||document.documentElement.width||window.innerWidth;
}


//获取可视窗口的高度
function $h(){
return document.body.height||document.documentElement.height||window.innerHeight;
}


//随机颜色
function randomColor(){
    //rgb(255,255,255)
    var r = parseInt(Math.random()*256);
    var g = parseInt(Math.random()*256);
    var b = parseInt(Math.random()*256);
    
    return "rgb("+r+","+g+","+b+")";
     // "#ffffff"
}

//获取内部样式表 外部样式表中属性的属性值
// obj-->元素节点
// at--->属性名
function getStyle(obj,at){
    if(obj.currentStyle){
        //IE
        return obj.currentStyle[at];
    }else{
        return window.getComputedStyle(obj,null)[at];
    }

}

事件流

事件流的概念

事件流

验证事件流

事件对象(阻止冒泡、阻止默认行为)

    
    
    


    

    

    点我跳转
    
    
    








sunckBase.js文件中的内容
//获取滚动高度
function $sckGetScrollTop(){     
    return document.documentElement.scrollTop || document.body.scrollTop; 
}

//获取可视窗口的宽度
function $sckGetVisibleWindowWidth(){
    return document.body.width || document.documentElement.width || window.innerWidth;
}

//获取可视窗口的高度
function $sckGetVisibleWindowHeight(){
    return document.body.height || document.documentElement.height || window.innerHeight;
}

//根据id获取元素节点
function $(idName){
    return document.getElementById(idName);
}
//根据class属性获取元素节点列表
function $sckGetElementByClassName(className){
    return document.getElementByClassName(className);
}
//根据属性名获取元素节点列表
function $sckGetElementByTagName(tagName){
    return document.getElementsByTagName(tagName);
}
//根据name属性获取元素节点列表
function $sckGetElementByName(name){
    return document.getElementsByName(name);
}

//随机颜色
function randomColor(){
    //rgb(255,255,255)
    var r = parseInt(Math.random()*256);
    var g = parseInt(Math.random()*256);
    var b = parseInt(Math.random()*256);
    
    return "rgb("+r+","+g+","+b+")";
     // "#ffffff"
}

//获取内部样式表 外部样式表中属性的属性值
// obj-->元素节点
// at--->属性名
function getStyle(obj,at){
    if(obj.currentStyle){
        //IE
        return obj.currentStyle[at];
    }else{
        return window.getComputedStyle(obj,null)[at];
    }

}

---

事件的常用属性

鼠标事件的event对象

鼠标事件的event对象

拖拽效果

    
    
    


    


    
    












sunckBase.js文件中的内容
//获取滚动高度
function $sckGetScrollTop(){     
    return document.documentElement.scrollTop || document.body.scrollTop; 
}

//获取可视窗口的宽度
function $sckGetVisibleWindowWidth(){
    return document.body.width || document.documentElement.width || window.innerWidth;
}

//获取可视窗口的高度
function $sckGetVisibleWindowHeight(){
    return document.body.height || document.documentElement.height || window.innerHeight;
}

//根据id获取元素节点
function $(idName){
    return document.getElementById(idName);
}
//根据class属性获取元素节点列表
function $sckGetElementByClassName(className){
    return document.getElementByClassName(className);
}
//根据属性名获取元素节点列表
function $sckGetElementByTagName(tagName){
    return document.getElementsByTagName(tagName);
}
//根据name属性获取元素节点列表
function $sckGetElementByName(name){
    return document.getElementsByName(name);
}

//随机颜色
function randomColor(){
    //rgb(255,255,255)
    var r = parseInt(Math.random()*256);
    var g = parseInt(Math.random()*256);
    var b = parseInt(Math.random()*256);
    
    return "rgb("+r+","+g+","+b+")";
     // "#ffffff"
}

//获取内部样式表 外部样式表中属性的属性值
// obj-->元素节点
// at--->属性名
function getStyle(obj,at){
    if(obj.currentStyle){
        //IE
        return obj.currentStyle[at];
    }else{
        return window.getComputedStyle(obj,null)[at];
    }

}

正则表达式

创建正则表达式对象

RegExp的方法

String类型中的正则表达式的应用

碰撞检测V1(边界)

正则表达式的元字符

常用的正则表达式

碰撞检测V2(矩形)

碰撞检测V3(圆形)