前端入门三板斧

第99999999号韭菜
188 阅读23分钟

前言

想前端入门的朋友们，可以了解下前端基础三大件哦！

2cd3a5792a1c797d29725d25d0aadeb7.png

第一斧 HTML（Hypertext Markup Language）

HTML是一种标记语言，用于创建网页的结构和内容。它由一系列的标签组成，这些标签描述了网页中的不同元素，如标题、段落、图像、链接等。HTML负责定义网页的结构，使浏览器能够正确地解释和显示页面的内容。

HTML 标签结构

HTML 使用标签来定义文档中的元素。了解常用的 HTML 标签和它们的结构是非常重要的。

<!-- 标题 -->
<h1>这是一个标题</h1>

<!-- 段落 -->
<p>这是一个段落。</p>

<!-- 链接 -->
<a href="https://www.example.com">这是一个链接</a>

<!-- 图像 -->
<img src="image.jpg" alt="图片描述">

<!-- 列表 -->
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>

<!-- 表格 -->
<table>
  <tr>
    <th>表头 1</th>
    <th>表头 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table>

HTML 表单

HTML 表单用于收集用户输入的数据。了解如何创建表单以及常见的表单元素是很重要的。

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email" required>

  <input type="submit" value="提交">
</form>

HTML 布局

了解如何使用 HTML 创建基本的布局是重要的。

<div class="container">
  <header>
    <h1>网页标题</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">链接 1</a></li>
      <li><a href="#">链接 2</a></li>
      <li><a href="#">链接 3</a></li>
    </ul>
  </nav>

  <main>
    <h2>主要内容标题</h2>
    <p>这是主要内容。</p>
  </main>

  <footer>
    <p>版权信息</p>
  </footer>
</div>

第二斧 CSS（Cascading Style Sheets）

CSS是一种样式表语言，用于控制网页的布局和外观。通过CSS，开发者可以定义网页元素的样式，如字体、颜色、大小、边距、背景等。CSS通过将样式与HTML文档分离，使开发者能够更好地管理和调整网页的外观，提供了更大的灵活性和可维护性。

盒模型（Box Model）

当涉及到盒模型（Box Model）时，CSS将每个HTML元素视为一个矩形的盒子，该盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。这四个部分共同定义了元素在页面中的尺寸、边界和布局。

示例讲解

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 150px;
      padding: 20px;
      border: 2px solid #000;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="box">This is the content of the box.</div>
</body>
</html>

在上面的示例中，我们创建了一个具有.box类的<div>元素，并应用了一些CSS样式来定义盒模型的各个部分。

  • 内容（Content） ：内容部分指的是盒子内部的实际内容，如文本、图像等。在示例中，盒子的内容是文本 "This is the content of the box."。
  • 内边距（Padding） ：内边距是位于内容和边框之间的空白区域。通过设置padding属性，我们给盒子的内容周围添加了20像素的内边距。
  • 边框（Border） ：边框是包围内容和内边距的线条。通过设置border属性，我们给盒子添加了2像素宽度的黑色实线边框。
  • 外边距（Margin） ：外边距是盒子与相邻元素之间的空白区域。通过设置margin属性，我们给盒子添加了10像素的外边距

盒模型组成部分

在CSS中，可以通过设置box-sizing属性来控制盒模型的类型。默认情况下，box-sizing的值是content-box，表示使用标准模型。如果将其设置为border-box，则使用IE盒模型。例如：

.box {
  box-sizing: border-box;
}

通过使用border-box，可以更方便地计算元素的尺寸，因为它将内边距和边框计算在内，不会改变元素的实际尺寸。这在构建响应式布局时特别有用。

标准盒模型

在标准模型（W3C 盒模型）中，元素的尺寸（width和height）指的是内容区域的尺寸，而内边距、边框和外边距都会增加元素的实际尺寸。也就是说，如果将一个元素的宽度设置为200像素，再加上20像素的内边距和2像素的边框，最终元素的实际宽度将是200 + 20 + 2 = 222像素。

IE盒模型

IE盒模型（传统盒模型），在这种模型中，元素的尺寸（width和height）包括了内容区域、内边距和边框的总和。也就是说，如果将一个元素的宽度设置为200像素，那么元素的实际宽度将保持为200像素，而内边距和边框将从内容区域内部减去。

选择器（Selectors）

选择器（Selectors）在CSS中用于选择要应用样式的HTML元素。它们允许你根据元素的标签名、类名、ID、属性等进行选择，并将样式应用于选定的元素。

