跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.js大前端

JavaScript 基础语法与 jQuery 入门详解

JavaScript 是一门解释型脚本语言,广泛用于 Web 及非浏览器环境。涵盖变量声明、数据类型、运算符等基础语法,解析数组与对象操作细节,重点区分 var、let、const 作用域差异。同时简述 jQuery 库的引入、选择器及常用 DOM 操作方法,强调外部样式分离维护优势,并提供实际开发中的注意事项与常见陷阱。

ApiHolic发布于 2026/4/7更新于 2026/6/1116 浏览
JavaScript 基础语法与 jQuery 入门详解

JavaScript 简介

JavaScript(简称 JS)是一门解释型或即时编译型的脚本语言。虽然它最初是为 Web 页面开发而设计的,但现在的应用场景已远远超出了浏览器环境。

引入方式

在实际项目中,JS 代码的引入主要有三种方式:

引入方式语法描述示例
行内样式直接嵌入到 HTML 元素内部<input type="button" value="点我一下" onclick="alert('haha')">
内部样式定义 <script> 标签,写在 script 标签中<script> alert("haha"); </script>
外部样式定义 <script> 标签,通过 src 属性引入外部 JS 文件<script src="hello.js"></script>

区别与建议:

  1. 内部样式容易出现大量代码冗余,不利于后期维护,所以不常用。
  2. 行内样式只适合写简单的逻辑,且只针对某个标签生效,无法编写复杂的 JS 逻辑。
  3. 外部样式实现了 HTML 和 JS 的完全分离,是企业开发中的常用方式,推荐优先使用。

基础语法

变量声明

JS 声明变量主要有三种关键字,它们的作用域和行为有所不同:

关键字解释示例
varES5 中声明变量的关键字,作用域在该语句的函数内var name = 'zhangsan';
letES6 新增的关键字,作用域为该语句所在的代码块内let name = 'zhangsan';
const声明常量,声明后不能修改const name = 'zhangsan';

JavaScript 是一门动态弱类型语言,变量可以存放不同类型的值。命名时建议遵循以下规则:

  • 组成字符可以是字母、数字、下划线(_)或美元符号($)。
  • 数字不能作为开头。
  • 建议使用驼峰命名法。

数据类型

JS 主要包含以下几种基础数据类型:

数据类型描述
number数字,不区分整数和小数
string字符串类型,字面量需要使用引号包裹,单双引号均可
boolean布尔类型,true 表示真,false 表示假
undefined表示变量未初始化,只有唯一的值 undefined

运算符

常见的运算符包括算术、自增自减、赋值、比较、逻辑、位运算、移位以及三目运算符等。特别需要注意的是比较运算符:

  • == 比较相等,会进行隐式类型转换。
  • === 比较相等,不会进行隐式类型转换(推荐优先使用)。

对象与数组

数组操作

创建数组通常有两种方式:

  1. 使用 new 关键字:let arr = new Array();
  2. 使用字面量方式(更常用):let arr = []; 或 let arr2 = [1, 2, 'haha', false];

常见操作:

  • 读:使用下标访问(从 0 开始),注意超出范围读取结果为 undefined。
  • 增:通过下标新增,或使用 push 追加元素。
  • 改:通过下标修改。
  • 删:使用 splice 方法删除元素。

注意事项: 不要给数组名直接赋值为非数组类型(如字符串),否则原有元素会丢失。

函数

函数的基本结构如下:

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

// 函数调用
函数名 (实参列表);

核心要点:

  1. 函数定义不会立即执行,必须调用才会运行。
  2. 调用进入函数内部,结束时回到调用位置继续执行。
  3. 函数定义和调用的顺序没有严格要求(这与变量不同)。
  4. 实参与形参个数可以不匹配,但实际开发中建议保持一致。若实参过多,多余参数不参与运算;若实参过少,多余形参值为 undefined。
对象

在 JS 中,字符串、数值、数组、函数本质上都是对象。每个对象包含属性和方法。

创建对象的方式:

  1. 字面量创建(最常用):
