2024年Web前端最新jQuery超详细总结(2)，面试进阶100题网盘

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

• 五 元素属性操作

• • • 在 H5 的标准下, 给了一个定义, 当你需要写自定义属性的时候，最好写成 data-xxx=“值”，当大家看到 data-xxx 的时候, 就知道这是一个自定义属性

• 六 元素样式操作

• 七 绑定事件

• • • 1. `on() `方法是专门用来绑定事件

• 2. `one()` 方法是专门用来绑定一个只能执行一次的方法

• 3. `off()` 方法是专门用来解绑一个元素的事件的

• 4. `trigger()` 方法是专门用来触发事件的方法

• 5. `hover()`

• 6. `常用事件`

• 八 节点操作

• • • 1. 创建节点

• 2. 插入节点

• 3. 删除节点

• 4. 替换节点

• 5. 克隆节点

• 九 获取元素尺寸

• • • 尺寸: 元素的占地面积

• 三套方法, 四种使用方式

• 十 获取元素位置

• • • 1. `offset()`

• 2. `position()`

• 十一 获取卷去的尺寸（页面滚动条）

• • • `scrollTop()`

• `scrollLeft()`

• 十二 jQuery中的函数

• • • `ready()` 事件

• `each()` 方法

• 十三 jQuery中的动画

• • • 让元素出现不同的移动, 改变

• 标准动画

• 折叠动画

• 渐隐渐显动画

• 综合动画

• 停止动画

• 十四 jQuery发送ajax请求

• • • jQuery 里面帮我们封装好了几个方法

• 专门用来发送 ajax 请求的

• • `jQuery 发送一个 GET 请求`

• `jQuery 发送一个 POST 请求`

• `jQuery 的 $.ajax 方法`

• jQuery 的 ajax 全局钩子函数

• 十五 jQuery 发送一个 jsonp 请求

• 十六 jQuery 的多库并存机制

• 十七 jQuery 的插件扩展机制

• 十八 jQuery 的拷贝对象问题

• 十九 jQuery 的插件

• jQuery 是一个前端库，也是一个方法库

• 他里面封装着一些列的方法供我们使用

• 我们常用的一些方法它里面都有，我们可以直接拿来使用就行了

• jQuery 之所以好用，很多人愿意使用，是因为他的几个优点太强大了

1. 优质的选择器和筛选器

2. 好用的隐式迭代

3. 强大的链式编程

• 因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”

• 接下来我们就来认识一下 jQuery

一 选择器

---

• $()

• css怎么获取元素这里就怎么写

• 获取的是一组元素，当里面是id时，这组元素只有一个内容

特殊选择器

1. :first $('li:first') 获取元素集合里的 第一个元素

// console.log($(‘li:first’))

2. :last $('li:last') 获取元素集合里的 最后一个元素

3. :eq() $('li:eq()')获取元素集合里 索引为n 的那个元素，索引从0开始

4. :odd $('li:odd') 获取所有索引为 奇数 的元素

5. :even $('li:even') 获取所有索引为 偶数 的元素

二 筛选器

---

用在 jQuery 选择的元素后面

都是方法,对选择出来的元素进行二次筛选

1. first() 筛选 元素集合里面的 第一个元素

// console.log($(‘li’).first())

2. last() 筛选 元素集合里面的 最后一个元素

3. eq(n) 筛选元素集合里 索引为n 的那个元素

4. next() 筛选出来 元素 的下一个 兄弟元素

• nextAll() 筛选出 元素后面的 所有 兄弟元素

• nextAll(选择器) 筛选出元素后面的 所有兄弟元素 中符合选择器的元素

• nextUntil(选择器) 筛选出 元素后面的所有兄弟元素 直到 选中的元素为止 不包含选中的元素

// console.log($(‘span’).nextUntil(‘.a10’))

5. prev() 筛选出来 元素 的上一个 兄弟元素

• prevAll() 筛选出 元素上面的 所有 兄弟元素 （元素集合中的元素 从上一个兄弟元素开始排序）

• prevAll(选择器) 筛选出 元素上面的 所有兄弟元素 中符合选择器的元素

• prevUntil(选择器) 筛选出 元素上面的所有兄弟元素 直到 选中的元素为止 不包含选中的元素

// console.log($(‘span’).prevUntil(‘.a10’))

6. parent() 筛选出元素的 父元素

