阻止后续事件

当给一个本身就带有事件的标签绑定事件时，需要先阻止那个标签的原生事件，不然会容易产生BUG。

阻止事件冒泡

事件冒泡是指在DOM中，当一个特定元素上发生某个事件时，如果该元素有父元素，那么父元素也会接收到相同的事件。接着，如果父元素上也有相同类型的事件监听器，那么它也会被触发。这个过程会一直向上传播，直到到达DOM树的根节点。

举个例子，假设有一个按钮元素嵌套在一个具有点击事件监听器的父元素中。当点击按钮时，按钮会触发点击事件，并且父元素也会接收到相同的点击事件。这种事件向上传播的过程就称为事件冒泡。

在jQuery中，`event.stopPropagation()`和`return false`在阻止事件冒泡上的表现是相似的。它们都阻止了事件进一步冒泡到其父元素和祖先元素。但是，`return false`做得更多一些。

- `event.stopPropagation()`: 这个方法阻止事件向上冒泡到父元素，防止任何父事件处理器被执行。

- `return false`：在jQuery中，返回`false`会做两件事情——调用`event.stopPropagation()`和`event.preventDefault()`。这意味着它不仅阻止了事件冒泡，而且还阻止了事件的默认行为。

这就是它们的主要区别。如果你只想阻止事件冒泡，而不想阻止默认行为，那么你应该使用`event.stopPropagation()`。如果你想同时做这两件事，那么可以返回`false`。

例如，对于一个链接元素，你可能只想阻止点击事件冒泡，而不想阻止链接的默认行为（导航到另一个页面）。在这种情况下，你应该使用`event.stopPropagation()`而不是`return false`。

事件委托

事件委托（Event delegation）是一种常见的JavaScript编程模式，用于处理动态添加或删除的元素上的事件。

传统的事件绑定方式是直接在目标元素上绑定事件处理器，例如：

const button = document.querySelector('.button');
button.addEventListener('click', function(event) {
  console.log('Button clicked');
});

但是，如果在页面上有大量的元素需要绑定事件，或者在运行时动态添加/删除元素，这种方式会变得非常繁琐和低效。

事件委托通过将事件处理器绑定到它们共同的父级元素上，利用事件冒泡的特性，来处理它们的事件。这样，无论添加或删除了多少个子元素，只需要一个事件处理器就能处理它们的事件。

const parentElement = document.querySelector('.parent-element');
parentElement.addEventListener('click', function(event) {
  if (event.target.classList.contains('button')) {
    console.log('Button clicked');
  }
});

在这个例子中，我们将事件处理器绑定到.parent-element上，并通过检查event.target来判断是否点击了.button元素。这样，无论.button元素是在何时何处添加或删除，都可以正确处理它们的点击事件。

addEventListener 和 on 都是用于添加事件监听器的方法，但它们有一些区别。

1. 语法：addEventListener 使用传统的方法调用语法，而 on 是以属性的形式使用。
2. 多个监听器：使用 addEventListener 可以为同一个元素的同一个事件类型添加多个监听器，而使用 on 只能添加一个监听器。如果使用 on 添加多个监听器，后面添加的会覆盖前面的监听器。
3. 移除监听器：使用 addEventListener 添加的监听器可以使用 removeEventListener 方法进行移除，而使用 on 添加的监听器无法直接移除，需要将事件属性设置为 null 或通过其他方式解除绑定。
4. 兼容性：addEventListener 是标准的 DOM Level 2 事件模型方法，具有更好的兼容性，而 on 是旧版的事件处理方式，在部分场景中可能存在兼容性问题。

等待页面加载完毕再执行代码的方式

动画效果

each（）循环

在jQuery中，each()方法用于迭代集合中的元素。它类似于JavaScript中的forEach()方法，但可以直接应用于jQuery对象。

以下是使用each()方法的示例：

// 使用选择器选择所有的p元素，并遍历每一个元素
$("p").each(function(index, element) {
  console.log(index, $(element).text());
});

// 遍历一个数组
const arr = [1, 2, 3, 4, 5];
$.each(arr, function(index, value) {
  console.log(index, value);
});

// 遍历一个对象的属性
const obj = { name: "John", age: 30, city: "New York" };
$.each(obj, function(key, value) {
  console.log(key, value);
});

在上述示例中，each()方法接受两个参数：回调函数和可选的上下文对象。回调函数接受两个参数：索引（或键）和元素（或值）。通过使用$(element)将DOM元素转换为jQuery对象，可以方便地访问元素的属性和方法。

data方法

