呕心沥血!!总结2021前端必备面试题

面试题

1.用递归算法实现,数组长度为5且元素的随机数在2-32间不重复

递归就是函数在内部自己调自己

1.这是一道大题目,把考点拆成了4个小项;需要候选人用递归算法实现

a)生成一个长度为5的空数组arr

b)生成一个(2-32)之间的随机数rand

c)要把随机数rand插入到数组arr内,如果数组arr内已存在与rand相同的数组,则重新生成随机数rand 并插入到arr内[需要使用]不能使用for/while等循环

d) 最终输出一个长度为5,且内容不重复的数组arr。

var arr=new Array(5);
    var num=randomNumber();
    var i=0;
    randomArr(arr,num)
    function randomArr(arr,num){
      if(arr.indexOf(num)<0){
        arr[i]=num;
        i++;
      }else{
        num=randomNumber();
      }
      if(i>=arr.length){
        console.log(arr)
        return;
      }else{
        randomArr(arr,num)
      }

    }
    function randomNumber(){
      return Math.floor(Math.random()*32+2)
    }

2.圣杯布局和双飞翼布局的理解和区别

作用:圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
  区别:

圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。

双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局

<body>
<div id="hd">headerdiv>
<div id="bd">
  <div id="middle">middlediv>
  <div id="left">leftdiv>
  <div id="right">rightdiv>
div>
<div id="footer">footerdiv>
body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了,此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后,左栏的位置也相应右移,通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后,右栏的位置也相应左移,通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
style>

双飞翼布局

<body>
<div id="hd">headerdiv> 
  <div id="middle">
    <div id="inside">middlediv>
  div>
  <div id="left">leftdiv>
  <div id="right">rightdiv>
  <div id="footer">footerdiv>
body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin,把内容放到中间栏,其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
<style>
    .box{
      width: 1000px;
      height: 200px;
      background-color: aqua;
      margin: 0 auto;
      position: relative;
    }
    .left{
      width: 200px;
      height: 200px;
      background-color: blue;
      position: absolute;
      top: 0;
      left: 0;
    }
    .right{
      width: 200px;
      height: 200px;
      background-color: blue;
      position: absolute;
      top: 0;
      right: 0;
    }
    .middle{
      height: 200px;
      background-color: red;
    }
    
  style>
  <div class="box">
    <div class="left">div>
    <div class="middle">div>
    <div class="right">div>
  div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lQZZh2D5-1620301392380)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20210120155055085.png)]

3.页面导入样式时,使用link和@import有什么区别?

区别:

1.link是HTML标签 @import是css提供的

2.link引入的样式页面加载时同时加载的 @import引入的样式需等页面加载完成后再加载。

3.link没有兼容性问题,@import不兼容ie5以下。

4.link可以通过js操作DOM动态引入样式表改变样式,而@import不可以

4.css3有哪些新增的特性

边框

  • border-radius 圆角
  • box-shadow 盒子阴影
  • border-image 边框图像

背景

  • background-size背景图片的尺寸
  • background-origin背景图片的定位区域
  • background-clip背景图片的绘制区域

渐变

  • linear-gradient线性渐变
  • radial-gradient径向渐变

文本效果

  • word-break
  • word-wrap
  • text-overflow
  • text-shadow
  • text-wrap
  • text-outline
  • text-justify

转换

  • 2D转换属性
  • transform
  • transform-origin
  • 2D转换方法
  • translate(x,y)
  • translateX(n)
  • translateY(n)
  • rotate(angle)
  • scale(n)
  • scaleX(n)
  • scaleY(n)

3d转换

  • transform
  • transform-orgin
  • transform-style
  • 3D转换方法
  • translate3d(x,y,z)
  • translateX(x)
  • translateY(y)
  • translateZ(Z)
  • scale3d(x,y,z)
  • scaleX(x)
  • scaleY(y)
  • scale(z)
  • rotate3d(x,y,z,angle)
  • rotateX(x)
  • rotateY(y)
  • rotateZ(z)
  • perspective(n)

过渡

transition

动画

  • @keyframes规则
  • animation

弹性盒子(flexbox)

多媒体查询@media

5.H5新增元素

  • section
  • article
  • audio
  • video
  • header
  • footer
  • small

6.去除字符串中最后一个指定的字符

  var a='abcdef';
   
    console.log( a.replace('f',''))

7.在页面上隐藏元素的方法

占位

  • visibility:hidden
  • margin-left:-100%;
  • opacity:0;
  • transform:scale(0);

不占位

  • display:none;
  • width:0;height:0;overflow:hidden;

仅对文本元素生效

  • text-indent:-999px;
  • font-size:0;

8.全局属性有哪些

  • accesskey 设置快捷键
  • class为元素设置类标识
  • contenteditable 指定元素内容是否可编辑
  • contextmenu自定义鼠标右键弹出上下文菜单内容(仅firefox支持)
  • data-* 为元素添加自定义属性
  • dir 设置元素文本方向
  • draggable 设置元素是否可拖拽
  • dropzone 设置元素拖放类型
  • hidden 规定元素仍未或不在相关
  • id 元素id 文档内唯一
  • lang 元素内容的语言
  • spellcheck 是否启动拼写和语法检查
  • style 行内css样式
  • tabindex 设置元素可以获得焦点,通过tab导航
  • title 规定元素有关的额外信息
  • translate 元素和子孙节点内容是否需要本地化

Vue面试题

1.vue的特点是什么

1.国人开发的轻量级框架

2.双向数据绑定,在数据操作方面更为简单

3.视图,数据,结构分离,不需要进行逻辑代码的更改,只需要操作数据就能完成相关操作。

4.组件化方便封装和复用

5.虚拟DOM:dom操作是非常消耗性能的,不在使用原生的DOM 操作节点,极大缓解了DOM操作

2.vue中父子组件是如何传值的?

https://www.cnblogs.com/wzfwaf/p/112801523.html

3.v-show和v-if指令的共同点和不同点

共同点:都能控制元素的显示和隐藏。

不同点:实现本质方法的不同。

v-show本质是通过display设置为none控制隐藏只会编译一次

v-if 是动态的向DOM树内添加或删除DOM元素,若初始值为false 就不会编译了,而且v-if不停的销毁创建比较消耗性能

