Web前端面试题(持续更新中)

一、闭包是什么

JS中内层函数可以访问外层函数的变量,使内部私有变量不受外界干扰,起到保护和保存的作用,我们把这个特性称作闭包。

好处:

1.隔离作用域,保护私有变量;有了闭包才有局部变量,要不然都是全局变量了。

2.让我们可以使用回调,操作其他函数内部;

3.变量长期驻扎在内存中,不会被内存回收机制回收,即延长变量的生命周期;

 坏处:

内层函数引用外层函数变量,内层函数占用内存。如果不释放内存,过多时,易引起内存泄露。

引用场景:

for循环中的保留i的操作 / 防抖和节流

二、内存泄露、垃圾回收机制 

内存泄露:

        是指不再用的内存没有被及时释放出来,导致该段内存无法被使用就是内存泄漏,内存泄漏指我们无法在通过js访问某个对象,而垃圾回收机制却认为该对象还在被引用,因此垃圾回收机制不会释放该对象,导致该块内存永远无法释放,积少成多,系统会越来越卡以至于崩溃

垃圾回收机制:

        就是垃圾收集器按照固定的时间间隔,周期性地寻找那些不再使用的变量,然后将其清除或释放内存。(标记清除/引用计数)

三、浅拷贝与深拷贝 

        浅拷贝:将原对象或原数组的引用直接赋给新对象,新数组,新对象只是对原对象的一个引用,而不复制对象本身,新旧对象还是共享同一块内存。(拓展运算符。。。)

        深拷贝:开辟一个新的栈,两个对象的属性完全相同,但是对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

四、route和router的区别详解 

 router是用来操作路由的

 route是用来获取路由信息的。 $route.path $route.params route.query等 

五、如何改变this指向(call、apply与bind区别) 

    call、bind、apply 都是 JavaScript 中用于改变函数执行上下文(即 this 指向)的方法。

    传参 call、bind可以传递无数个参数,apply只有两个参数,第二个参数为数组返回。

    call和apply方法是直接调用函数并改变函数上下文,而bind方法则是返回一个新函数,稍后调用时绑定指定的上下文。

六、箭头函数和普通函数的区别 

箭头函数是普通函数的简写,但是它不具备很多普通函数的特性this指向问题,箭头函数的this指向它定义时所在的对象,而不是调用时所在的对象。

没有arguments对象,不能使用arguments。
不会进行函数提升,不能new

七、浏览器存储,他们的区别? 

localStorage:永久保存,以键值对保存,存储空间5M

sessionStorage:关闭页签/浏览器时清空

cookie:随着请求发送,通过设置过期时间删除

session:保存在服务端

(localStorage/sessionStorage是window的属性,cookie是document的方法)

八、常用的数组方法有哪些? 

改变原数组:push、pop、shift、unshift、sort、splice、reverse

不改变原属组:concat、join、map、forEach、filter、slice

(slice切片的意思,根据传入的起始和终止下标,获取该范围数组。splice可根据传入参数个数不同实现删除、插入操作,直接操作原数组。第1个参数为起始下标,第2个为删除个数,第3个为要增加的数据)

九、Vue的生命周期 

beforeCreate:会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。此时不能获得DOM节点

created:在这个阶段vue实例已经创建,以下内容已经设置完成:响应式数据、计算属性、方法和侦听器。然而,此时挂载阶段还未开始,因此 $el 属性仍不可用。仍然不能获取DOM元素。

beforeMount:在组件内容被渲染到页面之前自动执行的函数,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。

mounted:在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已被渲染出来。

beforeUpdate:数据变化的时候自动执行的函数,此时变化后的数据还未渲染到页面之上。.

updated:数据变化之后自动执行的函数,此时变化后的数据已经渲染到页面之上

beforeDestroy:当 Vue 应用被销毁时,自动执行的函数。

destroyed当 Vue 应用被销毁后,且 dom 完全销毁之后,自动执行的函数。

十、Vue的Key的作用 

key主要用在虚拟Dom算法中,每个虚拟节点VNode有一个唯一标识Key,通过对比新旧节点的key来判断节点是否改变,用key就可以大大提高渲染效率 

十一、diff算法 

diff算法是指对新旧虚拟节点进行对比,并返回一个patch对象,用来存储两个节点不同的地方,最后利用patch记录的消息局部更新DOM 

十二、虚拟DOM的优缺点 

优点:减少了dom操作,减少了回流与重绘 

缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢

十三、回流和重绘 

render树中一部分或全部元素需要改变尺寸、布局、或着需要隐藏而需要重新构建,这个过程叫做回流,回流必将引起重绘 

十四、为什么避免 v-if 和 v-for 用在一起 

 Vue2 中,v-for 比 v-if 具有更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中,带来性能方面的浪费。 

Vue3中解决了这个问题,可以一起使用

十五、什么是Promise 

Promise异步编程的一种解决方案。Promise是一个构造函数,接收一个函数作为参数,返回一个 Promise 实例。

Promise对象有三种状态,他们分别是 pending(等待中) resolved(已完成)rejected(拒绝)

Promise.all哪怕一个请求失败了也能得到其余正确的请求结果的解决方案

promise 的then会返回一个新的 promise 对象,能保证 then 方 可以进行链式调用

十六、async、await 

Async 和 await 是一种同步的写法,但还是异步的操作,两个必须配合一起使用 

十七、宏任务和微任务有哪些?执行顺序 

宏任务:script,setTimeout,setInterval。

微任务:Promise,process.nextTick。

微任务会优先于宏任务执行。这意味着在当前任务执行结束后,所有微任务都会被立即执行,而宏任务只有在所有微任务执行完毕后才会执行。

十八、var  let  const的区别 

var声明的变量存在变量提升,即变量可以在声明之前调用,var允许重复声明变量var不存在块级作用域

let和const不存在变量提升,即它们所声明的变量一定要在声明后使用,否则报错

let和const存在块级作用域

let和const在同一作用域不允许重复声明变量

十九、从浏览器输入url后都经历了什么 

先进行DNS域名解析,先查看本地hosts文件,查看有没有当前域名对应的ip地址,若有直接发起请求,没有的话会在本地域名服务器去查找,没找到的话就去根服务器查找最后查找到对应的ip地址后把对应规则保存到本地的hosts文件中。

进行http请求,三次握手四次挥手建立断开连接。服务器处理,可能返回304也可能返回200

客户端自上而下执行代码渲染页面

二十、HTTP与HTTPS有什么区别 

HTTP协议传输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常不安全,为了保证这些隐私数据能加密传输,于是网景公司设计了SSL(Secure Sockets Layer)协议用于对HTTP协议传输的数据进行加密,从而就诞生了HTTPS。 

二十一、如何解决前端跨域问题 

在config.js文件的serve下配置代理

二十二、Webpack是什么 

Webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。

二十三、Webpack的基本功能? 

代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等

代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过

文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等

模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件

自动刷新:监听本地源代码的变化,自动构建,刷新浏览器

自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

二十四、冒泡算法排序 

// 冒泡排序

1.比较相邻的两个元素,如果前一个比后一个大,则交换位置。

2.第一轮的时候最后一个元素应该是最大的一个。

3.按照步骤一的方法进行相邻两个元素的比较,这个时候由于最后一个元素已经是最大的了,所以最后一个元素不用比较。

    function bubbleSort(arr) {

      for (var i = 0; i < arr.length; i++) {

        for (var j = 0; j < arr.length; j++) {

          if (arr[j] > arr[j + 1]) {

            var temp = arr[j]

            arr[j] = arr[j + 1]

            arr[j + 1] = temp

          }

        }

      }

    }

    var Arr = [3, 5, 74, 64, 64, 3, 1, 8, 3, 49, 16, 161, 9, 4]

    console.log(Arr, "before");

    bubbleSort(Arr)

    console.log(Arr, "after")

二十五、快速排序 

    快速排序是对冒泡排序的一种改进,第一趟排序时将数据分成两部分,一部分比另一部分的所有数据都要小。

    然后递归调用,在两边都实行快速排序。  

    function quickSort(arr) {

      if (arr.length <= 1) {

        return arr

      }

      var middle = Math.floor(arr.length / 2)

      var middleData = arr.splice(middle, 1)[0]

      var left = []

      var right = []

      

      for (var i = 0; i < arr.length; i++) {

        if (arr[i] < middleData) {

          left.push(arr[i])

        } else {

          right.push(arr[i])

        }

      }

      return quickSort(left).concat([middleData], quickSort(right))

    }

    var Arr = [3, 5, 74, 64, 64, 3, 1, 8, 3, 49, 16, 161, 9, 4]

    console.log(Arr, "before");

    var newArr = quickSort(Arr)

    console.log(newArr, "after");

