近期部分面试题

最新推荐文章于 2023-02-08 16:43:58 发布

@山海*

最新推荐文章于 2023-02-08 16:43:58 发布

阅读量172

点赞数

分类专栏： Vue.js css js 文章标签： vue css

本文链接：https://blog.csdn.net/weixin_47612165/article/details/115181303

版权

js 同时被 3 个专栏收录

21 篇文章 1 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

Vue.js

6 篇文章 0 订阅

订阅专栏

水平且垂直居中的方法

**
方法一：使用定位的方法

        .parent {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            position:relative;
        }
        .child {
            width: 100px;
            height: 100px;
            border: 1px solid violet;
            position:absolute;
            top: 50%;
            left:50%;
            margin-top: -50px;     /*这里是小盒子高的一半*/
            margin-left: -50px;    /*这里是小盒子宽的一半*/
        }

方法二:利用定位及margin:auto实现

        .parent {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            position:relative;
        }
        .child {
            width: 100px;
            height: 100px;
            border: 1px solid violet;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

方法三:使用display:table-cell;

 .parent {
        width: 300px;
        height: 200px;
        border: 1px solid red;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .child {
        width: 100px;
        height: 100px;
        border: 1px solid violet;
        display: inline-block;
    }

方法四:使用伸缩布局display:flex

        .parent {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            display: flex;
            justify-content: center;  /*水平居中*/
            align-items: center;      /*垂直居中*/
        }
        .child {
            width: 100px;
            height: 100px;
            border: 1px solid violet;
        }

px em rem 的区别

**
1、px实际上就是像素，与物理像素有一定的区别，用px设置字体大小，比较精确，但是有缺点，当浏览器页面缩放时，px并不能跟随变大。当前网页的布局就会被打破。
2、em是根据基准来缩放字体的大小。em是相对单位，一般都是以的字体大小作基准的。em是相对于父元素的属性来计算的，这样就会存在一个问题，就是每一层父元素都必须有它的数值。
3、而rem不同，rem是相对于根元素html,而此时我们只需要以rem为基准就可以了

border-box于content-box的区别

标准盒子模型:宽度=内容的宽度(content) border padding margin
即：border-box 的 width 和 height 包括 padding 和 border
低版本IE盒子模型:宽度=内容宽度( cont ent bor der padding) margin
即：content-box 的 width 和 height 不包括 padding 和 border

npm install xx -g -D -S

npm install xx：
不会配置到package.json，你需要自己require，之后运行npm install命令时，不会自动安装xx

npm install xx –D：
即写入devDependencies对象（里面的插件只用于开发环境，不用于生产环境）dev开头——开发环境，记住这个就行

npm install xx –S：
即写入dependencies对象（生产环境）

npm install xx –g：
即全局安装，你可以在任意文件夹使用这个xx，否则会报错”xx不是内部或外部的命令，也不是可运行的程序“

vue常用的修饰符及作用

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.self: 当事件发生在该元素本身而不是子元素的时候会触发；

.capture: 事件侦听，事件发生的时候会调用

.once: 只会触发一次

安装配置 axios

请求后台资源的模块。
在js中用import引进来，然后通过get/post方式，成功在 .then 函数中返回，失败则在 .catch函数中
特性：
1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据

安装 axios

npm i axios

axios 的使用方式有两种

在单独组件中引入，在需要进行网络请求的组件中引入
在 main.js 中引入 axios，引入之后挂载到 vue 原型上，方便所有组件使用
当然，更好的用法是将 axios 的使用封装成一个单独模块，然后在 main.js 中或者需要的模块中引入

因为第一种方式已经使用过，这里介绍第二种方式

main.js 中加入如下代码

// 引入 axios
import axios from 'axios'
// 挂载到 Vue 原型上
Vue.prototype.$http = axios

配置请求根路径
后台接口众多，接口基准地址：http://127.0.0.1:8888/api/private/v1/

也就是说无论请求哪个 API，上边这一串都是一样的

每次请求的 url 都写上这个，会导致 url 地址过长，而且后期变更接口非常不方便

通过下面的代码设置 axios 请求的根路径

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';

综合上面的代码，最终代码变成了

// 引入 axios
import axios from 'axios'
// 设置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 挂载到 Vue 原型上
Vue.prototype.$http = axios

7、GET和POST的区别，何时使用POST?
GET和POST的区别:
GET:一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get只能发送普通格式(URL编码格式)的数据。
POST:一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录post提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。
*

在以下情况中，请使用POST请求:

1.以提交为目的的请求（类似语义化，get表示请求，post表示提交);
⒉.发送私密类数据（用户名、密码)(因为浏览器缓存记录特性);
3.向服务器发送大量数据（数据大小限制区别);
4.上传文件图片时（数据类型区别);

js字符串操作函数?

8、js字符串操作函数?
concat()-将两个或多个字符的文本组合起来，返回一个新的字符串。
indexOf()-返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回-1。charAt()-返回指定位置的字符。
lastlndexOf()-返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回-1。substr()函数–返回从string的startPos位置，长度为length的字符串
slice()-提取字符串的一部分，并返回一个新字符串。
length-返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。toLowerCase()-将整个字符串转成小写字母。
8、js字符串操作函数?
concat()-将两个或多个字符的文本组合起来，返回一个新的字符串。

indexOf()-返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回-1。charAt()-返回指定位置的字符。

lastlndexOf()-返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回-1。substr()函数–返回从string的startPos位置，长度为length的字符串

