1、HTML/CSS/JAVASCRIPT
12.20
安装vscode https://code.visualstudio.com/
如何将英文版转换为中文版
Ctrl+shift+p 快捷键 在搜索栏输入Configure Display Language 选择语言
https://www.jianshu.com/p/f8b10f99a0ed
如何使用vscode建立第一个html
1.新建文件(Ctrl + N)
2.新建的文件Untitled-1是纯文本格式的,需改为HTML格式。
12.21
Math.floor(x) 方法可对一个数进行下舍入。返回值:小于等于 x,且与 x 最接近的整数。
floor() 方法执行的是向下取整计算,它返回的是小于或等于函数参数,并且与之最接近的整数。
Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值,是Java语言常用代码。例如:double a=Math.random()*(3-1)+1,设置一个随机1到3的变量。
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
var 与 let 的区别
常量用于存储不希望更改的数据,用关键字 const 创建
①如果你编写一个声明并初始化变量的多行 JavaScript 程序,你可以在初始化一个变量之后用 var 声明它,它仍然可以工作。
|
Note: 只有在 web 文档中运行多行 JavaScript 时才会有这种效果,当在 JavaScript 控制台中键入单独的行,这将不起作用。这是由于变量的提升。但提升操作不再适用于 let 。如果将上面例子中的 var 替换成 let 将不起作用并引起一个错误。 这是一件好事——因为初始化后再声明一个变量会使代码变得混乱和难以理解。
②当你使用 var 时,可以根据需要多次声明相同名称的变量,但是 let 不能。 以下将有效:
var myName = 'Chris';
var myName = 'Bob';
但是以下内容会在第二行引发错误:
let myName = 'Chris';
let myName = 'Bob';
同样,这是一个明智的语言决定。没有理由重新声明变量——这只会让事情变得更加混乱。
出于这些以及其他原因,我们建议您在代码中尽可能多地使用 let,而不是 var。因为没有理由使用 var,除非您需要用代码支持旧版本的 Internet Explorer (它直到第 11 版才支持 let ,现代的 Windows Edge 浏览器支持的很好)。
NodeList 对象是节点的集合,通常是由属性,如Node.childNodes和方法,如document.querySelectorAll 返回的。
NodeList 不是一个数组,是一个类似数组的对象(Like Array Object)。虽然 NodeList 不是一个数组,但是可以使用 forEach() 来迭代。你还可以使用 Array.from() 将其转换为数组。
不过,有些浏览器较为过时,没有实现 NodeList.forEach() 和 Array.from()。你可以用 Array.prototype.forEach() 来规避这一问题。
在一些情况下,NodeList 是一个实时集合,也就是说,如果文档中的节点树发生变化,NodeList 也会随之变化。例如,Node.childNodes 是实时的:
var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // 我们假设结果会是“2”
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // 但此时的输出是“3”
在其他情况下,NodeList 是一个静态集合,也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。比如document.querySelectorAll 就会返回一个静态 NodeList。
最好牢记这种不同,尤其是在当你选择 NodeList 中所有项遍历的方式,或缓存它的长度的时候。
appendChild() 方法向节点添加最后一个子节点。
提示:如果您需要创建包含文本的新段落,请记得添加到段落的文本的文本节点,然后向文档添加该段落。
可以使用 appendChild() 方法从一个元素向另一个元素中移动元素
<body>
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<button onclick="myFunction()">亲自试一试</button>
<script>
function myFunction()
{
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}
</script>
createElement() 方法通过指定名称创建一个元素.。HTML元素经常包含文本。创建指定文本的按钮你需要在按钮元素后添加文本节点:
function myFunction(){
var btn=document.createElement("BUTTON");
var t=document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
}
focus() 方法让光标在页面加载完毕时自动放置于 <input> 输入框内
Document接口表示任何在浏览器中载入的网页,并作为网页内容的入口,也就是DOM 树。DOM 树包含了像 <body> 、<table> 这样的元素,以及大量其他元素。它向网页文档本身提供了全局操作功能,能解决如何获取页面的 URL ,如何在文档中创建一个新的元素这样的问题。
Document 接口描述了任何类型的文档的通用属性与方法。根据不同的文档类型(例如HTML、XML、SVG,...),还能使用更多 API:使用 "text/html" 作为内容类型(content type)的 HTML 文档,还实现了 HTMLDocument 接口,而 XML 和 SVG 文档则(额外)实现了 XMLDocument 接口。
EventTarget 是一个 DOM 接口,由可以接收事件、并且可以创建侦听器的对象实现。
Element,document 和 window 是最常见的 event targets ,但是其他对象也可以作为 event targets,比如 XMLHttpRequest,AudioNode,AudioContext 等等。
许多 event targets (包括 elements, documents 和 windows)支持通过 onevent 特性和属性设置事件处理程序 (event handlers)。
EventTarget.addEventListener()在EventTarget上注册特定事件类型的事件处理程序。
EventTarget.removeEventListener()EventTarget中删除事件侦听器。EventTarget.dispatchEvent()将事件分派到此EventTarget。
prototype (JS对象)JavaScript中,prototype对象是实现面向对象的一个重要机制。
每个函数就是一个对象(Function),函数对象都有一个子对象 prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。
01定义类时,把方法写在构造函数内部的内存图
02定义类时,把对象方法作为prototype对象的属性
03区分原型属性和实例属性的内存示意图
2、HTML/CSS/JAVASCRIPT
3、HTML/CSS/JAVASCRIPT