最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 活在这珍贵的人间，太阳强烈，水波温柔。
- 活在这珍贵的人间，太阳强烈，水波温柔。
- 活在这珍贵的人间，太阳强烈，水波温柔。
- 欢迎来到我的博客哦！
- 欢迎来到我的博客哦！
- 欢迎来到我的博客哦！
- 欢迎来到我的博客哦！
- 欢迎来到我的博客哦！
- 欢迎来到我的博客哦！
1.5 jQuery 筛选方法（重点）
| 语法 | 语法 | 说明 |
| — | — | — |
|
parent()| $(“li”).parent(); | 查找父级 ||
children(selector)| ( “ u l ” ) . c h i l d r e n ( “ l i ” ) ; ∣ 相对于 (“ul”).children(“li”); | 相对于 (“ul”).children(“li”);∣相对于(“ul>li”)，最近一级（亲儿子） ||
find(selector)| ( “ u l ” ) . f i n d ( “ l i ” ) ; ∣ 相对于 (“ul”).find(“li”); | 相对于 (“ul”).find(“li”);∣相对于(“ul li”)，后代选择器 ||
siblings(selector)| $(“.first”).siblings(“li”); | 查找兄弟节点，不包括自己本身 || next[(expr)] | $(“first”).nextAll()； | 查找当前元素之后所有的同辈元素 |
| prevAll([expr]) | $(“.last”).prevAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(“div”).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类，如果有，则返回true。 |
|
eq(index)| ( “ l i ” ) . e q ( 2 ) ∣ 相对于 (“li”).eq(2) | 相对于 (“li”).eq(2)∣相对于(“li:eq(2),index，从0开始”) |1.6 jQuery 里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
完整代码演示如下：
Document 库里
库里
库里
库里
库里
1.7 链式编程
链式编程是为了节省代码量，看起来更优雅。
完整代码演示如下：
Document 库里
库里
库里
库里
库里
（2）jQuery 样式操作
2.1 操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。
1️⃣ 参数只写属性名，则是返回属性值；
$(this).css(“color”);
2️⃣ 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号；
$(this).css(“color”, “red”);
3️⃣ 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号；
$(this).css({“color”:“white”,“font-size”:“20px”});
完整代码演示如下：
Document 2.2 设置类样式方法
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
1️⃣ 添加类
$(“div”).addClass(“current”); // addClass相当于追加类名 不影响以前的类名
2️⃣ 移除类
$(“div”).removeClass(“current”);
3️⃣ 切换类
$(“div”).toggleClass(“current”);
完整代码演示如下：
Document 2.3 类操作与className区别
1️⃣ 原生 JS 中 className 会覆盖元素原先里面的类名。
2️⃣ jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
（3）jQuery 效果
jQuery 给我们封装了很多动画效果，最为常见的如下：
3.1 显示隐藏效果
1️⃣ 显示语法规范
show([speed,[easing],[fn]])
2️⃣ 隐藏语法规范
hide([speed,[easing],[fn]])
3️⃣ 切换语法规范
toggle([speed,[easing],[fn]])
😆温馨提醒😆：
-
参数都可以省略， 无动画直接显示；
-
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)；
-
easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”；
-
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次；
😆建议😆：平时一般不带参数，直接显示隐藏即可；
完整代码演示如下：
Document 显示
隐藏
切换
3.2 滑动效果
1️⃣ 下滑效果语法规范
slideDown([speed,[easing],[fn]])
2️⃣ 上滑效果语法规范
slideUp([speed,[easing],[fn]])
3️⃣ 滑动切换效果语法规范
slideToggle([speed,[easing],[fn]])
😆温馨提醒😆：
-
参数都可以省略， 无动画直接显示；
-
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)；
-
easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”；
-
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次；
完整代码演示如下：
Document 下拉滑动
上拉滑动
切换滑动
3.3 事件切换
hover([over,]out)
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）；
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）；
（3）如果只写一个函数，则鼠标经过和离开都会触发它；
3.4 动画队列及其停止排队方法
1️⃣ 动画或效果队列：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2️⃣ 停止排队
stop()
😆温馨提醒😆：
-
stop() 方法用于停止动画或效果；
-
stop() 写到动画或者效果的前面，相当于停止结束上一次的动画；
代码演示如下：
$(this).children(“ul”).stop().slideToggle();
3.5 淡入淡出效果
1️⃣ 淡入效果语法规范
fadeIn([speed,[easing],[fn]])
2️⃣ 淡出效果语法规范
fadeOut([speed,[easing],[fn]])
3️⃣ 淡入淡出切换效果语法规范
fadeToggle([speed,[easing],[fn]])
4️⃣ 渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])
😆温馨提醒😆：
1.opacity 透明度必须写，取值 0~1 之间。
2. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
3. easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
完整代码演示如下：
Document 淡入效果
淡出效果
淡入淡出切换
修改透明度
3.6 自定义动画 animate
1️⃣ 语法
animate(params,[speed],[easing],[fn])
2️⃣ 参数
-
params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略；
-
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)；
-
easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”；
-
fn: 回调函数，在动画完成时执行的函数，每个元素执行一次；
完整代码演示如下：
Document 动起来
（4）jQuery 属性操作
4.1 设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如
<a>元素里面的 href ，比如<input>元素里面的 type。1️⃣ 获取属性语法
prop(“属性”)
2️⃣ 设置属性语法
prop(“属性”, “属性值”)
4.2 设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”；
1️⃣ 获取属性语法
attr(“属性”) // 类似原生 getAttribute()
2️⃣ 设置属性语法
attr(“属性”, “属性值”) // 类似原生 setAttribute()
4.3 数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
1️⃣ 附加数据语法
data(“name”,“value”) // 向被选元素附加数据
2️⃣ 获取数据语法
date(“name”) // 向被选元素获取数据
4.4 完整代码演示
Document 欢迎来到我的博客哦！
我是div123
（5）jQuery 内容文本值
主要针对元素的内容还有表单的值操作；
1️⃣ 普通元素内容
html()（ 相当于原生inner HTML)html() // 获取元素的内容
html(“内容”) // 设置元素的内容
2️⃣ 普通元素文本内容
text()（相当与原生 innerText）text() // 获取元素的文本内容
text(“文本内容”) // 设置元素的文本内容
3️⃣ 表单的值
val()（相当于原生value）val() // 获取表单的值
val(“内容”) // 设置表单的值
完整代码演示如下：
Document 我是内容
最后
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
x h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($(“div”).data(“index”));
})
（5）jQuery 内容文本值
主要针对元素的内容还有表单的值操作；
1️⃣ 普通元素内容
html()（ 相当于原生inner HTML)html() // 获取元素的内容
html(“内容”) // 设置元素的内容
2️⃣ 普通元素文本内容
text()（相当与原生 innerText）text() // 获取元素的文本内容
text(“文本内容”) // 设置元素的文本内容
3️⃣ 表单的值
val()（相当于原生value）val() // 获取表单的值
val(“内容”) // 设置表单的值
完整代码演示如下：
Document 我是内容
最后
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
