万字教你入门前端三件套——HTML+CSS+JavaScript（下）

墨子裳

863人浏览 · 2025-05-02 09:45:00

墨子裳 · 2025-05-02 09:45:00 发布

JavaScript基础

初识JavaScript

JavaScript是什么？

JavaScript（简称JS）是一种脚本语言，属于解释型或即时（JIT）编译型语言。
它最初是为网页开发而设计，但现在也被广泛应用于非浏览器环境中。

发展历史

布兰登·艾奇（Brendan Eich） 被誉为JavaScript之父。

1994年，Netscape发布了Navigator 0.9浏览器，只能浏览网页，缺乏交互能力，急需网页脚本语言。
1995年，Sun公司将Oak语言改名为Java，并推广 "一次编写，到处运行" 理念。Netscape决定开发一门与Java类似但更简单的语言。
1995年5月，Brendan Eich受命设计JavaScript，仅用10天完成设计，最初名为LiveScript。
Netscape为了借助Java的热度，将LiveScript改名为JavaScript。

虽然名称相似，Java与JavaScript语法风格和应用场景有很大差异。

详细历史可参考阮一峰博客：Javascript诞生记 - 阮一峰的网络日志

JavaScript与HTML、CSS的关系

HTML：网页结构（骨架）
CSS：网页表现（皮肤）
JavaScript：网页行为（灵魂）

JavaScript快速上手

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <script>
    alert("Hello JavaScript!");
  </script>
</body>
</html>

运行方式：用浏览器打开该HTML文件，弹出对话框显示“Hello JavaScript!”

引入方式

JavaScript有三种常用引入方式：

引入方式	语法描述	示例
行内脚本	在元素内使用事件属性执行JS代码	`<input type="button" value="点我一下" onclick="alert('haha')">`
内部脚本	在HTML中`<script>`标签内写JS代码	`<script>alert("haha");</script>`
外部脚本	通过`<script src="文件路径"></script>`引入外部JS文件	`<script src="hello.js"></script>`

各方式优缺点：

内部脚本代码易冗余，不利维护，多用于演示和调试
行内脚本适合简单交互，不能写复杂逻辑
外部脚本实现HTML和JS分离，企业开发常用方案

基础语法

JavaScript基础语法与Java有些相似，但也有区别。Java基础对JS有帮助。

变量

声明变量有三种方式：

关键字	说明	示例
var	传统声明，函数作用域	`var name = 'zhangsan';`
let	ES6新增，块级作用域	`let name = 'zhangsan';`
const	声明常量，值不可变	`const name = 'zhangsan';`

注意事项：

JavaScript是动态弱类型语言，变量的类型可随时改变，例如：
```
var a = 10;      // 数字
a = "hehe";      // 字符串
```
变量命名规则：
- 由字母、数字、下划线 _、美元符号 $ 组成
- 不能以数字开头
- 推荐驼峰命名法
+ 用于字符串拼接
\n 表示换行符

数据类型

JS中数据类型分为原始类型和引用类型。

主要原始类型：

类型	说明
number	数字（整数和小数无区别）
string	字符串，需用引号括起
boolean	布尔值，`true` 或 `false`
undefined	变量未初始化，值唯一为 `undefined`
null	空值

用 typeof 可查看变量类型：

<script>
  var a = 10;
  console.log(typeof a); // number
  
  var b = 'hello';
  console.log(typeof b); // string

  var c = true;
  console.log(typeof c); // boolean

  var d;
  console.log(typeof d); // undefined

  var e = null;
  console.log(typeof e); // object （JS历史遗留问题，null类型显示object）
</script>

运算符

JavaScript的运算符与Java基本一致，详情如下：

运算符类型	运算符
算术运算符	`+`, `-`, `*`, `/`, `%`
自增自减	`++`, `--`
赋值运算符	`=`, `+=`, `-=`, `*=`, `/=`, `%=`
比较运算符	`<`, `>`, `<=`, `>=`, `!=`, `!==`
相等比较	`==`（隐式转换后比较），`===`（严格比较）
逻辑运算符	`&&`, `
位运算符	`&` 按位与，`
移位运算符	`<<` 左移，`>>` 有符号右移，`>>>` 无符号右移
三元运算符	`条件 ? 真值 : 假值`