• parents()筛选出元素的 所有祖先元素 直到html元素

• parents(选择器)拿到 所有祖先元素中的符合选择器的元素

• parentsUntil(选择器)筛选出元素的 所有的祖先元素 直到某一个元素 不包含该元素

// console.log($(‘span’).parents(‘body’))

// console.log($(‘span’).parentsUntil(‘html’))

7. children() 筛选出元素的 所有子级元素

• children(选择器) 筛选出元素 所有子级元素中的 符合选择器的元素

8. siblings() 筛选出所有的兄弟元素 不包含 自己

• siblings(选择器) 筛选出所有的兄弟元素中的 符合选择器的元素

9. find(选择器)

• 筛选 一个元素后代中的 符合选择器的元素

• 在一个元素集合的每一个元素中 查找后代元素 符合选择器的元素

10. index() 获取元素的索引位置

• 索引位置是指 是该父元素下的第几个元素 拿到的是 数字

三 文本操作

---

1. html() 一个读写的属性

• html()不传递 参数的时候 就是获取元素内部的超文本内容

• html(参数)传递 参数的时候 就是设置元素内部的超文本内容

2. text() 一个读写的属性

• text()不传递 参数的时候 就是获取元素内部的超文本内容

• text(参数)传递 参数的时候 就是设置元素内部的超文本内容

3. val() 一个读写的属性 操作 input 标签

• val()不传递参数的时候, 就是获取标签的 value 值

• val(参数)传递一个参数的时候, 就是设置标签的 value 值

总结

• 获取

• html() 只能获取第一个元素的超文本内容

• text() 能获取元素集合内所有元素的文本内容合

• val() 只能获取第一个元素的 value 值

• 设置

• html() 给元素集合内所有元素设置超文本内容

• text() 给元素集合内所有元素设置文本内容

• val() 给元素集合内所有元素设置 value 值

四 元素类名操作

---

1. addClass() 添加类名

• 执行这个方法会给元素集合里面所有的元素添加上固定的类名

• 如果有就不添加, 不存在这个类名时添加

2. removeClass() 移除类名

• 执行这个方法删除 元素集合里面所有元素 的指定类名

3. toggleClass()切换类名

• 执行这个方法会给元素集合里面的所有元素切换类名

• 本身存在这个类名, 删除类名

• 本身不存在这个类名, 添加类名

4. hasClass() 判断有没有某一个类名

• 返回的时一个布尔值, 表示这个类名是否存在

五 元素属性操作

---

在 H5 的标准下, 给了一个定义, 当你需要写自定义属性的时候，最好写成 data-xxx=“值”，当大家看到 data-xxx 的时候, 就知道这是一个自定义属性

1. attr() 和 removeAttr()

• attr: attribute 属性

• attr()

• 是一个读写的方法

• attr(要读取的属性名): 传递一个参数的时候是读取

• attr(属性名, 属性值): 传递两个参数的时候是设置

• removeAttr() 专门用来移除属性的

• attr 这套方法的注意:

• 所有的属性都会显示在标签上(原生属性和自定义属性)

• 不管你设置的是什么数据类型, 都会给你变成字符串

• removeAttr 删除 attr 设置的属性, 有多少删除多少(针对自定义属性)

2. prop() 和 removeProp()

• prop: property 属性

• prop()

• 一个读写的方法

• prop(要读取的属性名): 传递一个参数的时候是读取

• prop(属性名, 属性值): 传递两个参数的时候是设置

• removeProp()专门用来移除属性的

• prop 这套方法的注意:

• 非原生属性, 不会显示在标签上, 但是你可以获取使用

• 你存储的是什么数据类型, 获取的时候就是什么数据类型

• removeProp 删除 prop 设置的属性, 有多少删除多少(针对自定义属性)

• removeProp() 不能删除原生属性 id class style 等等

3. data() 和 removeData()

• data: data 数据

• data()

• 一个读写的方法

• data(要读取的属性名): 传递一个参数的时候是读取

• data(属性名, 属性值): 传递两个参数的时候是设置

• removeData() 专门用来删除数据的

• data 这套方法的注意:

• 和元素的原生属性没有关系, 可以设置 id, 但是和元素的 id 没关系

• 就是在元素身上给你开辟一个地方, 存储一些数据

• 你设置的是什么数据类型, 拿到的就是什么数据类型

• removeData 删除 data 设置的属性

