javascript组成:ESCAscript、BOM、DOM
ESCAscript: 基础语法
BOM:浏览器对象模型
window:窗口
Iocation:地址栏
history:历史记录
document:文档
DOM:文档操作模型 document
定时器:
/延迟执行
setTimeout(function(){},时间);
例子:
<button onclick="dianji()" >按钮</button>
js代码:
function dianji(){ setInterval(function(){ console.log(9); },1000); }
/间隔执行
setInterval(function(){},时间);
清除定时器
clearInterval(对象); clearTimeout(setTimeout对象);
DOM操作套路
找到元素 操作元素
1、找元素 返回元素对象
document.getElementById();// document.getElementsByName(); document.getElementsByTagName(); document.getElementsByClassName();
document.getElementById();例子:
<div id="a1" name="name" bs="123" style="color:red;">
123
</div>
js代码:
var a1 = document.getElementById("a1");//获取id
alert(a1.innerHTML); //获取a1内容
JQ代码:
var a1 = $("#a1"); alert(a1.html());
document.getElementsByClassName()例子:
<div class="a2" onclick="tanChu(this)">456</div> <div class="a2">789</div>
js代码:
var a5 = document.getElementsByClassName("a2"); //遍历a5 for(var i=0;i<a5.length;i++){ alert(a5[i].innerHTML); }
JQ代码:
var a2 = $(".a2"); for(var i=0;i<a2.length;i++){ alert($(a2[i]).html()); }
document.getElementsByTagName()//获取标签名
例子:
<div id="a1" name="name" bs="123" style="color:red;">123</div> <div class="a2" onclick="tanChu(this)">456</div> <div class="a2">789</div>
js代码:
var a3 = document.getElementsByTagName("div"); for(var i=0;i<a3.length;i++){ alert(a3[i].innerHTML); }
JQ代码:
var a3 = $("div"); for(var i=0;i<a3.length;i++){ alert($(a3[i]).html()); }
2、操作元素内容
var obj=document.getElementById();
非表单元素: obj.innerHTML=123
表单元素:obj.Value
直接写就是获取值,加上等号就是修改值
3、操作元素属性
obj.setAttribute("class","btn"); 设置
obj.getAttribute("id");=>btn 获取
4、操作元素样式
obj.style.color 只可以操作行内样式
5、操作元素事件
obj.onclick=function(){}
obj.addEventListener()
6、创建删除元素
obj.remove();
Obj.removeattribute(“id”); //删除属性!
var div = document.createElement('div');
js文件格式
定义变量
var name = "";//
var sum = 0;//
var obj = null;//
页面加载完成
window.onload = function(){ }
方法
function f1(){}
function f2(){}
介绍方法
window.onload=function(){}
介绍两个队形
Math:数学类
date:时间日期类