橙色 == 漏写了
红色 == 写错了
Day1
一、Object面向对象 - 继承
1.1获取原型
对象名.__proto__ 前提:已创建对象
构造函数名.protutype
1.2判断是否自有
obj.hasOwnProperty("属性名");
1.3判断共有
判断共有:2个条件: 不是自有:obj.hasOwnProperty("属性名")==false;
在原型链检查:"属性名" in 对象名;
-
判断一个对象是不是数组
1、判断x是不是继承自Array.prototype Array.prototype.isPrototypeOf(x); 如果返回true,说明是数组,否则不是数组 不一定问数组,还可能是日期等 2、判断x是否是由构造函数Array创建的 x instanceof Array 不一定问数组,还可能是日期等 3、ES5提供了一个API: Array.isArray(x); 此方法不是人人都有,而且ES5以上的东西,老IE都不支持 4、***输出对象的字符串形式: 在Object的prototype原型上放着最原始的toString 原始的toString,默认输出[object 构造函数名] **多态(override)/重写:子对象绝对父对象的成员不好用,可以在本地定义同名成员,覆盖父对象之中的成员 我希望借用到函数:跳过爸爸,直接去找爷爷拿toString Object.prototype.toString.apply(x)==="[object Array]";
-
*实现自定义继承
1、实现两个对象之间的继承 子对象.__proto__=父对象; 2、批量继承 直接匹配设置继承 构造函数名.prototype=父对象; 时机:先设置好父对象,再创建子对象
Day2
一、ES5
1.1保护对象:保护对象的属性和方法
四大特性:
value:值 writable:是否能修改
"enumerable": true,//开关:控制着是否可以被for in循环遍历到
"configurable": true//开关:控制着是否可以被删除,总开关,一旦设置为false不可逆,也不可以在修改其他特性
三个级别
1)防扩展:禁止给对象添加任何新属性
Object.preventExtensions(obj);
2)密封:禁止给对象添加任何新属性,也不能删除属性
Object.seal(obj);
3)冻结:禁止给对象添加任何新属性,也不能删除属性,也不能修改属性
Object.freeze(obj);
二、数组的新的API
2.1判断
every - 每一个:判断数组中的每个元素【都】要符合要求最后结果才为true,类似于&&,只要有一个不满足,结果则 为false
语法: arr.every(function(val,i,arr){
console.log(val);//当前元素
console.log(i);//当前元素的下标
console.log(arr);//数组本身
return判断条件;
})
some -有一些:判断数组中的是否【包含】符合要求的元素,只要有一个最后结果则为true,类似||,只要有一个满足,则为true,只有全都不满足,结果才为false
语法: arr.some(function(val,i,arr){
return判断条件;
})
2.2*遍历
forEach(function(val,i,arr){ 操作; }) 会改变原数组 map(function(val,i,arr){ return 操作; }) 不会改变原数组
2.3过滤和汇总
fliter(function(val,u,arr){ return 条件; })
汇总:将数组中每一个元素,取出来整合为一个最终结果
语法: var sum=arr.reduce(function(prev,val,i,arr){
return prev+val;
},基础值)
三、Object.create()方法
直接用父对象创建子对象,并且子对象扩展自有属性
语法: var子对象=Object.create(父对象,{
"自有属性名":{四大特性},
……
})
四、严格模式
"use strict"
五、call,apply,bind
5.1call/apply
借用的函数.call/apply(对象,数据) apply传入的是数组,会自动打散数组
5.2bind
语法类似call/apply
this永远指向当前对象
六、ES6
6.1 模板字符串
`${}`
6.2 *let关键字
-
let可以解决声明提前
-
let使用{}块作用域
-
let遍历中的值是当前值
6.3 箭头函数
-
去掉function,将()和{}之间加=>
-
如果参数只有一个可以省略()
-
如果操作只有一句可以省略{},如果这一句是return可以省略return
6.4 for...of
for(var v of arr){
v -直接拿到值
}
1、不能修改原数组
2、不能遍历hash数组和对象
Day3
一、什么是DOM
Document Object Model
HTML
XHTML
DHTML-动态的网页: D: Dynamic -其实并不是新技术、新概念,是将现有技术的整合统称,让我们在离线时,网页也具有动态效果
XML-未知的标记语言,一切的标记由自己定义数据格式
二、DOM树
DOM树:树根: document -不需要我们创建,一个页面只有一个document对象,由浏览器的js解释器自动创建 作用:可以通过树根找到页面上的每一个DOM元素/节点/对象,也可以操作它
三、DOM元素的三大属性
3.1 elem.nodeType
document节点:9
element节点:1
attribute节点:2
text节点:3
以前有用:判断x是不是一个页面元素–因为我教你们方法children,是不会得到文本节点的,但是以前的childNodes会得到文本节点
3.2 attrNode.nodeValue
获取节点的value值
3.3 elem.nodeName
获取节点的标签名,获取后会转为大写
四、通过关系获取元素
获取父节点:elem.parentNode 获取第一个子节点:elem.firstElementChild 获取最后子节点:elem.lastElementChild 获取子节点:elem.children 获取前一个兄弟:elem.previousElementSibling 获取后一个兄弟:elem.nextElementSibling
五、递归
在函数体中调用自己
六、TreeWalker
var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ALL/SHOW_ELEMENT);
tw对象过后,你会得到一个方法,反复调用nextNode方法找到下一个节点,迟早有一天会等于null说明没找到,
while((node=tw.nextNode())!=null){
node.style.border="1px solid #OO0";
}
七、API直接找元素
7.1 根据HTML的特点去找元素
getElementById getElementsByClassName getElementsByName getElementsByTagName
7.2 ***根据CSS选择器去找元素
querySelector 只会找到第一个 querySelectorAll 找到全部 1、get:返回的是动态集合 优点:实时 缺点:效率较低 2、querySelectorAll:返回的是静态集合 优点:效率较高,支持使用forEach
Day4
一、元素的内容
innerHTML innerText value
二、元素的属性
getAttribute("属性名")
setAttribute("属性名","属性值");
removeAttribute("属性名");
elem.hasAttribute("属性名")-仅仅只能判断有没有这个属性,不能判断出属性值是什么
三、元素的样式
对象.style.css名
样式表中的样式
1、找到你想要操作的样式表 var sheet=document.styleSheets[i];
2、获取样式表中所有的样式规则var rules=sheet.cssRules; 3、找到自己想要操作的样式规则var rule=rules[i]; 4、要么获取要么设置 console.log(rule.style.css属性名);
rule.style.css属性名="css属性值";
四、创建元素并且渲染DOM树
var 名=document.creatElement("")
设置属性和事件
上树
父元素.appendChild()
父元素.insertBefore(elem,已有子元素)-将elem追加到父元素里,但是会插入在已有子元素的前面
父元素.replaceChild(elem,已有子元素)-将elem追加到父元素里,但是会替换在已有子元素的
删除元素: elem.remove();
五、HTML DOM常用对象
img对象
var img=new Image()
form对象:简化了查找元素
查找form元素:var form=document.forms[i];
查找form元素中的表单控件: var inp=form.elements[i];
*专属事件: form.οnsubmit=function(){//提交事件:只会再提交的一瞬间执行
return false;//阻止提交
}
select
属性: 1、select.options;//得到select下面所有的option,完全等效于xx.children;
2、*select.selectedIndex;//得到当前选中项的下标,二级(多级)联动就用到
select.add(option) select.remove()
option
var opt=new option("innerHTML","value")