如果频繁的切换某节点,使用v-show 切换开销比较小 初始开销较大

如果不需要频繁切换节点使用v-if 使用v-if 初始开销较小 切换开销较大

4.说出几种vue当中的指令和它的用法

v-model 双向数据绑定

v-once 只能绑定一次

v-for 循环

v-if 和v-show控制显示和隐藏 (具体区别看上方)

v-on 事件绑定

v-bind 属性绑定

5.vue-loader

vue的一个文件加载器,将template/js/style转换为js模块

用途:js可以ES6、style样式可以将sass、less、css解析出来

6.axios 是什么?怎样使用

axios 是读取后台资源的模块

首先使用 npm install axios --save 安装模块,js中使用import引入

然后请求方法具体看文档 是post 还是get 、put等等

如果成功侯在.then函数中返回否则在.catch中返回

axios.get('地址')
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
如果在VUE中使用
首先引入axios
import Axios from 'axios'
将axios 赋予vue原型中
Vue.prototype.$http = axios
也可以加上默认地址
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
再书写的话 可以这样写
axios.post('users',{数据})
等同于
axios.post('http://127.0.0.1:8888/api/private/v1/users',{数据})

7.单页面应用和多页面应用的区别及优缺点

单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要记载所有的html,js,css。所有的页面内容都包含在这个主页面中。但是写的时候还是回分开写的,然后再交互的时候通过路由程序载入

多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新。

单页面的有点:用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点SPA对服务器压力比较小;前后端页面分离;页面效果会比较炫酷(比如切换页面内容是的专场动画)。

单页面缺点 不利于seo;导航不可用如果一定要导航需自行实现前进后退

8.简述一下vue常用的修饰符和作用

.stop相当于js中的event.stopPropagaiton()防止事件冒泡

.prevent 等同于js中的event.preventDefault()防止执行预设的行为(如果事件可取消,而不停止事件的进一步传播)

.captrue 与冒泡事件相反,事件捕获由外到内

.self只会触发自己范围内的事件,不包括子元素

.once 只会触发一次

9.谈谈你对MVVM开发模式的理解

MVVM分为model、view、viewmodel三个

  • Model 为数据模型、数据和业务逻辑都在model中定义
  • view 代表UI视图和数据展示
  • ViewModel负责监听数据的改变并控制视图的更新与用户交互操作

10.前端如何优化网站性能

1.减少HTTP的请求数量

可以通过精灵图 合并css文件和js文件懒加载方式来请求http求情

CSS Sprites

css精灵

合并css文件和js文件

使用打包工具 webpack 和grunt、gulp等 减少http请求将多个文件打包成一个文件

lazyLoad

俗称懒加载可以控制网页上的内容在一开始无需加载不需要发请求,在用户真正需要的时候立刻加载出内容,这样就控制了网页一次性请求的http数量

2.控制资源文件加载优先级

浏览器在加载HTML内容时,是将HTML内容从上到下解析,解析到link或者script标签时就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将css提前加载不要受js加载影响

3.利用浏览器的缓存

4.减少DOM操作

5.图标使用iconfont 字体图标替换image标签

11.vue中样式绑定语法

1.对象方法v-bind:class="{'orange':isRipe,'green':isNotRipe}"
2.数组方法:v-bind:class="[class1,class2]"
3.行内样式v-bind:style="{color:color,fontSize:fontSize+'px'}"

12.简述vue中每个生命周期具体适合哪些场景(*重要)

beforeCreate:在new一个vue实例后,只有一些默认的声明周期钩子和默认事件,其他的东西都还没创建,在beforeCreate生命周期执行的时候,data和methods中的数据都还没初始化。不能在这个阶段使用data中的数据和methods中的方法

create:data和methods都已经被初始化好了,如果要调用methods中的方法,或者操作data中的数据最早可以在这个阶段中操作。

beforMount:执行到这个钩子的时候,在内存中已经编译好了模板,但是还没有挂载到页面中,此时页面还是旧的

mounted:执行到这个钩子的时候,就标识Vue实例已经初始化完成了。此时组件脱离了创建阶段,进去了运行阶段。如果问哦们想要通过插件操作页面上的DOM节点最早可以在这个阶段中运行

beforeUpdate:当执行这个钩子时,页面中显示的数据还是旧的,data中的数据时更新后的,页面还没有和最新的数据保持同步

updated:页面显示的数据和data中的数据已经保持同步了,都是最新的

beforeDestory:vue实例从运行阶段到了销毁阶段,这个时候所有的data和methods,指令,过滤器都是处于可用状态还没有真正被销毁

destoryed:这个时候所有的data和methods。指令,过滤器都是处于不可用状态。组件已经被销毁

13、vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?

  • 第一步:在components目录新建你的组件文件(indexPage.vue),script一定要export default {}
  • 第二步:在需要用的页面(组件)中导入:import indexPage from ‘@/components/indexPage.vue’
  • 第三步:注入到vue的子组件的components属性上面,components:{indexPage}
  • 第四步:在template视图view中使用,
    例如有indexPage命名,使用的时候则index-page

14.如何避免回调地狱

  • 模块化将回调函数转换为独立函数
  • 使用流程控制库 如async
  • 使用promise
  • 使用async/await

15.使用NPM有哪些好处

1.通过NPM可以安装和管理项目的依赖,并且能够指明依赖的具体版本号

2.对于Node应用开发而言,你可以通过package.json文件来管理项目信息,配置脚本,以及指明依赖的具体版本

3.npm install xx
不会配置到package.json,你需要自己require,之后运行npm install命令时,不会自动安装xx
npm install xx -D
即写入devDependencies对象(里面的插件只用于开发环境,不用于生产环境)
dev开头——开发环境,记住这个就行
npm install xx -S
即写入dependencies对象(生产环境)
4.npm uninstall xx卸载

项目转换时不会把node_modules包发过去 当我们拿到项目是运行

npm install 会自动安装依赖

16.如何消除一个数组里边重复的元素