二十六 、什么是VueX

        1.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

        2.vue2一般使用的是VueX,Vue3使用的是Pinia。

VueX详情:

1)state - 存放store数据,是响应式的
2)mutations方法 - 修改数据
3)actions异步操作 -提交mutations,不直接修改状态
4)getters - 获取store的计算属性

二十七、vue2与vue3的区别 

1.webpack和vite

   ---vue2使用的是webpack形式去构建项目 

   ---vue3使用vite构建项目

2.main.js文件

   ---vue2中我们可以使用pototype(原型)的形式去进行操作,引入的是构造函数
   ---vue3中需要使用结构的形式进行操作,引入的是工厂函数
   ---vue3中app组件中可以没有根标签

3.指令与插槽

   ---vue2中使用slot可以直接使用slot,而vue3中必须使用v-slot的形式
   ---v-for与v-if在vue2中优先级高的是v-for指令,而且不建议一起使用
   ---vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句,不会相互冲突

4.ref与reactive

   1)ref定义的是基本数据类型,reactive定义对象或数组数据类型
   2)ref通过Object.defineProperty()的get和set实现数据劫持,reactive通过Proxy实现数据劫持
   3)ref操作数据.value,reactive操作数据不需要.value

5.vue2的响应式原理

   用Object.defineProperty的getter和setter进行数据劫持,从而实现响应式

6.computed和watch与watchEffct区别

computed

   ---computed属性是用来声明计算属性的。如果你希望修改一个计算属性的值并使其生效,你需要通过修改计算属性所依赖的数据来触发重新计算。只有当计算属性依赖的数据发生变化时,计算属性才会重新计算并更新值。 

    data(){
        return {
            canRead:true
        }
    },
    computed:{
        readOnly:{
            get(){
                return this.canRead
            },
            set(val){
                //设置了set方法,可直接修改计算属性(生效)
                //在这里修改依赖数据
                this.canRead = val
            }
        }
    },
    methods:{
        changeRead(){
            //直接修改计算属性(不生效)
            this.readOnly = false
        }
    }

watch

   ---vue2中watch通过对象的形式去直接监听

   ---vue3监听多个属性采用数组形式,深度监听需要单个进行监听

watchEffect

watchEffect是vue3中新增的函数,看字面意思就知道他也有watch,实际上他跟watch功能一样

优势:

   - 默认开启 immediate:true

   - 需要用哪个就监听哪个

   - 值发生改变就调用一次,且不需要返回值

二十八、Vue2 与 Vue3 如何创建响应式数据
  vue2     

        ---在 Vue2 中,我们只需要把数据放入 data 函数,Vue2 会遍历 data 中的所有属性,使用 Object.defineProperty 把每个 property 全部转为 getter/setter,getter 用来收集依赖,setter 用来执行 notify,发布更新事件。Vue2 对每个属性创建一个 Dep 对象,作为订阅发布模式的中间机构来收集依赖。Vue 追踪这些依赖,在其被访问和修改时通知变更。

        ---Vue2 中每个组件实例都对应一个 Watcher 实例,调用组件的 render 函数,若没有 render 函数,会执行模板编译过程,生成 render 函数。

        ---render 函数执行时,会访问定义在模板里的各属性,会触发之前定义的 getter,收集依赖,将当前的 Watcher 注册到 dep 当中。之后当依赖项的 setter 触发时,会通知 Watcher,从而使它关联的组件重新渲染。

vue3

         ---ref 的作用就是将一个原始数据类型转换成一个响应式数据,原始数据类型共有 7 个,分别是:String、Number、BigInt、Boolean、Symbol、Undefined、Null

​        ---当 ref 作为渲染上下文 (从 setup() 中返回的对象) 上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加(如以上代码中在 template 中可以直接使用 title,在 setup 函数中使用 title.value 来修改其值)

        ---reactive 的作用就是将一个对象转换成一个响应式对象

        ---toRefs 的作用是将一个响应式对象转化为一个普通对象,把其中每一个属性转化为响应式数据

二十九、为什么需要 toRefs ? 

·        ---reactive 转化的响应式对象在销毁或展开(如解构赋值)的时候,响应式特征就会消失。为了在展开的同时保持其属性的响应式特征,我们可以使用 toRefs 。

三十、es5和es6的区别 

