JavaScript学习|青训营笔记

75 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

方法的如果要直接调用的话,需要使用apply的方法来指定一个对象来调用,同时还要传参数进去

所有的function都有apply的方法

日期类对象,Date()内部封装了一系列时间相关的方法,具体使用可以直接查找

JSON数据类型

JSON为字符串

Class继承


在类后面使用extends继承类似于java,但是这是一个语法糖,实际上还是原型继承


BOM,表示浏览器对象模型

Location表示当前页面的url信息

Reload()方法表示重新加载当前界面

Assgin方法中有一个url参数表示跳转到的页面url

Screen表示当前页面的尺寸信息



Document代表当前的页面

可以获取具体的文档树节点

可以获取cookie


History可以控制界面前进和返回,代表浏览器的历史记录

Back()后退

Forward前进



操作DOM对象

更新DOM节点

选择器对应css的tag ,id,class

使用document来获得相应的对象

Children获取父节点下的所有节点

Innertext修改文本值只有文字没有样式

Innerhtml可以解析html文本标签

获得对象中有style属性,可以通过style的属性来修改css




       删除DOM节点

       先获取父节点,通过父节点删除自己  

       获取父类可以使用parentElement()方法

       removeChild()方法,参数为子节点的id

       删除多个节点的时候,children的个数是动态变化的,所以child长度要注意越界问题

      

       创建和插入节点

       如果直接修改会覆盖原来的属性

       要追加使用appendchild

创建一个新的节点可以使用document.createElement(tag);来创建

然后可以添加到其他元素中

 

对于元素中的属性可以通过setAttribute(key,value);来实现

这个方式是一种万能的写法

注意:通过byTag获取的元素,是一个列表,所以要添加或者修改其中的元素,要使用索引来具体选择某一个元素标签

 

插入节点还可以使用insertBefore,有两个参数,要插入节点和插入到哪个节点前


操作表单(验证)

 

可以直接通过获得某一个元素之后,value来获得值

 

但是对于单选框,只能通过条件判断语句来判断,checked的值,选中为true

同时也可以通过修改checked的值来修改选中的元素

 

 

Jquery相关

<script src="cdn.bootcdn.net/ajax/libs/j…</script>

 

公式为美元符号加选择器加对应事件

选择器同css的样式

jquery.cuishifeng.cn/

 

事件为鼠标事件键盘事件和其他事件

 

 

Jquery操作DOM元素

选中元素后,直接修改html或者text值

分别类似于document中的innerHTML和innerText

有参数为设置值,没有参数为获得值

设置css可以直接使用css函数,参数为键值对

元素的显示和隐藏show(),和hide()

本质是css中display

 

 

实践中的笔记:

 

检测鼠标的

可以使用document.onmouse的操作

Jquery引入

<script src="cdn.bootcdn.net/ajax/libs/j…</script>

 

Vue引入

<script src="cdn.jsdelivr.net/npm/vue@2.7…</script>