目录
1,id 选择器?
2, 类选择器
3, 元素选择器
4, 通用选择器
5, 简述什么是浏览器事件流
6, 如何用 CSS 隐藏一个元素?
7, 一行 CSS 实现 padding 上下左右分别为 1,2,3,4px?
8, 前后端分离的基本原理?
9, 如何创建响应式布局?
10, 你使用过那些前端框架?
11, 什么式 Ajax 请求? 使用 jQuery 和 XMLHttpRequest 对象实现一个 Ajax 请求?
12, 如何在前端实现轮询?
13, 如何在前端实现长轮询?
14,vuex 的作用?
15,vue 中的路由拦截器的作用?
16,axios 的作用?
17, 列举 vue 的常见指令?
18, 简述 JSONP 及其原理?
19, 简述 cors 及其原理?
20, 看 JS 代码写结果?
21, 看 JS 代码写结果
22, 看 JS 代码写结果
23, 看 JS 代码写结果
24, 看 JS 代码写结果
1,id 选择器?
- #id
- /*id 选择器 #号 */
- #d1 { /* 将 id 为 d1 的标签内部文本内容改成绿色 */
- color: green;
- }
- 2, 类选择器
- .id
- /* 类选择器 点号 */
- .c1 { /* 让所有具有 c1 类属性值的标签内部文本变成蓝色 */
- color:blue;
- }
3, 元素选择器
- /* 标签选择器 元素选择器 */
- div { /* 将页面上所有的 div 标签内部的文本变成红色 */
- color: red;
- }
4, 通用选择器
- *
- /* 通用选择器 * 号 */
- * { /* 页面上所有的标签统一修改样式 */
- color: aqua;
- }
5, 简述什么是浏览器事件流
事件流: 事件流描述的是从页面中接收事件的顺序.
DOM2 级事件规定的事件流包括三个阶段:
1, 事件捕获阶段
2, 处于目标阶段
3, 事件冒泡阶段
事件捕获阶段(Event Capturing):
按照事件捕获的思想, 在此过程 (click 页面某元素) 中, document 对象会首先接收到 click 事件, 然后事件沿着 dom 树依次向下, 一直传播到实际目标, 即 div 元素. 但在事件流中的捕获阶段, 实际目标 div 元素是不会接收到事件的, 这就意味着没在捕获阶段, 事件从 document 到再到后就停止了.(但 IE9,Safari,Chrome,Firefox 和 Opera9.5 以及更高版本都会在捕获阶段触发事件对象上的事件); 下一个阶段是 "处于目标" 阶段, 于是事件在发生, 并在事件处理中被堪称冒泡阶段的一部分, 最后, 冒泡事件发生, 事件又传播回文档.
冒泡阶段(Event Bubbling):
事件开始时由最具体的元素 (文档中嵌套层次最深的那个节点) 接收, 然后逐级向上传播到较为不具体的节点, 即 document 对象.
DOM2 与 DOM0 区别
DOM2 级事件定义了两个方法, 用于处理指定和删除事件处理程序的操作:
- addEventListener()
- removeEventListener()
所有的 DOM 节点都包含这两个方法, 而且接受三个参数:
1. 要处理的事件名;
2. 作为事件处理程序的函数;
3. 一个 boolean 的值, 如果值为 true, 表示在捕获阶段调用事件处理程序; 如果是 false, 表示在冒泡阶段调用此事件处理程序.
6, 如何用 CSS 隐藏一个元素?
1.opacity
opacity:0 将元素本身及其子元素都置为不可见的, 而元素本身依然占据它自己的位置并对网页的布局起作用, 它会响应用户交互
- .hide {
- opacity:0
- }
- 2 .visibility
visibility:hidden 将元素本身及其子元素都置为不可见的, 而元素本身依然占据它自己的位置并对网页的布局起作用, 它不会响应用户交互. 如果想让子元素显示, 则设置子元素的 visibility:visible;
- .hide {
- visibility:hidden
- }
- 3.display
display:none 使用这个属性, 被隐藏的元素对网页的布局不起作用. 不仅如此, 一旦 display 设为 none 任何对该元素直接的用户交互操作都不可能生效. 此外, 读屏软件也不会读到元素的内容. 这种方式产生的效果就像元素完全不存在. 通过 DOM 依然可以访问到这个元素. 因此你可以通过 DOM 来操作它.
- .hide {
- display:none
- }
- 4.position
position:absolute 将 top 和 left 设置成足够大的负数, 相当于把元素放到可视区域外, 它不会影响布局, 能够让元素保持可操作性, 在读屏软件上可以被识别.
- .hide {
- position:absolute;
- top:-9999px;
- left:-9999px;
- }
总结一下: opacity,visibility 影响布局, 前者不影响交互, 后者影响交互;
display 不影响布局, 影响交互;
position 不影响布局, 不影响交互;
7, 一行 CSS 实现 padding 上下左右分别为 1,2,3,4px?
padding:1px 4px 2px 3px;
8, 前后端分离的基本原理?
前后端分离并不只是开发模式, 而是 web 应用的一种架构模式. 在开发阶段, 前后端工程师约定好数据交互接口, 实现并行开发和测试; 在运行阶段前后端分离模式需要对 Web 应用进行分离部署, 前后端之前使用 HTTP 或者其他协议进行交互请求.
后端追求的是: 三高(高并发, 高可用, 高性能), 安全, 存储, 业务等等.
前端追求的是: 页面表现, 速度流畅, 兼容性, 用户体验等等.
9, 如何创建响应式布局?
创建响应式布局, 意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式. 通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验.
1, 设置 Meta 标签
大多数移动浏览器将 html 页面放大为宽的视图 (viewport) 以符合屏幕分辨率. 你可以使用视图的 meta 标签来进行重置. 下面的视图标签告诉浏览器, 使用设备的宽度作为视图宽度并禁止初始的缩放. 在 < head > 标签里加入这个 meta 标签.
2, 通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心.
它根据条件告诉浏览器如何为指定视图宽度渲染页面. 假如一个终端的分辨率小于 980px, 那么可以这样写:
- @media screen and (max-width: 980px) {
- #head { ... }
- #content { ... }
- #footer { ... }
- }
这里的样式就会覆盖上面已经定义好的样式.
3, 设置多种试图宽度
假如我们要设定兼容 iPad 和 iPhone 的视图, 那么可以这样设置:
- /** iPad **/
- @media only screen and (min-width: 768px) and (max-width: 1024px) {
- }
- /** iPhone **/
- @media only screen and (min-width: 320px) and (max-width: 767px) {
- }
注意问题:
1, 宽度需要使用百分比
- #head {
- width: 100%
- }
- #content {
- width: 50%;
- }
2, 处理图片缩放的方法
简单的解决方法可以使用百分比, 但这样不友好, 会放大或者缩小图片. 那么可以尝试给图片指定的最大宽度为百分比. 假如图片超过了, 就缩小. 假如图片小了, 就原尺寸输出.
img { width: auto; max-width: 100%; }
- 用::before 和::after 伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情, 在 css3 中, 任何元素都可以使用 content 属性了, 这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能: HTML 结构:
著作权归作者所有.
- <img src="image.jpg"
- data-src-600px="image-600px.jpg"
- data-src-800px="image-800px.jpg"
- alt="">
- @media (min-device-width:600px) {
- img[data-src-600px] {
- content: attr(data-src-600px, url);
- }
- }
- @media (min-device-width:800px) {
- img[data-src-800px] {
- content: attr(data-src-800px, url);
- }
- }
- jQuery
- Vue
- """AJAX(Asynchronous Javascript And XML)翻译成中文就是" 异步的 Javascript 和 XML". 即使用 Javascript 语言与服务器进行异步交互, 传输的数据为 XML(当然, 传输的数据不只是 XML).
- AJAX 不是新的编程语言, 而是一种使用现有标准的新方法.
- AJAX 最大的优点是在不重新加载整个页面的情况下, 可以与服务器交换数据并更新部分网页内容.(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
- """
- ########## jQuery. ###########
- $Ajax({
- url:"/test/",
- type:'post',
- data:{'n1':$("#num1").val(),
- 'n2':$("#num2").val()
- },
- success:function (data){
- $("#num3").val(data)
- }
- })
- ######### XMLHttpRequest ########
- function getXhr(){
- if (typeof XMLHttpRequest != 'undefined') {
- return new XMLHttpRequest();
- }
- }
- var xhr = getXhr();
- var stringData = {
- uname: '123',
- password: '123',
- code: ''
- }
- stringData = JSON.stringify(stringData);
- //POST 请求
- xhr.open('POST', '/user/login');
- xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
- xhr.send(stringData)
- xhr.onreadystatechange = function(res) {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- console.log(JSON.parse(xhr.responseText))
- }
- }
- }
- var xhr = new XMLHttpRequest();
- setInterval(function(){
- xhr.open('GET','/user');
- xhr.onreadystatechange = function(){
- };
- xhr.send();
- },1000)
- function Ajax(){
- var xhr = new XMLHttpRequest();
- xhr.open('GET','/user');
- xhr.onreadystatechange = function(){
- Ajax();
- };
- xhr.send();
- }
- v-text # 相当于元素的 innerText 属性, 必须是双标签
- v-HTML # 相当于元素的 innerHTML 属性
- v-show # 是否隐藏元素
- v-if
- v-else
- v-else-if
- v-for
- v-on # 绑定事件: v-on
- <div v-on:click="num = 1"></div>
- // 可以简写成
- <div @click="num = 1"></div>
- v-bind
- v-model
- v-pre
- v-cloak
- v-once
- var name = '张三';
- function func(){
- var name = '李四';
- function inner(){
- console.log(name)
- }
- return inner;
- }
- var ret = func();
- ret()
- function main(){
- if(1==1){
- var name = "张三";
- }
- console.log(name);
- }
- var name = "张三";
- function func(){
- var name = "李四";
- function inner(){
- var name = "王五";
- console.log(name);
- }
- return inner();
- }
- func();
- function func(){
- console.log(name);
- var name = "DSB";
- }
- var name = "张三";
- function Foo(){
- this.name = "李四";
- this.func = function(){
- console.log(this.name);
- }
- }
- var obj = new Foo();
- obj.func();
来源: https://www.cnblogs.com/guyouyin123/p/12286751.html