1)块级作用域:ES5中是没有块级作用域的,ES6中新增let和const,两个都有块级作用域,并且var有变量提升
2)箭头函数:ES6中的函数定义不再使用关键字function(),而是利用了()=>来进行定义
3)模板字符串:模板字符串是增强版的字符串,用反引号(`)标识,可以当作普通字符串使用,也可以用来定义多行字符串
4)新增for of循环:for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象,以及字符串
5)新增set数据结构:Set数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数
6)新增… 展开运算符:可以将数组或对象里面的值展开;还可以将多个值收集为一个变量
7)新增class :类的继承ES6中不再像ES5一样使用原型链实现继承,而是引入Class这个概念

8)新增async、await:使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成
9)新增promise:Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、强大
10)Proxy代理:使用代理(Proxy)监听对象的操作,然后可以做一些相应事情

 三十一、Set、Map的区别? 

应用场景Set用于数据重组,Map用于数据储存。

Set: 
 (1)成员不能重复
 (2)只有键值没有键名,类似数组
 (3)可以遍历,方法有add, delete,has

 (4)在Set中,没有重复的key。所以可以用set()来进行去重。

Map:
 (1)本质上是健值对的集合,类似集合
 (2)可以遍历,可以跟各种数据格式转换 

三十二、forEach、for in、for of三者区别 

---forEach更多的用来遍历数组
---for in 一般常用来遍历对象或json
---for of数组对象都可以遍历,遍历对象需要通过和Object.keys()
---for in循环出的是key,for of循环出的是value 

三十三、innerHTML 与 innerText的作用与区别 

作用:都可以获取或者设置元素的内容
区别:innerHTML可以解析内容中的html标签
           innerText不能解析内容中的html标签 

三十四、JavaScript 由以下三部分组成 

ECMAScript(语法部分):JavaScript 语言基础
DOM(文档对象模型):规定了访问 HTML 和 XML 的方法
BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 

三十五、什么是标识符 

在JS中,可以自定义命名的东西都属于标识符;
比如变量名,函数名,参数名都是标识符 

三十六、DOM 元素e的 e.getAttribute和 e.propName 有什么区别和联系 

e.getAttribute:获取的是标签上属性
可以通过e.setAttribute(propName, propValue)设置标签上属性
e.propName:获取的是元素对象上属性 

三十七、==和===的区别 

双等号判断时,只需要值相等
三等号判断时,需要值与类型都相等 

三十八、数组方法pop() push() unshift() shift() 

pop()尾部删除
push()尾部添加
unshift()头部添加
shift()头部删除 

三十九、解释什么是Json 

json是一种轻量级的数据交换格式,一般用于数据传递
里边只允许出现双引号
JSON的语法表示三种类型值,简单值(字符串,数值,布尔值,null), 数组,对象 

四十、dom事件委托什么原理,有什么优缺点 

事件委托原理: 事件冒泡机制(把子元素的事件行为委托给父级元素执行)

优点:
1. 可以大量节省内存占用,减少事件注册
2. 可以实现当新增子对象时,无需再对其进行事件绑定

缺点:
如果把所有事件都用事件代理,可能会出现事件误判

四十一、Javascript的事件流模型都有什么? 

“事件冒泡”:事件逐级向上传播
“事件捕捉”:事件逐级向下传播,一直到最具体的
“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡 

四十二、如何阻止事件冒泡 

ev.stopPropagation(); 

四十三、如何阻止默认事件 

return false 或者 ev.preventDefault(); 

四十四、javascript 的 typeof 返回哪些数据类型(至少六个)检测类型如下 

string、   number、  boolean  、undefined 、object  、function   、symbol(ES6之后新增的类型) 

四十五、prototype 和 proto 的关系是什么 

prototype: 所有函数都会有一个prototype属性, 它就是函数的原型对象
proto: 所有实例对象上都会有一个proto属性, 它等同于函数的原型对象 

四十六、函数柯里化 

把一个接收多个参数的函数变成接收单一参数 并且返回能够接收新参数的函数 

例如:add(1)(2)(3)(4) = 10; 

四十七、什么是AJAX?如何实现? 

ajax是用于浏览器与服务器之间使用异步数据传输的一种技术,做到局部请求以实现局部刷新。
ajax的实现主要包括四个步骤:
        (1)创建核心对象XMLhttpRequest;

        (2)利用open方法打开与服务器的连接;

        (3)利用send方法发送请求;("POST"请求时,还需额外设置请求头)

        (4)监听服务器响应,接收返回值。

四十八、什么是高阶函数? 

高阶函数是对其他函数进行操作的函数;
高阶函数就是一个接收函数作为参数或将函数作为输出返回的函数。
例如,Array.prototype.map,Array.prototype.filter 和Array.prototype.reduce 是语言中内置的一些高阶函数。 

四十九、描述浏览器的渲染过程?,DOM树和渲染树的区别? 

浏览器的渲染过程:
1)解析 HTML 构建 DOM树,并行请求 css/image/js
2)CSS 文件下载完成,开始构建CSS树
3)CSS树构建结束后和DOM 一起生成 Render树


DOM 树 和 渲染树 的区别:
1)DOM 树与 HTML 标签一一对应,包括 head 和隐藏元素
2)渲染树不包括 head 和隐藏元素,大段文本的每一个行都是独立节点,每一个节点都有对应的 css 属性

 五十、Javascript 作用域链?

如果当前作用域没有找到属性或方法,会向上层作用域查找,
直至全局函数,这种形式就是作用域链 

五十一、eval是做什么的 

eval 的功能是把对应的字符串解析成 JS 代码并运行,如把JSON 字符串转换为 JSON 对象

应该避免使用 eval,不安全,非常耗性能

五十二、defer 和 async区别 

defer 并行加载 js 文件,会按照页面上 script 标签的顺序执行
async 并行加载 js 文件,下载完成立即执行,不会按照页面上 script 标签的顺序执行 

五十三、什么是防抖与节流 

防抖(debounce):就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
节流(throttle):就是每次触发事件的间隔至少要大于等于n秒,且不会重置计时 

五十四、事件绑定的三种方式 

在标签上直接设置事件  onclik="a()"
dom.onclick = function(){}
addEventListener('click',function(){},true) 

五十五、事件绑定和普通事件有什么区别? 

普通事件会覆盖掉,只执行后者方法
dom.onclick = function(){}
事件绑定不会覆盖掉,会依次执行
addEventListener('click',function(){},true) 

五十六、form中的input可以设置为readonly和disabled,请问二者有什么区别? 

readonly不可编辑,但可以选择和复制;值可以传递到后台
disabled不能编辑,不能复制,不能选择;值不可以传递到后台 

五十七、进程与线程的区别 

1)进程是操作系统分配资源的基本单位,线程是任务调度和执行的基本单位。

2)进程之间是独立的地址空间,而线程共享本进程的地址空间。

3)进程之间的资源是独立的,能很好的进行资源管理和保护,而线程共享本进程的资源如内存、I/O、cpu等,不利于资源的管理和保护。

4)多进程要比多线程健壮,一个进程崩溃后,在保护模式下不会对其他进程产生影响,但是一个线程崩溃整个进程都死掉。

5)进程独立执行,执行开销大。但线程不能独立执行,执行开销小。

6)进程切换时,消耗的资源大,效率低。所以涉及到频繁的切换时,使用线程要好于进程。

7)一个程序至少有一个进程, 一个进程至少有一个线程。

五十八、什么是回调函数 

回调函数是作为参数或选项传递给某个方法的普通JS函数。
它是一个函数,在另一个函数完成调用后执行,因此称为回调。 

五十九、数组map、filter, reduce三个方法的作用 

map()方法:把回调函数中返回的值,作为一个新数组返回
filter()方法:返回符合回调函数中条件的元素,形成一个新数组
reduce()方法:对数组中元素进行从左到右的累计,并返回最终结果 

六十、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么? 

use strict 是一种 ECMAscript5 添加的(严格)运行模式,

区别 :这种模式使得 Javascript 在更严格的条件下运行,使 JS 编码更加规范化的模式,消除 Javascript 语法的一些不合理、不严谨之处,减少一些怪异行为

六十一、什么是 Proxy? 

1)Proxy:代理,是ES6新增的功能,可以理解为代理器(即由它代理某些操作)。

2)对象用于定义或修改某些操作的自定义行为,可以在外界对目标对象进行访问前,对外界的访问进行改写。

3)Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。 

六十二、watch 和 computed 区别 

watch:

监听动作(只监听原本的属性)
没缓存,只要数据变化就执行
可以执行异步操作
常用于一个数据影响多个数据


computed:

计算属性(会生成新的属性)
有缓存,只在属性变化的时候才去计算。
不能执行异步操作
常用于多个数据影响一个数据

六十三、Vue 的父组件和子组件生命周期钩子执行顺序是什么 

加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
总结:从外到内,再从内到外

六十四、父子组件间通讯方式 

(1)父组件向子组件传值(props将数据自上而下传递)

(2)子组件向父组件传递数据($emit和v-on来向上传递信息)

(3)通过EventBus进行信息的发布与订阅

六十五、什么是jQuery 

        jQuery是JavaScript的一个工具库,封装了JavaScript常用的功能代码。jQuery设计的宗旨是“写更少的代码,做更多的事情”。

 jQuery 优点:
  • 占用空间少,只有30KB

  • 符合CSS3规范

  • 跨浏览器,兼容各种主流浏览器。

六十六、jQuery面试题总结 

1、jQuery库中的$是什么 

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

2、如何找到所有HTML select标签的选中项?

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

3、$(this)和this关键字在jquery中有何不同?

$(this)返一个jQuery对象,可以对他调用多个jQuery方法,比如用text()获取文本,用val()获取值等等。

this代表当前元素,他是js关键词中的一个,表示上下文中的当前dom元素。不能对他调用jQuery方法,直到他被$ ()函数包裹,例如$(this)

4、jQuery怎么移出标签onclick属性?

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

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

设置onclick属性:$("a").attr("onclick","test()")
5、jquery有几种选择器?

基本选择器:#id,class,element,*
层次选择器:parent>child,prev+next,prev-siblings
基本过滤器选择器::first,:last,:not,:even,:odd,:eq,:gt,:lt
内容过滤器选择器::contains,:empty,:has,:parent
可见性过滤器选择器::hidden,:visible
属性过滤器选择器:[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value]
子元素过滤器选择器::nth-child,:first-child,:last-child,:only-child
表单选择器::input,:text,:password,:radio,:checkbox,:submit等
表单过滤器选择器::enabled,:disabled,:checked,:selected

6、网页上有 5 个 <div> 元素,如何使用 jQuery来选择它们?

另一个重要的 jQuery 问题是基于选择器的。jQuery 支持不同类型的选择器,例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class,你可以用标签选择器来选择所有的 div 元素。jQuery 代码:$("div"),这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。

7、jQuery 里的 ID 选择器和 class 选择器有何不同?

ID 选择器和 class 选择器的另一个不同之处是,前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。

8、 $(document).ready() 是个什么函数?为什么要用它?

ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载(例如HTML被完全解析DOM树构建完成时),jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器,jQuery帮你解决了跨浏览器的难题。需要进一步了解的用户可以点击 answer链接查看详细讨论。

9、JavaScript window.onload 事件和 jQuery ready 函数有何不同?

        JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

  另一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用。鉴于这个好处,用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

10、jQuery 里的 each() 是什么函数?你是如何使用它的?

each() 函数就像是 Java 里的一个 Iterator,它允许你遍历一个元素集合。你可以传一个函数给 each() 方法,被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题,举个例子,如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找出所有选中项,然后我们在 alert 框中用 each() 方法来一个个打印它们

11、如何将一个 HTML 元素添加到 DOM 树中的?

用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。

12、如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href?

attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接,然后你可以应用attr()方法来获得他们的href属性的值。

13、你如何使用jQuery设置一个属性值? (答案)

  前面这个问题之后额外的一个后续问题是,attr()方法和jQuery中的其它方法一样,能力不止一样. 如果你在调用attr()的同时带上一个值 例如. attr(name, value), 这里name是属性的名称,value是属性的新值。

14、jQuery中 detach() 和 remove() 方法的区别是什么?

尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看 用来向DOM中添加元素的 appendTo() 方法.

15、如何利用jQuery来向一个元素中添加和移除CSS类?

通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态,等等.

16、使用 CDN 加载 jQuery 库的主要优势是什么 ?

这是一个稍微高级点儿的jQuery问题。好吧,除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是,如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日,许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库,网站就能有非常好的展示机会。

17、jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

ajax() 方法更强大,更具可配置性, 让你可以指定等待多久,以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

18、jQuery 中的方法链是什么?使用方法链有什么好处?

方法链是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,同时由于只对 DOM 进行了一轮查找,性能方面更加出色。

19、要是在一个 jQuery 事件处理程序里返回了 false 会怎样?

通常用于阻止事件向上冒泡。

20、哪种方式更高效:document.getElementbyId("myId") 还是 $("#myId")?

 第一种,因为它直接调用了 JavaScript 引擎。

  • 14
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值