华清远见重庆中心—JS阶段技术总结/个人总结

简单的案例

1、制作简易的课程表

2、制作一个几乎包揽html全部所学知识的简易网页

3、简易的登录界面

Js企业面试题

1、javascript基本数据类型？

2、浅谈javascript中变量和函数声明的提升？

3、JS数组和对象的遍历方式，以及几种方式的比较？

4、javascript定义类的四种方法?

5、javascript实现继承的三种方法？

6、说说ajax的原理？

7、异步加载JS的方式有哪些？

8、介绍JS有哪些内置对象？

9、说几条写javascript的基本规范？

10、说说对JSON的理解？

11、说说JS延迟加载的方式有哪些？

12、说说attribute和property的区别？

13、正则表达式的使用？

14、javascript数组去重的方法汇总？

15、javascript数组排序的几种方式？

16、javascript数组一行代码去重方法？

17、javascript如何判断一个对象是否为数组？

18、javascript有几种类型的值？

19、javascript深浅拷贝？

20、你知道jquery中的选择器吗，请讲一下有哪些选择器？

21、 jquery对象和dom对象是怎样转换的？

22、你是如何使用jquery中的ajax的？

23、同步和异步区别？

24、jquery中$.get()提交和$.post()提交有区别吗？

25、你在jquery中使用过哪些插入节点的方法，它们的区别是什么？

26、jquery中如何来获取或和设置属性？

27、你jquery中有哪些方法可以遍历节点？

28、$(document).ready() $(function（{}）)方法和window.onload有什么区别？

29、jQuery是如何处理缓存的？

30、在ajax中发送data主要有几种方式？

31、你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？

简单的案例

1、制作简易的课程表

代码实现：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>课程表案例</title><style>table{/* 折叠相邻边框 */border-collapse: collapse;width: 700px;height: 400px;margin-left: 450px;}.gray{background-color: pink;border: none;}#tt{background: linear-gradient(to right, #3494e6, #ec6ead);opacity: 0.7;}</style></head><body><table border="1"><tr><th colspan="6" align="center" id="tt">课表</th></tr><!-- 表头(周一到周五) --><tr class="gray"><th style="background-color: white;"></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td rowspan="4">上午</td><td>语文</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td></tr>      <tr class="gray"><td>数学</td><td>语文</td><td>语文</td><td>英语</td><td>数学</td></tr>                       <tr><td>英语</td><td>语文</td><td>语文</td><td>数学</td><td>数学</td></tr>                        <tr class="gray"><td>数学</td><td>英语</td><td>语文</td><td>数学</td><td>数学</td></tr>           <tr><td colspan="6" align="center">午休</td></tr><tr class="gray"><td rowspan="3" style="background-color: white;">下午</td><td>体育</td><td>文化</td><td>美术</td><td>音乐</td><td>劳动</td></tr>            <tr><td>音乐</td><td>电脑</td><td>自然</td><td>美术</td><td>劳动</td></tr>            <tr class="gray"><td>电脑</td><td>自然</td><td>体育</td><td>美术</td><td>音乐</td></tr></table></body>
</html>

效果展示：

2、制作一个几乎包揽html全部所学知识的简易网页