var arr1=[1,2,2,2,3,3,3,4,5,6];
var arr2=[];
for(var i=0,i

17.写一个function,清除字符串前后的空格(兼容所有浏览器)

function trim(str){
if(str &typeof str==='string'){
		return str.replace(/(^s*)|(s*)$/g,'');
	}
}

18.说一下自己常用的ES6功能

  1. let / const
    es6 以前,都是用 var 关键字来标识,这样有个变量提升的坑。在 es6 中,添加了 let 和 const 两个关键字,let 定义变量,const 定义常量,并且添加了块级作用域。看下用法:
    let:
let a = 1
a = 100

编译结果:

编译结果:

var a = 1;
a = 100;

const:

const b = 2

编译结果:

var b = 2;

再看一个:

const b = 2
b = 200

出错:

SyntaxError: es6-demo.js: "b" is read-only

说 b 是只读,说明 const 定义的是常量。在实际项目中,如有不希望别人改的变量,就可以用 const 定义,也是很方便了。

顺便看一下var的变量提升:

console.log(a); // undefined
var a = 100

在定义之前输出变量 a ,是 undefined,他其实相当于这样子写:

var a 
console.log(a);
a = 100

es6 以前,js 引擎将所有的变量都提到最前面,初始化为 undefined。

es6 以前,js 引擎将所有的变量都提到最前面,初始化为 undefined。

  1. 多行字符串 / 模板变量
    在 es6 之前,字符串的拼接是这样的:
var name = "李四"
var age = 18
var myIntro = ''
myIntro += 'my name is ' + name + ', '
myIntro += 'my age is ' + age

在 es6 中,可以使用模板字符串 `` 和模板变量 ${ } :

const name = "李四"
const age = 18
const myIntro = `my name is ${name}, 
                 my age is ${age}
                `

这样使用起来很方便,避免字符串拼接中出现的不必要的错误,而且更简单简洁,最重要的是人易懂!需要注意的是 ${ } 要和 `` 一起使用不然不会被解析。

  1. 解构赋值
    顾名思义,就是先解构,再赋值!
    比如先定义一个对象和数组:
var obj = {
    a: 1,
    b: 2,
    c: 3
}
var arr = [1,2,3]

在 es6 以前,这样获取属性的值:

在 es6 以前,这样获取属性的值:

obj.a
obj.b
arr[i]

在 es6 中:

在 es6 中:

const {a,c} = obj
const [x,y,z] = arr

很简单就可以获取对象的属性和数组的值,看下编译得结果:

var obj = {
  a: 1,
  b: 2,
  c: 3
};
var a = obj.a,
    c = obj.c;
var arr = [1, 2, 3];
var x = arr[0],
    y = arr[1],
    z = arr[2];

看明白了吗?
就是使用 const {a,c} = obj 这种方式获取对象的属性的方法时,大括号中的变量对象对象的属性,使用 const [x,y,z] = arr 这种方式获取数组的元素,中括号中的变量的索引对应真正数组的索引,即:x 是第一个,对应 arr 数组中的第一个,z 是数组的第三个,对应 arr 数组的第三个。

  1. 块级作用域
    在 es6 以前:
var obj = {
    a: 1,
    b: 2,
    c: 3
}
for (var item in obj) {
    console.log(item);
}
console.log(item);

变量 item 其实是在循环外部,咱们预想是访问不到的,但是实际是可以访问到的,以上写法相当于将 var item 提到最前面,就好理解了,这样子的话变量 item 相当于是在全局都可以访问的,这与我们的预期是相违背的。
再来看看 es6 中:

变量 item 其实是在循环外部,咱们预想是访问不到的,但是实际是可以访问到的,以上写法相当于将 var item 提到最前面,就好理解了,这样子的话变量 item 相当于是在全局都可以访问的,这与我们的预期是相违背的。
再来看看 es6 中:

const obj = {
    a: 1,
    b: 2,
    c: 3
}
for (let key in obj) {
    console.log(key);
}
console.log(key);

因为有块级作用域的概念,所以循环中的 key 变量只在循环中能使用,咱们编译一下:

var obj = {
    a: 1,
    b: 2,
    c: 3
};
for (var _key in obj) {
    console.log(_key);
}
console.log(key);

很明显,循环里面的 key 和 外面的 key 不是同一个东西!

  1. 函数默认参数
    首先来设定一个场景:有一个函数 test ,可能给它传一个参数,也可能传两个,传一个参数时,第二个参数给个默认值,在 es6 以前这样判断:
function test (a, b) {
    if (b == null) {
        b = 0
    }
}

但是在 es6 中写法非常简单:

function test (a, b = 0) {
    // ...
}

咱们编译一下,康康他到底是个啥:

咱们编译一下,康康他到底是个啥:

function test(a) {
  // ...
  var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

}

原来如此!es6的写法也就是在内部做了一个判断:如果参数的个数大于1,并且第二个参数不是undefined,那么就将第二个参数赋值给 b,否则b = 0。这个跟上面的 es6 之前的判断是一致的,这种写法特别简单、易读!

  1. 箭头函数
    用 map 遍历数组
    es6 以前:
var arr = [100, 200, 300]
arr.map(function (item) {
    return item + 1

})

es6 写法:

const arr = [100, 200, 300]
arr.map(item => item + 1)

当函数只有一个参数,并且函数体中只有一行代码时,可以简写成上面的形式,参数有多个,函数体中超过一行这样写:

arr.map((item,index) => {
    console.log(index, item);
    return item + 1
})

编译看一下:

var arr = [100, 200, 300];
arr.map(function (item) {
  return item + 1;
});
arr.map(function (item, index) {
  console.log(index, item);
  return item + 1;
});

好吧,,其实就是把箭头函数转换成普通函数。。
你以为箭头函数到这儿就完了???
this 指向:
运行下面脚本:

function test () {
    console.log('test', this); 
}
test.call({a: 100})

结果:

test {a: 100}

在其中加一个map:

function test () {
    console.log('test', this);
    var arr = [1,2,3]
    arr.map(function (item) {
        console.log(item, this);
    })
}

test.call({a: 100})

结果:

很明显,map 中的 this 是 window 对象。这是 js 的一个大坑,在这个情况下,通过 call 绑定了一个 this 是 { a: 100 } 这个对象,但是 map 中的 this 却是 window 。这是因为 this 的取值是在其调用时决定的,而 map 中的函数相当于调用一个普通函数,而普通函数的作用域在全局,其 this 就指向了 window 。而箭头函数韩浩的解决了这个问题,箭头函数中的 this 与其上一个作用域的 this ,在此处中,map 中的 上一级作用域是 test 函数,而 test 函数的 this 是 { a: 100 } 对象。

function test () {
    console.log('test', this);
    var arr = [1,2,3]
    arr.map( item => {
        console.log(item, this);
    })
}
test.call({a: 100})

结果:

  1. 模块化
    在现在多个人开发同一个项目很常见,每个人负责不同的模块,还有可能会几个人使用同一个模块,在这种情况下,模块化就很重要!其实使用起来也很简单,比如说有模块A、B、C三个 js 文件,各自在其中定义好自己的代码,使用 export 关键字导出自己的东西,别人使用时用 import 关键字引用即可,模块化的处理工具有 webpack、rollup 等。如果你有兴趣,详情可以看看我的上一篇博客ES6 模块化如何使用,开发环境如何打包,欢迎指正。

  2. class
    标题是 class, 但是实际上应该说是构造函数:
    es6以前,js 构造函数:

function MathPlus (x, y) {
    this.x = x
    this.y = y
}
MathPlus.prototype.getAddResult = function () {
    return this.x + this.y
}
var testAdd = new MathPlus(1,2)
console.log(testAdd.getAddResult()); // 3

es6 中 class 写法:

class MathPlus {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    getAddResult() {
        return this.x + this.y
    }
}
const testAddEs6 = new MathPlus(3,4)
console.log(testAddEs6.getAddResult()); // 7

js 定义构造函数和 es6 中的 class 的所实现目的一样的,但是 class 就看起来更加清晰、易懂!在 js 的构造函数中,在其原型上定义方法从而实现,而 class 中直接在 { } 中写函数就可以直接实现这个类中有这个函数了。
本质:
其实 class 的本质其实是一个语法糖:
理解起来就是,二者实现的东西是一样的,只是有个的写法更简洁、易读、易懂。对应一下,其实 class 所实现的东西和 js 的构造函数是一样的,class 的实现原理和 js 构造函数是一样的,都是通过原型实现的。

console.log(typeof MathPlus); // function
console.log( MathPlus.prototype === testAddEs6.__proto__ ); // true
console.log( MathPlus === MathPlus.prototype.constructor ); // true

以上的结果和 js 的构造函数是一致的,MathPlus 这个 class 的本质是一个function ,其实例 testAddEs6 有一个隐式原型 proto ,并且和 MathPlus 的 prototype 三等。
关于继承:
js 实现继承:

function Math (x, y) {
    this.x = x
    this.y = y
}
Math.prototype.getSubResult = function () {
    return this.x - this.y
}

// 通过绑定原型,实现继承

MathPlus.prototype = new Math()

var testAdd = new MathPlus(1,2)
// console.log(testAdd.getAddResult());
console.log(testAdd.getSubResult()); // -1

class 继承:

class 继承:

class Math {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
    getSubResult() {
        return this.x - this.y
    }
}
class MathPlus extends Math {
    constructor(x, y) {
        super(x, y) // 重点!!!自动实现父类的 constructor
        this.x = x
        this.y = y
    }
    getAddResult() {
        return this.x + this.y
    }
}
const testAddEs6 = new MathPlus(3,4)
console.log(testAddEs6.getAddResult()); // 7
console.log(testAddEs6.getSubResult()); // -1
console.log(testAddEs6.__proto__ === MathPlus.prototype); // true
console.log(MathPlus.prototype.__proto__ === Math.prototype); // true

看到结果其实就更能体现 class 实际上是通过原型实现的!

  1. promise
    在项目中涉及到网络请求资源时,就要调用后端提供的接口,常用的jQuery、axios、fetch等,我用的最多的就是 axios ,jQuery 也用过,不过很少。。,说正题!调用接口之后就有回调函数,成功与否都有相应的回调函数,这个是异步的,但是当请求比较复杂时,会出现回调地狱(callback hell),比如说:根据接口1 获取 data1 ,在其中调用接口2 获取data 3…,用 promise 就很简单,至少看起来不会那么复杂。
    首先我们先封装一个根据接口 URL 获取数据的通用方法 getData :
function getData(url) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url,
            success: (data) => {
                resolve(data)
            },
            error: (data) => {
                reject(data)
            }
        })
    })
}