• data() 方法也能读取写在标签上的 H5 标准自定义属性

• 三个方法存储内容

• attr 设置的自定义属性存储在标签身上

• prop 设置的自定义属性存储在元素对象里面

• data 设置的自定义属性存储在元素对象里面单独开辟的一个对象

六 元素样式操作

---

• css()

• 一个读写的属性

• 不同操作需要 传递 不同的参数

1. css('样式名称')

• css('width')

• 获取元素的样式值, 不管是行内样式还是非行内样式都能获取

2. css('样式名称', '样式的值')

• css('width', '200px')

• 设置元素的样式值, 元素集合能获取多少个元素就置多少个元素

• 设置的时候, 所有的单位都可以不写, 默认添加 px为单位

3. css(对象)

• css({ width: 100, 不写单位默认是 px height: '200px', opacity: 0.5 })

• 批量设置 css 样式

• 给元素集合里面的所有元素, 批量设置样式

七 绑定事件

---

1. on()方法是专门用来绑定事件

1. jQuery 里面通用的事件绑定方式

2. 不同操作 传递 不同参数

• on方法的各种参数描述

1. on('事件类型', 事件处理函数)

• 给元素集合内所有的元素绑定一个事件

// 给 $(‘li’) 获取到的所有元素绑定一个点击事件

// $(‘li’).on(‘click’, function () {

// console.log(‘我被点击了’)

// })

2. on('事件类型', '事件委托', 事件处理函数)

• 把 事件委托 位置的元素的事件 委托给了前面元素合

// 给所有的 li 标签设置事件委托, 委托给了 ul

// $(‘ul’).on(‘click’, ‘li’, function () {

// console.log(‘我被点击了, 事件委托’)

// })

3. on('事件类型', 复杂数据类型, 事件处理函数)

• 给每一个元素绑定一个事件, 复杂数据类型是发事件时候传递的参数

// 每一个 li 点击的时候, 都能得到中间那个对象

// 就是事件对象了面

// $(‘li’).on(‘click’, { name: ‘Jack’, age: 18 }, function (e) {

// console.log(‘我被点击了, li’)

// console.log(e)

// })

4. on('事件类型', '事件委托', 任意数据类型, 件处函数)

• 做一个事件委托的形式, 第三个参数位置的数据

• 是触发事件的时候, 可以传递进去的数据

5. on(对象)

• 给一个元素绑定多个事件的方式 不能传参数

// $(‘ul’).on({

// click: function () { console.log(‘点击事件’) },

// mouseover: function () { console.log(‘移入事件’) },

// mouseout: function () { console.log(‘移出事件’) }

// })

2. one() 方法是专门用来绑定一个只能执行一次的方法

• 传递的参数个数和意义 于 on 方法一摸一样

• 绑定上的事件只能执行一次

3. off() 方法是专门用来解绑一个元素的事件的

• 使用方式

1. off('事件类型') : 给该事件类型的所有事件处理函数解绑

2. off('事件类型', 事件处理函数) : 解绑指定事件处理函数

• 注意：on 和 one 绑定的事件它都能移除

4. trigger() 方法是专门用来触发事件的方法

1. 不通过点击, 通过代码把事件触发了

2. trigger('事件类型') : 把该元素的事件给触发了

5. hover()

1. jQuery 里面唯一一个很特殊的事件函数

2. 表示一个鼠标悬停动作

3. 只有一个使用方式

• hover(鼠标移入的时候触发, 鼠标移出的时候触发)

// hover 事件

// 如果你只传递一个函数, 那么移入移出都触发这一个函数

$(‘ul’)

.hover(

function () { console.log(‘鼠标移入’) },

function () { console.log(‘鼠标移出’) }

)

6. 常用事件

• jQuery 把一些常用事件直接做成了函数

• click()

• mouseover()

• . . . . . .

• 直接使用就可以了

• 使用 click 举一个例子

• click(事件处理函数)

• click(参数, 事件处理函数)

• 参数: 触发事件的时候传递到事件里面的数据

// 常用事件

// 给 ul 绑定了一个点击事件

// $(‘ul’).click([1, 2, 3, 4, true], function (e) {

// console.log(‘你好 世界’)

// console.log(e)

// })

八 节点操作

---

1. 创建节点

• 对应原生 js 里面的 createElement()

• $('html 格式的文本')

