首页 > 代码库 > day16 js+dom
day16 js+dom
图标网站 http://fontawesome.io/icon
<i class="fa fa-sort" aria-hidden="true"></i>
3.21
函数
匿名函数
自执行函数 创建函数并自动执行
（function（arg）{ 形参
console.log(arg);
}）（1） 实参
序列化 字符串变数
JSON.stringify() 序列化 从一个对象解析出字符串
JSON.parse() 反序化 字符串中解析出json对象
转义
- encodeURI( ) URI中的转义字符
- decodeURI( ) URl中未转义的字符
将数据经过转义后，保存在cookie
val = eval(表达式)
时间
var d = new Date()
d.getMinutes()
d.setMinutes()
作用域
作用域为可访问变量，对象，函数的集合。
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。
以函数作为作用域
函数的作用域在函数未被调用之前，就已经创建
函数的作用域 存在 作用域链，并且也是在被调用之前创建。。先找自己的，自己没有找上一层，没有再找外层。
函数内的局部变量会提前声明，不进行赋值
function func() {
var xo = ‘hequan‘;
function inner() {
console.log(xo);
}
return inner;
}
var ret = func()
ret()
hequan
function func() {
console.log(xo);
var xo = "hequan";
}
func()
undefined
面向对象
function foo(n) {
this.name=n;
this.sayName = function () {
console.log(this.name)
}
}
var obj1 = new foo("hq")
obj1.name
obj1.sayName()
原形：
function Foo(n) {
this.name = n;
}
Foo.prototype = {
‘sayName‘:function () {
console.log(this.name)
}
}
obj1 = new Foo(‘we‘);
obj1.sayName()
查找
直接查找
var obj = document.getElementById(‘I1‘)
间接查找
innerText 文本
innerHtml 全内容
obj.value 获取值
样式操作
.className
.classList.add .remove
.style.color
属性操作
obj.setAttribute("属性"，"值")
创建标签 并添加到HTML
字符串
insertAdjacentHTML("beforeEnd",obj)
对象的方式
document.createElement(‘div‘)
提交表单
document.geElementById(‘form‘).submit()
其他
console.log 输出框
alert 弹出框
confirm 确认框 返回true false
// URL和刷新
location.href 获取URL
location.href =http://www.mamicode.com/ "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
事件
onclick,onblur,onfocus
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
绑定事件两种方式：
直接绑定 onclick="xx()"
先获取DOM对象，然后进行绑定
<div id = ‘test‘><button type="button">Click Me!</button></div>
<script>
var mydiv = document.getElementById(‘test‘)
console.log(mydiv)
mydiv.onclick = function () {
console.log(‘asdw‘);
}
</script>
this 当前触发事件的标签
第一种绑定方式
onclick="Chang（this)"
function Chang(self){
//self 当前点击的标签
}
第二种绑定方式
<input id=‘i1‘ type=‘button‘>
document.getElementById(‘i1‘).onclick = function(){
//this 代之当前点击的标签
}
本文出自 “何全” 博客，请务必保留此出处http://hequan.blog.51cto.com/5701886/1909384
day16 js+dom