JS第四周总结

最新推荐文章于 2024-06-24 11:05:52 发布

AKASO_D

最新推荐文章于 2024-06-24 11:05:52 发布

阅读量204

点赞数

分类专栏： JS知识点文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48974702/article/details/126822610

版权

JS知识点专栏收录该内容

6 篇文章 0 订阅

订阅专栏

橙色 == 漏写了

红色 == 写错了

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;//得到当前选中项的下标，二级(多级）联动就用到