1.jsDOM操作CSS
语法：document.getElementById(id).style.property = new style
.html
<body>
<div class="div" id="div">
hello
</div>
<button onclick="ddmo()">按钮</button>
<script>
function ddmo() {
document.getElementById("div").style.background = "blue";
}
</script>
</body>
.css
.div{
width: 100px;
height: 100px;
background-color: chartreuse;
}
2.jsDOM EventListener：
方法：
add EventListener（）； //向指定元素添加事件句柄
remove EventListener（）； //移除方法添加的句柄
注意：句柄间不会覆盖，不会影响第二个事件的添加
<body>
<button id="btn">按钮</button>
<script>
var x = document.getElementById("btn");
x.addEventListener("click",hello);
x.addEventListener("click",world)；
x.removeEventListener("click",hello);
function hello() {
alert("hello");
}
function world() {
alert("world");
}
</script>
</body>
3.js事件详解
事件流：
事件冒泡：从最具体的元素接受，逐级向上传播至最不具体的元素的节点（文档）
事件捕获：从最不具体的节点先接受事件，最具体的最后接受
4.js事件详解-事件处理
（1）HTML事件处理
（2）DOM0级事件处理 ：把一个函数赋值给一个事件处理程序属性
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1 = document.getElementById("btn1");
btn1.onclick = function () {alert("hello DOM0级事件处理程序1")}；//被覆盖掉
btn1.onclick = function () {alert("hello DOM0级事件处理程序2")}；
</script>
</body>
（3）DOM2级事件处理 ：addEventListener（“事件名”，“事件处理函数”，“布尔值”）
true：事件捕获
false：事件冒泡
removeEventListener
（4）IE事件处理程序 //兼容浏览器
<body>
<script>
var btn1 = document.getElementById("btn1");
if (btn1.addEventListener){
btn1.addEventListener("click",demo);
}else if (btn1.attachEvent){ //处理IE事件
btn1.attachEvent("onclick",demo);
}else {
btn1.onclick = demo(); //支持DOM0级事件
}
function demo() {
alert("hello");
}
</script>
</body>
5.js事件详解-事件对象
事件对象 ：在触发DONM事件时都会产生一个对象
属性：type ：获取事件类型
<script>
document.getElementById("btn1").addEventListener("click",showtype);
function showtype(event) {
alert(event.type);
}
</script>
target：获取事件目标
方法： stopPropagations（） 阻止冒泡事件
preventDefault（） 阻止事件默认行为
6.js内置对象
（1）people = new Object（）；
（2）<script>
function people(name,age) {
this.name = name;
this.age = age;
}
son = new people("iwen",30);
document.write(son.name+":"+son.age);
</script>
7.String 字符串对象
在字符串中查找字符串：indexOf（）
字符匹配: match()
替换内容：replace（”源字符串“，”替换的“）
字符串大小写转换： toUpperCase（）/toLowerCase（）
字符串转换为数组：var s = str。split（” ，“）；
document.write（s[1]）；
8.Data日期对象
getFullYear（） 获取年份
getTime（） 获取毫秒
setFullYear（） 设置具体日期
getDay（） 获取日期
时钟实例：
<body onl oad="startTime()">
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById("timetxt").innerHTML = h+":"+m+":"+s;
t = setTimeout(function () {
startTime();
},1000);
}
function checkTime(i) {
if (i<10){
i = "0"+i;
}
return i;
}
</script>
<div id="timetxt"></div>
</body>
9.Array数组对象
var myArray = ["hello","iwen"];
数组常用方法：
concat（） 合并数组
sort（） 排序
push（） 末尾追加元素
reverse（） 数组元素翻转
10.Math对象
round（） 四舍五入
random（）返回0~1之间的随机数 parseInt（Math.random（）*10）
abs（）绝对值