面试题！！！"/>
前端有关js和jQuery面试题！！！
目录
Javascript相关
1. Js基本数据类型有哪些
2 . Ajax如何使用
3. 如何判断一个数据是NaN
4. 闭包是什么？有什么特性？对页面会有什么影响
5 . Js中常见的内存泄漏：
6. 事件委托是什么？如何确定事件源(Event . target 谁调用谁就是事件源)
7. 什么是事件冒泡？
loca lStorage
se ssionStorage
三者的异同
9 . ES6 新特性
10. Let 与 var 与 const 的区别
11. 数组方法有哪些请简述
12. 请掌握2种以上数组去重的方式
13. 什么是面向对象请简述
14. 普通函数和构造函数的区别
15. 请简述原型 / 原型链 / (原型)继承
什么是原型 ?
什么是原型链？
什么是原型继承 ?
16 . Promise的理解
一、什么是Promise？我们用Promise来解决什么问题？
二、 promis e有三种状态：
三、 Promis e的两个特点
四、 Promise的三个缺点
promise是用来解决两个问题的：
17. 请简述asyn c的用法
18. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
19 . Js中 .call() 与 .apply() 区别
20. 为什么会造成跨域 / 请简述同源策略
21 . This指向
22. 什么是jsonp工作原理是什么？他为什么不是真正的ajax
jsonp原理： ( 动态创建scrip t标签，回调函数 )
为什么不是真正的 ajax ?
23. 请写出一个简单的类与继承
创建类有三种：
继承有六种：
24. 同步与异步的区别 / 阻塞与非阻塞区别
25 . 为什么js是弱类型语言
26. 箭头函数与普通函数的区别
27. For循环与map循环有什么区别
28. 原型和继承， prototype ，call和apply继承的区别(第一个参数是相同的，第
二个的区别在哪)
29. 深浅拷贝是什么如何实现？
30 . 什么时候用深拷贝 / 浅拷贝
31. 什么是js内存泄露？
32. 什么是csrf攻击
33. 预加载和懒加载的区别，预加载在什么时间加载合适
34. Js的函数节流和函数防抖的区别
jQuery相关
1. 什么是jQuer y？
2、为什么要使用jQuery？jquery有哪些好处？
3. Jquery选择器有哪些
一、基本选择器
1 ID选择器 #id
2 类选择器 .class
3 元素选择器 element
4 selector1 ，selector2,...,selectorN
二、层次选择器
后代选择器
2.子选择器 $("parent>child")
3.同辈选择器 $("prev+next")
4. 同辈选择器 $("prev~siblings")
三、过滤选择器
1 > 基本过滤选择器
1:first
2:last
3:not(selector)
4:even
5:odd
6:eq(index)
7:gt(index)
8:lt(index)
9:focus
2> 内容过滤选择器
1:contains(text)
2:empty
3：has(selector)
4:parent
3 > 可见性过滤选择器
2.:visible
4 > 属性过滤选择器(返回元素集合)
1.[attribute]
2.[attribute=value]
3. [attribute!=value]
4.[attribute^=value]
5.[attribute$=value]
6.[attribute*=value]
7.[attribute~=value]
8.[attributeN1][attributeN2][attributeN3]
5> 表单对象属性过滤选择器(返回元素集合)
1.:enabled
2.:disabled
3.:checked
4.:selected
4. Jqu ery插入节点的方法
5. jQuery对象和DOM对象是怎样转换的
6. jQuery中 .get() 提交和 .post() 提交的区别
7. 怎么使用jQuery中的动画
8 . jQuery中如何来获取和设置属性
9. 如何来设置和获取HTM L和文本的值？
10. jQuery中有哪些方法可以遍历节点？
11. $(this) 和 this 关键字在 jQuery 中有何不同？
12. jQuery 里的 eac h () 是什么函数？你是如何使用它的？
13. JQuery中的Delegate() 函数有什么作用？
Javascript相关
1. Js基本数据类型有哪些
字符串 String ，数值 Number ，布尔 boolean ， null ，undefined ，对象 ，数组
2 . Ajax如何使用
一个完整的AJAX请求包括五个步骤：
( 1)创建XMLHTTPRequest对象
( 2)使用open方法创建http请求，并设置请求地址
xhr.open (get/post ，url ，async ，true (异步)， false (同步))经常使用前三个参数
( 3)设置发送的数据，用send发送请求
(4)注册事件(给ajax设置事件)
( 5)获取响应并更新页面
3. 如何判断一个数据是NaN
NaN 非数字 但是用 typeof 检测是 number 类型
利用NaN的定义 用typeof判断是否为number类型并且判断是否满足isnan 利用NaN是唯一一个不等于任何自身的特点 n！==n
利用ES6中提供的Object.is()方法(判断两个值是否相等) n==nan
Js中null与undefined区别
相同点：用 if 判断时，两者都会被转换成 false
不同点：
number转换的值不同 number (null)为0 number (undefined)为NaN
Null表示一个值被定义了，但是这个值是空值
Undefined 变量声明但未赋值
4. 闭包是什么？有什么特性？对页面会有什么影响
闭包可以简单理解成：定义在一个函数内部的函数。其中一个内部函数在包含它们的外部函数之外被调 用时，就会形成闭包。
特点：
函数嵌套函数。
函数内部可以引用外部的参数和变量。
参数和变量不会被垃圾回收机制回收。
使用：
读取函数内部的变量；
这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。
优点：
变量长期驻扎在内存中；
避免全局变量的污染；
私有成员的存在 ；
缺点： 会造成内存泄露
5 . Js中常见的内存泄漏：
意外的全局变量
被遗忘的计时器或回调函数
脱离DOM的引用
闭包
6. 事件委托是什么？如何确定事件源(Event . target 谁调用谁就是事件源)
JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事 件。
事件委托，称事件代理，是js中很常用的绑定事件的技巧，事件委托就是把原本需要绑定在子元素的响 应事件委托给父元素，让父元素担当事件监听的职务，事件委托的原理是DOM元素的事件冒泡。
7. 什么是事件冒泡？
一个事件触发后，会在子元素和父元素之间传播，这种传播分为三个阶段，
捕获阶段(从window对象传导到目标节点(从外到里)，这个阶段不会响应任何事件)，目标阶段， (在目标节点上触发)，冒泡阶段(从目标节点传导回window对象(从里到外))，事件委托/事件代 理就是利用事件冒泡的机制把里层需要响应的事件绑定到外层
8. 本地存储与cookie的区别
Cookie 是小甜饼的意思。顾名思义， cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保 存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别 用户身份的数据来实现的。
loca lStorage
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一 个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如 今， localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你方案是 种不错的选择。
se ssionStorage
sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端 开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概 念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后， sessionStorage 中的数据就会被清空。
三者的异同
| 特 性 | Cook ie | loca lStorage | se ssionStorage |
|---|---|---|---|
| 数 据 的 生 命 期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久 保存 | 仅在当前会话下有效，关闭页面或浏览器后被 清除 |
| 存 放 数 据 大 小 | 4K左右 | 一般为5MB | 一般为5MB |
| 与 服 务 器 端 通 信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存，不参与和服务器的通信 | 仅在客户端(即浏览器)中保存，不参与和服务器的通信 |
| 易 用 性 | 需要程序员自己封装，源生的 Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
9 . ES6 新特性
const和let、模板字符串、箭头函数、函数的参数默认值、对象和数组解构、 for...of 和for...in、 ES6中 的类
10. Let 与 var 与 const 的区别
var声明的变量会挂载在window上，而let和const声明的变量不会
var声明的变量存在变量提升， let和const不存在变量提升
同一作用域下var可以声明同名变量， let和const、不可以
Let和const声明会形成块级作用域
Let暂存死区
const一旦声明必须赋值，不能用null占位，声明后不能再修改，如果声明的是复合类型数据，可以 修改属性
11. 数组方法有哪些请简述
push() 从后面添加元素，返回值为添加完后的数组的长度
arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
arr.concat() 连接两个数组 返回值为连接后的新数组
str.split() 将字符串转化为数组
arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数 字大小排序的
arr.reverse() 将数组反转,返回值是反转后的数组
arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来 的数组
arr.forEach(callback) 遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的 数组
arr.map(callback) 映射数组(遍历数组),有return 返回一个新数组 。
arr.filter(callback) 过滤数组，返回一个满足要求的数组
12. 请掌握2种以上数组去重的方式
使用indexof ()方法
使用lastindexof ()方法 和indexof方法一样 indexof从头部开始匹配 lastindexof从尾部匹配 ES6的set结构 set不接受重复数据
使用sort方法先将原数组排序，然后与相邻的比较，如果不同则存入新数组
使用filiter和indexof方法
使用ES6 的set和扩展运算符
使用set和Array.from ()方法 array.from可以将set结构转成数组
用splice和双层循环
使用includes方法
13. 什么是面向对象请简述
面向对象是一种思想，是基于面向过程而言的，就是说面向对象是将功能等通过对象来实现，将功能封 装进对象之中，让对象去实现具体的细节；这种思想是将数据作为第一位，这是对数据一种优化，操作 起来更加的方便，简化了过程。
Js本身是没有class类型的，但是每个函数都有一个prototype属性， prototype指向一个对象，当函数作
为构造函数时， prototype就起到类似于class的作用
面向对象有三个特点：
封装(隐藏对象的属性和实现细节，对外提供公共访问方式)
继承(提高代码复用性，继承是多态的前提)
多态(是父类或接口定义的引用变量可以指向子类或具体实现类的实例对象)
14. 普通函数和构造函数的区别
构造函数也是一个普通函数，创建方式和普通函数一样，但是构造函数习惯上首字母大写
调用方式不一样，普通函数直接调用，构造函数要用关键字new来调用
调用时，构造函数内部会创建一个新对象，就是实例，普通函数不会创建新对象
构造函数内部的this指向实例，普通函数内部的this指向调用函数的对象(如果没有对象调用，默 认为window)
构造函数默认的返回值是创建的对象(也就是实例)，普通函数的返回值由return语句决定
构造函数的函数名与类名相同
15. 请简述原型 / 原型链 / (原型)继承
什么是原型 ?
任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属性proto指向它的构造函数 的prototype指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有 prototype，只有方法才有prototype。
什么是原型链？
原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道，每个构造函 数都有一个原型对象，每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的 内部指针。
原型链的核心就是依赖对象的proto的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函 数，直至到Object时，就没有proto指向了。
因为proto实质找的是prototype，所以我们只要找这个链条上的构造函数的prototype。其中 Object.prototype是没有proto属性的，它==null。
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含指向原型对 象内部的指针。我们让原型对象(1)等于另一个原型对象的实例(2) ,
此时原型对象(2)将包含一个指向原型对象(1)的指针，
再让原型对象(2)的实例等于原型对象(3)，如此层层递进就构成了实例和原型的链条，这就是原型 链的概念
什么是原型继承 ?
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数想指针(constructor)，而实例对象 都包含一个指向原型对象的内部指针(proto)。如果让原型对象等于另一个原型对象的实例，此时的原型 对象将包含一个指向另一个原型的指针(proto)，另一个原型也包含着一个指向另一个构造函数的指针 (constructor)。假如另一个原型又是另一个类型的实例 ……这就构成了实例与原型的链条。也叫原型链 原型继承是js的一种继承方式，原型链作为实现继承的主要方法,其基本思路是利用原型让一个引用类型 继承另一个引用类型的属性和方法,
原型继承：利用原型中的成员可以被和其相关的对象共享这一特性，可以实现继承，这种实现继承的方 式，就叫做原型继承 .
16 . Promise的理解
一、什么是Promise？我们用Promise来解决什么问题？
我们都知道， Promise是承诺的意思，承诺它过一段时间会给你一个结果。
Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大。
从语法上讲， promise是一个对象，从它可以获取异步操作的消息；
二、 promis e有三种状态：
pending 初始状态也叫等待状态
fulfiled成功状态
rejected失败状态
状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
三、 Promis e的两个特点
Promise对象的状态不受外界影响
Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，
四、 Promise的三个缺点
无法取消Promise,一旦新建它就会立即执行，无法中途取消
如果不设置回调函数， Promise内部抛出的错误，不会反映到外部
当处于pending (等待)状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成
promise是用来解决两个问题的：
回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象 promise可以支持多并发的请求，获取并发请求中的数据
这个promise可以解决异步的问题，本身不能说promise是异步的
17. 请简述asyn c的用法
Async 就是 generation 和 promise 的语法糖， async 就是将 generator 的 * 换成async，将 yiled 换成 await。
函数前必须加一个 async，异步操作方法前加一个 await 关键字，意思就是等一下，执行完了再继续 走，注意： await 只能在async 函数中运行，否则会报错。
Promise 如果返回的是一个错误的结果，如果没有做异常处理，就会报错，所以用 try..catch 捕获一下 异常就可以了。
18. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
分为4个步骤：
( 1)当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL ， 浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览 器获得请求对应的 IP 地址。
( 2)浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步 报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户 端尝试建立起通信，然后服务器响应并接受客户端的请求，最后由客户端发出该请求已经被接受的报 文。
( 3)一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找 到资源并使用 HTTP 响应返回该资源
(4)此时， Web 服务器提供资源服务，客户端开始下载资源。
19 . Js中 .call() 与 .apply() 区别
apply：调用一个对象的一个方法，用另一个对象替换当前对象。
call ：调用一个对象的一个方法，用另一个对象替换当前对象。
从定义中可以看出， call 和 apply 都是调用一个对象的一个方法，用另一个对象替换当前对象。而不同 之处在于传递的参数， apply最多只能有两个参数——新 this 对象和一个数组 argArray，如果 arg 不是 数组则会报错
相同点:两个方法产生的作用是完全一样的。 call, apply 作用就是借用别人的方法来调用,就像调用自己的 一样.
不同点:方法传递的参数不同
20. 为什么会造成跨域 / 请简述同源策略
出现跨域问题的原因 :
在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们 要想回去数据一般都是post/get请求，所以..跨域问题出现。
跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。也 就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。
同源策略：
是由NetScape提出的一个著名的安全策略。所谓的同源，指的是协议，域名，端口相同。浏览器处于安 全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读 写对方的资源。
21 . This指向
在JavaScript中， this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。
全局的this → 指向的是Window
对象中的this → 指向其本身
事件中this → 指向事件对象
22. 什么是jsonp工作原理是什么？他为什么不是真正的ajax
Jsonp其实就是一个跨域解决方案。
Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。
所以可以把要请求的数据封装成一个js语句，做一个方法的调用。
跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。
可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。
jsonp原理： ( 动态创建scrip t标签，回调函数 )
浏览器在js请求中，是允许通过script标签的src跨域请求，可以在请求的结果中添加回调方法名，在请 求页面中定义方法，就可获取到跨域请求的数据。
为什么不是真正的 ajax ?
ajax和jsonp这两种技术在调用方式上"看起来"很像，目的也一样，都是请求一个url，然后把服务 器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
但ajax和jsonp其实本质上是不同的东西。 ajax的核心是通过XmlHttpRequest获取本页内容，而
jsonp的核心则是动态添加
所以说，其实ajax与jsonp的区别不在于是否跨域， ajax通过服务端代理一样可以实现跨域， jsonp 本身也不排斥同域的数据的获取。
还有就是， jsonp是一种方式或者说非强制协议，如同ajax一样，它也不一定非要json格式来传递 数据，如果你愿意，字符换也行，只不过这样不利于jsonp提供公开服务。
23. 请写出一个简单的类与继承
创建类有三种：
使用function和this关键字
原型方法 用prototype和this关键字
使用object.create()方法构造
继承有六种：
原型继承
借用构造函数继承
组合继承
原型式继承
寄生式继承
寄生组合式继承
24. 同步与异步的区别 / 阻塞与非阻塞区别
同步(阻塞的)
异步(非阻塞)
比如：同步，咱两在一起上班，到吃饭时间了，我去喊你一起吃饭，你很忙，我就坐着等你忙完再一起 去吃饭
异步，咱两在一起上班，到吃饭时间了，我去喊你一起吃饭，你很忙，我就先自己去吃了，你忙 完了再去吃饭
同步(阻塞)异步(非阻塞)这两个关注的是程序在等待调用结果时的状态
25 . 为什么js是弱类型语言
弱类型语言实现相对于强类型语言来说的，在强类型语言中，变量类型有多种，比如intchar float Boolean 不同类型相互转换有时需要强制转换，而jacascript只有一种类型var，为变量赋值时会自动判 断类型并转换，所以是弱类型语言。
26. 箭头函数与普通函数的区别
箭头函数是匿名函数，不能作为构造函数，不能使用new
箭头函数不能绑定arguments，要用rest参数解决
箭头函数没有原型属性
箭头函数的this永远指向其上下文的this，
箭头函数不能绑定this，会捕获其所在的上下文的this值，作为自己的this值
27. For循环与map循环有什么区别
For遍历对象自身的和继承可枚举的属性，也就是说会包括哪些原型链上的属性
Map方法不会对空数组进行检测， map会返回一个新数组，不会对原数组产生影响
28. 原型和继承， prototype ，call和apply继承的区别(第一个参数是相同的，第
二个的区别在哪)
apply() 接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。
call() 方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。
29. 深浅拷贝是什么如何实现？
深拷贝：指针赋值，并且内容拷贝、
浅拷贝：只是简单的指针赋值
数组浅拷贝: 如果是数组，可以使用数组的一些方法实现： slice() ，concat()返回一个新数组的特性 实现拷贝。用扩展运算符spread实现
数组深拷贝: JSON.parse(JSON.stringify())不仅适用于数组还适用于对象。不能拷贝函数， undefined ，symbol。
30 . 什么时候用深拷贝 / 浅拷贝
无论深浅，都是需要的，当深拷贝发生时通常表明存在着一个聚合关系，当浅拷贝发生时，通常表明存 在着相识关系
举个简单例子：当实现一个组合模式Composite Pattern时通常都会实现深拷贝
当实现一个观察者模式Observer Pattern时，就需要实现浅拷贝
31. 什么是js内存泄露？
内存泄漏是指一块被分配的内存既不能使用又不能回收，直到浏览器进程结束
释放内存的方法：赋值为null
32. 什么是csrf攻击
csrf (跨站点请求伪造) 攻击者在用户已经登录目标网站之后，诱使用户访问一个攻击页面，利用目标 网站对用户的信任，以用户身份再攻击页面对目标网站发起伪造用户操作的请求，达到攻击目的
33. 预加载和懒加载的区别，预加载在什么时间加载合适
预加载是指在页面加载完成之前，提前将所需资源下载，之后使用的时候从缓存中调用；懒加载是延迟 加载，按照一定的条件或者需求等到满足条件的时候再加载对应的资源.
两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作 用，预加载则会增加服务器前端压力。
34. Js的函数节流和函数防抖的区别
函数节流是指一定时间内js方法只执行一次。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次
函数节流是 声明一个变量当标志位，记录当前代码是否在执行，如果正在执行，取消这次方法执 行，直return，如果空闲，正常触发方法执行
函数防抖是需要一个延时器来辅助实现，延迟执行需要执行的代码，如果方法多次触发，把上次记 录的延迟执行代码用cleartimeout清除掉，重新开始，如果计时完毕，没有方法来访问触发，则执 行代码
jQuery相关
1. 什么是jQuer y？
jQuery 是一个快速，轻量且功能丰富的客户端 JavaScript 库/框架，
它有助于遍历 HTML DOM，制作动画，添加 Ajax 交互，操纵页面内容，
更改样式并提供很酷的UI效果。
它是最受欢迎的客户端库之一，根据调查，它在每个第二个网站上就会有一个使用。
2、为什么要使用jQuery？jquery有哪些好处？
因为 jQuery 是轻量级的框架，大小不到30kb
它有强大的选择器，出色的DOM操作的封装
有可靠的事件处理机制( jQuery 在处理事件绑定的时候相当的可靠)
完善的 ajax (它的 ajax 封装的非常的好，不需要考虑复杂浏览器的兼容性和 XMLHttpRequest对象 的创建和使用的问题。 )出色的浏览器的兼容性，支持链式操作，隐式迭代
行为层和结构层的分离，还支持丰富的插件， jquery的文档也非常的丰富1‘
3. Jquery选择器有哪些
一、基本选择器
基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元 素。
-
1 ID选择器 #id
描述：根据给定的id匹配一个元素， 返回单个元素(注：在网页中， id名称不能重复)
示例： $("#test") 选取 id 为 test 的元素
-
2 类选择器 .class
描述：根据给定的类名匹配元素，返回元素集合
示例： $(".test") 选取所有class为test的元素
-
3 元素选择器 element
描述：根据给定的元素名匹配元素，返回元素集合
示例： $("p") 选取所有的元素
描述：匹配所有元素，返回元素集合
示例： $("*") 选取所有的元素
-
4 selector1 ，selector2,...,selectorN
描述：将每个选择器匹配到的元素合并后一起返回，返回合并后的元素集合
示例： $("p,span,p.myClass") 选取所有 , 和class为myClass的标签的元素集合
二、层次选择器
层次选择器根据层次关系获取特定元素。
-
后代选择器
示例： $("p span") 选取
元素里的所有的 元素(注：后代选择器选择父元素所有指定选 择的元素，不管是儿子级，还是孙子级)
2.子选择器 $("parent>child")
示例： $("p>span") 选择
元素下的所有 元素 (注：子选择器只选择直属于父元素的子 元素)
3.同辈选择器 $("prev+next")
描述：选取紧接在prev元素后的next元素，返回元素集合
示例： $(".one+p") 选取class为one的下一个
同辈元素集合
4. 同辈选择器 $("prev~siblings")
描述：选取prev元素后的所有siblings元素，返回元素集合
示例： $("#two~p")选取id为two的元素后所有
同辈元素集合
三、过滤选择器
1 > 基本过滤选择器
1:first
描述：选取第一个元素，返回单个元素
示例： $("p:first") 选取所有
元素中第一个
元素
2:last
描述：选取最后一个元素，返回单个元素
示例： $("p:last") 选取所有
元素中最后一个
元素
3:not(selector)
描述：去除所有与给定选择器匹配的元素，返回元素集合
示例： $("input:not(.myClass)") 选取class不是myClass的 元素
4:even
描述：选取索引是偶数的所有元素，索引从0开始，返回元素集合
5:odd
描述：选取索引是奇数的所有元素，索引从0开始，返回元素集合
6:eq(index)
描述：选取索引等于index的元素，索引从0开始，返回单个元素
7:gt(index)
描述：选取索引大于index的元素，索引从0开始，返回元素集合
8:lt(index)
描述：选取索引小于于index的元素，索引从0开始，返回元素集合
9:focus
描述：选取当前获取焦点的元素
2> 内容过滤选择器
1:contains(text)
描述：选取含有文本内容为text的元素，返回元素集合
2:empty
描述：选取不包含子元素或者文本元素的空元素，返回元素集合
3：has(selector)
描述：选取含有选择器所匹配的元素的元素，返回元素集合
4:parent
描述：选取含有子元素或者文本的元素，返回元素集合
3 > 可见性过滤选择器
1. :hidden
描述：选取所有不可见的元素，返回元素集合
2.:visible
描述：选取所有可见的元素，返回元素集合
4 > 属性过滤选择器(返回元素集合)
1.[attribute]
示例： $("p[id]") 选取拥有id属性的p元素
2.[attribute=value]
示例： $("input[name=text]") 选取拥有name属性等于text的input元素
3. [attribute!=value]
示例： $("input[name!=text]") 选取拥有name属性不等于text的input元素
4.[attribute^=value]
示例： $("input[name^=text]") 选取拥有name属性以text开始的input元素
5.[attribute$=value]
示例： ("input[name("input[name("input[name=text]") 选取拥有name属性以text结束的input元素
6.[attribute*=value]
示例： $("input[name*=text]") 选取拥有name属性含有text的input元素
7.[attribute~=value]
示例： $("input[class~=text]") 选取拥有class属性以空格分割的值中含有text的input元素
8.[attributeN1][attributeN2][attributeN3]
描述：合并多个属性过滤选择器
5> 表单对象属性过滤选择器(返回元素集合)
1.:enabled
描述：选取所有可用元素
2.:disabled
描述：选取所有不可用元素
3.:checked
描述：选取所有被选中的元素(单选框，复选框)
示例： $("input:checked") 选取所有被选中的 元素
4.:selected
描述：选取所有被选中的选项元素(下拉列表)
示例： $("select option:selected") 选取所有被选中的选项元素
4. Jqu ery插入节点的方法
append() 向每个匹配的元素内部追加内容
appendTo() 将所有匹配的元素追加到指定元素中，实际上，使用该方法是颠倒了常规的
$(A).append(B)的操作 将A追加到B中
prepend() 向每个匹配的元素内部前置内容
prependTo() 将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的 $(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中
after() 在每个匹配的元素之后插入内容
insertAfter() 将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的 $(A).after(B)的操作，即不是讲B插入到A后面，而是将A插入到B后面
before() 在每个匹配的元素之前插入内容
insertBefore() 将所有匹配的元素插入到指定的元素的前面。实际上，使用该方法是颠倒了常规的 $(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面
5. jQuery对象和DOM对象是怎样转换的
jQuery 对象是一个包含了 dom 对象的数组，可以通过 jQuery 对象[下标]获取 dom 对象，将 dom对象 放入$("")中转为 jQuery 对象。
6. jQuery中 .get() 提交和 .post() 提交的区别
.get() 使用 GET 方法来进行异步提交 .get() 使用GET方法来进行异步提交 .post() 使用 POST 方法来
进行异步提交 ；
get 请求方式将参数跟在 url 后进行传递用户可见 post 请求则是作为 http 消息的实体内容发送给
服务器，用户不可见 ；
post 传输数据比 get 大 ；
get 请求的数据会被浏览器缓存不安全；
7. 怎么使用jQuery中的动画
影藏： hide()
显示： show()
淡入淡出： fadeIn()==淡入(显示) fadeOut()==淡出(消失)
滑动： slideUp()==向上滑动 slideDown()==向下滑动
8 . jQuery中如何来获取和设置属性
可以用 attr() 获取和设置元素属性
removeAttr() 方法来删除元素属性
9. 如何来设置和获取HTM L和文本的值？
获取 HTMl ：$("选择器").html()
获取文本的值： $("选择器").text()
10. jQuery中有哪些方法可以遍历节点？
children()：获取匹配元素的子元素集合，不考虑后代元素 (function(){("div").children()})
next()：获取匹配元素后面紧邻的同级元素
prev()：获取匹配元素前紧邻的同级元素
siblings()：获取匹配元素前后的所有同辈元素
11. $(this) 和 this 关键字在 jQuery 中有何不同？
$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本， val()
获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元 素。你不能对它调用jQuery 方法，直到它被 ()函数包裹，例如() 函数包裹，例如 ()函数包裹，例如(this)。
12. jQuery 里的 eac h () 是什么函数？你是如何使用它的？
each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给each() 方 法，被调用的jQuery 对象会在其每个元素上执行传入的函数。
13. JQuery中的Delegate() 函数有什么作用？
delegate()会在以下两个情况下使用到：
如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了
代码如下：
(“ul”).delegate(“li”,“click”, function(){ (this).hide(); });
2、当元素在当前页面中不可用时，可以使用delegate()
更多推荐
前端有关js和jQuery面试题！！！
发布评论