getData 函数中,返回了一个 promise 实例,resolve 表示成功时调用的回调函数,reject 表示失败时调用的回调函数。那么,对于上面比较复杂的情况就可以写成:

getData(url1).then(data1 => {
    console.log(data1);
    return getData(url2)
}).then(data2 => {
    console.log(data2);
    return getData(url3)
}).catch(err => {
    console.log(err);
})

每一次回调 then 中的 data 来自上一层的数据返回。

19.link和@import的区别

两者都是外部引用的CSS的方式,但是存在一定的区别:

1.link是XHTML标签除了能够加载CSS,还可以定义RSS等其他事务;而@import属于CSS范畴,只可以加载CSS

2.link引用css时,在页面载入时同时加载;@import需要页面完全载入以后再加载。

3.link是XHTML标签,无兼容问题;@import则是再CSS2.1提出的,低版本的浏览器不支持

4.link支持使用javascript控制DOM样式改变而@import不支持

20、一次完整的HTTP事务是怎样的一个过程?

基本流程:

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求,浏览器得到html代码

e. 浏览器解析html代码,并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

-----------css

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

标准盒子模型:宽度=内容的宽度(content)+border+padding+margin

低版本IE盒子模型:宽度=内容宽度(content+border+padding)+margin

用来控制元素的盒子模型的解析模式,默认为content-box

content-box:W3C的标准盒子模型,设置元素的height/width 属性指的是content部分的高/宽

border-box:IE传统盒子模型。设置元素的height/width属性指的是border+padding+content部分的高/宽

22.CSS选择器有哪些?哪些可以继承

