前端知识点梳理（简单）

最新推荐文章于 2024-09-05 10:41:35 发布

小崔同学要努力

最新推荐文章于 2024-09-05 10:41:35 发布

阅读量53

点赞数 1

文章标签：前端 java 学习

本文链接：https://blog.csdn.net/qq_52897574/article/details/133067618

版权

1. 什么是表单？

表单中常用的属性(method,action)以及作用？表单中常用的元素都有哪些？
checkbox以及radio如何设置为默认选中(checked),下拉列表中如何设置默认选项(selected)

2. div与span的区别？

div是块级元素，独占一行，会自动换行。其本身没有任何视觉上的效果，要与CSS结合使用。
span是内联元素(行内元素)，所有的span元素都会在同一行显示，如果一行显示不下，就会自动换行。。其本身没有任何视觉上的效果，要与CSS结合使用。

3. HTML5新增标签
    <div id="header"></div>    <header></header>
    <div id="nav"></div>       <nav></nav>
    <div id="aside"></div>     <aside></aside>
    <div id="section"></div>   <section><section>
    <div id="footer"></div>    <footer></footer>

    HTML5新增表单标签
    <input type="email">   <input type="date">

    HTML5新增的属性： placeholder="用户名" 表示文本提示
                    required 必填项  <input type="text" required>

4. 常用的CSS选择器有哪些？

    HTML标签选择器：直接作用于某个HTML标签
    类选择器：可在页面中被多次使用
    ID选择器：作用于同一ID的某个资源，同一个页面中只能使用一次
    子选择器： E > F 选择所有作为E元素的子元素F（只选择第一代子元素）
    后代选择器： E F 选择所有被E元素包含的F元素

5.CSS的引入方式共有三种：
  ● 行内样式
  ● 内嵌样式
  ● 外部样式。
  CSS 优先规则：
  1. 从引用方式方面来说：行内样式 > 内嵌样式/外部样式

6.Java Script的三个主要组成部分是：
  1. ECMAScript(核心)
  2. DOM（文档对象模型）
  3. BOM（浏览器对象模型）。

7.javaScript在页面中的位置
  可以将JavaScript代码放在html文件中任何位置。
  1. 放在head部分: 最常用的方式是在页面中head部分放置script元素，head部分会先加载，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。所以进行页面显示初始化的js必须放在head里面。
  2. 放在body部分: JavaScript代码在网页读取到该语句的时候就会执行。也就是按照顺序执行。
  3. script标签可以有多个。

8.js中的数据类型有六种：
  1. undefined-未定义类型：未被赋值的变量，值为undefined
  2. boolean-布尔类型：值为true/false
  3. number-数字类型：任何数字（NaN也是number类型，表示“非数”）
  4. string-字符串类型：值用引号（单引号或者双引号）括起来
  5. object-对象类型：null、数组、Date等
  6. function-函数类型：function函数
  注意：以上数据类型中，undefined、boolean、number、string也被称为原始数据类型。

9. js中==与===的区别？
       var sNum = "66";
       var iNum = 66;
       alert(sNum == iNum); //输出 "true"
       alert(sNum === iNum); //输出 "false"

       第一个 alert 使用等号来比较字符串 "66" 和数字 66，输出 "true"。
       如前所述，这是因为字符串 "66" 将被转换成数字 66，，然后才与另一个数字 66 进行比较。
       第二个 alert 使用全等号在没有类型转换的情况下比较字符串和数字，当然，字符串不等于数字，所以输出 "false"。

10. 声明函数有多种方式，常用的有两种：

