今天还是讲一些基本的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
中的定位分为哪些类型,其定位参数标准是什么?
如何使用伪元素清除浮动?