CSS选择器:id选择器(#id)、类选择器(.class)、标签选择器(div,h1,p)、相邻选择器(h1+p)、子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=“external”])、伪类选择器(a:hover,li:nth-child)

可继承的属性:font-size,font-family,color

不可继承的样式:border,padding,margin,width,height

优先级 :!important》id选择器》类选择器》标签选择器

23.css有哪些新特性?

background-image

background-origin :background-origin 属性规定 background-position 属性相对于什么位置来定位。

属性如下:

描述
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。

background-size background-repeat

word-wrap (对长的不可分割单词换行)

描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

文字阴影 text-shadow :5px 5px 5px #000 (水平阴影,垂直阴影,模糊距离,阴影颜色)

font-face属性:定义自己的字体

圆角(边框半径):border-radius 属性用于创建圆角

边框图片:border-image:url()30 30 round

盒阴影:box-shadow:10px 10px 5px #444

媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

24.px和em的区别

px和em都是长度单位,区别是px的值时固定的 指定多少就是多少,计算比较容易。em的值不是固定的,并且em会继承父级元素的字体大小

浏览器的默认字体是16px 所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em

10px=0.625em

--------------------JS

25.javascript的typeof 返回哪些数据类型

alert(typeof null) //object
alert(typeof undefined) //undefined
alert(typeof NaN) //number
alert(NaN == undefined) false
alert(NaN==NaN) //false
var str='123abc'
alert(typeof str++) // number
alert(str) NaN

26.例举至少三种强制类型转换和2种隐式类型转换?

1.强制类型转换:明确调用内置函数,强制把一种类型的值转换为另一种类型。强制类型转换主要有:boolean、number、string、parseint、parseFloat

2.隐式类型转换:在使用算数运算符时,运算两边的数据类型是可以人一的,如如,一个字符串可以和数字象加。之所以不同的数据类型可以与运算,是因为javascript银钱在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有+、-、==、!

27.javascript的事件流模型有什么?

事件流描述的是从页面中接收事件的顺序。DOM结构是树形结构,当页面中的某一个元素触发了某个一个事件,事件会从最顶层的window对象开始,向下传播到目标元素,途径的祖先节点都会触发对应的事件,如果当前节点的该事件绑定了事件处理函数的花,则会执行该函数当事件达到目标元素并执行绑定函数(如果有绑定的话)事件又会向上传播到window元素,途径的祖先节点都会触发对应的事件

事件流包含三个阶段:

  • 事件捕捉阶段
  • 处于目标阶段
  • 事件冒泡阶段
  • 事件捕捉阶段:事件开始由顶层对象触发,然后逐级向下传播,直到目标的元素;
  • 处于目标阶段:处在绑定事件的元素上;
  • 事件冒泡阶段:事件由具体的元素先接受,然后逐级向上传播,知道不具体的元素

28.BOM对象有哪些,列举window对象?

1.window对象,是JS的最顶层对象,其他的BOM对象都是window对象的属性;

2.document对象,文档对象;

3.location对象,浏览器当前URL信息;

4.navigator对象,浏览器本身信息;

5.screen对象,客户端屏幕信息

6.history对象,浏览器访问历史信息

29.请简述AJAX及基本步骤

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

AJAX基本步骤

  1. 初始化AJax对象
  2. 连接地址准备数据
  3. 发送数据
  4. C
  5. 接收数据完成
//初始化ajax对象 
var xhr =new XMLHttpRequest()
xhr.open('地址',请求方式)
xhr.onreadystatechange=function(){
	if(xhr.readyState==4&&xhr.state==200){
	res=xhr.responseText
	}
}
xhr.send()
如果是post请求的话需要请求头!!!

30、HTTP状态消息 200 302 304 403 404 500 分别表示什么?

  • 200:请求成功,请求所希望的响应头或数据将随此响应返回
  • 302:请求的资源临时从不同的URL响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下,这个响应才可缓存的
  • 304:如果客户端发送了一个待条件的GET请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。
  • 403:服务器已经理解请求,但拒绝执行它
  • 404:请求失败,在服务器未找到该资源
  • 500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器端的源代码出现错误时出现。

31.GET和POST的区别,何时使用POST

GET和POST的区别:

GET:一般用于查询数据,使用URL传递参数,由于浏览器对地址栏长度有限制,所以对使用get方式所发送信息的数量有限制,同时浏览器会记录(历史记录,缓存)中会保留请求地址的信息,包括地址后边的数据。get只能发送普通格式(URL编码格式)的数据

POST:一般用于向服务器发送数据,对所发送的数据的大小理论上没有限制,浏览器会缓存记录地址,但是不会记录post提交的数据。post可以发送纯文本、URL编码格式、二进制格式的字符串、形式多样

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

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

32.js字符串操作函数?

concat()-将两个或多个字符的文本组合起来,返回一个新的字符串

indexOf()-返回字符串中一个字符串第一处出现的索引。如果没有匹配项,返回-1

charAt()返回指定位置的字符

lastindexOf()返回字符串中一个字符串最后一处出现的索引,如果没有匹配项,返回-1

substr()函数–返回从string的startPos位置,长度为length的字符串

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

replace()用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串

split()– 通过将字符串划分成子串,将一个字符串做成一个字符串数组。

length– 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。

toLowerCase()– 将整个字符串转成小写字母。

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

33.数组中常用方法

1.push() 后增

push()方法可以向数组后添加一个新的元素,并返回新数组的长度。

末尾添加,返回长度,改变原数组

var a = [1,2,3]
var b = a.push(4)

console.log(a)  // [1,2,3,4] 
console.log(b)  // 4

2.unshift() 前增

unshift()可以向数组前添加一个或多个元素,并返回新的长度

首部添加,返回长度,改变原数组

var a = [2,3,4]
var b = a.unshift(0,1)

console.log(a)  // [0,1,2,3,4]
console.log(b)  // 5

3.pop() 后删

pop() 用于删除并返回最后一个元素。

尾部删除,返回被删除的元素,改变原数组

var a = [1,2,3]
var b = a.pop()

console.log(a) // [1,2]
console.log(b) // 3

4.shift() 前删

shift() 用于删除并返回首个元素

删除首部元素,返回被删元素,改变原数组

var a = [1,2,3]
var b = a.shift()

console.log(a) // [2,3]
console.log(b) // 1
  1. splice() 修该删除

splice(index,length,增加的元素1,增加的元素2…,增加的元素N) 表示从index开始删除length个元素,并从index开始新增元素1~N,放回被删除的元素组成的数组

对数组进行删除修改,返回被删除的元素组成的数组,改变原数组

var a = [1,2,3]
var b = a.splice(1,1,3,[2,3,4],5)

console.log(a)  // [1,3,[2,3,4],5,3]
console.log(b)  // [2]

6.concat() 拼接

concat() 方法用来合并两个或多个数组

合并两个或多个数组,返回新数组,不会改变原数组

var a = [1,2,3]
var b = [4,5]
var c = a.concat(b)

console.log(a) // [1,2,3]
console.log(b) // [4,5]
console.log(c) // [1,2,3,4,5] 

7.slice() 剪切

slice(startIndex,endIndex) 返回从startIndex开始(包括),到endIndex(不包括)之间的原属组成的数组

返回新数组,不改变原数组

var a = [1,2,3]
var b = a.slice(0,1)
// 不填参数则表示剪切整个数组
var c = a.slice()
console.log(a) // [1,2,3]
console.log(b) // [1]
console.log© // [1,2,3]
console.log(a=c) // false // 注意 a ! c

// 负数表示从后往前数
var d = a.slice(-1,-2)
console.log(d) // [] 从左向右截取,所以说为[]

var e = a.slice(-1)
console.log(e) // [3]
8.join()

join() 方法用来将数组转换为字符串

不改变原数组,返回转换后的字符串

var a = [1,2,3,4,5]

console.log(a.join(’,’)) // 1,2,3,4,5
console.log(a) // [1,2,3,4,5]

9.sort() 排序

按ascii码排序

改变原数组,返回排序后的数组

var a = [‘a’,‘b’,‘d’,‘c’]

console.log(a.sort()) // [‘a’,‘b’,‘c’,‘d’]
console.log(a) // [‘a’,‘b’,‘c’,‘d’]
10.reverse() 颠倒顺序

reverse() 方法用于颠倒数组中元素的顺序。

返回的是颠倒后的数组,会改变原数组。

var a = [1,3,2,7,6]

console.log(a.reverse()) // [6,7,2,3,1]
console.log(a) // [6,7,2,3,1]
11.indexOf()和lastIndexOf()

indexOf(某元素,startIndex) 从startIndex开始,查找某元素在数组中的位置,若存在,则返回第一个位置的下标,否则返回-1

lastIndexOf(某元素,startIndex) 和indexOf()相同,区别在于从尾部向首部查询

不会改变原数组,返回找到的index,否则返回-1

若不使用下标,则一般通过includes()方法代替indexOf()

var a = [1,2,4,3,4,5]

console.log(a.indexOf(4)) // 2
console.log(a.indexOf(4,3)) // 4
12.filter() 过滤

filter() 方法返回数组中满足条件的元素组成的新数组,原数组不变

filter()的参数是一个方法

var a = [1,2,3,4,11]
// 第一个参数为一个方法,有三个参数,current:当前值 index:当前值下标 array:这个数组对象
var b = a.filter(function(current,index,array){
return current < 10
})

console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]
13.map() 格式化数组