常见选择器示例

  1. 元素选择器（Element Selectors） ：通过元素的标签名选择元素。
/* 选择所有段落元素 */
p {
  color: blue;
}
  1. 类选择器（Class Selectors） ：通过元素的类名选择元素。
<!-- HTML -->
<p class="highlight">This is a highlighted paragraph.</p>

/* 选择具有.highlight类的元素 */
.highlight {
  background-color: yellow;
}
  1. ID选择器（ID Selectors） ：通过元素的ID选择元素。
<!-- HTML -->
<div id="header">This is the header.</div>

/* 选择具有header ID的元素 */
#header {
  font-size: 24px;
}
  1. 属性选择器（Attribute Selectors） ：通过元素的属性选择元素。可以选择具有特定属性、具有特定属性值或满足特定属性值模式的元素。
<!-- HTML -->
<a href="https://example.com">Visit Example</a>

/* 选择具有href属性的a元素 */
a[href] {
  color: green;
}
  1. 伪类选择器（Pseudo-Class Selectors） ：通过元素的特殊状态或位置选择元素，如:hover（鼠标悬停）、:first-child（第一个子元素）等。
/* 选择鼠标悬停在链接上的a元素 */
a:hover {
  text-decoration: underline;
}
  1. 伪元素选择器（Pseudo-Element Selectors） ：通过元素的特定部分选择元素，如::before（在元素内容之前插入内容）和::after（在元素内容之后插入内容）等。
/* 在每个段落之前插入内容 */
p::before {
  content: ">> ";
}

布局（Layout）

布局（Layout）是指在网页中定位和排列元素的过程。CSS提供了多种布局技术，下面我将详细讲解其中几种常用的布局。

流动布局（Flow Layout）

流动布局是默认的布局方式，元素按照它们在HTML中出现的顺序自上而下依次排列。

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</body>
</html>

浮动布局（Float Layout）

浮动布局通过将元素从正常的文档流中脱离，使其向左或向右浮动，以便实现多列布局或图文混排等效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: red;
      float: left;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</body>
</html>

弹性盒子布局（Flexbox Layout）

