String 的操作

charAt() 返回某位置的字符
charCodeAt() 返回某位置字符的字符编码
indexOf() 左侧开始检测包含字符的位置
lastIndexOf() 右侧开始检测包含字符的位置

DOM

DOM基本查找方法:

document对应获取body下对应的对象：

document.getElementById()  单一元素对象
document.getElementByClassName() 数组
document.getElementByTagName() 数组

可叠写：gEBTN("").gEBI("")
设置CSS：gEBI("").style.background-color="#ffffff"
文本获取改写 ele.innerHTML+="XX"
className获取改写 ele.className;

HTML事件

鼠标点击事件 onclick
鼠标经过事件 onmouseover
鼠标移开事件 onmouseout
聚焦 onfocus
失焦 onblur
文本框选中事件 onselect
文本框内容改变事件 onchange
加载事件 onload
卸载事件 onubload

键盘事件

按键时 onkeydown
按下并释放一个键时 onkeypress
onkeyup 按键被松开时 onkeyup
等等...

DOM0级事件

语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

onchange()例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
    var menu=document.getElementById("menu");
    menu.onchange=function(){
        if(this.value=="") return;
    //  console.log(this.value);
        document.getElementById("box").style.background=this.value;
    }
}
    </script>
</head>
<body>
<div id="box" style="height: 200px;width: 200px">
<h4 style="display:inline-block">切换背景色:</h4>
    <select id="menu">
        <option value="">请选择</option>
        <option value="#00f">蓝色</option>
        <option value="#f00">红色</option>
        <option value="#ff0">黄色</option>
        <option value="0f0">绿色</option>
    </select>
    </div>
</body>
</html>

JS内置对象

Date 日期方法时间方法

浏览器对象

计时器:
间隔执行 setinterval() settimeout()
倒计时 clearinterval() cleartimeout()

技巧记录

CSS3 旋转 transform: rotate(xxdeg);
内阴影 box-shadow// inset

封装一个代替getElementById的方法

function byid(id){
  return typeof (id)==="string" ? document.getElementById(id):id;
}

前端记录20171219