map() 方法来根据需求格式化原数组,返回格式化后的数组。原数组不变

var a = [1,2,3,4,5]
// 参数同filter方法
var b = a.map(function(current,index,array){
return current + 1
})

console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]
14.every()

对数组的每一项都运行给定的函数,若每一项都返回 ture,则返回 true

var a = [1,2,3,4,5]

var b = a.every(function(current,index,array){
return current < 6
})

var c = a.every(function(current,index,array){
return current < 3
})
console.log(b) // true
console.log© // false
15.some()

对数组的每一项都运行给定的函数,若存在一项或多项返回 ture,则返回 true

var a = [1,2,3,4,5]

var b = a.some(function(current,index,array){
return current > 4
})

var c = a.some(function(current,index,array){
return current > 5
})
console.log(b) // true
console.log© // false
16.forEach() 数组遍历

遍历整个数组,中途不能中断

var arr = [‘a’,‘b’,‘c’]
var copy = []
arr.forEach(function(item){
copy.push(item)
})
console.log(copy)
ES6新增的方法

  1. find()

找到数组中第一次满足条件的元素,并返回,若找不到则返回undefined。不改变原数组。

和filter()方法的区别在于:filter返回值是所有满足条件的元素组成的数组,

一般在需要使用找到的元素时,用find()方法

var a = [1,2,3,4]
// b在下面需要使用,则一般用find
var b = a.find(function(ele,index,array){
return ele == 1
})

var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4

// 若只需判断元素是否存在
// 若果是简单数组(非对象数组),则一般使用Array.includes(value)方法
// 如果为对象数组,则可以使用Array.some()方法

var a = [1,2,3]
console.log(a.includes(1)) // true

var a = [{“name”: “xiaoming” },{“name”: “xiaohong”}]

console.log(a.some(function(ele){
return ele.name == ‘xiaoming’
})) // true

2.findIndex()方法

findIndex()的作用同indexOf(),返回第一个满足条件的下标,并停止寻找。

区别是findIndex() 的参数为一个回调函数,且一般用于对象数组

var a = [1,2,3,4]

var b = a.findIndex(function(ele,index,array){
return ele === 2
})

var c = a.indexOf(2)

console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log© // 1
3.includes()

includes()方法,返回一个布尔值。 参数是一个value,一般用于简单数组。

对于复杂数组,则可以使用some()方法替代includes()方法

var a = [1,2,3]
console.log(a.includes(1)) // true
4.Array.isArray()方法

用来判断一个元素是否为数组

Array.isArray([]) // true
Array.isArray({}) // false

34.怎样添加、移除、移动、复制、创建、查找节点?

1.创建新节点

createElment()创建于i个具体的元素

2.添加、移除

appendChild()添加

removeChild()移除

3.查找

document.getElementsByTagName()通过标签名称获取的是数组

document.getElementsByName()通过元素的Name属性的值

document.getElementById()通过元素ID,唯一性