代码示例：

<script>
  var age = 20;
  var age1 = "20";
  
  console.log(age == age1);  // true，值相等，类型转换后比较
  console.log(age === age1); // false，类型不相同
  console.log(age == 20);    // true
</script>

JavaScript对象

数组

数组定义

创建数组有两种方式：

// 方式一：使用 new Array() 
var arr = new Array();

// 方式二：字面量定义（推荐）
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组元素可以不同类型

注意：JavaScript数组元素类型不要求统一，与Python、PHP等动态语言类似。

数组操作

读取：使用下标访问，索引从0开始
新增：使用下标赋值或push()方法追加
修改：使用下标赋值
删除：使用splice()方法删除

示例：

<script>
  var arr = [1, 2, 'haha', false];
  
  console.log(arr[0]);  // 1
  
  arr[4] = "add";
  console.log(arr[4]);  // add
  console.log(arr.length); // 5
  
  arr[4] = "update";
  console.log(arr[4]); // update
  
  arr.splice(4, 1); // 从下标4开始删除1个元素
  console.log(arr[4]); // undefined，元素已删除
  console.log(arr.length); // 4
</script>

注意：

访问数组不存在的索引，结果为undefined
不要直接给数组变量赋非数组值，否则原数组元素会丢失：

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr = '小猫凯迪';  // 变量类型被改变，不再是数组

函数

语法格式

函数定义（声明）

function 函数名(形参列表) {
  // 函数体
  return 返回值;
}

函数调用

函数名(实参列表);           // 不考虑返回值
var 结果 = 函数名(实参列表);  // 考虑返回值

函数定义时函数体不会执行，要调用函数才能执行函数体内容。
调用多少次，函数体就执行多少次。

示例：

function hello() {
  console.log("hello");
}

// 调用函数执行打印
hello();

调用时进入函数体执行代码，执行完返回调用位置继续执行。
函数定义和调用的顺序无严格要求（区别于变量）。

示例：

// 调用函数
hello();

// 定义函数
function hello() {
  console.log("hello");
}

参数个数

函数实参和形参个数可不匹配，但实际开发建议匹配。

情况：

实参多于形参
多余的实参不会参与函数运算。
例：sum(10, 20, 30); 多出的 30 被忽略。
实参数少于形参
多出的形参值为undefined，可能导致运算异常。
例：sum(10); 假设形参两个，第二个为undefined，可能导致结果为NaN。

JavaScript函数参数灵活，但过度灵活可能引发错误。

函数表达式

函数也可以赋值给变量，定义匿名函数：

var add = function() {
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

console.log(add(10, 20));       // 30
console.log(add(1, 2, 3, 4));   // 10
console.log(typeof add);         // function

这种写法定义了一个匿名函数，然后赋给变量add。
通过变量名add调用函数。
JavaScript中函数是一等公民，可以赋值给变量，作为参数或返回值。

对象

JavaScript中字符串、数值、数组、函数等都是对象。
每个对象包含属性和方法。

属性：事物的特征。
方法：事物的行为。

JavaScript对象和Java对象概念相似，但语法不同。

使用字面量定义对象（推荐）

var a = {};  // 创建空对象

var student = {
  name: '蔡徐坤',
  height: 175,
  weight: 170,
  sayHello: function() {
    console.log("hello");
  }
};

使用 {} 创建对象。
属性和方法采用键值对形式，用逗号分隔。
方法的值是匿名函数。

访问对象属性和方法：

console.log(student.name);      // 点操作符访问属性
console.log(student['height']); // 中括号访问属性
student.sayHello();             // 调用方法，别忘加括号

使用 `new Object()` 创建对象

var student = new Object();

student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
  console.log("hello");
}

console.log(student.name);
console.log(student['weight']);
student.sayHello();

注：使用字面量创建的对象或动态为对象添加属性均可。

使用构造函数创建对象

function 构造函数名(形参列表) {
  this.属性 = 值;
  this.方法 = function() {
    // 方法体
  }
}

var obj = new 构造函数名(实参);

注意事项：

构造函数内部用this表示当前构建的对象。
函数名一般首字母大写，且是名词。
构造函数不需要显式返回对象。
创建对象时必须用new关键字。

