琼花霰

前端基础部分习题

1 / HTML

1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别?

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

!DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。

标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作！

具体区别

1.盒模型

在严格模式中：width是内容宽度，元素真正的宽度 = width;

在兼容模式中：width则是=width+padding+border

2.兼容模式下可设置百分比的高度和行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

3.用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）

4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

2.html5为什么只需要写?你知道多少种Doctype文档类型？

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。BUT，HTML5不是的。

3.行内元素有哪些？块级元素有哪些？行内块元素有那些？

常见的块级元素有：

...

,
,
,
,,
,
,

行内元素：,,,,,,,`,,`
行内块元素：img|input|select|textarea|button等，也被称为可置换元素（Replaced element）。 4.请说出五种html5的特性（1）语义化标签：header,footer,nav etc. （2）canvas 画布（3）audio, video （4）drag 拖拽（5）本地存储 localStorage, sessionStorage （6）webSocket 长连接（7）定位（8）增强型表单 input number, datalist, keygen, output, progress （9）svg 矢量绘图（10）webWorker 实现js多进程。（11）新事件如 ondrag onresize 5.简述a标签target属性的取值和作用？标签的target属性规定在何处打开连接文档属性值 _black：点击一次打开一个新窗口 _self：默认，在当前窗口打开 _new：始终在同一个新窗口中打开 _parent：在父级窗口打开 _top：在当前的整个浏览器中打开所链接文档，即在顶级窗口打开 framename：在指定的框架中打开被链接文档 6.请列举几个html5新增的标签？ #video：表示一段视频并提供播放的用户界面# audio：表示音频 time：日期和时间值 source：为video和audio提供数据源 nav：导航 aside：在一边 article：文章 footer：页尾 header：页眉f main：主要的 menu：菜单 canvas：表示位图区域 track：为video和audio指定字母 svg：定义矢量图 code：代码段 figure：和文档有关的图例 figcaption：图例的说明 mark：高亮的引用文字 Datalist：提供给其他控件的预定义选项 keygen：秘钥对生成器控件 output：计算值 progress：进度条 embed：嵌入的外部资源 menuitem：用户可点击的菜单项 template：模板 section：部分 7.如何定义一个单选按钮？ input[type='radio']radio定义单选按钮 8.标签上的title属性与alt属性的区别是什么？ alt是在图片不能正常加载时候显示的提示语 title属性是鼠标划上去显示的内容 9.如何处理html5新标签的浏览器兼容问题？（1）使用静态资源的html5shiv包，载入后，初始化新标签的css （2）使用js动态插入新标签 10.分别写出以下几个HTML标签：文字加粗、下标、居中、斜体加粗：、，下标：_，居中：，斜体： 11.对WEB标准以及W3C的理解与认识 web标准，简单来说就是将页面的结构、表现和行为各自独立实现，尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。 12.前端页面有哪三层构成，分别是什么，作用是什么？最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。 HTML：结构层：网页的结构或内容层是该页面的基础HTML代码。 CSS：样式层：该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。 JavaScript：行为层行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改 13.请讲述一下iframe框架的优缺点？优：iframe能够原封不动地把嵌入的网页展现出来。如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决缺：会产生很多页面，不容易管理。很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。 14.form表单实现上传文件必不可少的属性是什么？ enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码。 method="post" 、enctype="multipart/form-data" 15.src和href的区别是什么？ href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。 src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。 16.input不可编辑，必填属性分别是什么？ disabled不可被编辑； required必填项； 17.请写出input常用的13种type类型，并写出每种类型的应用场景 text 默认的输入类型。 password 密码，表现为一连串的点。 file 文件上传控件。 radio 单选按钮 checkbox 复选框 hidden 隐藏的输入字段，用于在表单中添加对用户不可见 button 按钮 image 图像形式的提交按钮 reset 重置按钮,清除表单中所有数据 submit 提交按钮,提交按钮会把表单数据发送到服务器 color 调色板 tel 包含电话号码的输入域 email 包含email地址的输入域 url 包含URL地址的输入域 search 搜索域 number 包含数值的输入域 range 包含一定范围内数字值的输入域 date 选取日、月、年的输入域 month 选取月、年的输入域 week 选取周、年的输入域 time 选取月、年的输入域 datetime 选取时间、日月、年的输入域(UTC时间) datetime-local 选取时间、日月、年的输入域(本地时间) 18.请简述一下你对语义化标签的理解 ⒈用正确的标签做正确的事情 ⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析； ⒊即使在没有CSS样式的情况下也以一种文档格式显示，并且是任意阅读的； ⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO； ⒌时阅读源代码的人对网站更容易将网站分块，便于阅读维护理解 19.如何区分html和html5 1、在文档声明上，html有很长的一段代码，并且很难记住这段代码，都只是靠工具直接生成，而html5却不同，只有简简单单的声明，也方便人们的记忆，更加精简。 2、在结构语义上；html4.0没有体现结构语义化的标签。html5在语义上却有很大的优势,提供了一些新的html5标签。 20.img的常用属性 src 图像的源文件 alt 提示文字 width,height 高度，宽度 border 边框 vspac 垂直间距 hspace 水平间距 21.字体加粗的方法（1）用CSS中font-weight:bold样式给字体加粗（2）用html中的加粗标签（3）用html中的加粗标签 22.一个网页从开始请求到最终显示的完整历程一个网页从开始请求到最终显示的完整历程一般可以分为以下7个步骤： 1.在客户端浏览器中输入网址URL。 2.发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。 3.客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。 4.客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。 5.WEB服务器响应请求，返回指定的URL数据或错误信息；如果设定重定向，则重定向到新的URL地址。 6.客户端浏览器下载数据，解析HTML源文件，解析的过程中实现对页面的排版，解析完成后，在浏览器中9显示基础的页面。 7.分析页面中的超链接，显示在当前页面，重复以上过程直至没有超链接需要发送，完成页面的全部显示。 2 / CSS 1.css性能优化的方法，至少说出五种 1.异步加载CSS 2.js，css文件压缩、 3.有选择地使用选择器 4.优化重排与重绘 5.不要使用@import 6.减少闭包的使用 7.减少dom操作 8.使用精灵图和雪碧图 2.Css选择器有几种？选择器的优先级是怎样的。元素选择器，id选择器，calss 选择器，后代选择器，子代选择器，伪类选择器，通配符内联样式> id>class>元素>通配符>继承样式 3.浮动的原理什么？浮动有几种？将排成一列的元素变成一行，脱离文档流。主要是为了让一些标签并排显示使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘向下浮动向上浮动两种 4.定位有几种，他们的特点分别是什么？是相对于什么进行定位的？ static静态定位 html元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中 relative相对定位相对定位, 特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。 absolute绝对定位绝对定位特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。 fixed固定定位固定定位, 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置 sticky粘性定位粘性定位的语法格式如下：选择器 { position: sticky; top: 10px; } 1、粘性定位可以认为是相对定位和固定定位的混合； 2、粘性定位的元素是以浏览器的可视窗口为参照点移动元素； 3、粘性定位继续占有原先的位置； 4、必须添加top、bottom、left、right其中一个才有效； 5、一般都是跟页面滚动搭配使用； 5.如何设置背景透明？ background-rgba（四个参数） background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。 background-color:transparent 6.请列举几种布局方式，并列举各自优点 1 静态布局:布局简单，没有兼容性问题。 2 自适应布局:自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局 3 流式布局:流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。 4 响应式布局:通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局 7.css引入方式有几种？link和@import有什么区别？ 3种，行内样式，内嵌式，外链式 link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义ref连接属性等作用； @import是CSS提供的，只能用于加载CSS; 页面被加载的时，link会同时被加载 @import引用的CSS会等到页面被加载完再加载; 网络不好的情况下，会造成页面混乱 8.在css样式中使用em和px。各有什么优势，在表现上有什么区别？ px：长度单位，值是固定的 em：值不是固定的，并且会继承父级元素的字体大小。例如浏览器默认字体的高是16px，如果未经调整的话，1em=16px。12px=0.75em 9.请列举几种隐藏元素的方法？（至少三种） display:none 通过隐藏盒子属性 visibility:hidden 通过隐藏盒子属性 overflow:hidden 溢出隐藏 opacity: 0 ；通过改变元素的透明度使用绝对定位，定位到看不见的地方 10.css3中有哪些新属性？（至少五种） background-size padding-box text-shadow transform： transition 圆角（border-radius:8px;）阴影（box-shadow:10px）对文字加特效（text-shadow）变换（transform） rgb：设置颜色不透明度的操作旋转 transform:rotate(9deg) 缩放 scale(0.85,0.90) 定位 translate(0px,-30px) 倾斜 skew(-9deg,0deg) 线性渐变（gradient）增加了更多的 css 选择器 matrix()函数 border-image：图片边框 border-color：为边框设置多种颜色 background-origin：指定背景图片从哪里开始显示 background-clip：指定背景图片从什么位置开始裁剪 word-wrap：自动换行 11.请写出清除浮动有几种方式，分别是什么. clear：both：父级添加overflow属性（父元素添加overflow:hidden）使用after伪元素清除浮动使用before和after双伪元素清除浮动 12.如何初始化css样式？为什么要初始化css样式？ * { margin: 0; padding: 0} 1.浏览器差异不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异 2.提高编码质量如果不初始化，整个页面做完会很糟糕，重复的css样式很多 13.如何让一段文本中的所有英文单词的首字母大写？ text-transform：capitalize 首字母大写 text-transform ：uppercase 全部都是大写 text-transform ：lowercase 全都是小写 14.rgba()和opacity的透明效果有什么不同？ opacity作用于元素，以及元素内的所有内容元素 .rgba()只作用于元素的颜色或其背景色，元素的子元素不会继承透明效果 15.行内，块状，行内块元素之间如何进行转换？ display:inline；行内样式 display:inline-block；行内块元素 display：block; 块状元素 16.如何设置一个元素，固定到网页的底部 bottom：0； position：fixed； 17.如何使用css将多出范围的字变为... white-space:nowrap; overflow:hidden; text-overflow:ellipsis; css能做到文本超出第二行显示省略号 width:100px; overflow : hidden;/必须结合的属性,当内容溢出元素框时发生的事情/ text-overflow: ellipsis;/可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本/ display: -webkit-box;/必须结合的属性，将对象作为弹性伸缩盒子模型显示/ -webkit-line-clamp: 2;/用来限制在一个块元素显示的文本的行数/ -webkit-box-orient: vertical;/必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式/ 18.如何解决浮动引起的高度坍塌 1.给父元素设置高度 2.设置一个空标签，并且给此标签加上clear:both； 19.margin和padding的区别是什么？ Margin是调盒子与盒子之间的距离，padding调整盒子内部的距离。 20.如何取消a链接点击时的背景颜色 -webkit-tap-highlight-color:transparent; 21.display：none；和visibility：hidden；的区别是什么？ display:none 不占页面空间，visiblity:hidden 占据原先页面空间。、 display:none 引起页面重绘和回流， visiblity:hidden 只引起页面重绘。 22.css3新增的伪类有哪些？ :root 选择文档的根元素，等同于 html 元素 :empty 选择没有子元素的元素 :target 选取当前活动的目标元素 :not(selector) 选择除 selector 元素意外的元素 :enabled 选择可用的表单元素 :disabled 选择禁用的表单元素 :checked 选择被选中的表单元素 :after 在元素内部最前添加内容 :before 在元素内部最后添加内容 :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数 :nth-child(odd) :nth-child(even) :nth-child(3n+1) :first-child :last-child :only-child :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n :nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数 :nth-of-type(odd) :nth-of-type(even) :nth-of-type(3n+1) :first-of-type :last-of-type :only-of-type :selection 选择被用户选取的元素部分 :first-line 选择元素中的第一行 :first-letter 选择元素中的第一个字符 23.请描述一下渐进增强与优雅降级优雅降级：项目开始就构建站点的完整功能，然后针对浏览器测试和修复。对低版本的浏览器就行兼容性的修复。渐进增强：项目开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的 24.请简述你所了解的css中z-index的权重问题 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。后面的数值越大，表示越要优先显示 25.有哪几种方法可以使html元素脱离文本流？ 1:float 2:absolute 3:fixed 26.超链接访问过后hover样式就不出现的问题是什么？如何解决？被点击访问过的超链接样式不再具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active） 27.介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。 28.CSS中哪些属性可以继承？ font：组合字体 font-family：规定元素的字体系列 font-weight：设置字体的粗细 font-size：设置字体的尺寸 font-style：定义字体的风格 text-indent：文本缩进 text-align：文本水平对齐 line-height：行高 color：文本颜色 visibility：元素可见性光标属性：cursor 29.width: auto 和 width: 100% 的区别？ 1、width:100% 并不包含margin-left margin-right的属性值，width直接取其父容器的宽度。如果设置了margin那新的width=100%+margin的值。就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。 2、width:auto包含margin-left/margin-right的属性值。width:auto总是占据整行，如果要设置margin的值那么新width=100%-margin。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。 3、一般width:auto使用的多，因为这样灵活，而width:100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破环布局。 30.什么是FOUC？你如何来避免FOUC 如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中。 31.content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box content-box不包含padding，border-box包含padding 32.如何让一个容器成为弹性容器？ display: flex; 33.弹性布局的布局原理是什么？什么场景下使用弹性布局？该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间。适用于移动端，在Android和ios.上也支持 34.如何让实现一个元素在网页中水平垂直居中？弹性布局用给父元素加上{ display:flex;align-items:center; } 普通元素用：magin:auto （1）知道子元素的宽高 .child{ position:absolute; top:50%; left:50%; margin-left:-50px; margin-top:-50px; } （2）不考虑子元素的宽高 .child{ position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; } （3）不用考虑子元素的宽高，且当子元素没有宽高也能居中（兼容性不是很好） .child{ background-color: tomato; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } （4）给父元素设置display:flex body{ height: 100%; display: flex; justify-content: center; align-items: center; } （5）通过JS实现：获取当前屏幕的宽高，通过DOM添加css样式达到效果（6）父元素有固定宽高同时父元素设置： body{ height: 988px; width: 1000px; display:table-cell; vertical-align: middle; text-align: center; } 子元素需要设置为inline-block .child{ display: inline-block; } 35.请简述弹性布局与传统盒模型布局的区别和优缺点？传统布局，基于盒模型，依赖 display属性、position属性、float属性。它对于那些特殊布局非常不方便，比如垂直居中如果屏幕尺寸发生变化,传统布局的页面样式就会发生变化. 弹性盒子可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理 36.flex是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 37.请解释一下css3的flex(弹性盒布局模型)以及使用场景 Flexbox（弹性盒布局模型） 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。适用场景布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。–Flex 布局，可以简便、完整、响应式地实现各种页面布局。 38.弹性盒子使用什么样的方式布局的？ CSS3 弹性盒（ Flexible Box 或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 39.弹性盒子的布局原理是什么？容器上有主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。其中所有的孩子的布局都会受到这两个轴的影响。 40.flex弹性盒子布局与传统盒模型布局的区别传统盒子模型就是由外边距（margin）、边框（border）、内边距（padding）以及内容（content）组成。传统方式布局目标的实现，属性赋值非常松散。严重依赖于页面结构与内容实际页面大小。当页面属性发生变化的时候，页面的布局取值都要重新调整。不是很能够灵活的引用页面结构的变化。用弹性盒子布局：相关的css属性赋值，比较统一。布局方式灵活，可以应对页面结构元素变化。实现了一种整体控制方法，比较直观，高效。 3/ JavaScript 1.变量命名规则 1.变量命名必须以字母或是下表符号“_”或者“$”为开头 2.变量名长度不能超过255个字符。 3.变量名中不允许使用空格。 4.不使用脚本语言中保留的关键字及保留符号作为变量名。 5.变量名区分大小写。（javascript是区分大小写的语言） 2.js数据类型有几种，判断数据类型的方法七种数据类型：number，null,undefined,string,boolean,object,symbol JS数据类型的判断主要有三种方法：typeof、instanceof、Object.prototype.toString.call() 最常用typeof 3.哪些运算符常用作布尔判断简述运算符的优先级逻辑运算符 ||,&&,!。 . [] () 字段访问、数组下标、函数调用以及表达式分组 4.写出以下常用函数：生成随机数、数字四舍五入、字符串查询子串、字符串分割为数组、检索数组中的元素、数组拼接成字符串、向数组中增删元素 rand()生成随机数， round() 数字四舍五入 substr（）字符串查询子串 split（）字符串分割为数组 results.push()寻找索引 join("")数组拼接成字符串 push（）增加 remove（）删除 toFixed()保留小数点 5.怎样改变元素的内容、属性、样式改变内容：innerText/innerHTML 改变属性：setAttribute 改变样式：.style.color = "red" 6.怎样获取浏览器窗口尺寸网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 7.怎样控制浏览器前进、后退、页面跳转后退前进刷新停止返回主页第一个方法跳转页面;在当前页面进行跳转 location前可加 window 也可不加 location.href = "http://127.0.0.1:8080/news"; 第二个方法跳转页面;打开新的标签页进行跳转 window.open("http://127.0.0.1:8080/news"); 8.遍历数组和对象的常用方法有哪些 for循环 foreach遍历（可以同时取出数组中的值和值对应的下标） for --- of遍历 for --- in遍历（常见用在对象中，遍历对应的key值和value值） map循环 every循环 Each循环 while循环 9.Js数据类型强制转换的方法（写出三种即可）转换函数、强制类型转换、利用js变量弱类型转换。 10.说明全局变量和局部变量的作用范围和生命周期局部变量： 1.局部变量：在函数内部用var声明的变量 2.局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量（函数参数只在函数内起作用，属于局部变量） 3.局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁全局变量：全局变量：变量在函数外定义，网页上的所有脚本和函数都能访问它变量生命周期： 1.变量生命周期在声明变量时开始 2.局部变量在函数执行完毕后被销毁- 3.全部变量在页面关闭后被销毁 11.例举3种强制类型转换和2种隐式类型转换? 强制：to string string number Boolean 隐式：“+”“-”“!!” 12.向数组中添加和删除元素的方法有哪些？至少各写一个 1)push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 2)unshift方法就是将要添加的元素添加到数组头部 3)pop方法是与push对应的，删除最后一个元素，数组长度-1 4)splice方法是修改方法，具有添加和删除功能 5)shift删除数组中第一个元素 13.什么是事件委托事件委托就是利用冒泡的原理，把本应该添加到某个元素上的事件委托给他的父级，从而减少DOM交互达到网页优化。 14.闭包是什么？有什么特性？对页面有什么影响？闭包是将函数内部和函数外部连接起来的桥梁。特性：函数嵌套函数；内部函数可以读取到外部函数的变量和参数；不会被垃圾回收制度回收。使用闭包会占有内存资源，过多的使用闭包会导致内存溢出，影响页面刷新速度。 15.如何创建新元素并添加到页面中先在html页面创建一个空div var div = document.createElement(‘p’); Div.appendChild(p);先创建元素然后插入页面中的空div 16.希望获取到页面中所有的checkbox怎么做 var type = document.getElementByClass(input).type=’checkbox‘ var checkBoxList = []; var len = domList.length; //缓存到局部变量 while (len--) { //使用while的效率会比for循环更高 if (domList[len].type == 'checkbox') { checkBoxList.push(domList[len]); } } console.log(checkBoxList) 17.创建一个数组每一项都是0到50之间的随机数字，请写出关键代码 var randNums = []; for (i = 0; i < 50; i++) { var randNum = Math.floor(Math.random() * i); randNums.push(randNum); } console.log(randNums); 18.函数调用的方式有几种（写出三种即可） 1.函数调用模式声明式: function fuc() {} 表达式式: var func = function() {}; Function: new Function( ‘参数’,…,’函数体’ ); 2.方法调用模式 method 3.构造器模式(构造函数模式, 构造方法模式) 特点：使用 new 关键字引导 19.JS有几种引入方式内部引入。行内引入，外部引入 20.null和undefined的区别是什么？ null是空值typeof返回的是object undefined是未定义的，返回的是undefined 21.js的特点是什么简单性，安全性，动态性，跨平台 22.怎样获取到页面中的 documentgetElementById(‘con’); 23.JavaScript输出数据的方法? 弹窗，console.log（）,document.write,innnerhtml,innertext。 24.什么是JavaScript Js是一种脚本语言，不需要编译。主要用于web，它用于增强html页面；可以嵌入html和代码中。 25.javascript的typeof返回哪些数据类型？（写英文） object，undefined，number，string，boolean 26.请写出添加删除替换插入节点所用的方法？创建元素节点：createElement 创建文本节点：createTextNode; appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入 27.什么是数组，什么是对象，并说出他们的区别对象，就是一种无序的数据集合，由若干个“键值对”构成数组：组也是对象，数组只是将对象里面无序的数据有序化。区别1、数组表示有序数据的集合，而对象表示无序数据的集合。数组的数据没有”名称”，2但是有对应的索引；对象的数据有”名称”（属性名），而对象因为是无序数据的集合，所以不存在索引 28.请写出js中的两种定时器，区别是什么？ setTimeout 和 setInterval。区别setTimeout 只执行一次 setInterval重复执行 29.js两要素是什么选择器和函数 30.split和join的区别 join() 方法用于把数组中的所有元素放入一个字符串 split(a,b)方法：用于把一个字符串分割成字符串数组 31.请写出js的入口函数？并讲解入口函数的作用。 window.onload 作用1 . 等待页面加载完毕2 . 有一个独立的作用域, 32.pop、Push、unshift、shift的作用？ push：在数组的尾部加入一个元素，并返回原有length+1的长度。 unshift：在数组的头部加入一个元素，并返回原有length+1的长度。 pop：删除数组尾部第一个元素，并返回这个元素。 shift：删除数组头部的第一个元素，并返回这个元素。 33.函数分为几种，区别是什么声明函数：使用function声明一个函数，并指定函数名，调用时直接调用该函数名匿名函数：使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，闭包函数：内部函数可以调用外部函数的参数和变量 34.如何判断一个数是不是整数？ If判断用praseInt把这个数转换为整数再与的数 35.innerHTML和innerText的区别是什么？ innerHTML ：innerHTML设置或获取标签所包含的HTML+文本信息 innerText： innerText设置或获取标签所包含的文本信息 36.Break和continue的区别是什么？ “break是结束循环。 continue是结束本次循环并进行下一轮循环 37.this是指向的哪个全局变量，改变this指向的方法有几种（请写出三种）？ call,bind,apply, 38.addEventListener()方法中有几个参数，作用分别是什么? 三个参数 1：要触发的事件 2：要触发得类型 3：ture跟flase ture为捕获阶段 flase为冒泡阶段默认为flase 39.http和https分别是什么？区别是什么？为什么https更安全？ http：是超文本传输协议； https：是超文本传输安全协议；区别： 1．HTTPS是加密传输协议，HTTP是名文传输协议; 2．HTTPS需要用到SSL证书，而HTTP不用; 3．HTTPS比HTTP更加安全，对搜索引擎更友好，利于SEO 4．HTTPS标准端口443，HTTP标准端口80; 5．HTTPS基于传输层，HTTP基于应用层; 6．HTTPS在浏览器显示绿色安全锁，HTTP没有显示; 40.请讲述一下什么是dom？作用是什么？ Dom是文档对象模型；使JS有访问HTML的能力，能够实现对HTML中内容的操作 41.dom中的节点分为几种类型？元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) 42.访问节点和创建节点的方法都有什么？创建： createElement、document.innerHTML、createTextNode、createComment 访问：dcoument.getElementById()、dcoument.getElementsByTagName()、getElementsByClass()和dcoument.queryselector(‘.class，p，#div’); 43.数组是什么？声明数组的方法有几种？数组的三大特性是什么？数组：数组是可以存储着一些任意类型或者相同类型数据的集合。声明数组的方法：3种 var arr = [1,2,3] var arr = new Array() var arr=new Array(3) 数组三大特性：length属性、prototype属性、constructor属性 44.new关键字的作用？ 1.创建一个空对象，并使该空对象继承Func.prototype； 2.执行构造函数，并将this指向刚刚创建的新对象； 3.返回新对象； 45.js绑定事件的方法有几种？在DOM元素中直接绑定；function divFun(){} 在JavaScript代码中绑定；div.Onclick=function{} 绑定事件监听函数。addEventlistener（） 46.你对面向对象编程的理解面向对象是基于万物皆对象这个哲学观点. 把那里一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的. 面向对象具有封装性,继承性,多态性.封装隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而继承和实现接口和运行时的类型绑定机制所产生的多态,使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性. 总之,面向对象的特性提高了大型程序的重用性和可维护性. 47.请讲讲原型链当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype中去找，这个prototype中会有自己的原型，于是就这样一直找下去，这就是原型链 48.创建对象的方法有哪些？ var obj={}; var obj=new Object(); 49.如何阻止事件冒泡和浏览器默认事件？阻止事件冒泡： event.stoppropagation() event.cancelBubble = true; return false; 阻止默认事件： event.preventDefault(); event.returnValue=false; return false; 50.事件流有几种？dom事件流分为几个阶段？事件流有两种：捕获型事件、冒泡型事件 dom事件流分为三种：捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；目标阶段：真正的目标节点正在处理事件的阶段；冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。 51.return的作用是什么? v可以阻止浏览器默认事件 v返回函数值，当函数执行到return,函数后面将不会在执行后面的代码 52.函数声明与函数表达式的区别？以函数声明的方法定义的函数，函数名是必须的，而函数表达式的函数名是可选的。以函数声明的方法定义的函数，函数可以在函数声明之前调用，而函数表达式的函数只能在声明之后调用。以函数声明的方法定义的函数并不是真正的声明，他们仅仅可以出现在全局中或者嵌套在其它函数中。 53.请谈谈cookie、localStorage和SessionStorage的区别和特点 cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效，数据只能存放4KB左右 localStorage：除非被手动清除，否则将会永久保存。 sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除 localStorage和sessionStorage可以保存5MB的信息 54.什么是cookie？cookie的优缺点。优点： 1.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。 2.控制cookie的生命期，使之不会永远有效。就算被盗了偷盗者很可能拿到的是一个过期的cookie。 3.cookie帮助服务端承担了很大的压力，可以利用cookie在和客户端做很多判断而不应经过服务端。 4.极高的扩展性和可用性，使用简单，操作方法方便缺点： 1.cookie数量和长度的限制。每个cookie长度不能超过4KB，否则会被截掉 2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。 3.局限性。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。 55.js本地存储有两种，分别是什么？区别是什么？ localStorage和sessionStorage localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。 sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了。 56.cookie和本地存储的区别是什么？ cookie：不能超过4KB；可设置失效时间，没有设置的话，默认是关闭浏览器后失效，本地存储：有更大的储存，使用更简单 57.什么是json？json的三种值类型是什么？ Json是一种轻量级的数据交互格式 JSON数据类型：字符串、数字、对象（JSON 对象）、数组、布尔值、Null json的三种值类型：数组、对象、组合型 58.请解释一下冒泡排序的原理？ 1.原理：比较两个相邻的元素，将值大的元素交换到右边 2.思路：依次比较相邻的两个数，将比较小的数放在前面，比较大的数放在后面。 59.js常用的几种事件，请分别描述一下键盘事件： onkeydown：键盘的键按下时触发 onkeyup：键盘的键放开时触发 onkeypress：按下或按住键盘键时触发鼠标事件： onclick：点击某个对象时触发 ondblclick：双击某个对象时触发 onmouseover：鼠标移入某个元素时触发 onmouseout：鼠标移出某个元素时触发 onmouseenter：鼠标进入某个元素时触发 onmouseleave：鼠标离开某个元素时触发 onmousedown：鼠标按下时触发 onmouseup：鼠标抬起时触发 onmousemove：鼠标被移动时触发 onwheel：鼠标滚轮滚动时触发 oncontextmenu：点击鼠标右键时触发 60.请将此数组进行排序，arr=[22,1,43,12,75,32]（两种方法）冒泡排序，sort排序 61. IE和标准下有哪些兼容性的写法 1）获取事件对象：var ev = ev || window.event 2）获取页面的可视区的宽度：document.documentElement.clientWidth || document.body.clientWidth 3）获取触发事件的事件源：var target = ev.srcElement||ev.target 62.call和apply的区别 apply：最多只能有两个参数——新this对象和一个数组argArray。 call：它可以接受多个参数，主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针 63. js延迟加载的方式有哪些？ 1、defer属性 2、async属性 3、动态创建DOM方式 4、使用jQuery的getScript()方法 5、使用setTimeout延迟 6、让JS最后加载 64.说说TCP传输的三次握手四次挥手策略握手：第一次握手：“主动方”向“被动方”发送SYN包第二次握手：“被动方”回给“主动方”一个SYN/ACK包表达确认第三次握手：“主动方”再向“被动方”发送SYN包，代表握手结束挥手： 1）Client：我所有东西都说完了 2）Server：我已经全部听到了，但是等等我，我还没说完 3）Server：好了，我已经说完了 4）Client：好的，那我们的通信结束 65.网络传输的七层协议是哪七层？物理层数据链层传输层网络层会话层表示层应用层 4 / Jquery 1.请写出js和jquery的入口函数，并简述他们的不同 window.οnlοad= function () {}原生js $(document).ready(function () {}jquery 1．原生Js和jQuery入口函数加载模式不同。 2．编写多个入口函数的区别。 2.请写出jquery动画的显示和隐藏 show（）显示，hide（）隐藏 3.请写出jquery中绑定事件的四种方式 $(“div”).click(function(){}) $(“div”).bind(click, function(){}) $(“div”).delegate(“p”,“click”,function(){}) $(“div”).on(“click”,“p”,function(){}) 4.什么是jQuery？ jQuery是一个简洁而快速的JavaScript库，可用于简化事件处理，duHTML文档遍历，Ajax交互和动画，以便快速开发网站。 5.jQuery 库中的 $() 是什么在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换。 6.网页上有 5 个元素，如何使用 jQuery来选择它们？ $(“div”)， 7.jQuery 里的 ID 选择器和 class 选择器有何不同？ ID选择器使用ID来选择元素，例： $("#idtest1"). 而 class选择器使用CSS class 来选择元素，例：$(".classtest1")。当只需要选择一个元素时，使用ID选择器，如果需要选择具有相同 CSS class的元素，就要用class 选择器。 8. jQuery 里的 each() 是什么函数？你是如何使用它的？ each() 函数就像是 Javascript里的一个 for，它允许你遍历一个元素集合。 $('div').each(function(selected) { 执行的代码 }); 9.$(this) 和 this 关键字在 jQuery 中有何不同？ 1、表示对象不同：this表示的是javascript提供的当前对象，$(this)表示的是用jquery封装的当前对象。 2、过程不同：this对象可以直接用this.style修改样式，$(this)可以使用jquery提供的方法访问样式。 10.你如何利用jQuery来向一个元素中添加和移除CSS类? 添加：addClass()方法移除：removeClass()方法 11.什么是ajax，为什么使用ajax？ AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它并非一种新的技术，而是以下几种原有技术的结合体。在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。性能会有所降低(一点内容，刷新整个页面！) 用户的操作页面会中断(整个页面被刷新了) Ajax就是能够做到局部刷新！ 12.ajax都有哪些优点和缺点？ ajax的优点： 1、最大的一点是页面无刷新。 2、使用异步方式与服务器通信。 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。 4、基于标准化的并被广泛支持的技术。 Ajax的缺点： 1,ajax干掉了back按钮，即对浏览器后退机制的破坏。 2,安全问题 3,对搜索引擎的支持比较弱。 4,破坏了程序的异常机制。 5,另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。 6,一些手持设备（如手机、PDA等）现在还不能很好的支持ajax. 13.post请求和get请求的区别？ 1. get是从服务器上获取数据，post是向服务器传送数据。 2. GET请求把参数包含在URL中，将请求信息放在URL后面，POST请求通过request body传递参数，将请求信息放置在报文体中。 3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。 4. get安全性非常低，get设计成传输数据，一般都在地址栏里面可以看到，post安全性较高，post传递数据比较隐私，所以在地址栏看不到，如果没有加密，他们安全级别都是一样的，随便一个监听器都可以把所有的数据监听到。 5. GET请求能够被缓存，GET请求会保存在浏览器的浏览记录中，以GET请求的URL能够保存为浏览器书签，post请求不具有这些功能。 6. HTTP的底层是TCP/IP，GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。 7.GET产生一个TCP数据包，对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；POST产生两个TCP数据包，对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据），并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。 14.什么是跨域? 当协议、域名、端口三者之间任意一个不同即为跨域 15.请简述同步和异步的区别. 在计算机领域，同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。 16.HTTP协议中，GET和POST有什么区别？分别适用什么场景？ Post使用方法： 1、请求的结果有持续的副作用，例如数据库内添加新的数据行 2、若使用GET方法，则表单上收集的数据可能让URL过长 3、要传送的数据不是采用7位的ASCII编码 GET使用方法： 1、请求是为了查找资源，HTML表单数据仅用来帮助搜索 2、请求结果无持续性的副作用 3、收集的数据及HTML表单内输入字段名称的总长度不超过1024个字符区别： ①传送方式不同：get通过地址栏传输，post通过报文传输。 ②get产生一个TCP数据包，post产生两个数据包，对于get方式的请求，浏览器会把http header和data一并发送出去，服务器响应200；而对于post浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200。 ③get参数有长度限制，传送数据量不能大于2kb，post传送数据量不受限制（一般会受服务器配置限制或者内存大小）。 ④get安全性非常低，post安全性较高，但是执行效率比post方法好。 ⑤get方式服务器端用Request.QueryString获取变量的值，post方式服务器端用Request.Form获取提交的数据。 ⑥get是从服务器上获取数据，post是向服务器传送数据。 17.将以下jquery选择符翻译成中文描述：$(“#d div.cls input[type=text][name^=text_]”); 找到ID选择器d 的元素从中找到class为cls的DIV，然后找到input的输入框，输入的typt类型等于text,name为text_开头的元素 18.请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？ window.name来跨域（最常用）window.name="父页面的值"; document.domain jsonp 使用HTML5中的window.postMessage方法来跨域传送数据利用WebSocket跨域 19.常见请求头与响应头你了解哪些？ HTTP请求头：请求头用于说明是谁或什么在发送请求、请求源于何处，或者客户端的喜好及能力。服务器可以根据请求头部给出的客户端信息，试着为客户端提供更好的响应。 HTTP响应头：响应头向客户端提供一些额外信息，比如谁在发送响应、响应者的功能，甚至与响应相关的一些特殊指令。这些头部有助于客户端处理响应，并在将来发起更好的请求。 20. 如何设置ajax为同步或异步 Async：ture；异步 Async：flase; 同步 21.请写出ajax框架格式，并简述每个属性的作用 $.ajax({ url:'',//接口地址 type:'POST',//传值方式 data:'',//需要提供的参数 success:function(res){ //成功后需要进行的操作 } }) 22.$(document).ready()方法和window.onload有什么区别？ 1.执行时间不同 window.onload必须等到页面内的所有元素（）加载完毕后才能执行 $(document).ready()是页面DOM结构绘制完毕后就执行，不必等到加载完毕 2.执行次数不同 window.onload不能同时执行多个，如果同一个页面上面有多个window.onload方法（包括关联js文件中），只会执行最后一个window.onload，也就是向上覆盖。 $(document).ready()可以同时执行多个，如果同一个页面上有多个$(document).ready()方法（包括关联js文件中），JQuery能够很好地处理这些情况，每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行 3.简化写法不同 window.onload没有简化写法。 $(document).ready()有两种简化写法：$().ready(function)、$(function) 23.Flash、Ajax各自的优缺点，在使用中如何取舍 Flash ajax对比 Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。 Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM 5 / vue 1.简述框架和函数库的区别库更多是一个封装好的特定的集合，提供给开发者使用；框架则是为解决一类问题而开发的产品；库的使用非常灵活，但没有框架方便，这就是框架和库本质的区别。 2.什么是渐进式框架可以先使用vue的基础功能，然后在此基础上逐渐使用你所需要的其他的功能 3.Vue有哪些优点优点： 1)组件化开发 2)单页面路由 3)双向的数据绑定 4)单向数据流 5)易于结合其他第三库 6)轻巧、高性能 7)渐进式框架 8)是已数据驱动执行的缺点： 1)生态系统不够完善 2)可扩展性稍差 3)吃内存 4)报错不明显 5)不支持IE8 6)入门简单,但是缺少高阶文档 7)不利于seo优化 4.简述mvvm模式 MVVM 是 Model-View-ViewModel 的缩写 Model: 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为 View: 用户操作界面（DOM）。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View ViewModel：业务逻辑层（创建Vue实例），View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View. 总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。 5.Vue常见属性和指令有哪些？（各写出7个以上）属性：el、data、methods、computed、watch、component、props、filters、render 指令：v-text、v-html、v-if、v-else-if、v-else、v-bind:src或@:src、v-model、v-on或@click、v-show、v-for、v-pre、v-clock 6.计算属性和侦听属性有什么区别？怎样选择区别： 1、computed不会主动监听数据变化，但是watch会去主动监听，也就是说watch会主动处理数据变化，computed是依赖数据变化才去计算。 2、computed在依赖数据未发生改变时/或者没有依赖数据，自动缓存到应用中，下次获取时不重新计算。各自使用场景： watch：适合处理一个数据影响多个数据更适合处理数据相互独立的场景，主动监听 computed：适合处理一个数据受多个数据的影响 / 多个数据影响一个数据时。数据相互不独立的场景。 7.Vue的生命周期函数有哪些？创建：beforeCreate、created 挂载：beforeMount、mounted 更新：beforeUpdate、updated 销毁：beforeDestroy、destroyed 8.vue怎样自定义指令？使用 {{nav}} 设置自定义指令 directive 9.简述axios的安装和引入安装插件依赖包 npm install axios --save 在命令提示符中进行安装；在项目中的main.js中引用 import axios from 'axios'; Vue.prototype.$axios = axios; import qs from 'qs'; Vue.prototype.qs = qs; 10.DOM 渲染在哪个周期中就已经完成？ mounted中 11.请说明Vue父组件向子组件传值的方法（代码或文字描述均可）父组件在调用子组件的时候通过添加自定义属性向子组件传值。子组件通过props接收。在父调用子的时候添加自定义属性，如：传一个字符串< zi mydata=”father”>,子组件中使用props接收，简单的值可以用数组接收props:[‘mydata’]。当父组件没有传值的时候也可以有默认值，这时候就得使用对象进行接收 props: { myclass: { default: "默认值" }, text: { default: "" } }, 12.请说出下列axios配置项的含义（五条） method:创建请求时使用的方法 url:请求的服务器地址 header:即将被发送的自定义请求头 data:请求接口所需要传递的参数 params:即将与请求一起发送的 URL 参数 13.V-for中 key 值的作用 key的作用主要是为了高效的更新虚拟DOM！！！下次v-for不用再重新渲染 15.v-show和v-if指令的共同点和不同点? 相同点：v-show和v-if都能控制元素的显示和隐藏。不同点：实现本质方法不同 v-show本质就是通过设置css中的display设置为none，控制隐藏 v-if是动态的向DOM树内添加或者删除DOM元素编译的区别 v-show其实就是在控制css v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件编译的条件 v-show都会编译，初始值为false，只是将display设为none，但它也编译了 v-if初始值为false，就不会编译了如果要频繁切换某节点时，使用v-show，如果不需要频繁切换某节点时，使用v-if 16.子组件向父组件传参的方式？（请写出关键代码）子组件通过 $emit 触发自定义事件（一个是父组件事件的名字，一个是传递的参数），通过回传参数向父组件传值。子：this.$emit(“name”,”param”) 父：@name=fun methods:{fun(data){console.log(data)}} 子组件向父组件传值成功总结一下：子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法，在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。 17.使用axios发送请求的格式是什么？请写出示例代码 get:this.$axios({ url:'请求的接口路径', params: {3 id:要传递的参数 } }).then(function(res) { }).catch（function(err) { }) gost：this.$axios({ url: '要请求的接口地址', method: 'post', data: this.qs.stringify({ id:参数 }) }).then(function(succ) { }).catch(function(err){ }) 18.Vue中引入组件需要哪三步？ 1）使用import 别名 “@/components/组件名”进行组件引用， 2）然后在components 中注册， 3）在html输出别名标签即可 19.在Vue中使用插件的步骤？ 1、安装插件依赖包 #npm install -D open-browser-webpack-plugin 2、引入文件 import Vue from ‘vue’ 3、引入使用的组件 import 组件 from ‘组件包名’ Vue.use(组件) 4、在需要位置使用 20.说一下你对dom驱动和数据驱动的理解 dom驱动：直接通过代码操作页面上的html元素。更改页面内容时需重新获取并赋值数据驱动：通过数据来驱动页面的变化。数据改变时，页面上的内容也会改变在数据驱动的开发模式下，开发者更多的是关心数据怎么流转，数据怎么变，而不需要通过代码去操作元素。开发过程更加简洁，代码更加简洁专一。 21.请说出路由传参和获取参数的三种方式先在index.js中注册组件{name：,path: ,component: } 1）需要配置路由参数xxx/:p1/p2 :to="{path:'/btn/p1/p2'}" param=this.$route.params; 2）需要命名路由 :to="{name:'btn',params:{ }}" param=this.$route.params; 3）需要用query接收 :to="{name:'btn',query:{ }}" param=this.$route.query; 22.子路由的配置方法？子路由：在父路由中配置children:[] 子路由中的path不能加/，否则会成为跟路径当匹配到子路由时会将内容放置在子页面的路由出口，而不是跟路由的出口，匹配到的非子 23.Vue-router的编程式导航有哪些方法？ router.go() router. push()可以返回上一页 router.replace()不能保存，直接替换了 24.导航守卫有哪三种？分别有什么作用全局路由守卫: router.beforeEach router.beforeResolve router.beforeAfter 组件路由守卫: const Foo = { template: '...', beforeRouteEnter(to, from, next) { //再渲染该组件的对应的对应路由被confirm前调用 //不能获取组件实例'this' //因为当前守卫执行前，组件实例化还没有被创建 }, beforeRouteUpdate(to,from,next) { //在当前路由改变，但是该组件被复用时调用。 //举例来说，对于一个带有动态参数的路径 / foo /: id，在 / foo / 1 和 / foo / 2 之间跳转的时候，。由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 //可以访问组件实例 `this` }, beforeRouteLeave() { // 导航离开该组件的对应路由时调用。 //可以访问组件实例 `this` } } 路由独享守卫: const router = new VueRouter({ routes:[{ path:'/foo', component:Foo, beforeEnter: (to,from,next) => { } }] }) 25.简述vuex中的常用属性 vuex：这个东西就相当于一个公共管理的仓库。在这里定义的东西可以在各个页面获取到。常用来解决同级组件之间的传值问题。 1.state：用来存储变量。在别的页面就可以使用this.$store.state.这里定义的变量，获取到这个变量的值。 2.mutations和actions：这两个地方的功能都差不多，是用来执行回调函数从而更改状态的地方。不同的是actions可以进行异步操作。 3.getters: 这个东西就相当于组件中的计算属性。 4.modules: 这个是对处理过后的状态进行分类。它里面可以有很多个组成。而每个组成里面都可以有自己的state,mutations,actions, getters. 26.Vue中如何获取元素？方法一：直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式，或者使用document.querySelector(‘ #tet‘)来获取方法二：使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素 27.单页面应用和多页面应用区别及优缺点单页面：概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。多页面：概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。缺点：页面跳转较慢 28.vue组件中data为什么必须是一个函数？如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。 6 / 小程序 1.简单描述下微信小程序的目录结构？ app.js 小程序逻辑 app.json 小程序公共配置 app.wxss 小程序公共样式表 xxx.js 页面逻辑 xxx.wxml 页面结构 xxx.json 页面配置 xxx.wxss 页面样式表 2.wxml与标准的html的异同？开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关 API。 4.分析下微信小程序的优劣势？微信小程序优势： 1）、使用方便：扫码即用，相较于APP而言不用下载、不用安装，还可以直接添加到手机桌面，为手机节省了电量和大量内存； 2）、流量入口众多：公众号菜单、朋友圈（太阳码）、微信群、支持长按二维码识别、附近的小程序、统一的小程序入口、搜一搜、公众号图文推送、支持发会员卡券（官方的）、支持会员卡直接打开小程序； 3）、潜在用户多：小程序依托在微信9亿多用户群体上，不用担心找不到用户，只需专心做好小程序营销； 4）、助力新零售：小程序是新零售的最好载体，将是未来线下门店的发展趋势，如果企业拥有线下实体门店，小程序是最佳选择，可以为企业更好地切合线上线下的流量； 5）、符合消费场景：小程序可以与消费者在任意场景建立链接，即用即走，符合大多数消费场景。信小程序劣势： 1）、功能不多：微信小程序属于微信，自然也就受限于微信。由于API的限制，小程序的总代码量不能超过2M，这意味着小程序规模有限，这对一些中大型的应用而言是一个致命的缺陷。目前相较于APP而言，微信小程序只是能够实现基本操作，虽然随着开发技术的发展，小程序已经和APP很接近，但差距肯定是存在的； 2）、所有更新需要经过腾讯的审核，才能应用到小程序中，这给应用的更新带来一定的风险，企业希望新加的功能若无法审核通过，则毫无解决办法； 3）、不能用小程序来发推送通知，必须要由用户操作才可以； 4）、小程序无法被分享到微信朋友圈，错失这一流量巨大的入口； 5）、用户留存差，正是因为即用即走的特点，微信小程序对于用户的留存相较于APP、微信公众号都是非常薄弱的，这就要求企业的营销能力非常突出，才能持续增加用户对小程序的粘性。 5.小程序的数据驱动和vue的双向绑定有何异同？小程序中的数据驱动（1）、通过 bindinput 绑定文本框的输入事件（2）、在 data 中声明一个变量 content ，将其动态绑定成文本框的 value 值（3）、在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值（4）、通过 this.setData 将文本框最新的 value 值赋值给动态绑定的value值 content 即可实现数据的双向绑定 vue中的数据双向绑定（1）、首先为文本框绑定 @input 监听文本框的输入事件（2）、为文本框动态绑定 value 属性，其值是在data中定义的变量（3）、在 @input绑定的事件中通过事件参数 event.target.value 可以获取到 input 框中最新的value值（4）、将其重新获取到的 value 赋值给 value值动态绑定的那个变量区别绑定事件不同，以及获取value值的具体方式不同，以及在小程序中设置data中的数据，需要调用 this.setData方法进行设置 6.简述下微信小程序跳转页面wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别？（1）wx.navigateTo（）：用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转，以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。（2）wx.redirectTo（）：当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。（3）wx.switchTab（）：对于跳转到 tab bar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。（4）wx.navigateBack（）：用于关闭当前页面，并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。（5）wx.reLaunch（）： wx.reLaunch()与 wx.redirectTo()的用途基本相同，只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。 7.小程序页面路由传参方法？通过路径传递参数：wx.navigateTo（）、wx.redirectTo（）和标签等参数与路径之间使用?分隔，参数键与参数值用=相连，多个参数用&分隔例：test?id=1 中id为参数键，1 为参数值在目的页面中onLoad（）方法中option对象即为参数对象，可以通过参数键来取出参数值 8.小程序怎样进行本地存储的读写？同步：（1）wx.setStorageSync(); //存储值（2）wx.removeStorageSync(); // 移除指定的值（3）wx.getStorageSync(); // 获取值（4）wx.getStorageInfoSync(); // 获取当前 storage 中所有的 key （5）wx.clearStorageSync(); // 清除所有的key 异步：（1）wx.setStorage(); //存储值（2）wx.removeStorage(); // 移除指定的值（3）wx.getStorage(); // 获取值（4）wx.getStorageInfo(); // 获取当前 storage 中所有的 key （5）wx.clearStorage(); // 清除所有的key 9.请说明小程序的生命周期以及页面生命周期小程序生命周期： onLaunch() onShow() onHide() onError() onPageNotFound() 页面生命周期： onLoad() onReady() onShow() onHide() onUnload() 10.小程序如何刷新当前页面？方法一：this.onLoad() 方法二：this.onReady() 或者 this.onShow() 方法三：定义标志在app.js中，定义一个全局变量Flag，默认值为false，进入其它页面的时候将它置为true,在页面的onShow方法里加一个判断,如果Flag为true的话，先将它的值设置为false，再调用接口获取数据。 11.小程序中获取openid的方法？第一步，获取code 第二步，根据code获取openid和session_key 第三步，检测用户登录状态是否有效 12.小程序中获取用户的手机号需要请求哪些aip？并且解密的参数有哪些？ wx.login获取到code，通过code获取到session_key和openid，之后通过button按钮，获取iv（加密算法的初始向量）和encryptedData（加密的用户信息） onfun(e){ 用户授权后获取到 console.log(e.detail.iv)//加密算法的初始向量 console.log(e.detail.encryptedData)//加密的用户信息通过后台接口传入参数session_key、iv、encryptedData获取到用户解密过的手机号 } 13.在小程序中设置背景图片在开发者工具中可以显示背景图片，但是在手机上背景图片不显示，怎么解决？图片转成Base64格式在线转换：https://www.sojson.com/image2base64.html 14.小程序中页面跳转传参的方式有哪些？微信小程序导航有两种形式：一种是在写在js中进行跳转，另一种是写在wxml页面中进行跳转。 15.bindtap和catchtap的区别？ bindtap事件绑定不会阻止冒泡事件向上冒泡 catchtap事件绑定可以阻止冒泡事件向上冒泡 16.如何实现下拉刷新？在app.json中enablePullDownRefresh:true//开启下拉刷新在页面js中onPullDownRefrsh(){this.onload}/实现下拉刷新 wx.startPullDownRefresh（）开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。 17.请写出小程序的完整开发流程（1）申请小程序账号（2）申请服务器域名（3）下载并安装开发工具（登录注册的账号）（4）小程序框架配置并开发（5）window服务器IIS配置和搭建打包文件上传服务器你可能感兴趣的:(html,css,js,vue,小程序) element实现动态路由+面包屑软件技术NINI vue案例vue.js前端 el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi swagger访问路径 igotyback swagger Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码说私域人工智能小程序摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需 html 中如何使用 uniapp 的部分方法某公司摸鱼前端 htmluni-app前端示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了 C#中使用split分割字符串互联网打工人no1 c# 1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc 四章-32-点要素的聚合彩云飘过本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters. DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业 ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java算法华为javascript 华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代数组去重好奇的猫猫猫整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景 ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端 Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线【JS】执行时长(100分) |思路参考+代码解析（C++） l939035548 JS算法数据结构c++ 题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围 webpack图片等资源的处理 dmengmeng 需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p node.js学习小猿L node.jsnode.js学习vim node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行 docker igotyback eureka云原生 Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息广州会刊小程序开发公司哪家好｜开发多少钱费用｜专业外包服务红匣子实力推荐在选择广州会刊小程序开发公司时，有几个关键因素需要考虑。首先，您应该确定自己的需求和目标，以便找到最合适的开发公司。其次，您需要考虑公司的经验和专业知识。最后，您还应该考虑公司的信誉和口碑。开发-联系电话：13642679953（微信同号）首先，您应该明确自己的需求和目标。会刊小程序是一种用于展示会议信息和日程安排的应用程序。在选择开发公司之前，您应该明确自己的需求，包括功能要求、设计风格和用户体在Ubuntu中编译含有JSON的文件出现报错芝麻糊76 Linuxkill_buglinuxubuntujson 在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示charstr="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\" Xinference如何注册自定义模型玩人工智能的辣条哥人工智能AI大模型Xinference 环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率 vue3中el-table中点击图片放大时，被表格覆盖叫我小鹏呀 vue.jsjavascript前端问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported vue项目element-ui的table表格单元格合并酋长哈哈 vue.jselementuijavascript前端一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:' Vue中table合并单元格用法 weixin_30613343 javascriptViewUI 地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一 Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 errorreactmongodb数据库背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不 Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js 一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n 博客网站制作教程 2401_85194651 javamaven 首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录vue.jsjavascript前端使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 elementUIvue.js前端javascript 一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre 00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫javapython 目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2 详解：如何设计出健壮的秒杀系统？夜空_2cd3 作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：秒杀系统应该考虑的问题二：秒杀系统的设计和技术方案三：算法单链的创建与删除换个号韩国红果果 c算法先创建结构体 struct student { int data; //int tag;//标记这是第几个 struct student next; }; // addone 用于将一个数插入已从小到大排好序的链中 struct student addone(struct student h,int x){ if(h==NULL) //?????? 《大型网站系统与Java中间件实践》第2章读后感白糖_ java中间件断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。看完整章内容， zeus持久层spring事务单元测试 deng520159 javaDAOspringjdbc 今天把zeus事务单元测试放出来,让大家指出他的毛病, 1.ZeusTransactionTest.java 单元测试 package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Test; import Rss 订阅开发周凡杨 htmlxml订阅rss规范 RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。 RSS 分页查询实现 g21121 分页查询在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。按实现形式分前台分页和服务器分页：前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据 spring jms异步消息处理 510888780 jms spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下： highCharts柱状图布衣凌宇 hightCharts柱图第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller @Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController { private UserServi 我的spring学习笔记2-IoC（反向控制依赖注入） aijuans springmvcSpring 教程spring3 教程Spring 入门 IoC（反向控制依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明：如：程序中有 Mysql.calss 、Oracle.class 、SqlSe TLS java简单实现 antlove javasslkeystoretlssecure 1. SSLServer.java package ssl; import java.io.FileInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; import java.security.KeyStore; import Zip解压压缩文件百合不是茶 Zip格式解压Zip流的使用文件解压 ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName)); &n underscore.js 学习（一） bijian1013 JavaScriptunderscore 工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。学 java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon) bijian1013 javajvmjstatd 1.介绍 jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。 jstatd是基于RMI的，所以在运行jstatd的服务【Spring框架三】Spring常用注解之Transactional bit1129 transactional Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义： / * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version 我(程序员)的前进方向 bitray 程序员作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful..... nginx lua开发经验总结 ronin47 使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶 bylijinnan java import java.util.Stack; public class ReverseStackRecursive { /** * Q 66.颠倒栈。 * 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。 * 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。 1. Pop the top element 2. Revers 正确理解Linux内存占用过高的问题 cfyme linux Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上： Mem: 3889836k total, 3341868k used, 547968k free, 286044k buffers Swap: 6127608k total,&nb [JWFD开源工作流]当前流程引擎设计的一个急需解决的问题 comsci 工作流当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。自定义类的equals函数 dai_lm equals 仅作笔记使用 public class VectorQueue { private final Vector<VectorItem> queue; private class VectorItem { private final Object item; private final int quantity; public VectorI Linux下安装R语言 datageek R语言 linux 命令如下：sudo gedit /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke 如何修改mysql 并发数(连接数)最大值 dcj3sjt126com mysql MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了方法一：进入MYSQL安装目录打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可　　方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass 单一功能原则 dcj3sjt126com 面向对象的程序设计软件设计编程原则单一功能原则[ 编辑] SOLID 原则单一功能原则开闭原则 Liskov代换原则接口隔离原则依赖反转原则查论编在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有 POJO、VO和JavaBean区别和联系 fanmingxing VOPOJOjavabean POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被 SpringSecurity3.X--LDAP：AD配置 hanqunfeng SpringSecurity 前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。将配置文件中的如下部分删除：  mac mysql 修改密码 IXHONG mysql $ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在- 设计模式--抽象工厂模式 kerryg 设计模式抽象工厂模式：工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，评"高中女生军训期跳楼” nannan408 首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军 scala如何读取和写入文件内容？ qindongliang1922 javajvmscala 直接看如下代码： package file import java.io.RandomAccessFile import java.nio.charset.Charset import scala.io.Source import scala.reflect.io.{File, Path} /** * Created by qindongliang on 2015/ C语言算法之百元买百鸡 qiufeihu c算法中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？代码如下： #include <stdio.h> int main() { int cock,hen,chick; /定义变量为基本整型/ for(coc Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode wyz2009107220 NameNode 正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 1. Secondary NameNode 原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image 优点：Hadoop较早的版本都自带，按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

