算法刷题
大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
写在最后
最后，对所以做Java的朋友提几点建议，也是我的个人心得：
-
疯狂编程
-
学习效果可视化
-
写博客
-
阅读优秀代码
-
心态调整
=======================================================================
Tab 栏特效中的排他
-
自己的级别的排他：给自己 this 添加 current 类名，让其他兄弟删除 current 类
-
对应的部分的排他：给对应位置的元素添加 current，其他的兄弟删除 current 类
-
找对应关系，使用的是自己的 index() 下标，让另一组中下标相同的项作为对应项
-
通过选中另一组的对应项利用 eq() 方法选择下标项
===================================================================
-
参数是一个函数
-
作用：就是对 jQuery 对象中的元素每一个都执行函数内部的操作
-
each 方法的基本原理就是 for 循环，从对象的下标为 0 的项一直遍历到最后一项，然后对每一项进行操作
优点
-
each的函数内部，也有一个this，指向的是进来遍历的每一次的元素
-
each的函数可以传一个参数i, i表示的是这一次的遍历对象在整体的jQuery对象大排队中的下标位置
// 选择所有的 p 标签
var $ps = $(“.box p”)
// 添加点击事件
// $ps.click(function () {
// // 获取元素在自己的父级中 兄弟间的下标
// console.log($(this).index())
// })
// 通过each 方法进行操作
$ps.each(function (i) {
// i 记录的是这一次遍历时当前元素在 jQuery 对象大排序中的位置
$(this).click(function () {
// 这个内部的this 就是事件源
console.log(i);
console.log($(this).index())
})
})
================================================================
// 选中偶数的列，变色
$(“td:even”).css(“background”,“skyblue”)
// 可以将每一行作为单独操作单位，让每一行中的列进行隔列变色
// 我们一提到对某个元素内部或内部的子元素进行一些操作，首先想到 each 方法
var $tr = $(“tr”);
$tr.each(function () {
// 让子级所有的列隔列变色
$(this).children(“:odd”).css(“background”,“skyblue”)
})
// 方法2
$(“td”).each(function () {
// 可以判断 当前这个 td 在父级中所处的位置
// index()
if ($(this).index() % 2 === 0) {
$(this).css(“background”,“skyblue”)
}
})
=====================================================================
// onload 事件在加载时，指的是页面中多有的资源【DOM树、音频、视频、图片等】加载完毕后，才能触发
// 一个页面中只能出现一次
window.onload = function () {
console.log(1);
var btn = document.getElementsByTagName(“input”)[0];
console.log(btn);
};
// jQuery 中的入口函数
// 仅仅需要等待页面中的 DOM 树加载完毕就可以执行了
$(document).ready(function () {
console.log(2);
var btn = document.getElementsByTagName(“input”)[0];
console.log(btn);
})
// 简化
// 在一个页面中，可以书写多个 jQuery 的入口函数，执行顺序按照前后加载顺序执行
$(function () {
console.log(3);
var btn = document.getElementsByTagName(“input”)[0];
console.log(btn);
})
// $(function () {
// })
============================================================================
-
hide()：元素隐藏，隐藏的前提必须是元素 display:block;
-
sgow()：元素显示，显示的前提必须是元素 display:none;
-
toggle()：在元素隐藏和显示之间进行切换
-
这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画
参数
-
如果不传参数：直接显示和隐藏，没有过渡动画
-
如果传递参数：
-
单词格式：“slow”, “normal”, “fast”
-
数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
-
过度时间内，伴随着宽度和高度以及透明度的变化
// 获取元素
var $pic = $(“#pic”)
var $btn1 = $(“#btn1”)
var $btn2 = $(“#btn2”)
var $btn3 = $(“#btn3”)
// 添加点击事件，让图片实现显示和隐藏
$btn1.click(function () {
// $pic.hide(“slow”);
$pic.hide(1000);
})
$btn2.click(function () {
$pic.show(“normal”);
})
$btn3.click(function () {
$pic.toggle(“fast”);
})
====================================================================================
-
slideDown()：滑动显示（方向不一定）
-
slideUp()：滑动隐藏
-
slideToggle()：滑动切换
-
让元素在 display 属性的 block 和 none 之间进行切换
参数
-
如果不传参数：默认的过渡时间为 400毫秒
-
如果传递参数：
-
单词格式：“slow”, “normal”, “fast”
-
数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
注意
-
如果元素没有设置过宽高就不会出现滑动的效果
-
如果元素设置了高度和宽度，会进行上下垂直方向的滑动
-
动画效果：高度属性在0到设置值之间的变化，没有透明度动画
-
如果元素设置了定位，偏移量方向如果是 bottom 参与了，滑动方向会发生变化
// 获取元素
var $pic = $(“#pic”)
var $btn1 = $(“#btn1”)
var $btn2 = $(“#btn2”)
var $btn3 = $(“#btn3”)
// 添加点击事件，让图片实现滑动显示和隐藏
$btn1.click(function () {
$pic.slideUp(1000)
})
$btn2.click(function () {
$pic.slideDown(1000)
})
$btn3.click(function () {
$pic.slideToggle(1000)
})
=================================================================================
-
fadeIn()：淡入，透明度逐渐增大最终显示
-
fadeOut()：淡出，透明度逐渐降低最终隐藏
-
fadeToggle()：切换效果
-
fadeTo()：淡入货单出到某个指定的透明度
-
动画效果，执行的是透明度动画，也是在 display 属性的 block 和 none 之间切换
参数
-
如果不传参数：默认的过渡时间为 400 毫秒
-
如果传递参数：
-
单词格式：“slow”, “normal”, “fast”
-
数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
// 获取元素
var $pic = $(“#pic”)
var $btn1 = $(“#btn1”)
var $btn2 = $(“#btn2”)
var $btn3 = $(“#btn3”)
var $btn4 = $(“#btn4”)
// 添加点击事件，让图片实现淡入显示和淡出隐藏
$btn1.click(function () {
$pic.fadeOut(“slow”)
})
$btn2.click(function () {
$pic.fadeIn(1000)
})
$btn3.click(function () {
$pic.fadeToggle()
})
$btn4.click(function () {
$pic.fadeTo(500,0.5)
})
========================================================================
-
作用：执行 CSS 属性集的自定义动画
-
语法：
$(selector).animate(styles, speed, easing, callback); -
参数1：css 的属性名和运动结束位置的属性值的集合
-
参数2：可选，规定动画的素的，默认的是"normal"。其他值：“slow”,“normal”,“fast”，数字格式，单位为毫秒
-
参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing 和 linear
-
参数4：可选，animate 函数执行完之后，要执行的函数
==============================================================
-
同一个元素对象身上，如果定义了多个动画，动画会排队等待执行
-
如果是不同的元素对象都有动画，不会出现排队机制
-
如果是其他的非运动的代码，也不会等待运动完成
-
之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队
-
同一个元素身上的运动，可以简化成链式调用的方法
======================================================================
-
delay：延迟的意思
-
将 delay() 设置在某个运动方法之前，表示后面的运动要在规定的时间之后在执行，有延迟运动的效果
-
参数：时间的数值，表示延迟的时间
-
除了 animate 方法之外，其他的运动方法也有延迟效果
=====================================================================
-
stop()作用：设置元素对象身上的排队的动画以何种方式进行停止。
-
有两个参数，都是布尔值
-
参数1：设置是否清空后面的动画排队，如果是 true 表示清空，如果是 flase 表示不清空至停止当前的一个动画
-
参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位置，如果是 flase 表示不完成当前动画，立即停止在当前位置
var $box1 = $(“.box1”);
var during = 2000;
// box1 有四个运动进行排队
$box1.animate({“left” : 500},during);
$box1.animate({“top” : 500},during);
$box1.animate({“left” : 0},during);
$box1.animate({“top” : 30},during);
// 添加按钮点击事件
// 清空动画，走到结尾
$(“#btn1”).click(function () {
$box1.stop(true,true)
})
// 清空动画，停在当前
$(“#btn2”).click(function () {
$box1.stop(true,false)
})
// 不清空后面的动画，当前运动立即走到结尾
$(“#btn3”).click(function () {
$box1.stop(false,true)
})
// 不清空后面的动画，当前运动立即停止在当前位置
$(“#btn4”).click(function () {
$box1.stop(false,false)
})
// 在实际工作中，一般要求会清空后面的动画，当前动画要停止在当前的位置
// 更多时候使用 stop(true)
================================================================
-
如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了多个动画，会进行动画排队
-
需要去清除排队的动画，进行防骚扰操作
方法
-
利用stop()方法
-
在每一个运动函数之前都增加一个 stop(true)，表示在运动执行之前，会讲前面排队的动画清空，然后停止在当前位置
-
利用函数节流，如果元素在运动，直接 reutrn，不要执行后面的运动代码
-
每个 jQuery 对象，都能调用一个 is() 方法，作用是显示元素对象的某种状态。
-
如果参数位置是
is(":animated")返回值是布尔值，true表示正在运动，false表示没有运动
var $box1 = $(“.box1”);
var during = 1000;
// 将运动设置给事件，事件多次触发会积累动画出现动画排队
// 清除动画排队方法1： 在每一次新的运动开始之前，去停止之前所有的动画排队
// $box1.mouseenter(function () {
// $(this).children().stop(true).slideUp(during)
// })
// $box1.mouseleave(function () {
// $(this).children().stop(true).slideDown(during)
// })
// 清空动画排队方法2：使用函数节流方式
$box1.mouseenter(function () {
// 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
if ($(this).children().is(“:animated”)) {
return;
}
// 如果走到这里，说明元素没有在运动，就可以添加新运动
$(this).children().stop(true).slideUp(during)
})
$box1.mouseleave(function () {
// 判断元素自己是否在运动中，如果是，那么直接返回不要往下添加新的运动
if ($(this).children().is(“:animated”)) {
return;
}
$(this).children().stop(true).slideDown(during)
})
==========================================================================
创建元素
语法：$('<li></li>')
追加元素1
-
向父元素最后追加
-
语法：
父元素JQ对象.append(新创建的JQ对象); -
语法：
新创建JQ对象.appendTo('父元素选择器' 或 父元素JQ对象); -
向父元素最前面追加
-
语法：
父元素JQ对象.prepend(新创建的JQ对象); -
语法：
新创建JQ对象.prependTo('父元素选择器' 或 父元素JQ对象);
追加元素2
-
向元素后面追加新的兄弟
-
语法：
JQ对象.after(新创建的JQ对象); -
语法：
新创建JQ对象.insertAfter('选择器' 或 JQ对象); -
向元素前面追加新的兄弟
-
语法：
JQ对象.before(新创建的JQ对象); -
语法：
新创建JQ对象.insertBefore('选择器' 或 JQ对象)
========================================================================
删除元素
-
语法：
JQ对象.remove(); -
删除谁就让谁调用这个方法
清空元素
-
清空方式1：JQ对象.empty()；推荐使用，清空内部的所有元素及元素相关的事件
-
清空方式2：JQ对象.html(’’)；仅仅清空内部的元素，不清理内存中的元素的事件
=====================================================================
-
语法：
JQ对象.clone(布尔值); 返回克隆好的元素; -
参数：默认是false，表示仅仅克隆内容。true，克隆内容和事件
==================================================================
width() 和 height() 方法
操作的大小仅仅是内容部分
-
设置：
-
语法：
jQuery 对象.width(数字); -
获取：
-
语法：
jQuery 对象.width();
innerWidth() 和 innerHeight() 方法
操作的大小是内容部分 + padding
-
设置：
-
语法：
jQuery 对象.innerWidth(数字); -
获取：
-
语法：
jQuery 对象.innerWidth();
outerWidth() 和 outerHeight() 方法
操作的大小是内容部分 + padding + border
-
设置：
-
语法：
jQuery 对象.outerWidth(数字); -
获取：
-
语法：
jQuery 对象.outerWidth();
========================================================================
获取元素距离文档的位置
-
语法：
jQuery 对象.offset(); -
返回一个对象，对象中包含了元素的位置
-
注意：offset() 方法获取的元素的位置，永远参照文档，和定位没有关系
距离上级定位参考元素的位置
-
语法：
jQuery 对象.position(); -
返回一个对象，对象中包含了元素的位置
-
注意：position() 方法获取的元素的位置，参照最近的定位元素（和定位有关系）
====================================================================
-
设置：
-
语法：
jQuery 对象.scrollTop(数字); -
获取：
-
语法：
jQuery 对象.scrollTop();
===================================================================
-
注册简单事件语法：
jQuery 对象.on('事件名', 事件处理程序); -
事件委托的实现：
jQuery 对象.on('事件名', 选择器, 事件处理程序); -
选择器：子孙选择器
-
注意：在事件处理程序中，this 代表的是子孙元素（所点最先出发的）
=====================================================================
-
解除简单的事件：
jQuery 对象.off('事件名', 事件处理程序名称); -
解除事件委托注册的事件：
jQuery 对象.off('事件名', 选择器, 事件处理程序名称);
=======================================================================
语法：jQuery 对象.trigger('事件名');
后话
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
对于面试，说几句个人观点。
面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。
所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。
扫一扫
1544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