示例：用构造函数创建猫对象

function Cat(name, type, sound) {
  this.name = name;
  this.type = type;
  this.miao = function () {
    console.log(sound);
  }
}

var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');

console.log(mimi);
mimi.miao();

jQuery

引入依赖

为什么要用jQuery？

W3C标准提供了一系列API来操作网页内容、结构和样式，但原生JavaScript操作DOM元素代码冗长繁琐。jQuery作为快速、简洁且功能丰富的JavaScript框架，解决了这些问题。

jQuery的优点：

封装了常用功能，简化了代码编写。
提供了强大选择器和简洁的DOM操作方法。
事件处理更加便捷。
兼容各种浏览器，适合HTML文档遍历、操作、动画和Ajax操作。

如何引入jQuery？

通过CDN引入jQuery库：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

参考地址：jQuery官方CDN

其他版本：

uncompressed：未压缩版，易读，文件大，传输慢。
minified：压缩版，性能高，适合开发（推荐）。
slim：精简版，无Ajax和部分特效。
slim minified：slim的压缩版。

注意：生产环境建议下载jQuery到本地，避免外部资源不可用。

jQuery语法

jQuery核心语法：

$(selector).action()

$() ：jQuery全局函数，用于选择HTML元素。
selector ：选择器，用于查询和查找HTML元素。
action() ：对元素执行的操作。

文档就绪事件

jQuery代码通常放在document ready函数中，确保页面完全加载后才执行：

$(document).ready(function(){
  // jQuery代码
});

简写形式：

$(function(){
  // jQuery代码
});

示例：点击按钮隐藏该按钮

<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
      $(this).hide();
    });
  });
</script>

jQuery选择器

jQuery选择器基于CSS选择器，可方便地选择HTML元素并操作。

常用选择器

语法	描述
`$("*")`	选取所有元素
`$(this)`	选取当前HTML元素
`$("p")`	选取所有 `<p>` 元素
`$("p:first")`	选取第一个 `<p>` 元素
`$("p:last")`	选取最后一个 `<p>` 元素
`$(".box")`	选取所有 `class="box"` 的元素
`$("#box")`	选取 `id="box"` 的元素
`$(".intro.demo")`	选取同时有 `class="intro"` 和 `class="demo"` 的元素
`$("p.intro")`	选取 `class="intro"` 的 `<p>` 元素
`$("ul li:first")`	选取第一个 `<ul>` 的第一个 `<li>` 元素
`$(":input")`	选取所有 `<input>` 元素
`$(":text")`	选取所有 `type="text"` 的 `<input>` 元素
`$(":checkbox")`	选取所有 `type="checkbox"` 的 `<input>` 元素

jQuery事件

浏览器通过事件来感知用户操作，如点击、选择、修改等。事件触发后，JavaScript可以执行进一步的交互操作。

事件的组成

事件源：触发事件的元素。
事件类型：如点击click、悬停mouseover等。
事件处理程序：处理事件的回调函数。

事件绑定示例

$("p").click(function(){
  // 事件触发后执行的代码
});

常见事件

事件类型	代码格式	描述
文档就绪事件	`$(document).ready(function)`	页面加载完成后执行代码
点击事件	`$(selector).click(function)`	元素被点击时触发
双击事件	`$(selector).dblclick(function)`	元素被双击时触发
值改变事件	`$(selector).change(function)`	元素值改变时触发
鼠标悬停事件	`$(selector).mouseover(function)`	鼠标悬停在元素上时触发

操作元素

获取/设置元素内容

jQuery提供了以下方法来操作元素内容：

方法	说明
`text()`	获取或设置元素的文本内容（不包含HTML标签）。
`html()`	获取或设置元素的内容（包含HTML标签）。
`val()`	获取或设置表单字段的值。

获取元素内容示例

<div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script>
  $(document).ready(function () {
    var html = $("#test").html();
    console.log("html内容为:" + html); // `<span>你好</span>`
    
    var text = $("#test").text();
    console.log("文本内容为:" + text); // `你好`
    
    var inputVal = $("input").val();
    console.log(inputVal); // `hello`
  });
</script>