document.querySelector(#id)查找元素 唯一性

document.querySelector(’.aa’)查找元素 获取的是数组

35.写出3个使用this的典型应用

1.在html元素事件属性中使用,如:


2.构造函数

function Animal(name,color){
this.name=name;
this.color=color;
}

3.input点击,获取值



4.apply()/call()求数组最值

var number=[5,458,120,-215];
var maxInNumbers=Math.max.apply(this.numbers);
console.log(maxInNumbers)//458
var maxInNumbers=Math.max.call(this,5,458,120,-215);
console.log(maxInNumbers);458

5.比较typeof与instanceof?

相同点:Javascript中type和instanceof常用来判断一个便两个是否为空,或者是什么类型的。

typeof的定义和用法:返回值是一个字符串,用来说明变量的数据类型

细节:

1)type of 一般只能返回如下几个结果:

number,boolean,string,function,object,undefined。

2)、typeof来获取一个变量是否存在,如if(typeof a!=“undefined”){alert(“ok”)},而不要去使用if(a)因为如果a不存在(未声明)则会出错。

3)对于Array,Null等特殊对象使用typeof一律返回object,这正是typeof的局限性。

instanceof定义和用法:instanceof用于判断一个变量是否属于对象的实例。

实例演示:

a instanceof b? alert(“true”):alert(“false”);a是b的实例?真:假

var a=new Array();

alert (a instanceof Array);//true

alert(a instanceof Object)//true

如上,会返回true,同时alert(a instanceof Object) 也会返回true,

这是因为Array 是object 的子类、

function test(){};

var a=new rest();

alert (a instanceof test)//true

细节:

1.如下得到的结果为N这里的instanceof测试的object是指js语法中的object,不是指dom模型对象。

if(window instanceof Object){alert(‘Y’)}else{alert(‘N’)}//N

7.如何理解闭包?

  1. 定义和用法:当一个函数的返回值是另外一个函数,而返回的哪个函数如果调用了其父函数内部的其他变量,如果返回的这个函数在外部被执行,就产生了闭包
  2. 表现形式:使函数外部能够调用函数内部定义的变量
  3. 实例如下

1)根据作用域链的规则,底层作用域没有声明的变量,会向上一级找,找到就返回,没找到就一直找,直到window的变量,没有就返回undefined。这里明显count是函数内部的flag2的那个count。

var count=10;//全局作用域 标记为flag1
function add(){
var count=0;//函数全局作用域  标记为flag2
return function(){
count+=1;//函数的内部作用域
alert(count);
}
}
var s=add()
s();//输出1
s()//输出2

4.变量的作用域

要理解闭包,首先必须理解javascript特殊的变量作用域。

变量的作用域分类:全局和局部变量

特点:

  • 函数内部 可以读取函数外的全局变量,在函数 外部无法读取函数内的局部变量。

5.使用闭包的注意点

1)滥用闭包,会造成内存泄漏;由于闭包会似的函数中的变量和都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄漏。解决方法是,在退出函数之前,将不适用的局部变量全部删除 。

2)会改变父函数内部变量的值,所以,如果你把父函数当作i对象(object)使用,把闭包当作他的公用方法,把内部变量当作它的私有属性,这时一定要小心,不要随便改变父函数内部变量的值。

6.谈谈垃圾回收机制方式及内存管理

回收机制方式

1.定义和用法:垃圾回收机制,执行环境负责管理代码执行过程中使用的内存。

2.原理:垃圾收集器会定期找出哪些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大,所以垃圾回收期会按照固定的时间间隔周期性的执行。

3.实例如下:

function fn1(){
var obj={name:'hanzichi',age};
}
function fn2(){
var obj={name:'hanzichi',age:10}
return obj;
}
var a=fn1()
var b=fn2()

fn1中定义的obj为局部变量,而当调用结束后,除了fn1的环境,那么该快内存会被js引擎中的垃圾回收器自动释放;在fn2被调用的过程中,返回的对象被全局变量b所指向,所以该块内存并不会被释放。

4、垃圾回收策略:标记清除(较为常用)和引用计数。

标记清除:

定义和用法:当变量进入环境时,将变量标记"进入环境",当变量离开环境时,标记为:“离开环境”。某一个时刻,垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量,剩下的就是被视为准备回收的变量。

到目前为止,IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。

引用计数:

定义和用法:引用计数是跟踪记录每个值被引用的次数。

基本原理:就是变量的引用次数,被引用一次则加1,当这个引用计数为0时,被视为准备回收的对象。

内存管理

1、什么时候触发垃圾回收?

垃圾回收器周期性运行,如果分配的内存非常多,那么回收工作也会很艰巨,确定垃圾回收时间间隔就变成了一个值得思考的问题。

IE6的垃圾回收是根据内存分配量运行的,当环境中的变量,对象,字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态,严重影响浏览器性能。

IE7中,垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整,开始回收工作。

2、合理的GC方案:(1)、遍历所有可访问的对象;(2)、回收已不可访问的对象。

3、GC缺陷:(1)、停止响应其他操作。

4、GC优化策略:(1)、分代回收(Generation GC);(2)、增量GC。

9、开发过程中遇到的内存泄露情况,如何解决的?

1、定义和用法:

内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存,几乎不会发生内存泄露。我们知道,浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有bug,会产生内存泄露。

2、内存泄露的几种情况:

(1)、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。

实例如下:

<div id="myDiv">

<input type="button" value="Click me" id="myBtn">

</div>

<script type="text/javascript">

var btn = document.getElementById("myBtn");

btn.onclick = function(){

document.getElementById("myDiv").innerHTML = "Processing...";

}

</script>

解决方法如下:

<div id="myDiv">

<input type="button" value="Click me" id="myBtn">

</div>

<script type="text/javascript">

var btn = document.getElementById("myBtn");

btn.onclick = function(){

btn.onclick = null;

document.getElementById("myDiv").innerHTML = "Processing...";

}

</script>

(2)、由于是函数内定义函数,并且内部函数–事件回调的引用外暴了,形成了闭包。闭包可以维持函数内局部变量,使其得不到释放。

实例如下:

function bindEvent(){

var obj=document.createElement("XXX");

obj.onclick=function(){

//Even if it's a empty function

}

}

解决方法如下:

function bindEvent(){

var obj=document.createElement("XXX");

obj.onclick=function(){

//Even if it's a empty function

}

obj=null;

}

