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;
}