设置元素内容示例

<div id="test"></div>
<div id="test2"></div>
<input type="text" value="">
<script>
  $(document).ready(function () {
    $("#test").html('<h1>设置html</h1>');
    $("#test2").text('<h1>设置text</h1>');
    $("input").val("设置内容");
  });
</script>

获取/设置元素属性

使用 attr() 方法操作元素属性。

获取属性示例

<p><a href="https://www.guanzhuwo.com/index" id="bite">关注我</a></p>
<script>
  $(function(){
    var href = $("p a").attr("href");
    console.log(href); // `https://www.guanzhuwo.com/index`
  });
</script>

设置属性示例

<p><a href="https://www.guanzhuwo.com/index" id="bite">关注我</a></p>
<script>
  $(function(){
    $("p a").attr("href", "baidu.com");
    console.log($("p a").attr("href")); // `baidu.com`
  });
</script>

获取/设置CSS属性

使用 css() 方法操作元素的CSS属性。

获取CSS属性示例

<div style="font-size: 36px;">我是一个文本</div>
<script>
  $(function(){
    var fontSize = $("div").css("font-size");
    console.log(fontSize); // `36px`
  });
</script>

设置CSS属性示例

<div style="font-size: 36px;">我是一个文本</div>
<script>
  $(function(){
    $("div").css("font-size", "24px");
  });
</script>

添加元素

jQuery提供了以下方法在元素中插入内容：

方法	说明
`append()`	在被选元素的结尾插入内容。
`prepend()`	在被选元素的开头插入内容。
`after()`	在被选元素之后插入内容。
`before()`	在被选元素之前插入内容。

插入内容示例

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<img src="pic/rose.jpg">
<script>
  $(function () {
    $("ol").append("<li>append</li>");
    $("ol").prepend("<li>prepend</li>");
    
    $("img").before("图片前插入");
    $("img").after("图片后插入");
  });
</script>

删除元素

使用以下方法删除元素或其子元素：

方法	说明
`remove()`	删除被选元素及其子元素。
`empty()`	删除被选元素的子元素。

删除元素示例

<div id="div1">我是一个div</div>
<button>删除 div 元素</button>
<script>
  $(function () {
    $('button').click(function(){
      $('#div1').remove();
    });
  });
</script>

删除子元素示例

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<button>删除列表元素</button>
<script>
  $(function () {
    $('button').click(function(){
      $('ol').empty();
    });
  });
</script>

综合案例

猜数字游戏

预期效果

用户输入一个数字，点击“猜”按钮。
系统提示“猜对了”、“猜小了”或“猜大了”。
用户点击“重新开始一局游戏”按钮后，游戏重置。

代码实现

<button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数：<span id="count">0</span>
<br>
结果：<span id="result"></span>

<script>
  $(function () {
    // 随机生成一个1-100的数字
    var guessNumber = Math.floor(Math.random() * 100) + 1;
    var count = 0;

    // “猜”按钮点击事件
    $("#button").click(function () {
      count++;
      $("#count").text(count); // 更新猜测次数
      var userGuess = parseInt($("#number").val()); // 获取用户输入的数字

      if (userGuess == guessNumber) {
        $("#result").text("猜对了").css("color", "gray");
      } else if (userGuess < guessNumber) {
        $("#result").text("猜小了").css("color", "blue");
      } else {
        $("#result").text("猜大了").css("color", "red");
      }
    });

    // “重新开始”按钮点击事件
    $("#reset").click(function () {
      guessNumber = Math.floor(Math.random() * 100) + 1; // 重新生成随机数
      count = 0;
      $("#count").text(count); // 重置猜测次数
      $("#result").text(""); // 清空结果
      $("#number").val(""); // 清空输入框
    });
  });
</script>

表白墙

预期效果

用户输入“谁”、“对谁”、“说什么”三个字段。
点击“提交”按钮后，输入内容显示在页面下方。
输入框内容清空，等待下次输入。

代码实现

