Web前端最全一、Jquery入门（超详），web开发视频教程

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

进入 jQuery 的官方网站 http://jquery.com/,可以下载最新的 jQuery 文件到本地，然后再引入到项目即可。官方网站如下所示：

引入代码示例：

注意：这里的路径位置，请大家根据实际的情况自行调整。另外官方网站有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读），请大家根据自己的需要自行选择下载。

当然如果我们不想把 jQuery 下载到本地，也可以使用 Google 的 CDN 或者使用 Microsoft 的 CDN：

使用 Google 的 CDN：

Google CDN 国内已经无法访问，以下内容仅作演示。

使用 Microsoft 的 CDN：

三、jQuery 语法

==============================================================================

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：

$(selector).action();

• 美元符号 $ 定义 jQuery。

• 选择符（selector）“查询”和“查找” HTML 元素。

• jQuery 的 action() 执行对元素的操作。

另外需要注意的是：在 jQuery 库中 $ 符号就是 jQuery 的一个简写形式，例如 KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 3: (“#̲lw”) 和 jQuery("….ajax 和 jQuery.ajax 是等价的，如果没有特别说明，程序中的 $ 符号都是 jQuery 的一个简写形式。

3.1 文档就绪函数

---

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

});

// 可以简写成

$(funciton(){

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素。

• 获得未完全加载的图像的大小。

上面的这段代码其实有点类似于传统 JavaScript 中的 window.onload 方法，不过它们还是有一些区别的，简单对比如下所示：

| | window.onload | $(doucment).ready() |

| — | — | — |

| 执行时机 | 必须等待网页中所有的内容加载完毕后才能执行（包括图片） | 网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完 |

| 编写个数 | 不能同时编写多个。 | 能同时编写多个。 |

编写个数的意思就是：

window.onload = function () {

alert(“test1”);

};

window.onload = function () {

alert(“test2”);

};

//结果只会输出 test2。

$(document).ready(function () {

alert(“test1”);

});

$(document).ready(function () {

alert(“test2”);

});

//结果两次都输出

3.2 编写我们的第一个 jQuery 程序

---

例子：

四、 jQuery 代码风格

=================================================================================

良好的代码风格使得代码更加具有可读性，适当的注释代码，对于日后代码的维护也是非常有利的。来看个例子：

• 春天
• 春意盎然
• 春意盎然
• 春意盎然
• 春意盎然

• 夏天
• 夏日炎炎
• 夏日炎炎
• 夏日炎炎
• 夏日炎炎

• 秋天
• 秋高气爽
• 秋高气爽
• 秋高气爽
• 秋高气爽

• 代码很简单，我们没有加入 css 样式这些，主要还是讲解 jQuery，运行效果为：

  

  简单解释一下这段代码，当鼠标点击到 a 标签的时候给其添加一个名为 current 的 class，然后调用 next() 和 show() 将其后面的元素显示出来，然后调用 parent()、siblings()、children(“a”) 将它的父辈的同辈元素的内部的子元素 a 都去掉一个名为 current 的 class (removeClass(“current”))，并且将紧邻它们后面的元素都隐藏。

  这就是 jQuery 的强大的链式操作，一行代码就完成了我们导航栏的功能，大家可以试着去写一下原生的 JavaScript 代码，看看需要写多少行，这也就是我们 jQuery 的魅力所在。当然上面的那些方法看不懂也没关系，后面都会讲解的。不过为了进一步改善代码的可读性和可维护性，推荐一种写法：

  $(document).ready(function () {

  $(“.level1>a”).click(function () {

  $(this)

  .addClass(“current”) //给当前元素添加"current"样式

  .next()

  .show() //下一个元素显示

  .parent()

  .siblings()

  .children(“a”)

  .removeClass(“current”) //父元素的同辈元素的子元素a移除"current"样式

  .next()

  .hide(); //它们的下一个元素隐藏

  return false;

  });

  });

  也就是说适当的换行和添加注释可以让我们对代码作用一目了然，增加代码的可读性，便于日后的维护，提高开发效率。

  五、 jQuery 对象和 DOM 对象

  =======================================================================================

  5.1 DOM 对象

  ---

  DOM （Document Object Model）对象，也就是我们经常说的文档对象模型，每一份 DOM 都可以表示成一棵 DOM 树：

  

  比如这样的一段代码：

• h1,p,ul 以及 li 标签都是 DOM 元素节点，我们可以通过 JavaScript 中的 document.getElementById()，document.getElementsByTagName() 等来获取元素节点，像这样获取的 DOM 元素就是 DOM 对象，DOM 对象可以使用 JavaScript 中的方法，比如：

  var domObj = document.getElementById(“id”); //获取DOM对象

  var objHtml = domObj.innerHTML; //使用JavaScript中的属性innerHTML

  5.2 jQuery 对象

  ---

  jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，如果一个对象是 jQuery 对象，那么它就可以使用 jQuery 里的方法，比如：

  $(“#xnm”).html(); //获取id为syl的元素内的html代码，html()是jQuery中的方法

  这段代码等同于：

  document.getElementById(“xnm”).innerHTML;

  在 jQuery 对象中无法使用 DOM 对象中的任何方法，例如 $(“#xnm”).innerHTML; 之类的写法是错的，可以使用 $(“#xnm”).html(); 之类的 jQuery 方法来代替，同样的道理，DOM 对象也不能使用 jQuery 里的方法，例如:document.getElementById(“xnm”).html();也是会报错的。

  注：用 #id 作为选择符取得的是 jQuery 对象而并非 document.getElementById(“id”); 所得到的 DOM 对象，两者并不等价。我们一定要从开始就树立这样的一个观念：jQuery 对象和 DOM 对象是有区别的，它们并不是等价的。

  5.3 jQuery 对象和 DOM 对象之间的相互转换

  ---

  在讲解 jQuery 对象和 DOM 对象之间的相互转换之前，我们先约定好定义变量的风格，如果获取的是 jQuery 对象，那么我们在变量前面加上 $ 符号，例如：

  var $test = jQuery 对象;

  如果获取的是 DOM 对象：

  var test = DOM 对象;

  注：这里加个$只是为了区分变量是 jQuery 对象还是 DOM 对象并不是说所有使用 jQuery 的代码中变量声明都需要只是为了区分变量是jQuery对象还是DOM对象并不是说所有使用jQuery的代码中变量声明都需要。

  5.3.1 jQuery 对象转换为 DOM 对象

  我们前面说过 jQuery 对象不能使用 DOM 中的方法，但是如果我们又不得不使用 DOM 中的方法呢？比如：对 jQuery 对象所提供的方法不熟悉或者忘了但是知道 DOM 中的方法，自己又很懒不想去查 jQuery 手册或者 jQuery 本身就没有封装我们想要使用的方法。有以下的两种处理方法：

  • [index]:jQuery 对象是一个类似数组的对象，可以通过 [index] 的方法得到对应的 DOM 对象，比如：

  var $cr = $(“#cr”); //jQuery 对象

  var cr = $cr[0]; //DOM 对象

  • 通过 get(index) 方法得到相应的 DOM 对象，比如：

  var $cr = $(“#cr”); //jQuery 对象

  var cr = $cr.get(0); //DOM 对象

  最后

  四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

  祝大家都能收获大厂offer~

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

  篇幅有限，仅展示部分内容

  

  

  

  #cr"); //jQuery 对象

  var cr = $cr[0]; //DOM 对象

  • 通过 get(index) 方法得到相应的 DOM 对象，比如：

  var $cr = $(“#cr”); //jQuery 对象

  var cr = $cr.get(0); //DOM 对象

  最后

  四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

  祝大家都能收获大厂offer~

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

  篇幅有限，仅展示部分内容