36、js中call和apply的区别?

https://blog.csdn.net/weixin_42321292/article/details/82352997

37、闭包是什么,有什么特性,对页面有什么影响?

闭包就是能够读取其他函数内部变量的函数,似的函数不呗GC回收,如果过多使用闭包容易导致内存泄漏

https://blog.csdn.net/dovlie/article/details/76339244

------------------JQuery面试题

38、jQuery库中的$()是什么?

( ) 函 数 是 J q u e r y ( ) 函 数 的 别 称 。 ()函数是Jquery()函数的别称。 ()Jquery()()函数用于将任何对象包裹成Jquery对象、接着你就被允许调用定义在jquery对象上的多个不同方法。你可以将一个选择器字符串传入$()函数,它会返回一个包含所有匹配的DOM元素数组的jquery对象

39、如何找到所有的HTMLselect标签选中项

$(’[‘name=nselect’]:selected’).text() .val()

$('select[name=qqq]').change(function(){
	console.log($('select[name=qqq] option:selected').val())
})

40.jquery中的$(this)和this有什么不同?

41.jquery怎么移除标签属性

添加标签属性:使用attr(name,value)

演示:

<body>
<button>点我</button>
</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
$('button').attr('onclick','active()')
function active(){
	console.log(1)
}
</script>

移除标签属性:removeAttr(name)

演示:

<body>
  <button onclick="active()">点我</button>
</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
  $('button').removeAttr('onclick')
  function active() {
    console.log(1)
  }
  // 不会触发,该属性已被移除
</script>

42.jquery操作样式

1.class操作样式,控制添加或删除或切换类名

  • addClass添加类名
  • removeClass删除类名
  • toggleClass切换类名

2.操作style样式

css()

添加多个css样式时参数为对象,css属性和属性值以对象的形式写入。

css({color:red,font-size:20px})

添加单个css样式,第一个参数为css属性名,第二个参数为属性值

css(color,red)

43.jquey选择器

  1. 基本选择器:#id,class,element.*

  2. 层次选择器:parent>child,parent>next,prev~siblings

  3. 基本过滤选择器::first,:last,:even,:odd,:eq,:gt,:lt

  4. 内容过滤器::contains,:empty,:has,:parent

  5. 可见性过滤器::hidden,:visible

  6. 属性过滤器选择器:[attribute],[attribute=value],[attribute^=value],[attribute$=value] , [attribute*=value],[attribute!=value]

    例子:$(“input[name=accept]”).attr(“checked”, “true”); //将name为accept的复选框选中

  7. 子元素过滤器选择器::nth-child,:first-child,:last-child,:only-child

  8. 表单选择器::input,:text,:password,:radio,:checkbox,:submit

  9. 表单过滤选择器::enabled,:disabled,:checked,:selected

44.jquery中的Delegate()函数有什么作用?

他是一个jquery用来事件委托的一个方法,如果一个元素是动态生成的或者是绑定事件的时候他还没有生成,就可以使用事件委托,Delegate()函数进行事件委托

<body>
  <div style="background-color: red;">
    <ul>
 		<li>1</li>
    </ul>
  </div>
</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
  $('div').delegate('li', 'click', function (event) {
    console.log($(this).text())
  })
  $('li').click(function () {
    console.log(1) // 后面的li标签是新添加的,在此时的事件中是没有绑定上的,所以执行delegate事件委托绑定的事件
  })
  var event = "
  • 12
  • "
    $('ul').append(event) </script>

    给后来添加的动态的元素添加委托事件

    -------------------微信小程序

    45.简单描述一下微信小程序的相关文件类型

    • wxml模板文件,是框架设计的一套标签语言,构建小程序页面的

    • wxss是一套样式语言,用于描述wxml的组件样式

    • js脚本逻辑文件,逻辑处理网络请求

    • json配置文件,小程序设置,如页面主页,页面标题,及tabBar的配置

    • app.json:微信小程序的全局配置:|

      1. pages:[所有页面路径]
      2. 网络设置
      3. 界面表现
      4. window:{导航颜色,标题颜色,背景颜色}
    • app.js监听并处理小程序的生命周期函数,声明全局变量

    • app.wxss:用于配置全局样式

    46.wxml与标准的html的异同?

    • 都是用来描述页面的结构的
    • 都是使用标签属性构成
    • 标签名不一样,微信小程序标签更少,单一标签更多
    • 多了一些WX:if这样的属性以及{{}}这样的表达式
    • WXML仅能在微信小程序开发者工具中预览,而HTML可以在浏览器内预览

    47.wxss和css的异同?

    • 都是用来描述页面样式的
    • WXSS具有CSS大部分的特征,也做了一些扩充和修改
    • wxss新增了尺寸单位,wxss在底层支持新的尺寸单位,rpx
    • wxss仅支持部分css选择器
    • wxss不支持window和dom文档流

    48.小程序和VUE写法的区别

    1. 遍历的时候,小程序使用WX:for=“{{lists}}”,vue使用v-for=“item in lists”
    2. 循环遍历的每条数据,小程序默认使用item代替,而vue则可以自定义
    3. 调用data中的值,vue直接使用this指向data中的某个属性就能获取,小程序需要this指向data在指向属性才能获取
    4. 设置data中的属性时vue直接使用this指向某个属性就能直接进行赋值,小程序需要this.setdata({})才能设置

    49.小程序页面之间有哪些传递数据的方法?

    1. 使用全局变量实现数据传递
    2. 页面跳转或重定向时,使用URL带参数传递数据
    3. 使用组件模板template传递参数
    4. 使用缓存传递数据

    50.请谈谈小程序的生命周期?

    • onLoad()页面加载时触发,只会调用一次,可获取当前用户路径中的参数
    • onShow()页面显示/切入前台时触发,一般用来发送数据请求
    • onReady()页面初次渲染完成时触发,只会调用一次,代表页面也可以和视图层进行交互
    • onHide()页面隐藏或者切入后台时,如底部tab切换到其他页面或者小程序切入后台等
    • onUnload()页面卸载时触发,如redireTo或navigateBack到其他页面时

    你可能感兴趣的:(es6,jquery,javascript,html5,vue.js)