js文件写法、规范
// 定义全局变量
var num = 0;//这个是用来记数的。
// 页面加载完成
window.onload = funtion(){
intVar();//初始化变量
scrollFun();//滚动监听
。。。。
}
// 定义方法
funtion initVar(){}
funtion scrollFun(){}
dom操作
dom 操作页面上的标签
js的组成：ECMAscript（核心语法）
BOM 浏览器对象模型
windows 窗口
location 地址栏
history 历史记录
document 文档 html文件
DOM 文档对象模型
<script>
//打开关闭窗口
// windows.open("打开文件名";"打开文件位置");
// windows.close属性();
//修改地址栏
// location.href;在本页面跳转
// location.href="网页地址";则跳转到网页地址上。
// location.reload();刷新
// location.replace();
//定时器
// 延迟执行
// var setTimeoutObj setTimeout(funtion(){
// alert(123);
// });
// 间隔执行
// setInterval(funtion(){
// console.log(123);
// },3000); 以毫秒为单位。
// 停止定时器
// clearTimeout(setTimeoutObj);
// clearTimeout(setin);
// 间隔打印三次停止
// var intv setInterval(funtion(){
// sum++;
// console.log(123);
// if (sum >= 3) {
// clearTimeout(intv);
// }
// },1000);
// 动态时钟
// var str = "";
// setInterval(funtion(){
// str = "";
// var tt = new Date(),
// y = tt.getFullYear(),
// M = +tt.getMouth()+ 1 ,
// d = tt.getDate(),
// h = tt.getHours(),
// m = tt.getMinutes(),
// s = tt.getSecounds();
// var str = y + '-'+ M + '-' + d + '' + h + ':' + m + ':' + s;
// document.getElemntsByTagName('div')[0].innerHTML = str;
// document.write(str);
// },1000);
//滚动监听
// var flag = true;
// window.onscroll= function(){
// //变量t是滚动条滚动时，距离顶部的距离
// var t = document.documentElement.scrollTop||document.body.scrollTop;
// if(t = 100 && flag == true){
// flag = false;
// alert(123);
// }
// }
// 页面加载完成。
// 很重要，！将全部页面加载完成！！！
window.onload = funtion(){ }
dom 文档对象模型 body ：
何时找 何时操作 找到标签，操作标签
找到标签：
document.getElementById("btn");
document.getElementsByName("btn"); 通过name属性
document.getElementsByTagName("btn"); 通过标签
document.getElementsByClassName("btn"); 通过class属性
了解：结合嵌套来找。
操作js对象
内容
非表单元素：obj.innerHTML obj.innerHTML = 123;
表单元素： obj.value obj.value = 123;
样式
obj.style.color obj.style.color = red;
这个操作只能操作行内样式
background-color 变成 backgroundColor 去掉“-” 开头字母大写
属性 obj
obj.setAttribute('class','dd ff');//覆盖性设置属性
obj.getAttribute('class','dd');//获取属性
obj.removeAttribute('class');//删除属性
事件
不同地方
方式一：
onclick 属性
方式二：js中定义
obj.onclick = function(){}
//写在在Evt事件内
//此处function无实际意义，语法如此。只是说明这里是个方法调用。
方式三：
obj.addEventistener('click',f1); //this 写在行内
obj.addEventistener('click',f1);
obj.removeEventistener('click');
创建删除
// 节点操作
// var btnDom = document.getElementById("btn").getElementsByTagName('span');
// var btnsDom = document.getElementsByTagName("btn");
// console.log(btnDom.firstElementChlid);
//根据ID 查找控件
// var dombtn = document.getElementById('btn');
// alert(dombtn);
//根据标签名，查找
// var dombtn = document.getElementsByTagName("button");
// console.log(dombtn); //找出来的东西叫集合，类似是数组
// for (var i in dombtn) { //用for in 遍历的时候全出来了
// if (!isNaN(i)){ // 需要判断非数字的跳过
// continue;
// }
// console.log(dombtn[i]);
// }
// console.log('-----------------');
//for(var i =0;i<//btnDom.length;i++){ //这种遍历不用判断
//console.log(btnDom[i]);
// }