前端基础部分习题

1 / HTML

1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别?

2.html5为什么只需要写?你知道多少种Doctype文档类型？

3.行内元素有哪些？块级元素有哪些？ 行内块元素有那些？

...

4.请说出五种html5的特性

5.简述a标签target属性的取值和作用？

6.请列举几个html5新增的标签？

7.如何定义一个单选按钮？

8.标签上的title属性与alt属性的区别是什么？

9.如何处理html5新标签的浏览器兼容问题？

10.分别写出以下几个HTML标签：文字加粗、下标、居中、斜体

11.对WEB标准以及W3C的理解与认识

12.前端页面有哪三层构成，分别是什么，作用是什么？

13.请讲述一下iframe框架的优缺点？

14.form表单实现上传文件必不可少的属性是什么？

15.src和href的区别是什么？

16.input不可编辑，必填属性分别是什么？

17.请写出input常用的13种type类型，并写出每种类型的应用场景

18.请简述一下你对语义化标签的理解

19.如何区分html和html5

20.img的常用属性

21.字体加粗的方法

22.一个网页从开始请求到最终显示的完整历程

2 / CSS

1.css性能优化的方法，至少说出五种

2.Css选择器有几种？选择器的优先级是怎样的。

3.浮动的原理什么？浮动有几种？

