第十五篇：JavaScript 之 Dom操作

一、后台管理页面布局

主站布局
<div class="pg-header"></div>
<div style="width:980px;margin:0 auto">自动居中</div>
<div class="pg-content"></div>
<div class="pg-footer"></div>
position
fixed; --永远固定在窗口位置；
relative --单独无意义
absolute --单独用第一次定位可以在指定位置；拖动时不在

布局一：左侧菜单跟随滚动条；
布局二：左侧菜单不跟随滚动条；
圆角：border-radios;

二、JavaScript函数

JavaScript
switch(name){
case '1':
age=123;
break;
case '2':
age=456;
default:
age=879;
}
普通函数：
function func(){
}
匿名函数：
setInterval(function(){
console.log(123);
},5000)
自执行函数：
(function(age){
console.log(arg);
})(1)

三、eval以及时间操作

序列化：
li=[11,22,33]
s=JSON.stringify(li)
JSON.parse(s)
转义：
decodeURL() 编码转中文；
encodeURL()中文转编码
encodeURLComponent(url)
decodeURLComponent(url)

客户端(cookie)——>服务端
将数据经过转义后保存在cookie;

eval
python:
val = eval("1+1")
exec(执行代码)
JavaScript:
eval() 表达式和代码都可以；
时间：
Date类；
var d = new Date()
获取d.get,设置，d.set

四、JavaScript作用域

作用域（重点）：
其他语言以代码块作为作用域；
python里是以函数作为作用域；
JavaScript：
1.以函数作为作用域；
2.函数的作用域在函数未被调用之前已经创建；
3.函数的作用域存在作用域链，并且也是在被调用之前创建；
4.函数内局部变量提前声明

五、JavaScript面向对象模型

JavaScript面相对象
function Foo(n){
this.name=n;
}
var obj = new Foo('dd')；
1，this代指对象（python self）
2，创建对象时，new 函数（）
上面变量重复

原型：
function Foo(n){
this.name=n;
}
Foo.prototyep = {
'sayName': function(){
console.log(this.name)
}
}

六、DOM选择器

查找
直接查找
var obj = document.getElementById('i1')
间接查找
文本内容操作：
innerText 仅文本
innerHTML 全部内容
value:
input 获取当前标签中的值；
select 获取当前选中的值(selectedIndex);
textare value获取值；
操作
搜索框例子：
onfocus="focus();"鼠标聚焦执行；
onblur="blur();" 鼠标移走执行；
新版浏览器支持输入框提示：
<input type="text" placeholder>
样式操作：
classList
classList.add
classList.remove

className

obj.style.fontSize= "16px"

属性操作：
obj.attributes
obj.setAttribute('xxx','aaa')
obj.removeAttribute('xxx','aaa')

创建标签并添加到html中,两种方法：字符串形式和对象的方式；
1. document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag)
四个参数四个位置：beforeEnd afterEnd beforeBegin afterBegin
2. document.createElement('input')
document.getElementById("i1").appendChild(tag);
提交表单：
任何标签通过DOM都可以提交表单
document.getElementById('form').submit();
其他：
console.log(); 日志打印
alert(123); 弹出框；
var v = confirm("提示确定或取消") true or folse
location.href; 获取当前url或设置当前url跳转；
location.reload() 页面刷新；
var obj1 = setInterval("func",5000) 定时器；
clearInterval(obj1) 清空定时器；
var obj2 = setTimeout(function(){},5000) 只执行一次；
clearTimeout(obj2) 终止定时器；

七、DOM事件操作

事件:
onclick，onblur，onfocus
onmouseover 鼠标放上的行为
onmouseout 鼠标离开的行为
绑定事件两种方式：
a.直接标签绑定 onclick="xx()"
b.先获取dom对象，然后进行绑定；
document.getElementById('xx').onclick
this，当前处理事件的标签；
a.第一种绑定方式
<input type="buttom" onclick="click(this)">
fonction click(self){
self 当前点击的标签
}
b.第二种方式
<input
document.getElementById("i1").onclick = function(){
this
}
c.第三种方式
myDiv.addEventListener('click',function(){},false)

八、DOM绑定事件的分离绑定方法