var student = {
    name: '小明',
    height: 175,
    weight: 65,
    sayHello: function() {
        console.log("你好");
    }
};
  • 键值对之间用逗号分隔,最后一个属性后的逗号可有可无。
  • 方法的值是一个匿名函数。
  1. new Object 创建:
var student = new Object();
student.name = "小明";
student['weight'] = 65;
  1. 构造函数创建:
function Student(姓名,身高) {
    this.name = 姓名;
    this.height = 身高;
}
let obj = new Student('小明', 175);
  • 构造函数内部使用 this 表示当前构建的对象。
  • 构造函数名首字母通常大写。
  • 不需要 return,创建时必须使用 new 关键字。

jQuery 入门

jQuery 是一个快速、简洁且功能丰富的 JavaScript 库,封装了常用的 DOM 操作、事件处理和 Ajax 功能,能显著减少代码量并提高开发效率。

引入依赖

<script src="JQuery 的 URL"></script>

官方下载地址:https://releases.jquery.com/

基础语法

$(selector).action()
  • $() 是全局函数,用于选择和操作 HTML 元素。
  • Selector 选择器,用于查询 HTML 元素。
  • action 操作,执行具体的行为。

选择器

jQuery 选择器基于 CSS 选择器,并扩展了一些自定义选择器。所有选择器都以 $ 开头。

语法描述
$('*')选取所有元素
$(this)选取当前元素
$('p')所有 <p> 元素
$('.box')class 为 box 的元素
$('#box')id 为 box 的元素
$(':input')所有 <input> 元素

事件处理

事件由事件源、事件类型和处理程序组成。常见的事件绑定如下:

事件代码
文档就绪$(document).ready(function)
点击事件$(selector).click(function)
双击事件$(selector).dblclick(function)
鼠标悬停$(selector).mouseover(function)

常用方法

  • 文本内容:text() 设置或返回所选元素的文本内容。
  • HTML 内容:html() 设置或返回所选元素的内容(包括 HTML 标签)。
  • 表单值:val() 设置或返回表单字段的值。
  • 属性操作:attr() 获取或设置属性值。
  • 样式操作:css() 设置或返回样式属性。
  • DOM 插入:
    • append():在结尾插入。
    • prepend():在开头插入。
    • after():之后插入。
    • before():之前插入。
  • 删除:
    • remove():删除被选元素及其子元素。
    • empty():仅删除子元素。

目录

  1. JavaScript 简介
  2. 引入方式
  3. 基础语法
  4. 变量声明
  5. 数据类型
  6. 运算符
  7. 对象与数组
  8. 数组操作
  9. 函数
  10. 对象
  11. jQuery 入门
  12. 引入依赖
  13. 基础语法
  14. 选择器
  15. 事件处理
  16. 常用方法
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • DocxFactory:基于 C++ 的 Word 文档生成库(无需 Office)
  • 基于 YOLO 与 LLM 的 Web 目标检测及人脸识别系统(Django+Vue3)
  • C++嵌入 Lua 脚本完整示例项目实战
  • Java 自动化调用企业微信外部群的技术实践
  • OpenClaw 多机器人多 Agent 模式:构建 AI 助手团队
  • Python 核心知识点汇总:装饰器、数据结构与版本差异
  • WebMCP:浏览器原生 AI 交互新范式
  • 5款开源PPT生成大模型实测对比:从ChatGPT到文心一言
  • DeepSeek-R1 模型在自动驾驶车端的蒸馏部署方案
  • Z-Image-Turbo WebUI 本地部署与实战指南
  • Visual C++ 运行库修复工具使用指南
  • Git LFS 跨平台安装指南:Linux、macOS 与 Windows 配置详解
  • 前端大数据导出优化:解决 Chrome 内存崩溃的实战方案
  • 双指针算法:四数之和解题思路与实现
  • 医疗 AI 中的模型融合与集成策略实战
  • VS Code 前端开发 AI 工具对比:Copilot、通义灵码、iFlyCode 与 Trae
  • JDK 安装和环境配置教程
  • OpenClaw 飞书机器人权限配置与安全实践
  • Unity VR 高分辨率全景视频播放性能优化方案
  • ROS 2 机器人运行与命令解析:海龟仿真器及 rqt 工具

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online