当前位置：首页 > news >正文

培训机构Day20

news 来源：原创 2025/7/19 2:13:15

今天还是讲一些基本的js知识点。

知识点：

html + css ：框架结构 + 样式修饰
javascript：行为交互，动态效果。有逻辑的语言。动态脚本语言。无需编译，解释执行。
寄生在网页上执行。浏览器内核自带js解释器。

js引入三种方式：
1。行内js：只能作用于行内，基本上用于触发事件。耦合度高。不适合写编写大量的js。

2。页内js：只能作用于当前页面。使用比较常见。

3。引入外部js：任何页面，可以根据需要引入。

语法：
ecmascript(js语法) + DOM(文档对象模型) + BOM(浏览器对象模型)
基于ecmascript 2015，即 es 6。里程碑更新。

1.常量变量，控制台输出。
2.数据类型。
2.1 基本数据类型：number boolean string null undefined symbol
string：使用单引号和双引号，必须成对出现。
number：内部使用双精度处理。
boolean：有两个值，true和false
null：只有一个值，null。
undefined：只有一个值，undefined。
2.2 引用类型。

3.运算符：
3.1 算术运算符：+ - * / %。js没有整除。
3.2 比较运算符：> < >= <= == !=，运算结果是boolean值。
3.3 逻辑运算符：&& || !。运算结果是boolean值。
3.4 赋值运算符：= += -= *= /= %=
3.5 位运算符：& | ! ~ << >>
3.6 其它运算符：条件运算符，typeof

4.表达式、语句。语句后的分号可省。

5.流程控制。
顺序、选择和循环。

6.数组。数组是万能数据结构。
数组是引用类型。

如何遍历数组？

高阶函数：
函数的参数或返回值依旧是函数。

7.函数。一等公民。
参数支持默认值。
参数也支持不定长。

8.对象。
对象：键值对的集合。键只能是字符串，或symbol。值可以是任意类型。

访问对象的值：
obj.xxx
obj["xxx"]

函数是对象。
对象如何而来？new 函数调用。

原型。

================================
==比较内容，类型进行自动转换
===同时比较内容与类型。恒等于，完全等于

基本数据类型的包装类。装箱和拆箱。
number -> Number
string -> String
boolean -> Boolean

===============================
DOM：Document Object Model ，文档对象模型。
将html文档中的每个元素都视作一个对象。

如何获取dom对象？
1.document.getElementById("aaa");
2.document.getElementsByTagName("h1");
3.document.getElementsByClassName("a");
4.document.getElementsByName("aa");

重要：
1.document.querySelector("css选择器"); //返回第一个匹配的元素
2.document.querySelectorAll("css选择器");//返回所有匹配的元素

NodeList ：类数组。

删除dom：
1.dom对象.remove();//移除自身
2.父对象.removeChild(子对象);

插入dom：
1.par.appendChild(chi); //追加到par的所有子元素之后
2.par.insertBefore(chi,tar);//插入一个子元素chi到tar的前面。

修改dom：
1.修改dom内容：dom.innerText = "xxxx"
2.修改dom内联样式：dom.style.xxx = "Xxx"

四向遍历：
1.向上，找祖先元素：dom.parentElement
2.向下，找后代元素：dom.children
3.向前，找兄元素：dom.previousElementSibling
4.向后，找弟元素：dom.nextElementSibling

事件处理：
1.在标记上，指定onxxx属性，来注册事件。
2.dom.onxxx = function(){
//do something....
}
前两种本质为同一种。onclick值为唯一的。
3.推荐：dom.addEventListener("xxxx", function(){});
此种方式添加的事件与onclick添加的事件不冲突。
可以同时添加多个事件。多个事件互相不影响。

移除事件：
1.dom.onclick = null;
2.dom.removeEventListener("xxx",事件处理函数名称);
必须有函数名。

常用事件类型：
1.click：单击事件。鼠标，或键盘都可以触发。
2.dblclick：双击事件。
3.contextmenu：右键事件。
4.键盘相关事件：
keyup：键弹起，释放。只会触发一次。
keydown：键按下。如果键在按下状态，则持续触发。
keypressed：按下并释放。
4.鼠标相关事件：

原本都是周一考试，给挪到今天了，贴一下题目：

单选题（每题2分）

HTML5的文档类型声明是什么？

A. <!DOCTYPE html> B. <!DOCTYPE HTML 5> C. <!DOCTYPE html5> D. <!DOCTYPE HTML>

以下哪个标签用于定义最重要的标题？

A. <h6> B. <h1> C. <h3> D. <h5>

在HTML中，<p>标签的默认显示行为是什么？

A. 显示为粗体文本 B. 显示为斜体文本 C. 显示为下划线文本 D. 显示为段落，自动换行

CSS选择器.class的作用是什么？

A. 选择所有HTML元素 B. 选择类名为class的元素 C. 选择所有类名为class的元素 D. 选择ID为class的元素

在CSS中，background-color属性用于设置什么？

A. 文本颜色 B. 背景图片 C. 背景颜色 D. 字体大小

HTML中的<a>标签用于创建什么？

A. 图片 B. 表格 C. 超链接 D. 无序列表

CSS中的display属性可以设置为none来做什么？

A. 改变文本颜色 B. 隐藏元素 C. 改变字体大小 D. 显示元素

HTML中的<img>标签的alt属性是用于什么？

A. 指定图片的宽度 B. 指定图片的高度 C. 为图片提供文字描述 D. 改变图片的边框

CSS中的float属性用于实现什么？

A. 元素的居中 B. 元素的浮动 C. 元素的隐藏 D. 元素的定位

HTML中的<input>标签的type属性设置为text表示什么？

A. 单选按钮 B. 文本输入框 C. 复选框 D. 提交按钮

CSS中的margin属性用于设置什么？

A. 元素的内边距 B. 元素的外边距 C. 元素的边框 D. 元素的背景

HTML中的<ol>标签用于创建什么类型的列表？
A. 无序列表 B. 有序列表 C. 嵌套列表 D. 定义列表

CSS中的color属性用于设置什么？

A. 元素的背景颜色 B. 元素的边框颜色 C. 元素的文本颜色 D. 元素的宽度

HTML中的<canvas>标签用于什么？

A. 显示视频 B. 显示图片 C. 绘制图形 D. 创建表格

CSS中的position属性设置为relative表示什么？
A. 元素脱离文档流 B. 元素相对于其正常位置进行定位 C. 元素相对于最近的定位祖先元素进行定位 D. 元素相对于视口进行定位

HTML中的<meta>标签通常用于什么？

A. 定义页面内容 B. 定义页面标题 C. 提供关于页面的元数据 D. 定义页面的脚本

CSS中的font-family属性用于设置什么？

A. 字体大小 B. 字体颜色 C. 字体类型 D. 字体粗细

HTML中的<section>标签用于什么？

A. 定义文档的头部 B. 定义文档的尾部 C. 定义文档中的一个区段 D. 定义文档的导航链接

CSS中的z-index属性用于控制什么？

A. 元素的可见性 B. 元素的宽度 C. 元素的堆叠顺序 D. 元素的边框样式

HTML中的<iframe>标签用于什么？

A. 嵌入音频 B. 嵌入视频 C. 嵌入另一个文档 D. 嵌入图片

二、简答题（每题10分）

介绍一下CSS中的盒模型？
在默认文档流规则中，标记可分为哪三类，有排列和显示上有什么特点？
等分布局如何实现？其原理是什么？
与块元素背景相关的样式有哪些？各自的作用是什么？
CSS中的定位分为哪些类型，其定位参数标准是什么？
如何使用伪元素清除浮动？

知识点：

相关文章：