4.定位有几种，他们的特点分别是什么？是相对于什么进行定位的？

5.如何设置背景透明？

6.请列举几种布局方式，并列举各自优点

7.css引入方式有几种？link和@import有什么区别？

8.在css样式中使用em和px。各有什么优势，在表现上有什么区别？

9.请列举几种隐藏元素的方法？（至少三种）

10.css3中有哪些新属性？（至少五种）

11.请写出清除浮动有几种方式，分别是什么.

12.如何初始化css样式？为什么要初始化css样式？

13.如何让一段文本中的所有英文单词的首字母大写？

14.rgba()和opacity的透明效果有什么不同？

15.行内，块状，行内块元素之间如何进行转换？

16.如何设置一个元素，固定到网页的底部

17.如何使用css将多出范围的字变为...

18.如何解决浮动引起的高度坍塌

19.margin和padding的区别是什么？

20.如何取消a链接点击时的背景颜色

21.display：none；和visibility：hidden；的区别是什么？

22.css3新增的伪类有哪些？

23.请描述一下渐进增强与优雅降级

24.请简述你所了解的css中z-index的权重问题

25.有哪几种方法可以使html元素脱离文本流？

26.超链接访问过后hover样式就不出现的问题是什么？如何解决？

27.介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？

28.CSS中哪些属性可以继承？