弹性盒子布局是一种用于创建灵活的、响应式的布局的技术。它通过将容器内的元素放置在一个可伸缩的容器中，使其能够按照定义的规则自动调整和排列。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
    }

    .box {
      width: 200px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

网格布局（Grid Layout）

网格布局（Grid Layout）是一种强大的CSS布局技术，它允许你以行和列的形式创建复杂的网格结构，并将元素放置在网格单元中。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
    }

    .box {
      background-color: red;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </div>
</body>
</html>

在上面的示例中，首先将包含盒子的父容器.container设置为网格布局，通过display: grid来实现。然后，使用grid-template-columns属性定义了网格的列数和宽度。在这个例子中，将网格分为三列，每一列的宽度相等，使用1fr表示。grid-gap属性用于设置网格项之间的间距。

在容器内部，创建了六个具有.box类的<div>元素作为网格项。这些网格项会自动填充到网格中，并根据网格的定义进行排列。

响应式设计（Responsive Design）

响应式设计（Responsive Design）是一种网页设计方法，旨在使网站能够在不同的设备和屏幕尺寸上提供最佳的用户体验。通过使用响应式设计，网站可以根据用户所使用的设备自动调整其布局和外观，以适应不同的屏幕大小和分辨率。

媒体查询

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>响应式设计示例</title>
  <style>
    /* 默认样式 */
    .box {
      width: 100%;
      background-color: gray;
      color: white;
      text-align: center;
      padding: 20px;
    }

    /* 在屏幕宽度小于600px时应用的样式 */
    @media (max-width: 600px) {
      .box {
        background-color: red;
      }
    }

    /* 在屏幕宽度大于600px且小于1200px时应用的样式 */
    @media (min-width: 601px) and (max-width: 1200px) {
      .box {
        background-color: green;
      }
    }

    /* 在屏幕宽度大于1200px时应用的样式 */
    @media (min-width: 1201px) {
      .box {
        background-color: blue;
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>响应式设计示例</h1>
    <p>这是一个响应式设计的示例。</p>
  </div>
</body>
</html>

在上面的示例代码中，定义了一个.box类，它是一个包含文本内容的<div>元素。默认情况下，.box类具有灰色背景色和白色文字颜色。

然后，使用CSS媒体查询来指定在不同的屏幕宽度下应用不同的样式。首先，定义了一个@media (max-width: 600px)的媒体查询，它表示当屏幕宽度小于或等于600px时应用该样式。在这种情况下，将.box类的背景色设置为红色。

接下来，定义了一个@media (min-width: 601px) and (max-width: 1200px)的媒体查询，它表示当屏幕宽度大于600px且小于或等于1200px时应用该样式。在这种情况下，将.box类的背景色设置为绿色。

最后，定义了一个@media (min-width: 1201px)的媒体查询，它表示当屏幕宽度大于1200px时应用该样式。在这种情况下，将.box类的背景色设置为蓝色。

盒子阴影和圆角（Box Shadow & Border Radius）

CSS 盒子阴影（Box Shadow）和圆角（Border Radius）是常用的样式属性，用于美化页面元素的外观。

盒子阴影（Box Shadow）

盒子阴影属性用于在元素周围创建阴影效果。它可以通过设置阴影的颜色、位置、模糊程度和扩展程度来实现不同的效果。

CSS 属性：box-shadow

语法：box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow：水平阴影的位置，可以是正值（向右偏移）或负值（向左偏移）。
  • v-shadow：垂直阴影的位置，可以是正值（向下偏移）或负值（向上偏移）。
  • blur：模糊程度，可选。默认为 0，表示无模糊。
  • spread：阴影的扩展程度，可选。正值会使阴影变大，负值会使阴影变小。
  • color：阴影的颜色，可选。可以使用颜色值或者关键字。
  • inset：可选参数，如果设置为 inset，则阴影将被插入到元素中，使得元素看起来凹陷。
    .box {
       width: 200px;
       height: 200px;
       background-color: #f1f1f1;
       box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
    }

圆角（Border Radius）

圆角属性用于设置元素的边框圆角效果，使元素的边框变得圆滑。

CSS 属性：border-radius

语法：border-radius: value;

  • value：可以是一个具体的长度值（如像素 px）或百分比（相对于元素的宽度或高度），也可以是关键字（如 "50%" 表示一个完全圆形的边角）。
 .box {
   width: 200px;
   height: 200px;
   background-color: #f1f1f1;
   border-radius: 10px;
 }

综合示例

.box {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

上面的示例代码将创建一个宽高为 200px 的盒子，具有灰色背景，阴影效果和圆角边框效果。可以根据需要调整阴影和圆角的参数值来实现不同的效果。

背景和渐变（Background & Gradient）

当我们设计网页时，CSS 的背景和渐变功能是非常有用的。CSS 背景属性允许我们设置元素的背景颜色、图像或者使用渐变效果来填充元素的背景。

背景属性

CSS 背景属性用于设置元素的背景样式。以下是一些常用的 CSS 背景属性：

  • background-color: 设置元素的背景颜色。
  • background-image: 设置元素的背景图像。
  • background-repeat: 设置背景图像的重复方式。
  • background-position: 设置背景图像的位置。
  • background-size: 设置背景图像的尺寸。
  • background-attachment: 设置背景图像是否随着页面滚动。
  • background-origin: 设置背景图像的起始位置。
  • background-clip: 设置背景图像的裁剪方式。
/* 设置背景颜色 */
body {
  background-color: #f1f1f1;
}

/* 设置背景图像 */
div {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 设置背景图像起始位置和裁剪方式 */
div {
  background-origin: content-box;
  background-clip: padding-box;
}

/* 设置背景图像是否随页面滚动 */
div {
  background-attachment: fixed;
}

渐变

CSS 渐变允许我们创建平滑的颜色过渡效果，可以用于填充元素的背景、边框或文字等。 CSS 渐变有两种类型：线性渐变（Linear Gradient）和径向渐变（Radial Gradient）。

线性渐变

线性渐变由起点和终点决定，颜色会沿着线段从起点渐变到终点。

/* 从上到下的线性渐变 */
div {
  background: linear-gradient(to bottom, #ff0000, #0000ff);
}

/* 从左上到右下的线性渐变 */
div {
  background: linear-gradient(45deg, #ff0000, #0000ff);
}

/* 线性渐变中使用多个颜色 */
div {
  background: linear-gradient(#ff0000, #00ff00, #0000ff);
}

径向渐变

径向渐变以一个中心点为起点，从中心向外辐射状渐变。

/* 从内到外的径向渐变 */
div {
  background: radial-gradient(circle, #ff0000, #0000ff);
}

/* 不同形状的径向渐变 */
div {
  background: radial-gradient(ellipse, #ff0000, #0000ff);
}

/* 径向渐变中使用多个颜色 */
div {
  background: radial-gradient(#ff0000, #00ff00, #0000ff);
}

过渡和动画（Transitions & Animations）

过渡（Transitions）和动画（Animations）是在网页开发中常用的技术，用于实现元素之间的平滑过渡和动态效果。过渡指的是元素从一种状态过渡到另一种状态的过程，而动画则是元素连续变化的效果。

过渡（Transitions）

过渡描述了元素从一种状态平滑地过渡到另一种状态的效果。它可应用于多个 CSS 属性，如颜色、尺寸、位置等。通过指定过渡的属性、持续时间、延迟和过渡函数，我们可以创建出各种过渡效果

<style>
  .button {
    background-color: blue;
    transition: background-color 0.3s ease;
  }
  
  .button:hover {
    background-color: red;
  }
</style>

<button class="button">按钮</button>

在上面的代码中，定义了一个 .button 类，它具有初始的蓝色背景颜色，并应用了一个过渡效果。当鼠标悬停在按钮上时，通过为 .button:hover 添加新的背景颜色，实现了从蓝色到红色的平滑过渡效果。transition 属性指定了过渡的属性（这里是背景颜色）、持续时间（0.3 秒）和过渡函数（ease）。

动画（Animations）

动画是元素在一段时间内连续变化的效果。与过渡不同，动画可以定义多个关键帧，每个关键帧描述了元素在不同时间点的状态。通过指定动画的名称、持续时间、延迟、重复次数和关键帧的样式，可以创建各种复杂的动画效果。

<style>
  @keyframes scale-up {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: scale-up 1s ease;
  }
</style>

<div class="box"></div>

在上面的代码中，使用 @keyframes 关键字定义了一个名为 scale-up 的动画。该动画描述了元素从初始状态（0%）到最终状态（100%）的变化，即从无到有的放大效果。在 .box 类中，将动画应用到了一个具有蓝色背景的正方形元素上。animation 属性指定了动画的名称（scale-up）、持续时间（1 秒）和过渡函数（ease）。

浏览器兼容性（Browser Compatibility）

浏览器兼容性是指在不同的网络浏览器中，网页或应用程序能够以一致的方式进行正常显示和运行的能力。由于不同的浏览器采用了不同的渲染引擎和对Web标准的支持程度不同，开发人员在编写网页或应用程序时需要考虑到不同浏览器的差异，并采取相应的兼容性策略。

使用浏览器前缀

某些CSS属性在不同浏览器中需要使用不同的前缀来生效。例如，某些早期版本的Chrome浏览器需要使用"-webkit-"前缀，而Firefox浏览器需要使用"-moz-"前缀。下面是一个示例，展示如何在CSS中使用浏览器前缀：

.box {
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

第三斧 JS（JavaScript）

JS是一种脚本语言，用于为网页添加交互和动态功能。它可以在网页上执行各种操作，如响应用户的事件（点击、滚动等）、修改页面内容、与服务器进行通信等。JS是一种功能强大的语言，使得开发者能够创建出丰富、动态的用户体验，使网页更具交互性和活力。

语言特点

  • 客户端脚本语言：JavaScript主要在Web浏览器中运行，用于处理用户交互、操作网页元素等。
  • 解释执行：JavaScript是一种解释型语言，不需要编译过程，代码在运行时逐行解释执行。
  • 弱类型语言：JavaScript是一种弱类型语言，变量的类型可以动态改变。

用途

  • 网页交互：JavaScript可以用于处理用户的点击、输入等操作，实现动态网页效果，如表单验证、元素动画等。
  • 数据处理：JavaScript可以对数据进行处理和操作，如数组、字符串、日期等。
  • AJAX技术：通过JavaScript的XMLHttpRequest对象，可以实现异步数据交互，从服务器获取数据而无需刷新整个页面。
  • 浏览器控制：JavaScript可以操作浏览器的各种功能和属性，如修改URL、打开新窗口、操纵DOM等。

基本语法

变量声明：使用 var、let 或 const 关键字声明变量。

作用域：var关键字声明的变量具有函数作用域或全局作用域，而let和const关键字声明的变量具有块级作用域。块级作用域指的是在包含变量声明的花括号（{}）内部，变量只在该块内部可见。

变量提升：使用var关键字声明的变量会发生变量提升（hoisting），即变量的声明会被提升到其所在作用域的顶部。这意味着可以在变量声明之前访问变量。而使用let和const关键字声明的变量不会发生变量提升，它们只能在声明之后才能访问。

重复声明：使用var关键字可以重复声明同一个变量，而且不会引发错误。然而，使用let和const关键字在同一作用域内重复声明变量会导致语法错误。

const a = 1
let b = 2
var c = 3

数据类型：包括字符串、数字、布尔值、数组、对象等。

字符串（String）：

let name = "John";
let message = "Hello, world!";

数字（Number）：

let age = 25;
let pi = 3.14;

布尔值（Boolean）：

let isTrue = true;
let isFalse = false;

数组（Array）：

let numbers = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "orange"];

对象（Object）：

let person = {
  name: "John",
  age: 25,
  city: "New York"
};

let car = {
  brand: "Toyota",
  model: "Camry",
  year: 2021
};

条件语句：使用 if、else if、else 进行条件判断。

let num = 10;

if (num > 0) {
  console.log("Number is positive");
} else if (num < 0) {
  console.log("Number is negative");
} else {
  console.log("Number is zero");
}

循环语句：使用 for、while、do-while 等进行循环控制。

  1. for循环：for循环在已知循环次数的情况下使用。它由三个部分组成：初始化表达式、循环条件和循环迭代器。以下是for循环的语法：
for (初始化表达式; 循环条件; 循环迭代器) {
  // 循环体
}

示例：

for (let i = 0; i < 5; i++) {
  console.log(i);
}
  1. while循环：while循环在循环次数未知但满足特定条件时使用。它只有一个循环条件，只要条件为真，循环将一直执行。以下是while循环的语法：
while (循环条件) {
  // 循环体
}

示例：

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}
  1. do-while循环：do-while循环类似于while循环，但它保证循环体至少执行一次，因为它先执行循环体，然后再检查循环条件。以下是do-while循环的语法：
do {
  // 循环体
} while (循环条件);

示例：

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

tips:无论使用哪种循环控制结构，都要确保设置适当的循环条件和适时更新循环迭代器，以避免无限循环。

函数定义：使用 function 关键字定义函数。

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice"); // 输出：Hello, Alice!
greet("Bob"); // 输出：Hello, Bob!

事件处理：通过给元素添加事件监听器，实现对用户事件（如点击、输入）的响应。

  1. 点击事件：
// 获取元素
const button = document.getElementById('myButton');

// 添加点击事件监听器
button.addEventListener('click', function() {
  // 在此处编写处理点击事件的代码
  console.log('按钮被点击了！');
});

在上面的例子中，我们获取了具有id为myButton的元素，并向其添加了一个点击事件监听器。当按钮被点击时，控制台将输出"按钮被点击了！"。

  1. 输入事件（例如，文本框的输入）：
// 获取元素
const input = document.getElementById('myInput');

// 添加输入事件监听器
input.addEventListener('input', function() {
  // 在此处编写处理输入事件的代码
  console.log('输入框的值已更改：', input.value);
});

在上面的例子中，我们获取了具有id为myInput的输入框元素，并向其添加了一个输入事件监听器。每当输入框的值发生更改时，控制台将输出新的输入框值。

数据处理方法

可以参考我的另一篇js数据处理文章

常见的DOM用户事

JavaScript中的DOM（文档对象模型）提供了一系列的用户事件，可以用于响应用户在浏览器中的交互操作。以下是一些常见的DOM用户事件：

  1. click：当用户点击（或触摸）一个元素时触发。
  2. mouseover：当鼠标指针移动到一个元素上方时触发。
  3. mouseout：当鼠标指针从一个元素移出时触发。
  4. mousedown：当用户按下鼠标按钮时触发。
  5. mouseup：当用户释放鼠标按钮时触发。
  6. mousemove：当鼠标指针在一个元素内部移动时触发。
  7. keydown：当用户按下键盘上的任意键时触发。
  8. keyup：当用户释放键盘上的键时触发。
  9. focus：当元素获取焦点时触发。
  10. blur：当元素失去焦点时触发。
  11. submit：当用户提交表单时触发。
  12. change：当用户改变表单元素的值时触发（例如输入文本、选择选项等）。
  13. input：当用户输入文本或改变表单元素的值时触发。
  14. scroll：当元素滚动时触发。
  15. resize：当浏览器窗口大小改变时触发。

DOM事件的触发顺序

在DOM中，事件触发的顺序遵循一个特定的模型，称为事件传播模型（Event Propagation Model）。事件传播模型定义了事件在DOM树中传播的方式，包括事件捕获阶段（capture phase）和事件冒泡阶段（bubble phase）。

事件捕获阶段是指事件从根节点开始向下传播，直到达到触发事件的目标元素。事件冒泡阶段是指事件从目标元素开始向上冒泡，直到达到根节点。

下面是一个示例代码，演示了事件的触发顺序：

<!DOCTYPE html>
<html>
<head>
  <title>事件触发顺序示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="btn">按钮</button>
    </div>
  </div>

  <script>
    function handleClick(event) {
      console.log(event.target.id);
    }

    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    var btn = document.getElementById('btn');

    outer.addEventListener('click', handleClick, true);
    inner.addEventListener('click', handleClick, true);
    btn.addEventListener('click', handleClick, true);

    outer.addEventListener('click', handleClick, false);
    inner.addEventListener('click', handleClick, false);
    btn.addEventListener('click', handleClick, false);
  </script>
</body>
</html>

在这个示例中，我们有三个嵌套的元素：outer、inner和btn，它们分别代表外部容器、内部容器和按钮。

在代码中，我们为每个元素都添加了相同的点击事件处理程序handleClick，并在事件监听器中指定了第三个参数（useCapture），用于控制事件是在事件捕获阶段还是事件冒泡阶段被处理。

当我们单击按钮时，事件触发的顺序如下：

  1. 事件捕获阶段：

    • outer的事件处理程序触发。
    • inner的事件处理程序触发。
    • btn的事件处理程序触发。

  2. 目标元素阶段：

    • btn的事件处理程序触发。

  3. 事件冒泡阶段：

    • btn的事件处理程序触发。
    • inner的事件处理程序触发。
    • outer的事件处理程序触发。

在这个示例中，事件首先在捕获阶段从根节点向下传播，然后在目标元素阶段处理，最后在冒泡阶段从目标元素向上冒泡。需要注意的是，我们在添加事件监听器时分别指定了useCapture为true和false，这是为了展示事件捕获阶段和事件冒泡阶段的区别。如果useCapture为true，则事件将在捕获阶段进行处理；如果useCapture为false（默认值），则事件将在冒泡阶段进行处理。

需要注意的是，事件传播模型可以通过在事件处理程序中调用event.stopPropagation()方法来停止事件的传播，或者通过在事件监听器中返回false来实现相同的效果。

DOM操作

  • Document Object Model（DOM）是JavaScript操作网页元素的接口。
  • 可以通过DOM操作获取或修改网页中的元素、属性、样式等。
  • 可以动态创建、删除、移动网页中的元素。

获取元素

DOM提供了多种方法来获取HTML元素，例如通过id、类名、标签名等进行选择。以下是一些常用的获取元素的方法：

通过id获取元素

const element = document.getElementById('elementId');

通过类名获取元素

const elements = document.getElementsByClassName('className');

通过标签名获取元素

const elements = document.getElementsByTagName('tagName');

创建元素

可以使用document.createElement()方法创建新的HTML元素。创建的元素可以通过其他DOM操作进行插入、修改或删除。

const newElement = document.createElement('div');
newElement.textContent = 'Hello, World!';

修改元素

可以使用DOM提供的属性和方法来修改元素的内容、样式等。

修改文本内容

element.textContent = 'New text content';

修改样式

element.style.color = 'red';
element.style.fontSize = '16px';

添加/移除CSS类

element.classList.add('className');
element.classList.remove('className');

插入元素

可以使用DOM提供的方法将元素插入到文档中的指定位置。

在某个元素之前插入

parentElement.insertBefore(newElement, existingElement);

在某个元素之后插入

parentElement.insertAdjacentElement('afterend', newElement);

在父元素的末尾插入

parentElement.appendChild(newElement);

删除元素

可以使用DOM提供的方法从文档中移除元素。

parentElement.removeChild(childElement);

事件处理

可以通过DOM事件来响应用户的交互操作，例如点击、鼠标移动等。

添加事件监听器

element.addEventListener('click', eventHandler);

移除事件监听器

element.removeEventListener('click', eventHandler);

框架和库

  • JavaScript拥有丰富的第三方框架和库，如React、Vue、Angular等，用于简化开发复杂的Web应用。
  • 这些框架和库提供了更高级的抽象和工具，使得开发者能够更高效地构建功能强大的Web应用程序。
avatar
文章
阅读
粉丝