// 创建一个 div 元素

console.log($(‘

我是一个创建出来的节点

’))

2. 插入节点

• 对应原生 js 里面的 appendChild()

• 内部插入

• 放在页面元素的子元素位置, 放在末尾

• 页面元素.append(要插入的元素)

• 要插入的元素.appendTo(页面元素)

• 放在页面元素的子元素位置, 放在最前

• 页面元素.prepend(要插入的元素)

• 要插入的元素.prependTo(页面元素)

• 外部插入

• 放在页面元素的下一个兄弟元素位置

• 页面元素.after(要插入的元素)

• 要插入的元素.insertAfter(页面元素)

• 放在页面元素的上一个兄弟元素位置

• 页面元素.before(要插入的元素)

• 要插入的元素.insertBefore(页面元素)

3. 删除节点

• 对应原生 js 里面的 removeChild()

• 页面元素.empty() -> 把自己变成空标签,将所有子元素移除

• 页面元素.remove() -> 把自己移除

• 没有删除某一个子节点的方法，因为 jQuery 的选择器的强大，直接找到要删除的节点, remove()

4. 替换节点

• 对应原生 js 里面的 replaceChild()

• 页面元素.replaceWith(替换元素)

• 替换元素.replaceAll(页面元素)

5. 克隆节点

• 对应原生 js 里面的 cloneNode()

• 元素.clone()

• 两个参数的值为 true或false

• 第一个参数: 自己的事件是否克隆

• 第二个参数: 子节点的事件是否克隆

• 如果第一个参数的值为false,那么第二个参数不起作用，没有意义。

• 不管你是否传递参数, 都会把所有后代元素都克隆下来

• 元素 + 文本内容 + 属性 + 行内样式

• 参数只决定是否克隆元素身上的事件

九 获取元素尺寸

---

尺寸: 元素的占地面积

• width 和 height

• padding

• border

• margin

三套方法, 四种使用方式

• 这些方法都是不考虑盒模型的状态(不管是什么型, 都是固定区域)

1. width() 和 height()

• 获取元素的 内容 区域的尺寸

2. innerWidth() 和 innerHeight()

• 获取元素的 内容 + padding 区域的尺寸

3. outerWidth() 和 outerHeight()

• 获取元素的 内容 + padding + border 区域的尺寸

4. outerWidth(true) 和 outerHeight(true)

• 获取元素的 内容 + padding + border + margin 区域的尺寸

十 获取元素位置

---

1. offset()

• offset: 偏移量

• 是一个读写的属性

• 读取

• 不传递参数就是读取

• 读到的元素相对于页面的位置关系

• 返回值是一个对象 { left: xxx, top: xxx }

• 书写

• 传递一个对象就是写入 { left: xxx, top: xxx }

• 注意: 绝对写入

• 不管你本身和页面的尺寸是什么样，写多少就是多少

2. position()

• postition: 定位

• 只读的方法

• 读取:

• 元素相对于定位父级的位置关系

• 得到的也是一个对象 { left: xxx, top: xxx }

• 如果你写的是 right 或者 bottom, 会自动计算成 left 和 top 值给你

十一 获取卷去的尺寸（页面滚动条）

---

scrollTop()

• 原生 js 里面 document.documentElement.scrollTop

• 读写的方法

• 不传递参数的时候就是获取卷去的高度

• 传递一个参数就是设置卷去的高度

scrollLeft()

• 原生 js 里面 document.documentElement.scrollLeft

• 读写的方法

• 不传递参数的时候就是获取卷去的宽度

• 传递一个参数的时候就是设置卷去的宽度

十二 jQuery中的函数

---

ready() 事件

• 类似于 window.onload 事件,但是有所不同

• window.onload 会在页面所有资源加载行

• ready() 会在页面 html 结构加载完毕后执行

• 也叫做 jQuery 的入口函数

• 有一个简写的形式 $(function () {})

each() 方法

• 类似于 forEach(), 遍历数组的

• jQuery 的元素集合, 是一个 jQuery 数组, 不是一个数组, 不能使用 forEach()

• forEach语法： forEach(function (item, index) {})

• each语法：each(function (index, item) {})

• 比较少用到, 因为 jQuery 隐式迭代 自动遍历

十三 jQuery中的动画

---

让元素出现不同的移动, 改变

• transition -> 过渡动画

• animation -> 帧动画

标准动画