29.width: auto 和 width: 100% 的区别？

30.什么是FOUC？你如何来避免FOUC

31.content-box和border-box，为什么看起来content-box更合理，但还是经常使用border-box

32.如何让一个容器成为弹性容器？

33.弹性布局的布局原理是什么？什么场景下使用弹性布局？

34.如何让实现一个元素在网页中水平垂直居中？

35.请简述弹性布局与传统盒模型布局的区别和优缺点？

36.flex是什么？

37.请解释一下css3的flex(弹性盒布局模型)以及使用场景

38.弹性盒子使用什么样的方式布局的？

39.弹性盒子的布局原理是什么？

40.flex弹性盒子布局与传统盒模型布局的区别

3/ JavaScript

1.变量命名规则

2.js数据类型有几种，判断数据类型的方法

3.哪些运算符常用作布尔判断简述运算符的优先级

4.写出以下常用函数：生成随机数、数字四舍五入、字符串查询子串、字符串分割为数组、检索数组中的元素、数组拼接成字符串、向数组中增删元素

5.怎样改变元素的内容、属性、样式

6.怎样获取浏览器窗口尺寸

7.怎样控制浏览器前进、后退、页面跳转

8.遍历数组和对象的常用方法有哪些

9.Js数据类型强制转换的方法（写出三种即可）

10.说明全局变量和局部变量的作用范围和生命周期

11.例举3种强制类型转换和2种隐式类型转换?

12.向数组中添加和删除元素的方法有哪些？至少各写一个

13.什么是事件委托

3.行内元素有哪些？块级元素有哪些？行内块元素有那些？

17.创建一个数组每一项都是0到50之间的随机数字，请写出关键代码

26.请写出添加删除替换插入节点所用的方法？

6.网页上有 5 个
元素，如何使用 jQuery来选择它们？