代码实现：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html练习</title><style>body{background: url(../imgs/yuanshen.jpg);background-size: 100%;background-repeat: no-repeat;background-attachment: fixed;}table{background: pink;color: white;opacity: 1;}</style></head><body><audio controls autoplay loop><source src="../source/Lemon.ogg" type="audio/ogg"><source src="../source/Lemon.mp3" type="audio/mpeg"></audio>  <h1 style="color: orange;">原神咨询</h1><marquee scrollamount="10" behavior="alternate" direction="right"><span style="color: navajowhite;">抽卡分析 抽卡模拟 圣遗物模拟 深渊排行</span></marquee><table align="center" border="1"><tr><th colspan="2">3.3上半卡池</th><th colspan="2">3.3下半卡池</th></tr><tr align="center" style="color: crimson;"><td>流浪者</td><td>荒泷一斗</td><td>雷电将军</td><td>神里绫人</td></tr><tr align="center"><td><img width="200" src="../imgs/sanbing.jpg"></td><td><img width="200" src="../imgs/yidou.jpg"></td><td><img width="200" src="../imgs/baerzebu.jpg"></td><td><img width="200" src="../imgs/lingren.jpg"></td></tr><tr align="center" style="color: red;"><td><a target="main" href="https://www.acg-voice.com/guonei/neidi/819.html">cv:鹿喑</a></td><td><a target="main" href="https://www.acg-voice.com/guonei/neidi/115.html">cv:刘照坤</a></td><td><a target="main" href="https://www.acg-voice.com/guonei/neidi/471.html">cv:菊花花</a></td><td><a target="main" href="https://www.acg-voice.com/guonei/neidi/457.html">cv:赵路</a></td></tr><tr align="center"><td><a target="main" href="https://baike.baidu.com/item/%E5%9B%BD%E5%B4%A9/58552564?fromModule=search-result_lemma" target="_blank">角色简介</a></td><td><a target="main" href="https://baike.baidu.com/item/%E8%8D%92%E6%B3%B7%E4%B8%80%E6%96%97/58865693?fromModule=lemma-qiyi_sense-lemma" target="_blank">角色简介</a></td><td><a target="main" href="https://baike.baidu.com/item/%E5%B7%B4%E5%B0%94%E6%B3%BD%E5%B8%83/58433812?fromtitle=%E9%9B%B7%E7%94%B5%E5%B0%86%E5%86%9B&fromid=57957800&fr=aladdin" target="_blank">角色简介</a></td><td><a target="main" href="https://baike.baidu.com/item/%E7%A5%9E%E9%87%8C%E7%BB%AB%E4%BA%BA/59416908?fromModule=lemma-qiyi_sense-lemma" target="_blank">角色简介</a></td></tr></table><br><iframe name="main" width="100%" height="600" frameborder="0"></iframe></body>
</html>

效果展示：

1）点击左上角播放器可以播放背景音乐

2）固定背景图片，使图片不随滚轮移动

3）表格之上，亚麻色的浮动字幕从左往右移动，撞击右侧边界后向左移动，周而复始。

4）在表格下方建立一个框架，点击表格中的超链接可以直接在框架里显示网页

3、简易的登录界面