在前端开发中，data()方法是jQuery库提供的一个函数，用于在HTML元素上存储和检索数据。它允许开发者将自定义数据附加到特定的HTML元素上，并在需要时轻松地访问这些数据。

使用data()方法的一般语法如下：

javascript复制代码$(selector).data(key, value);

• selector：表示要应用data()方法的HTML元素的选择器。
• key：表示要存储的数据的键名。
• value：表示要存储的数据的值。

以下是使用data()方法的几种常见方式：

1. 存储和检索数据：

javascript复制代码// 存储数据
$("p").data("foo", "bar");

// 检索数据
const value = $("p").data("foo"); // "bar"
console.log(value);

2. 存储和检索对象数据：

javascript复制代码// 存储数据
$("p").data("person", { name: "John", age: 30 });

// 检索数据
const person = $("p").data("person");
console.log(person.name); // "John"
console.log(person.age); // 30

3. 使用对象存储多个数据：

javascript复制代码// 存储多个数据
$("p").data({
  name: "John",
  age: 30,
  city: "New York"
});

// 检索数据
console.log($("p").data("name")); // "John"
console.log($("p").data("age")); // 30
console.log($("p").data("city")); // "New York"

通过使用data()方法，您可以轻松地将自定义数据附加到HTML元素上，并在需要时检索和使用它们。这对于存储临时状态、配置选项等非常有用。

前端框架bootstrap

Bootstrap是一个流行的开源前端框架，它提供了一套用于构建响应式和移动优先的网站和应用程序的CSS和JavaScript组件。

使用Bootstrap可以快速搭建现代化和美观的用户界面，无需从头开始编写大量的CSS和JavaScript代码。它提供了许多经过测试和常用的组件，如导航栏、按钮、表单、模态框等，可以通过简单的HTML和CSS类来使用和定制。

以下是使用Bootstrap的一般步骤：

1. 引入Bootstrap文件：在HTML文档中，使用标签引入Bootstrap的CSS文件和<script>标签引入Bootstrap的JavaScript文件。可以选择使用CDN链接或从本地文件引入。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

2. 使用Bootstrap的组件：通过在HTML中添加相应的CSS类来使用Bootstrap的各种组件。例如，使用元素和btn类创建一个按钮：

Click me

3. 根据需要进行自定义：Bootstrap还提供了许多自定义选项，可以使用这些选项来定制组件的外观和行为。具体的自定义方法可以在Bootstrap的官方文档中找到。

注意：bootstrap的js代码是依赖于jquery的，也就意味着你在使用bootstrap的动态效果时一定要导入jQuery

布局容器

在使用bootstrap时，可以使用".container"和"container-fluid"，来为页面布局。

栅格系统（重点）

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

媒体查询

媒体查询（Media Queries）是CSS3中引入的一种功能，用于根据设备的属性和特征来应用不同的样式规则。通过媒体查询，我们可以根据设备的屏幕宽度、高度、分辨率、方向等属性，为不同的设备提供不同的样式。

媒体查询可以帮助我们创建响应式的网站和应用程序，使其能够在不同的设备上正确显示和适应布局。通过使用媒体查询，我们可以根据设备的特征选择性地加载或应用不同的CSS规则，从而为用户提供最佳的用户体验。

以下是一个使用媒体查询的示例：

/* 当屏幕宽度小于等于600px时，应用以下样式 */
@media (max-width: 600px) {
  body {
    background-color: yellow;
  }
}

/* 当屏幕宽度大于600px并且小于等于1200px时，应用以下样式 */
@media (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: green;
  }
}

/* 当屏幕宽度大于1200px时，应用以下样式 */
@media (min-width: 1201px) {
  body {
    background-color: blue;
  }
}

在上面的示例中，我们使用@media关键字定义了三个媒体查询，分别根据屏幕宽度应用不同的背景颜色样式。当屏幕宽度小于等于600px时，背景颜色为黄色；当屏幕宽度在601px到1200px之间时，背景颜色为绿色；当屏幕宽度大于1200px时，背景颜色为蓝色。

在bootstrap中可以使用栅格参数来实现响应式布局：

针对不同的显示器，bootstrap会自动选择相应的参数，如果想兼容所有，那么直接把所有类都添加进去即可。

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类会将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

排版

bootstrap会自动把html的原生标签设置成肉眼可以接受的样子。

只需要会操作类就可以了。需要用时，可以到官网去抄。

表格

为任意

通过 .table-striped 类可以给

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

通过添加 .table-hover 类可以让

通过这些状态类可以为行或单元格设置颜色。