1. HTML和CSS准备

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表白墙</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 400px;
      margin: 0 auto;
    }
    h1 {
      text-align: center;
      padding: 20px 0;
    }
    p {
      color: #666;
      text-align: center;
      font-size: 14px;
      padding: 10px 0;
    }
    .row {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    span {
      width: 100px;
      line-height: 40px;
    }
    .edit {
      width: 200px;
      height: 30px;
    }
    .submit {
      width: 304px;
      height: 40px;
      color: white;
      background-color: orange;
      border: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>表白墙</h1>
    <p>输入后点击提交，会将信息显示在表格中</p>
    <div class="row">
      <span>谁: </span>
      <input class="edit" type="text">
    </div>
    <div class="row">
      <span>对谁: </span>
      <input class="edit" type="text">
    </div>
    <div class="row">
      <span>说什么: </span>
      <input class="edit" type="text">
    </div>
    <div class="row">
      <input type="button" value="提交" class="submit">
    </div>
  </div>
</body>
</html>

2. jQuery实现提交功能

<script>
  $(function () {
    // “提交”按钮点击事件
    $(".submit").click(function () {
      // 获取输入框内容
      var from = $('.edit:eq(0)').val(); // 谁
      var to = $('.edit:eq(1)').val();   // 对谁
      var message = $('.edit:eq(2)').val(); // 说什么

      // 非空校验
      if (from == '' || to == '' || message == '') {
        alert("请填写完整信息！");
        return;
      }

      // 构造展示内容
      var html = `<div class="row">${from}对${to}说: ${message}</div>`;

      // 添加到页面
      $('.container').append(html);

      // 清空输入框
      $(":text").val("");
    });
  });
</script>

总结

HTML 是一种超文本标记语言，用于页面内容的显示和排版。
CSS 用于美化页面，重点掌握选择器的使用。
JavaScript 是一种脚本语言，与Java无关，用于实现页面动态交互。
jQuery 是一个JavaScript框架，简化了DOM操作，提高了开发效率。

提示：对于后端开发人员，前端开发并非核心技能，达到能够借助网络资料阅读和维护代码的水平即可。

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

开源鸿蒙跨平台开发全景解读：框架有哪些、进度到哪了、该怎么学、能共建什么

开源鸿蒙跨平台开发者社区

RK3568 的多路显示移植—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】

开源鸿蒙跨平台开发者社区

Flutter 三方库 phone_state 的 OpenHarmony 适配实战

通话状态感知：实时上报来电中（）、通话中（）、通话结束（CALL_ENDED）等状态通话时长统计：通话建立后每秒刷新通话时长来电号码获取：来电时获取对方号码（Android 平台可用）无额外操作副作用：仅感知状态，不接听、不拒接、不结束通话该三方库最初支持 Android、iOS 两个平台，本次任务将其适配到平台。项目地址将一个 Flutter 三方库适配到 OHOS 平台，核心路径可以概括为三步

开源鸿蒙跨平台开发者社区

所有评论(0)

查看更多评论

墨子裳

@Lucas_Micheal

已为社区贡献1条内容

万字教你入门前端三件套——HTML+CSS+JavaScript（下）

墨子裳

JavaScript基础

初识JavaScript

JavaScript是什么？

发展历史

JavaScript与HTML、CSS的关系

JavaScript快速上手

引入方式

基础语法

变量

数据类型

运算符

JavaScript对象

数组

数组定义

数组操作

函数

语法格式

函数定义（声明）

函数调用

参数个数

函数表达式

对象

使用字面量定义对象（推荐）

使用 new Object() 创建对象

使用构造函数创建对象

示例：用构造函数创建猫对象

jQuery

引入依赖

为什么要用jQuery？

如何引入jQuery？

jQuery语法

文档就绪事件

jQuery选择器

常用选择器

jQuery事件

事件的组成

事件绑定示例

常见事件

操作元素

获取/设置元素内容

获取元素内容示例

设置元素内容示例

获取/设置元素属性

获取属性示例

设置属性示例

获取/设置CSS属性

获取CSS属性示例

设置CSS属性示例

添加元素

插入内容示例

删除元素

删除元素示例

删除子元素示例

综合案例

猜数字游戏

预期效果

代码实现

表白墙

预期效果

代码实现

1. HTML和CSS准备

2. jQuery实现提交功能

总结

所有评论(0)

温馨提示：您尚未绑定手机号

墨子裳

使用 `new Object()` 创建对象