代码实现：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简易登录页面</title><link rel="stylesheet" href="//at.alicdn.com/t/c/font_3812812_1pnyl66h8n1.css"></head><style>body{background: url(daojian.jpg);background-repeat: no-repeat;background-size: 100%;background-attachment: fixed;}a{text-decoration: none;color: rgba(48, 176, 255, 1.0);}a:hover{color: rgba(255, 0, 0, 0.7);}input{width: 150px;height: 30px;font-size: 18px;outline: none;border: 1px solid darkgray;border-radius: 5px;}.login{margin: 150px auto;background-color: #dfe2e9;border-radius: 30px;height: 350px;width: 300px;outline: none;}.button {background-color: rgba(0, 33, 99, 0.7);color: aliceblue;border-radius: 5px;width: 100px;height: 31px;font-size: 16px;}.button:hover{background-color: rgba(10, 233, 253, 0.7);color: darkblue;}#denglu{style=margin-top: 200px;text-align: center;color:rgba(0, 31, 95, 0.7);text-shadow: 3px 1px 2px rgba(117, 51, 117, 0.7);}</style><body><h3 style="background-color: black;opacity: 0.5;color: gold;"><marquee scrollamount="10" behavior="smooth" direction="right">公告:抵制不良游戏，拒绝盗版游戏。注意自身保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</marquee></h3><div class="login"><form action="" method="get" style="text-align: center;"><h1 id="denglu" >登录</h1><hr><p style="color:#2e2466;font-size: 22px;">用户名:<input id="username" class="content" type="text" placeholder="请输入用户名" required><span class="iconfont icon-yonghu"></span></p><p style="color:#2e2466;font-size: 22px;">密  码:<input id="password" class="content" type="password" placeholder="请输入密码"><span class="iconfont icon-yanjing"></span></p><p><a href="">忘记密码?</a></p><div ><input type="submit" value="登录" class="button" ><input type="reset" value="重置" class="button"></div><div><p><a href="">注册</a><span>    </span><a href="">联系客服</a></p></div></form></div></body>
</html>

效果展示：

1）在顶端创建一个从左往右且不断循环移动的浮动字幕，背景选用半透明黑色，营造出游戏公告的氛围

2）中间利用表单写登录板块，用户名和密码的图标直接通过font class从阿里巴巴矢量图标库引入（没下载到本地，需联网才能看到图标）

Js企业面试题

1、javascript基本数据类型？

原始类型：
数值型number 整数、小数都称为数值型
字符串string 用单引号或双引号引起来的都是字符串
布尔型boolean true/false
未定义undefined 当某个变量没有声明或没有值时
空null 某个引用类型变量通过null设置为空
引用类型：
- 如对象、数组、函数等都是引用类型

2、浅谈javascript中变量和函数声明的提升？

对于同名的变量声明，Javascript采用的是忽略原则，后声明的会被忽略，变量声明和赋值操作可以写在一起，但是只有声明会被提升，提升后变量的值默认为undefined，结果是在赋值操作执行前变量的值必为undefined
对于同名的函数声明，Javascript采用的是覆盖原则，先声明的会被覆盖，因为函数在声明时会指定函数的内容，所以同一作用域下一系列同名函数声明的最终结果是调用时函数的内容和最后一次函数声明相同
对于同名的函数声明和变量声明，采用的是忽略原则，由于在提升时函数声明会提升到变量声明之前，变量声明一定会被忽略，所以结果是函数声明有效

3、JS数组和对象的遍历方式，以及几种方式的比较？

// length属性可以获取数组长度
// 循环所有下标，没有赋值元素的输出undefined
for (var i = 0; i < list1.length; i++) {
console.log(list1[i]);
}
// 增强for循环，获取保存了数据的下标
for(var index in list1){
// 通过下标获取元素
console.log(list1[index]);
}

4、javascript定义类的四种方法?

工厂模式的方法：创建对象，工厂模式可以根据接受的参数来创建一个包含必要信息的对象，可以无限次数的调用这个方法，每次都返回一个包含2个属性2个方法的对象。工厂模式解决了创建类似对象的问题，但没有解决对象的识别问题，即不能确定一个对象的类别，统一为Object。

构造函数的方式：虽然确定了对象的归属问题，能够确定对象的类型，但构造函数中的方法需要在每个对象中都要重新创建一遍，导致一些性能问题。

原型模式的方式：由实例代码我们可以知道，对象实例可以访问原型中的值，但不能重写原型中的值，如果对象实例中定义了和原型重名的属性，那么该属性就会屏蔽原型中的那个属性，但并不会重写。

动态的原型方式：类的方法只会产生一个，不会产生大量方法,同时属性还不共享,同时属性和方法不是分开定义的。

5、javascript实现继承的三种方法？

原型继承：这种原型继承的特点：既继承了父类的模板，又继承了父类的原型对象。优点是继承了父类的模板，又继承了父类的原型对象，缺点就是父类实例传参，不是子类实例化传参，不符合常规语言的写法。

类继承（借助构造方法继承）：这种原型继承的特点：继承了父类的模板，不继承了父类的原型对象。优点是方便了子类实例传参，缺点就是不继承了父类的原型对象。

混合继承（原型继承和类继承）：这种原型继承的特点：既继承了父类的模板，又继承了父类的原型对象。优点方便了子类实例传参，缺点就是Boy.pertotype = new Persion() 函数又实例一次，函数内部变量又重复实例一次，大程序时候会很好性能。

6、说说ajax的原理？

Ajax相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

16、javascript数组一行代码去重方法？

       let arr = [1,2,3,4,1,4,5,6,8,6];arr = [...new Set(arr)]

18、javascript有几种类型的值？

两种类型：

原始数据类型（Undefined，Null，Boolean，Number、String）
引用数据类型（对象、数组和函数）

19、javascript深浅拷贝？

浅拷贝
     通常意义上对数组和对象的复制
     浅拷贝的特点：只是简单的复制拷贝引用数据类型的地址
              地址相同的变量,操作引用数据类型,彼此都会有影响

深拷贝
     完整的复制拷贝一个引用数据类型中的数值数据，到另一个引用数据类型中
     两个变量是两个的独立的引用数据类型是两个独立的存储空间
     一个变量操作引用数据类型不会影响另一个变量

20、你知道jquery中的选择器吗，请讲一下有哪些选择器？

基本选择器
层次选择器
过滤选择器
属性过滤选择器
内容（文本）过滤选择器

21、 jquery对象和dom对象是怎样转换的？

jQuery对象转换为dom对象
- jQuery对象[0]
- jQuery对象.get(0)
dom对象转换为jQuery
- $(dom对象)

22、你是如何使用jquery中的ajax的？

$.ajax方法
$.get方法
$.post方法
$.getJSON方法

23、同步和异步区别？

同步

优点：同步是按照顺序一个一个来，不会乱掉，更不会出现上面代码没有执行完就执行下面代码
缺点：是解析的速度没有异步的快；

异步

优点：异步是接取一个任务，直接给后台，在接下一个任务，一直一直这样，谁的先读取完先执行谁的
缺点：没有顺序，谁先读取完先执行谁的，会出现上面的代码还没出来下面的就已经出来了，会报错

24、jquery中$.get()提交和$.post()提交有区别吗？

相同点：

都是异步请求的方式来获取服务端的数据；

异同点：

请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
- 参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
  - 数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多
    - 安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

25、你在jquery中使用过哪些插入节点的方法，它们的区别是什么？

添加子节点
父节点.append(子节点)	将子节点添加到父节点中的最后
子节点.appendTo(父节点)	将子节点添加到父节点中的最后
父节点.prepend(子节点)	将子节点添加到父节点中的最前
子节点.prependTo(父节点)	将子节点添加到父节点中的最前

添加兄弟节点
原始节点.before(新节点)	添加新节点到原始节点之前
新节点.insertBefore(原始节点)	添加新节点到原始节点之前
原始节点.after(新节点)	添加新节点到原始节点之后
新节点.insertAfter(原始节点)	添加新节点到原始节点之后

26、jquery中如何来获取或和设置属性？

函数
节点.text()	获取节点中的文本。相当于js中的var text=x.innerText；
节点.text("内容")	设置节点中的文本。相当于js中的x.innerText="内容"；
节点.html()	获取节点中的内容。相当于js中的var text=x.innerHTML；
节点.html("内容")	设置节点中的内容。相当于js中的x.innerHTML="内容"；
节点.val()	获取某节点中的value属性值。相当于js中的var val=x.value;
节点.val("内容")	设置某节点中的value属性值。相当于js中的x.value="内容"

函数名
节点.css("样式名")	获取某个节点的某个样式值
节点.css("样式名","值")	设置某个节点的某个样式
节点.css({样式名:"值",样式名:"值"...})	同时设置多个样式
节点.css("样式名","值").css("样式名","值")	同时设置多个样式

函数名
节点.attr("属性名")	获取某个属性的值
节点.attr("属性名","值")	设置某个属性的值
节点.removeAttr("属性名")	移除指定属性
节点.addClass("class名")	给某个节点追加class值
节点.removeClass("class名")	移除某个节点的某个class值值
节点.toggleClass("class名")	添加或移除某个class值。如果没有则添加，有则移除
节点.hasClass("class名")	判断是否存在某个class

27、你jquery中有哪些方法可以遍历节点？

jQuery有一个each（）方法，里面是要执行的函数，用途就是循环遍历获取到的节点

parent（），返回元素的直接父节点
parents（），返回元素的所有祖先元素

children：返回所有的直接子节点，可以传入参数
find：返回所选元素的后代元素一直向下寻找，直到找到最后一个后代，可以传入参数

siblings（）：获取同胞元素
next（）：获取下一个同胞元素
nextAll（）：获取元素后面所有紧随的同胞
prev（）：获取元素上一个同胞元素
prevAll（）：获取元素前面所有紧随的同胞

first（）：获取被选元素的首个元素
last（）：获取被选元素的最后一个元素
eq（）：根据索引号（从0开始），获取被选元素中的指定元素
filter（）：获取与参数匹配
not（）：获取不与参数匹配的所有元素

28、$(document).ready() $(function（{}）)方法和window.onload有什么区别？

执行时间上的区别：window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。
编写个数不同：window.onload不能同时写多个，如果有多个window.onload，则只有最后一个会执行，它会把前面的都覆盖掉。$(document).ready(function(){})则不同，它可以编写多个，并且每一个都会执行。
简写方法：window.onload没有简写的方法， ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 可以简写为 (document).ready(function(){})可以简写为 (document).ready(function())可以简写为(function(){})。

29、jQuery是如何处理缓存的？

通过$.post()方法来获取数据，那么默认就是禁用缓存的。
通过$.get()方法来获取数据，可以通过设置时间戳来避免缓存。
通过$.ajax方法来获取数据，只要设置参数cache:false即可。

30、在ajax中发送data主要有几种方式？

json格式
标准参数模式
json字符串格式

31、你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？

事件冒泡是从里面的往外面开始触发的，就是点击子节点，会向上触发父节点，祖先节点的点击事件。

阻止冒泡事件一般来说有三种方法：

使用stopstopPropagation
使用retrun false
使用阻止默认行为preventDefault