第一种方式：
function 函数名( ){ //函数体; }
let 函数名 = function(){ //函数体; }

11. var与let的区别？
let是ES6中提供定义变量的方式，使用let定义变量具有块级作用域，而var只有函数级作用域。没有块及作用域。

12. setTimeout()定时器与setInterval()定时器的区别？（使用场景：轮播图）
setTimeout()在指定的时间间隔后，只调用一次。
setInterval()在指定的时间间隔后，可以调用无限多次。

13. 获取DOM对象的常用方法有如下几种：

1. getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。

2. getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。

3. getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。

4. getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。

14.javaScript中的常用事件：

onclick（html标签中的事件） vue使用@click onblur(失去焦点事件) onfocus(获取焦点事件) onload(页面首次加载事件)

15.DOM编程（全选）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>全选</title>

</head>

<body>

全选<input class="btn" type="checkbox">

<ul>

<li><input type="checkbox">杜比环绕，家庭影院必备，超真实享受</li>

<li><input type="checkbox">NVDIA 99999GT 2G 1024bit极品显卡，不容错过</li>

<li><input type="checkbox">精品热卖，高清晰，45寸LED电视</li>

<li><input type="checkbox">Sony索尼家用最新款笔记本</li>

<li><input type="checkbox">华为，荣耀3C，超低价，性价比奇高</li>

</ul>

<script>

let btn = document.getElementsByClassName('btn')[0];

let inputArr = document.getElementsByTagName('ul')[0].getElementsByTagName('input');

btn.onclick = function() {

let bool = btn.checked;

for (let i = 0; i < inputArr.length; i++) {

inputArr[i].checked = bool;

}

}

</script>

</body>

</html>

16.json与字符串之间的转换

json转换成字符串：使用JSON.stringify()

字符串转换成json：使用JSON.parse()

17.SessionStorage与LocalStorage的区别？

18. ES6提供了哪些新特性

1. let const

2. 模板字符串(要使用反引号，之后才能使用${}),有了模板字符串就可以不使用+号来拼接字符串了。

3. 箭头函数 =>

4. ES6中提出的类的概念，之前的ES3只有函数的概念，函数就是一个对象，没有类的概念。

5. 模块化的编程思想(export import),最终目标就是可重用。

6. 提供了异步对象Promise，vue中的axios就是基于Promise对象的。

19.什么MVVM模型？MVC与MVVM的区别？

MVVM框架分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）

1. M：模型层，主要负责业务数据相关；

2. V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；

3. VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，

以此也实现了视图与模型层的相互解耦；

20.Vue中常用的指令有哪些？

1. v-text：更新元素的innerText

2. v-html：更新元素的innerHTML

3. v-bind属性绑定

4. v-on事件处理指令，也可以@事件名称

5. v-if v-show 条件渲染

6. v-for

7. v-model

21. v-if与v-show的区别？

如果使用v-if，当条件为false的时候，页面中的元素不会被渲染。

如果使用v-show,当条件为false的时候，页面中的元素只是被隐藏起来(display:none),在页面中的元素会被渲染出来。

22. vue页面之间如何传递参数：params方式与query方式的区别？

1. query方式：

类似于get方式，参数会在路由中显示，可以用做刷新后仍然存在的参数。

2. params方式：

类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。

23. Vue生命周期(钩子函数)?

总共要经历以下8个过程：

1. beforeCreate:组件实例创建之前

2. created：组件实例创建完毕

3. beforeMount：组件DOM挂载之前

4. mounted：组件DOM挂载完毕

5. beforeUpate：组件数据更新之前

6. updated：组件数据更新完毕

7. beforeDestroy：组件实例销毁之前

8. destroyed：组件实例销毁完毕

24. created与mounted这两种钩子函数的区别是什么？

当执行created的时候，el还没有被挂载，el是在beforeMount状态的时候被挂载的，此时message还没有数据。

message中的数据是在mounted组件挂载完毕的时候被渲染出来的。

小崔同学要努力

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
前端知识点梳理（简单）

1. 放在head部分: 最常用的方式是在页面中head部分放置script元素，head部分会先加载，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。其本身没有任何视觉上的效果，要与CSS结合使用。MVVM框架分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，
复制链接

扫一扫