函数的参数
//函数定义
function sum(a,b){
//函数体
console.log(a + b);
}
- 函数调用，函数必须调用，
函数名称() - 函数的参数
- 一种实际参数；简称实参
- 一种形式参数，简称形参
- 函数调用的时候传入的参数叫做实参，定义的时候叫做形参，一般函数有几个形参就有几个实参
字典的使用
- 字典的创建
通过键值对创建 - 字典中的数据一般没有顺序
- 字典中的数据一般不能重复
//第一种写法
var myDict = {
name:'张三',
age:16;
sex:'人妖'
}
//第二种写法
var myDict = {
"name":'张三',
"age":16;
"sex":'人妖'
}
//第三种写法
var myDict = {
'name':'张三',
'age':16;
'sex':'人妖'
}
访问字典中的数据
- 访问字典可以通过 key 值访问
字典名称.key;
字典名称[key];
console.log(myDict.name);
console.log(myDict.age);
console.log(myDict.sex);
for in 的使用
- 遍历字典
for(var key in myDict){
//在for in 循环中要使用 []来访问数据
console.log(myDict[key]);
}
字典设置样式
//获取 box
var box = document.getElementById('box');
//设置属性字典
var attrDict = {
width:'100px'
height:'100px'
background:'red'
}
//给盒子设置属性，因为盒子的属性一般比较多，所以我们通过遍历来设置
for(var key in attrDict){
box.style[key] = attrDict[key];
}
动态添加节点
- 发送网络请求，请求数据，当数据返回来后，根据数据动态添加节点
- 返回的格式是 json，json 包含了数组和字典
- 一般 json 是数组和字典的组合，一般外层是数组，里面是字典
- 数组用来确定个数，字典用来设置每一个盒子中的属性值
//设置一个 json 数据
var jsonData = [{name:'李四',age:4,email:'161.com',phone:'1232423422'},{name:'李四',age:4,email:'161.com',phone:'1232423422'},{name:'李四',age:4,email:'161.com',phone:'1232423422'},{name:'李四',age:4,email:'161.com',phone:'1232423422'}];
//根据数据设置节点
//根据数组长度确定盒子的个数
var oBody = document.getElementById('div');
box.className = 'box';
oBody.appendChild(box);
var oul = document.createElement('ul');
box.appendChild(oul);
//每个字典中有多少个 key 就添加多少个 li
for(var key in jsonData[i]){
//创建li
var oli = documentcreateElement('li');
//设置内容
oli.innerHTML = key +':'+jsonData[i][key];
//添加 li
oul.appendChile(oli);
}
属性设置
- 设置盒子的属性
box.setAttribute('title','我是盒子');
- 获取盒子的属性
box.getAttribute('title');
- 删除盒子属性
box.removeAttribute('title');
抽取的常见方法
抽取函数的原则
把相同的东西放在一起形成一个函数，然后让不同的东西作为参数抽取通过 id 获取标签的方法
function $(tagId){
return document.getElementById(tagId);
}
var btn1 = $('btn1');
- 通过标签名称获取标签
function getSymByTagName(dom,tagName){
return dom.getElementsByTagName(tagName);
}
- 抽取遍历函数
each 函数
function each(doms,fn){
for(var i = 0; i < doms.length;i++){
//做事情，调用函数
//可能需要数组里的每一个元素，以及对应的索引
fn(doms[i],i);
}
}
//获取 box
var box = $('box');
//获取 box 下面所有的按钮
var btns = getSymByTagName(box,'button');
//遍历按钮，输出每一个按钮的索引
for(var i = 0; i < btns.length;++i){
alert(i);
alert(btns[i]);
//每次遍历节点的时候，做的事情不一样，作为参数，函数作为参数， fn
//每次遍历的节点集合也不一样，doms
}
each(btns,function(a,b){
alert(b);
})
- 应用字典获取对应标签
var box = myFn.$('box');
var btns = myFn.getSymByTagName(box,'button');
myFn.each(btns,function(a,b){
//输出 btns
alert(a);
})
事件对象的认识
- 事件对象，就是当我们的事件触发的时候，会把事件相关的属性以及其他的东西打包成一个包，一般这个包以形式参数传递给事件指令，一般这个形式参数是 event
box.onclick = function(event){
//获取点击的位置举例浏览器的左上角的位置，clientX\clientY 只是数值，如果使用需要加 "px"
//target 表示事件的触发者，一般是事件源
var targetX = event.clientX;
var targetY = event.clientY;
}
最大事件源
- 获取最大事件源，最大事件源一般是 document
//点击最大的事件源触发对应的事件
document.onclick = function(event){
var myX = event.clientX;
var myY = event.clientY;
alert(myX);
}
- ie 浏览器不识别 event 事件对象，但是识别 window.event,所以我们要兼容
//函数内部添加 逻辑或
var event = event || window.event;
自定义菜单栏的实现
//获取盒子
var box = document.getElementById('box');
//触发对应的弹出菜单事件
document.oncontextmenu = function(event){
//获取事件对象
var event = event || window.event;
//组织默认弹出菜单
//在事件指令的最后返回 fales
// 让自定义的菜单出来
box.style.display = 'block';
//确定 box 的位置
box.style.left = event.clientX + 'px';
box.style.top = event.clientY + ‘px’;
return false;
}
鼠标跟随的实现
/*0.获取span*/
var oSpan = document.getElementById('oSpan');
/*1.触发鼠标的移动事件*/
var timer = null;
var currentX = 0;//表示初始值
var currentY = 0;//表示初始值
document.onmousemove = function(event){
/*1.0获取对应的事件对象，从而获取目标值*/
var event = event||window.event;
var targetX = event.clientX;
var targetY = event.clientY;
clearInterval(timer);
/*2.让对应的小天使采用缓动动画移动到最终的位置*/
timer = setInterval(function(){
currentX += (targetX - currentX)*0.2;
currentY += +(targetY - currentY)*0.2;
/*2.1设置位置*/
oSpan.style.left = currentX +'px';
oSpan.style.top = currentY +'px';
},100)
}
鼠标拖拽的实现
/*1.让对应的盒子触发鼠标点击下去的事件，在这个事件中触发最大事件源的移动事件*/
var box = document.getElementById('box');
box.onmousedown = function(event){
/*不同事件中的事件的对象是不一样的*/
/*0.获取事件对象*/
var event = event ||window.event;
/*1.0获取点击的点距离box盒子边框的间距*/
/*distanceX = 点击下去的点的坐标的值 - 盒子距离浏览器的边框的间距*/
var distanceX = event.clientX - box.offsetLeft;
var distanceY = event.clientY - box.offsetTop;
/*1.1触发最大事件源的移动事件*/
document.onmousemove = function(event){
/*1.11获取事件对象*/
var event = event ||window.event;
/*1.12设置box位置*/
box.style.left = event.clientX - distanceX+ 'px';
box.style.top = event.clientY - distanceY+'px';
}
/*1.2当最大事件源鼠标抬起的时候，我们要清空移动事件*/
document.onmouseup = function(){
document.onmousemove = null;
}
}
offset 属性的基本认识
//获取标签
var box = document.getElementById('box');
//获取标签对应 offsetW 和 offsetH
//offsetW = width + padding + border
//获取的时候不需要 style
//获取的取出的是数值，不是字符
//一般 offset 属性只能取值，不能设置值
//等号左边表示设置值，右边表示取值
var offsetW = box.offsetWidth;
var offsetH = box.offsetHeight;
- offsetparent
当当前的标签需要设置 offsetLeft 的时候，如果他相对于他的父标签有定位，那么他的父标签就是它的 offsetParent, 如果没有就找他的爷爷，如果爷爷也没有，就一直往上找，直到都没有，body 就是 offsetParent