slice()-提取字符串的一部分，并返回一个新字符串。

replace()-用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。split()-通过将字符串划分成子串，将一个字符串做成一个字符串数组。

length-返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。toLowerCase()-将整个字符串转成小写字母。

toUpperCase()-将整个字符串转成大写字母。
**

let 和 const 命令

let是块级作用域，var是函数作用域

**
let与const的区别
let与const都是只在声明所在的块级作用域内有效。

let声明的变量可以改变，值和类型都可以改变，没有限制。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const a ;//报错,一旦声明变量，应该立即赋值！！

const b = 2;
b = 3//报错，因为定义常量之后不能成重新赋值！！

对于复合类型的变量，如数组和对象，变量名不指向数据，而是指向数据所在的地址。const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变，所以将一个对象声明为常量必须非常小心。

const names = [];
names = [1,2,3] //出错，因为变量names指向的地址不能发生改变，应始终指向[]所在的地址！！！[1,2,3]与[]不是同一个地址

//不会报错，因为names指向的地址不变，改变的只是内部数据
const names = [];
names[0] = 1
names[1] = 2
names[2] = 3

如果想让定义的对象或数组的内部数据也不能够修改和改变，可以使用object.freeze(names)进行冻结，这样为对象添加新属性就不起作用。

除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

用js递归的方式写1和100求和？
递归我们经常用到，vue在实现双向绑定进行数据检验的时候用的也是递归，但我们面试手写一个递归，如果对递归的概念理解不透彻，可能是有些问题。

function add (num1, num2){
  var num = num1+num2 ;
 if(num2+1>100){
 return num;
}e1se{
return add(num , num2+1)
}
var sum =add (1,2);

JQuery面试题

**
1.jquery库中的$（）是什么？


```cpp
$()函数是jQuery()函数的别称。$()函数用于将任何对象包裹成jQuery对象，比如用text()获取文本，用val获取值等等；

this 代表当前元素，它是在javaScript关键词中的一个，表示上下文中当前DOM元素，你不能调用jquery方法，直到它被$()函数包裹，例如$this

2.如何找到所有HTML selcet标签的选中项？

$('[name=selectname] :selected')

3、$(this)和this关键字在jQuery中有何不同?
$(t h i s) 返回一个 j Q u e r y 对象，你可以对它调用多个 j Q u e r y 方法，比如用 t e x t () 获取文本，用 v a l () 获取值等等。而 t h i s 代表当前元素，它是 J a v a S c r i p t 关键词中的一个，表示上下文中的当前 D O M 元素。你不能对它调用 j Q u e r y 方法，直到它被$ s()函数包裹，例如$(this)。
4、jquery怎么移除标签onclick属性?

获得a标签的onclick属性:$(""a").attr("onclick")

删除onclick属性:$(""a").removeAttr(""onclick"")

设置onclick属性:$("a").attr("onclick" ,"test();")

简述 AJAX：

AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

AJAX 基本步骤：

function ajax(url, fnSucc, fnFaild)
{

//1.创建Ajax对象

var oAjax=null;

   if(window.XMLHttpRequest)
   {
      oAjax=new XMLHttpRequest();
   }
   else
   {
      oAjax=new ActiveXObject("Microsoft.XMLHTTP");
   }

//2.连接服务器，准备数据

   oAjax.open('GET', url, true);  //oAjax.open(“方式”,”地址”,是否为异步);

//3.发送请求

  oAjax.send();

//4.接收服务器的返回

  oAjax.onreadystatechange=function ()
   {
      if(oAjax.readyState==4)    //完成
      {
         if(oAjax.status==200)  //成功
         {
            fnSucc(oAjax.responseText);
         }
         else
         {
            if(fnFaild)
               fnFaild(oAjax.status);
         }
      }
   };
}

JQuery有几种选择器？

（1）、基本选择器  #id, class, element,*
（2）、层级选择器：parent>child,ul>li,pre+nextt,prev-siblings
(3)、基本过滤选择器: :first, :last, :not, :even, :odd, :eq, :gt ,:lt
(4)、内容过滤选择器： :contains, :empty,  :has ,:parent
(5)、可见性过滤选择器： :hidde, :visible
(6）、属性过滤选择器： [attribute] , [attribute=value]，[attribute!=value],[attribute^=value],[attribute$=value],
[attribute*=value]
(7)、子元素过滤选择器: :nth-child, :first-child, :last-child, :only-child
（8）表单选择器： :input, :text, :password, :radio , :checkbox, :submint等；
(9)、表单过滤选择器： :enabled, :disabled , :checked, :selected

JQuery中的Delegate()函数有什么作用？
detegate()会在以下两种情况下使用到：
（1）、如果你有一个父元素，需要给其下的子元素添加事件，这是你可以使用delegate()了，代码如下

$("ul").delegate("li","click",function(){ $(this).hide();});

2,当元素在当前页面中不可用时，可以使用delegate()

$(d o c u m e n t) . r e a d y () 方法和 w i n d o w . o n l o a d 有什么区别？（ 1 ）、 w i n d o w . o n l o a d 方法是在页面中所有的元素（包括元素的所有有关联文件）完全加载到浏览器后在执行（ 2 ）、$ (document).ready()方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数

@山海*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
近期部分面试题

**水平且垂直居中的方法**方法一：使用定位的方法 .parent { width: 300px; height: 200px; border: 1px solid red; position:relative; } .child { width: 100px; height: 100px;
复制链接

扫一扫