1. show() 显示元素

• 语法: show(时间, 运动曲线, 运动结束的函数)

2. hide() 隐藏元素

• 语法: hide(时间, 运动曲线, 运动结束的函数)

3. toggle() 改变元素显示或隐藏（如果显示就隐藏，如果隐藏就显示）

• 语法: toggle(时间, 运动曲线, 运动结束的函数)

• 三个方法的参数都可以选填，不需要每个都填写

折叠动画

1. slideDown() 下滑显示

• 语法: slideDown(时间, 运动曲线, 运动结束的函数)

2. slideUp() 上滑隐藏

• 语法: slideUp(时间, 运动曲线, 运动结束的函数)

3. slideToggle() 切换滑动和隐藏

• 语法: slideToggle(时间, 运动曲线, 运动结束的函数)

渐隐渐显动画

• 实质是透明的opacity的变化

1. fadeIn() 逐渐显示

• fadeIn(时间, 运动曲线, 运动结束的函数)

2. fadeOut() 逐渐消失

• fadeOut(时间, 运动曲线, 运动结束的函数)

3. fadeToggle() 切换显示和消失

• fadeToggle(时间, 运动曲线, 运动结束的函数)

• 以上三个方法的参数，均有默认值

4. fadeTo() 设置元素透明度变为你指定的数字

• fadeTo(时间, 你指定的透明度, 运动曲线, 运动结束的函数)

综合动画

• animate()

• 基本上大部分的 css 样式都可以动画

• transform 不行, 颜色不行

• 语法: animate({}, 时间, 运动曲线, 运动结束的函数)

• { }里面就写你要运动的 css 属性,默认单位为px

停止动画

• 让当前的动画结束

• 因为 jQuery 的动画你一直点击，就会一直触发。即使不再点击让事件发生，还是会把没执行完的动画执行完毕。

• 你点击 10 次, 他就会触发 10 次, 直到 10 次全都完毕才结束

1. stop()

• 当这个函数触发的时候, 就会让运动立刻停下来

• 你运动到哪一个位置了就停止在哪一个位置

2. finish()

• 当这个函数触发的时候, 就会让运动立刻停下来

• 不管你运动到了哪一个位置, 瞬间到达运动完成位置

十四 jQuery发送ajax请求

---

jQuery 里面帮我们封装好了几个方法

专门用来发送 ajax 请求的

1. $.get() -> 专门用来发送 get 请求的

2. $.post() -> 专门用来发送 post 请求的

3. $.ajax() ->

• 发送什么请求都可以(get, post, put, delete)

• 并且还可以发送一个 jsonp 请求

jQuery 发送一个 GET 请求

• 语法: $.get(请求地址, 需要携带到后端的参数, 成功的回调函数, 期望后端返回的数据类型)

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

的 css 样式都可以动画

• transform 不行, 颜色不行

• 语法: animate({}, 时间, 运动曲线, 运动结束的函数)

• { }里面就写你要运动的 css 属性,默认单位为px

停止动画

• 让当前的动画结束

• 因为 jQuery 的动画你一直点击，就会一直触发。即使不再点击让事件发生，还是会把没执行完的动画执行完毕。

• 你点击 10 次, 他就会触发 10 次, 直到 10 次全都完毕才结束

1. stop()

• 当这个函数触发的时候, 就会让运动立刻停下来

• 你运动到哪一个位置了就停止在哪一个位置

2. finish()

• 当这个函数触发的时候, 就会让运动立刻停下来

• 不管你运动到了哪一个位置, 瞬间到达运动完成位置

十四 jQuery发送ajax请求

---

jQuery 里面帮我们封装好了几个方法

专门用来发送 ajax 请求的

1. $.get() -> 专门用来发送 get 请求的

2. $.post() -> 专门用来发送 post 请求的

3. $.ajax() ->

• 发送什么请求都可以(get, post, put, delete)

• 并且还可以发送一个 jsonp 请求

jQuery 发送一个 GET 请求

• 语法: $.get(请求地址, 需要携带到后端的参数, 成功的回调函数, 期望后端返回的数据类型)

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-bFm5Q4c2-1715424905118)]

[外链图片转存中…(img-Ou2eZak2-1715424905119)]

[外链图片转存中…(img-HKHeMRYx-1715424905119)]

[外链图片转存中…(img-3MTwnXoF-1715424905120)]